Screencasts vidéo 2025, Février
L'illustration de Nick avait trois couches différentes pour les têtes. Ce ne sont que des variations légèrement différentes. Nous pourrions échanger les images avec une animation "
Alors que je travaillais sur cette conception, jQuery 1.8 est sorti. Ceci est juste une vidéo rapide pour vous fier au fait que ce genre de chose se produit lorsque vous développez des sites "
Nous avons l'en-tête de base de la galerie en place, mais il manque les petites personnes bleues qu'Erica a mises dans l'illustration originale. Nous en avions parlé dans "
Nous venons de mettre en place l'en-tête personnalisé de la galerie, alors pendant que nous en sommes, continuons d'ajouter un autre en-tête personnalisé. celui-ci a été fait par "
Il existe sept zones principales différentes du site au-delà de la page d'accueil. J'ai donc embauché sept illustrateurs différents pour faire des dessins. C'est le premier que nous sommes "
Jusqu'à présent, nous avons apporté des modifications de code localement sans utiliser aucune sorte de contrôle de version. Avec la complexité croissante de ce site, cela devient "
Nous avons un bon début sur le design réactif. Le menu aux plus petites tailles d'écran se décompose en une grille 2x4. Il s'adapte bien à l'écran, mais "
Nous ajoutons une certaine réactivité à la grille que nous avons mise en place pour la Galerie. Sur les écrans les plus larges, nous l'avons fixé à quatre colonnes. Ensuite, nous commençons à ajouter "
Dans lequel nous déterminons les problèmes que nous rencontrions pour que la disposition des colonnes se charge correctement. Le correctif consistait à supprimer le CSS qui faisait le "
Nous commençons à creuser dans la disposition de la zone Galerie, ce qui me préoccupe depuis le début de ce processus de refonte. La plupart"
Nous avons la disposition de la grille pour la galerie. Malheureusement, le chargement de celui-ci est un peu brusque et bancal. En effet, les colonnes CSS3 sont conçues pour "
Nous avons déjà passé un peu de temps à supprimer les pages pour que notre navigation fonctionne (vidéo n ° 030) et vous pouvez cliquer sur le site, mais qu'y a-t-il sur ces sous "
Il existe une longue tradition de sondages sur CSS-Tricks. Ils sont amusants, rassemblent de bonnes données importantes et augmentent la connexion des gens au site. Engagement FTW! "
Nous sommes partis avec un widget de sondage totalement décent. La typographie est propre et tout parfaitement utilisable. Cependant, ce n'était pas vraiment convaincant ou amusant. Nous"
Le module supérieur de la barre latérale principale du site appartient à Treehouse, en tant que sponsor principal de CSS-Tricks. D'après une conversation que j'ai eue avec Ryan Carson, "
La conception de la recherche fonctionne bien jusqu'à ce que nous arrivions à notre pause de taille "bébé ours" (petit mobile). Nous devons faire quelque chose de différent là-bas. On fait de la place "
Car je pense que la première fois dans cette série, nous allons ajouter de nouvelles choses à la conception directement en travaillant dans le navigateur (ne commençant pas dans Photoshop "
Le fait de restreindre un navigateur de bureau très restreint peut vous donner une vague idée du fonctionnement d’une conception réactive, mais ce n’est pas une représentation précise d’un "
L'annonce que nous avons en place est idéale pour les écrans de grande taille / de bureau, mais elle commence à échouer assez rapidement sur les écrans plus petits. Nous avons déjà des points d'arrêt "
Nous avons créé l'apparence d'un bouton dans son état normal, mais un bouton 3D comme celui-ci demande un état "poussé". Ce que nous faisons, c'est ajouter une couleur plus foncée à "
Nous commençons avec l'intention de sauter dans HTML et CSS pour la meilleure annonce Treehouse que nous venons de concevoir, mais bien sûr, nous déraillons dès que nous commençons "
Nous avons le balisage en place pour l'annonce Treehouse en haut de la page, mais nous avons un travail de style à faire. Nous commençons par le graphique de l'arbre lui-même. Étaient"
Nous avons laissé une grande quantité d'espace libre dans l'en-tête. Dès le début, je savais que ce serait pour le sponsor principal de CSS-Tricks, Treehouse. Dans ce"
Nous avons encore un peu de travail à faire pour terminer la zone de recherche. Nous sommes distraits pendant juste une seconde car je remarque que nous n'avons pas ajouté le tridimensionnel "
Nous reprenons là où nous nous sommes arrêtés dans la vidéo n ° 034 et continuons à développer la zone de recherche. Cette fois, nous nous concentrons sur l'état "ouvert" de la recherche, la construction "
Nous prenons une petite pause dans nos recherches pour résoudre un petit problème épineux. "FOUT" étant "Flash of Unstyled Text". C'est un phénomène où @ font-face "
Maintenant que nous avons Photoshopé ce que nous espérons accomplir avec la zone de recherche, nous nous sommes mis à le construire avec HTML et CSS. Nous avons déjà notre police d'icônes "
Il y a beaucoup de contenu sur CSS-Tricks. C'est l'une des choses qui rend sa conception un peu difficile. Bien que nous puissions rester propres avec le design, nous
Nous commençons par jouer avec notre module de publication de blog, en jouant avec l'espacement. Nous ajoutons également le petit carré coloré en haut à gauche du module, "
Dans cette vidéo super rapide, nous ajoutons tout le CSS nécessaire pour nous assurer que l'élément de page actuel dans la navigation principale est mis en évidence lorsque cette page est "