Mettez votre site web en valeur avec HTML, CSS et les animations web

1. Introduction: vous regardez un peu d'unicité et d'individualité dans votre propre site Web ou application Web elle-même ? Alors c'est le cours pour vous. Bonjour, je suis Sheila Brennan, une des développeurs Web. Au cours des dernières années, il y a eu de nombreuses avancées dans les technologies de navigation Web qui ont permis plus de créativité et la façon dont les sites Web sont bien conçus et développés. Dans ce cours, je vais plonger dans plusieurs techniques que vous pouvez utiliser en utilisant seulement HTML et CSS pour ajouter plus d' intérêt visuel à votre site Web. Une certaine familiarité avec HTML et CSS est recommandée, mais pas absolument nécessaire car je vais expliquer les concepts au fur et à mesure que nous allons. Ce cours est idéal pour les pigistes qui cherchent à construire des expériences plus efficaces pour les clients. Bien que les techniques de couverture soient idéales pour les pages d'accueil et les pages de destination, elles pourraient tout aussi facilement être appliquées sur un simple site de bloc. Êtes-vous prêt à plonger et à apprendre certaines de ces techniques ? Alors commençons 2. Introduction à CodePen: dans cette vidéo, nous allons parler de faire face, qui sera utilisé pour le reste du cours. Si vous avez déjà un compte de stylo de code, n'hésitez pas à sauter cette vidéo et Elsie dans la prochaine. Si vous ne le faites pas, tout ce que vous devez faire est d'aller à faire face terminé Io Cliquez sur cette inscription pour le lien gratuit, création de compte et puis vous serez bon d'aller. Je te verrai la prochaine. 3. Gradients de arrière-plan: Dans cette première vidéo, nous allons voir comment vous pouvez utiliser les INT Grady en arrière-plan pour ajouter plus d'intérêt visuel aux sections de votre page, quelqu'un pour commencer par créer un stylo. Et puis passons en revue quelques réglages de stylo. Je vais les utiliser tout au long du cours pour chaque femelle que je vais faire est à cette méditation de sorte que si je termine les requêtes média dans mon CSS pour changer diverses propriétés comme tailles de police, cela sera correctement reflété dans le stylo. Si je change mon navigateur avec pour CSS, je vais choisir cette option de normalisation pour minimiser les différences entre les navigateurs et la façon dont choses rendent et enregistrent près. Et puis nous pouvons commencer sur notre chacun à la bouche. Je vais profiter de l'auto complète de face dans Aiken, juste frapper la période que sous mon nom de classe onglet frappé et il sera automatiquement complet. Et puis pour chaque balise, ça va sortir, et ça va être tout pour tout le html pour cette première leçon, et puis je vais ajouter un peu de HTML. Ces styles. Ceux-ci s'appliqueront aussi pour le reste des leçons, sorte que si je développe l'écran avec au moins 800 pixels pour le sous-sol va être augmenté 18 pixels, donc tous les fronts sur la page vont croître un peu. Et puis allons de l'avant et choisissons un front. Vous pouvez tirer et à droite de la compagnie. En utilisant ces options d'actif, vous allez simplement cliquer sur le réservoir de lien de copie que j'ai effectivement pré-sélectionné avant de téléphones Google . Tout ce que vous devez faire est de frapper, plus sur celui que vous voulez, puis dans ce tiroir, vous allez copier et coller la balise de lien. J' ai choisi le calme et l'heure avant, donc je vais y aller. Vous allez mettre votre étiquette de lien de votre choix ici. C' est même proche maintenant. Nous pouvons en fait dans notre famille avant pour que nous puissions voir ce plaisir est apparu. Non, nous avons aussi des polices de secours. Et puis on va mettre en place. Nos variables CSS les utiliseront tout au long. Le cours est, eh bien, c'est un bon moyen de définir des valeurs puis de les réutiliser. Mais je vous ai tapé le tout à nouveau de ces façons, et j'ai une couleur verte. Je vais utiliser RVB pour les canots de mer, descodes hexadécimaux comme le blanc qui dépend de toi. Je vais utiliser RVB pour les canots de mer, des Et puis nous allons commencer à mettre en place notre section héros, qui est la seule section qui va créer dans ce show vidéo 400 pixels hommes avec. Et puis nous allons définir la couleur de fond pour utiliser la variable que nous venons de créer Sweet. Cela fonctionne, et puis nous allons avoir ce soit un conteneur de grille et nous le faisons juste pour la mise en page . Je vais vous montrer pourquoi dans quelques secondes nous allons aussi ajouter une requête média pour que des écrans plus larges, nous allons rendre le héros plus grand en termes de hauteur. Ok, donc on est bons là-bas. Et maintenant, à nos styles de slogans, nous sommes dans un orteil du Sénat. Attendez pour qu'on puisse le voir. Et puis on va mettre en place une taille amusante et un poids de 400 juste pour qu'il soit par défaut un gras pour toutes vos étiquettes de titre. Nous ne voulons pas de caractères gras pour que vous puissiez mieux lire le texte. Et j'ai aussi ajusté l'espacement des lettres juste par goût personnel. Et puis nous allons définir la marge de l'auto, qui est un moyen de faire cela comme un élément de grille être centré. Et ça a l'air bien. Et puis je vais copier cette requête multimédia à nouveau, et je vais augmenter la taille de la police sur des écrans plus larges. On va aller à cinq. Rim Ram est une unité relative qui va utiliser qui prend la taille de police de base que nous avons définie ici en compte. Ok, donc maintenant on va faire est et dans notre radieux, c'est un petit avion. Donc, nous allons aller à uni utiliser CSS Cranie dans l'Ohio. Vous pouvez également utiliser cette année. Je le plus gourmand dot com est vraiment bon aussi. Vous n'avez pas autant de contrôle sur les couleurs. Alors j'y vais. J' ai effectivement pré-sélectionné ingrédient. Mais tout ce que vous allez faire est de créer les couleurs que vous voulez ici pour vos différents arrêts sur ce, puis vous allez copier et coller ce radiant. Je vais à et dans mon ingrédient pour les ajouter à la section héros juste ici. Assurez-vous que vous l'épelez correctement, et nous avons notre première cupide. Et je vais montrer comment vous pouvez les superposer en ajoutant un deuxième ingrédient. Est-ce que vous venez un les séparer ? Donc ça a l'air un peu différent, et puis, mais toujours à la recherche d'un peu plan. Ajoutons un retour sur l'image derrière cela. J' ai pré-sélectionné cette image de unspool ash dot com. Ceux-ci sont faciles car vous pouvez les utiliser sans avoir à héberger l'image quelque part. Assurez-vous juste de noter quelles sont les idées sur l'image ? Parce que c'est comme ça que tu vas l'utiliser. Et puis, nous allons finir ça. Allez, on a ton L. et on y va. Nous pouvons voir par défaut. Les images d'arrière-plan se répètent. On va lui dire de ne pas répéter, et on va mettre la couverture latérale de fond. Et on y va. Nous pouvons voir comment il est facile de superposer des ingrédients Becker sur une image pour ajouter un peu d'intérêt et rend également le texte plus facile à lire. Tu verras si je découpe les INT de Grady. Il est un peu plus difficile de lire le texte que d'avoir un ingrédient dedans, et cela vous permet également d'ajouter des éléments de votre palette de couleurs dans les ingrédients et d'avoir un aspect plus uniforme sur la page. 4. Texte animé: dans cette vidéo, nous allons parler de la façon dont nous pouvons utiliser les animations CSS et les appliquer à la section de texte de héros toe. Ajoutez un peu d'intérêt visuel et amusant. Les animations CSS sont un moyen de faire la transition des propriétés CSS entre deux états différents. Vous pouvez contrôler s'ils se répètent plusieurs fois ou s'exécutent simplement une fois s'ils courent vers l'avant ou arrière s'ils ont une fonction d'accélération spéciale, ce qui est fondamentalement un moyen d'ajouter un effet différent. Par exemple, de rebond par rapport à un fondu par rapport à un léger et puis nous pouvons également définir une durée qui détermine combien de temps l'animation va s'exécuter. Et cela peut prendre cinq secondes, une seconde ou nous allons en millisecondes. Les cadres clés sont la magie qui va être mise en place dans CSS. Cela nous permet de dire au navigateur quelles propriétés doivent être à certains points de l' animation, et le navigateur gérera toutes les valeurs intermédiaires qui ne sont pas déclarées directement. Et tu verras ça dans notre démo. D' accord, nous allons commencer avec notre stylo créé précédemment, donc nous utilisons les leçons précédentes terminées travail où nous avons ah obtenir du texte extérieur et la première chose que nous allons faire est de créer les cadres clés qui détermineront comment animer bien ce texte, et nous pouvons l'appeler ce que nous voulons. Je vais appeler ça fondu en haut parce qu'on va juste utiliser un changement d' opacité et de position du texte. Donc c'est une sorte de descriptif plutôt que de faire. Et puis je vais juste déclarer quelques valeurs de pourcentage, donc il 0% le texte sera caché. Et puis on va transformer Playa, ce qui est une chose assez puissante en termes d'animation. Vous pourriez faire beaucoup avec la transformation et vous encourager à aller à l'Indien est une excellente ressource. Découvrez leurs quais et ils ont beaucoup de bon exemple là-bas aussi. Je vais aller avec une traduction 3 D, qui est couvert dans leur documentation. Je vais fondamentalement seulement changer la position verticale du texte, donc c'est assez simple. Donc, pour commencer, nous avons notre valeur de 0%. Puis, à mi-chemin de l'animation, on va faire un léger changement d'opacité. Le texte deviendra visible et je vais t pourrait simplement transformer la valeur zéro. On va y aller 20 %, puis je vais juste ajouter 100 % de valeur et ça va au piquant avec un. Donc le Texas est vraiment visible, et on ne va plus faire de transformation, donc je vais mettre ça à zéro. Donc maintenant, nous avons notre cadre clé d'animation CSS mis en place. Maintenant, tout ce que j'ai à faire, c'est appliquer ça à notre slogan et c'est à vous de décider. Parfois, c'est mieux. Seulement appliqué un écran plus large, en fonction de l'endroit où ce que vous faites avec l'animation, pour cet exemple, je vais juste l'appliquer toutes les largeurs d'écran. Je vais faire un point une seconde. C' est sur cette animation va s'exécuter pour, puis se nourrir vers le haut. C' était le nom de l'image clé que j'ai créée, et vous pouvez déjà le voir prendre effet. Et puis on pourrait juste utiliser la saison. C' est l'une des fonctions d'assouplissement courantes à utiliser. Alors c'était ça. D' abord, regardons ça. Ça va courir vers l'avant. Ça ne va pas se répéter. C' est juste parce que je change les valeurs. Il le relance, et puis une bonne chose à faire est que nous ferons plus de cela au fur et à mesure que nous allons dans le débogage et vous pouvez le voir. C' est un bon moyen de si je l'option, cliquez sur Mac ou faites un clic droit et ne inspectez. Je peux vraiment creuser dans ce que mes valeurs sont pour l'animation que Aiken les change au besoin et vous verrez ici je peux changer. Je pourrais juste Dewey. Si je clique sur cela dans les outils Chrome sourd, je peux ajuster les valeurs dans l'aperçu à quoi ils ressemblent. Donc, pour cet exemple, je vais être un peu plus fantaisie et utiliser un cube occupé une fonction. J' ai pré-sélectionné quelques valeurs, certaines maigres. Copiez ceux dedans et on y va. C' est un peu plus subtil. Seulement rechargé. Regarder un autre regard, et c'est un moyen facile d'ajouter un peu d'intérêt visuel à. Je ne l'utiliserais pas trop, mais pour quelque chose comme une page de destination ou un héros de page d'accueil, c'est certainement quelque chose à envisager d'utiliser 5. Formes CSS: dans cette vidéo, nous allons expliquer comment vous pouvez utiliser les formes CSS pour ajouter un intérêt visuel dans la façon dont vous disposez du texte . Vous pouvez en fait les utiliser pour aligner le texte avec une forme afin que vous ayez un aspect personnalisé. Donc, nous allons commencer avec notre HTML. On va dire que c'est comme si on allait utiliser ça pour une section bio des employés, donc ça va être notre principal objectif. Et à l'intérieur, on aura une étiquette d'article avec la bio, et ensuite on aura le nom de l'employé. C' est fictif. Bien sûr, tu peux mettre ce que tu veux à l'intérieur et ensuite on aura une photo d'avatar , ce qui est le truc. On va nous utiliser une forme CSS, mais je vais tirer des images de ce site. Privés sont points cc. Ils ont déjà des images de gens que nous pouvons utiliser. Je vais de l'avant et sélectionné certains spécifiques où vous pouvez cliquer sur cette image est et naviguer si vous voulez être spécifique dans lequel. Donc je vais utiliser le réservoir d'images et voici l'image 16. Je vais aussi ajouter de la classe à ça pour que je puisse le coiffer, et il y a notre fictive Gina, et ensuite je vais faire est d'ajouter une étiquette de greffe de cheveux. Nous allons ajouter du texte, que nous allons envelopper autour de la forme pour que vous puissiez mettre ce que vous voulez ici aussi. Et prenons un autre paragraphe. Il est plus facile de voir cet effet si vous avez plus de texte plutôt que vous ne serez pas vraiment en mesure de le voir. Si ce n'est que quelques lignes, accord, et ensuite on va commencer sur nos styles. On va utiliser la plaque est une couleur, et alors ça devrait vraiment le faire. Finissons par notre typographie réactive que nous avons faite dans le reste de la classe jusqu'à présent. Donc le financement de base sera de 60 pixels, et il augmentera pour celui-ci de le faire un peu différemment, Um, ou d'ajuster les polices à partir de 700 pixels, et nous allons en faire 20 pixels, ce qui est montrant ici en ce moment parce que je suis sur un écran plus large avec et puis nous pouvons ajouter dans notre renard étape suivante, vous pouvez passer par le processus d'ajout d'un Google Funt directement de faire face dans comme nous avons parlé . Il suffit de copier la balise de lien. J' ai pré-sélectionné un front Google appelé Catamaran, donc je vais m'assurer que ma balise meta et ensuite dit Cameron ici. Et vous pouvez également ajouter votre famille de polices en tant que CSS Very bold. Recommandez-le si vous allez le réutiliser. Bon, maintenant on a le chargement du catamaran. Ça va mieux, et je vais aussi ajuster la hauteur de la ligne pour mes paragraphes. C' est un peu serré en ce moment. C' est quelque chose que vous voulez également envisager d'ajuster une autre requête média. Vous pouvez avoir, ah, ah, hauteur de lumière plus serrée comme une plus petite valeur de Mobil. Ok, maintenant, nous allons travailler sur le bios de nos employés, et nous allons mettre Max avec pour qu'ils ne soient pas alors pourquoi et je vais centrer ça qui va s'appliquer. Ça a l'air bien. Et puis nous ajouterons nos styles bio individuels employés pour cela. C' est là que nous allons commencer à ajouter le nous allons initialement limiter l'esprit à 80% de ces 1200 pixels. Donc les choses deviennent encore plus étroites et aussi envoyer cela et juste le rembourrage inférieur est bien marqué par la marge, parce que je vais ajouter une seconde bio et je veux qu'ils aient un peu d'espace entre eux. Ensuite, nous allons réutiliser cette requête multimédia de plus tôt ce 700 pixels. Et je vais Teoh, ajuster le mix avec de sorte que sur les écrans plus larges, il est encore plus contraint juste pour garder la longueur de ligne raisonnable. Les lignes pulmonaires du client sont plus difficiles à battre. Oups, je voulais dire 50%. D' accord. D' accord. Donc c'est une partie de nous allons ajouter CS intérieur, ce mouton. J' ai un cours de photo appliqué à la photo. Je vais décliner une largeur sur ça. Et nous voulions être un cercle. Quelque chose utilisé rayon de bordure de 50%. Maintenant, c'est un cercle, et puis je vais utiliser des flotteurs ici, ce qui est une technique plus ancienne. Mais ils étaient parfaits pour cet usage particulier. Et maintenant, nous le flottons à gauche. Vous pouvez voir que le texte est toujours en quelque sorte encadré autour du cercle. Nous allons donc ajouter notre forme CSS. Elle est un mouton dehors cercle et là nous l'avons. Nous pouvons voir que le texte s'aligne maintenant très étroitement avec cette forme de cercle. Mais en fait, je voulais avoir un peu de place pour respirer, donc je vais ajouter 25 pixels et ça a l'air assez bien. Et juste pour montrer une utilisation répétée de cela, nous allons ajouter un deuxième employé, c'est totalement à vous de décider. Je pense que ça aura l'air plus complet. On ajoute Ted. , En gros, je réutilise la bio. Tout ce que j'ai fait, c'est changer la photo et le nom dans la prononciation. Donc, vous pouvez voir comment vous pouvez certainement créer quelque chose d'intéressant avec cela. Et c'est quelque chose qui va vraiment marcher. Ok, Vraiment. anciens navigateurs et ne supportent pas cela aussi bien. Nous allons juste ignorer ça pour qu'ils aient l'air plus. Ils vont juste avoir l'air carré, ce qui est très bien aussi. En termes de la façon dont le texte, ceux s'ils supportent le rayon de bordure, continuent de voir le cercle. Il n'a pas vraiment l'air trop mauvais, mais cela lui donne un peu plus 6. Bords angulaires: dans cette vidéo, je vais expliquer comment vous pouvez utiliser les arêtes angulaires sur les sections de votre page pour ajouter un peu d'intérêt visuel . On va utiliser une partie du code de la première leçon de la section héros. Donc je vais être rencontré. Attagirl. Et puis je vais Teoh le même front, le même fonds Google que nous avons utilisé là-bas. Et maintenant, je vais et mon marché pour la section héros. Tout ce que j'ai fait, c'est différent car j'ai ajouté une classe à chacune, qui sera utilisée pour le style. Et puis nous allons de l'avant et ajoutons nos variables CSS, qui sont les mêmes que nous avons utilisées précédemment dans notre requête HTM mauvais média réactive est la taille de police bien basée . Donc, tout cela est à partir d'une houle plus tôt et ajoutons dans nos styles de section héros ainsi que nous avons utilisé dans cette première écoute. Donc maintenant, nous avons quelque chose qui apparaît, ce qui est bon, et ajoutons nos styles H one qui s'appliqueront à ce slogan. Nous voulons aussi attendre et nous n'avons pas encore ajouté nos styles de classe corporelle, donc nous pouvons le faire maintenant, nous allons mettre en place notre police là-dedans, ce qui est fou que nous l'avons fait plus tôt. Et nous allons utiliser d'autres rubriques aussi. Donc je vais ajouter un peu de style pour ceux que je ne veux pas, hum, hum, marge supérieure sur eux, puisque ça va affecter la mise en page. Et alors que je suis semble vraiment orteil, ajoutez tous mes styles de balises HTML en haut. Je vais t o celui-ci pour m'assurer que les images ne dépassent pas notre largeur du navigateur, ce qui est quelque chose que vous verrez partout. C' est bon à utiliser. Ok, donc maintenant nous avons notre section héros. C' est une grille d'affichage comme on l'a fait plus tôt. On a notre slogan. Donnons-nous un peu plus d'espace ici, accord ? Je vais utiliser un H deux cours. Eh bien, donc je vais juste et dans les styles. Et puis je vais copier les styles de slogans qui viennent de la première leçon aussi. Cela le centrera car il utilise son enfant de grille. Et il y a une marge d'auto juste ici. Alors maintenant, nous avons terminé notre première section. Et puis dans la section suivante, qui sera nouvelle, nous ajouterons ces bords inclinés. Donc, je vais copier et coller du html juste pour l'amour du temps. Pour une deuxième section, ça va être notre magasin et e remarqué. Je suis assis sur la couleur blanche pour qu'on ne puisse même pas voir ça. OK, ouais, on a déjà la couleur blanche. Cela ne s'applique qu'au slogan. Et puis nous avons besoin de 1/3 section juste pour que ce soit un peu le bord d'angle. Donc je vais ajouter une troisième section très simple. Ce seront des événements que j'ai fait en tirant toutes ces images de cendres unspool. Donc c'est une bonne option comme je l'ai déjà mentionné. Donc maintenant, nous avons juste besoin d'ajouter quelques styles pour cette section de magasin juste pour que nous puissions obtenir un look plus réaliste de la façon dont cela fonctionnerait. Donc je vais ajouter que nous réutilisons un conteneur dans ces deuxième et troisième sections, et nous le ferons au lieu de le mélanger avec pour ça. Ok, on a fait ça. Ensuite, je vais ajouter quelques styles pour la section de notre magasin, ce qui est un peu plus dans la deuxième section sur laquelle nous travaillons. Um, je vais utiliser la position relative parce que nous en aurons besoin plus tard, ainsi qu' un index C pour les bords d'angle, donc c'est pour ça que c'est là. Et puis ajoutons quelques styles plus détaillés de magasin. Ceci est séparé des arêtes d'angle, et ce n'est pas important. Donc je vais juste copier ça pour l'amour du temps. Vous pouvez vraiment mettre ce que vous voulez dans cette section. Je fais juste une mise en page de trois colonnes avec CSS Grid qui est Onley une seule comète empilée sur mobile, puis à 100 pixels, il va à trois vient et puis ajoutons dans notre section événements est, Eh bien, il n'y a pas trop styles pour cela. Donc, et vous pouvez mettre ce que vous voulez dans cette section est bien, juste que Ah, troisième section pour être en mesure de montrer avec précision les bords d'angle. Et maintenant vous pouvez commencer à ajouter ces bords quand je vais utiliser est une bonne référence. Cet article est-il sur la façon de faire les bords avec des transformations ? Leurs exemples mentionnaient SAS, qui utilisaient simplement CSS, mais c'est la même approche générale que celles abordées ici dans cet article. Ok, donc nous allons ajouter des éléments pour convenir à la section détails du magasin, et c'est ce qui va permettre pour ces bords d'angle donc nous allons aller stocker détails, et c'est là que je vais juste copier et coller cela parce qu'une fois qu'il a commencé parce que c'est un peu beaucoup. Et puis je vous expliquerai. Renvoyez-le en couleur d'abord, mais à White. Et puis nous allons mettre en place des allégations. Et c'est pour le bord dur d'abord, et vous pouvez voir que ce n'est pas si difficile à mettre en place. Parfois, cela nécessite un peu de finagle ing. Ce qui est dans ces sections, la valeur maximale dont vous pourriez avoir besoin. Vous ajustez ainsi que la hauteur, mais le Vergis en utilisant la position absolue et le parent est positionné relatif et la magie est askew. C' est donc cet angle qui est appliqué à 3,5 degrés. Et puis on va faire la même chose pour cette image du bas. Très similaire. On va prendre E, ils utilisent la même couleur de fond, et la seule chose qui va changer, c'est que ça va s'asseoir en bas parce qu'on assis en bas de zéro. Donc, il est en dessous du bord inférieur de ce que les parents, qui est le div de notre magasin. Donc maintenant nous avons nos bords inclinés et une autre chose que je voulais montrer ici est que vous pourriez réellement utiliser une image d'arrière-plan. C' est quelque chose comme un motif répétitif et qui fonctionnera également avec le bord d'angle. Donc je vais ajouter ça dans non et ensuite l'ajouter à nos deux pseudo-éléments. Et je vais aussi l'ajouter aux parents. Cela waas quelque chose que j'ai pu générer en ligne. Il y a des tonnes de générateurs SPG Petr. Donc c'est certainement que je viens de réaliser que j'avais ceci à la mauvaise section. Donc c'est certainement quelque chose à envisager d'utiliser, euh, recherche de notre magasin. Et là, nous l'avons. Nous avons des bords inclinés tout comme un peu de plus. Et c'est certainement quelque chose que vous pouvez faire lorsque vous utilisez même un motif répétitif, vous pouvez simplement vous assurer d'appliquer le même motif à vous aussi. Donc, poursuivre les éléments dans cette section et vous êtes bon d'aller 7. Filtres CSS: dans cette vidéo, nous allons couvrir comment vous pouvez utiliser les filtres CSS pour ajouter un intérêt visuel dans Photoshopped comme des effets tous les CSS. Donc, le HTML que nous utilisons est très simple. On va juste avoir la section héros et c'est tout. Dans notre slogan sera Explorer. Et puis allons de l'avant et assurez-vous que les paramètres du stylet comment nous avons la réponse de la balise minute Et je vais ajouter la police de sorte que j'ai pré-sélectionné juste un fonds Google. Alors que dans et c'est tout pour enseigner à tondre Très simple. Et je vais ajouter ensuite les variables CSS sont-elles vraiment blanches ? Il va utiliser le raccourci. Si tous les caractères sont la même lettre, vous pouvez juste taper le 1er 3 et ensuite je vais mettre en place. Nous allons l'utiliser plus tard comme paramètre de filtre CSS. Je vais utiliser un inverti de 20% que vous verrez plus tard et comme nous l'avons fait auparavant , ajoutons nos styles HTML. Je vais également définir une couleur d'arrière-plan sur le moment du problème qui est nécessaire en raison d' un bug avec des filtres CSS. Actuellement sur ce que j'ai vu son chrome et Firefox. Donc nous devons avoir cet Aker et un ensemble de couleurs. Elle ne peut pas être transparente. D' accord ? Et puis on va juste ajouter nos styles de corps pour ça. Nous allons utiliser une image d'arrière-plan pré-sélectionnée que vous pouvez utiliser ce que vous voulez tirer à partir de Splash comme nous l'avons fait pour déjà. Et je suis dans un utilisé les propriétés d'arrière-plan de la scène que nous avons utilisé. Rangons ça. D' accord ? Non, je viens de réaliser qu'on duplique ça. Je ne veux pas de couverture à 100%, et ensuite on va avoir ce battement une pleine hauteur de la partie harmonies ah, 100 VH avec seulement 100 % de la hauteur. Et puis on va définir une couleur pour que le texte attende. Et nous n'avons pas encore nettoyé notre famille avant. Donc, il va le faire maintenant, Et cela va aussi être un élément de grille, et alors la seule autre section est la section Nous sommes la seule de cette page. Ça va être pleine hauteur, et ça va être un conteneur flexible. Je ne vais pas simplement copier et coller dans mes valeurs flexibles pour gagner du temps. C' est juste la mise en place dans la direction du peigne et ensuite on est aussi, tu sais, centré sur le texte. Et parce que le corps est une grille éléments, nous pouvons faire marge de l'auto à nouveau au centre sont picotements. Alors on va faire est et dans les styles de slogans je vais aller avec un poids de 600. Nous commencerons avec une taille de police de quatre amis pour les unités relatives. Je vais juste l'espacement des lettres juste pour vos préférences personnelles. Rapprochez un peu les choses. Et puis pour des écrans plus blancs, on aura le slogan beaucoup plus grand. Nous allons aller avec 10 chambres. Boum ! C' est grand. Et puis le seul de l'Italie a mis le filtre. Donc nous allons mettre le filtre CSS sur le corps, Ted. Alors jetez un oeil à ce que nous avons maintenant. C' est sans filtre. C' est juste avec notre style en place. C' est une sorte de contraste e avec l'arrière-plan a beaucoup de couleurs sombres, puis attendez. Et puis notre texte est filtre blanc pur. Nous allons fournir notre filtre inversé en bleu. C' est le résultat de cela. Il inverse fondamentalement les couleurs, mais seulement de 20%. Donc c'est un peu subtil, mais ça le rend plus cohésif. Hum, et vous pourriez certainement modifier ces valeurs au besoin. Si j'ouvre le débogage dans mes outils de développement, ce serait un bon moyen de jeter un oeil à ces valeurs, et vous pourriez jouer avec d'autres filtres. Tu pourrais faire beaucoup d'habileté. Donc c'est tout noir et blanc que tu pourrais faire. Il y a des tonnes de maison, donc je recommande certainement de jouer avec ceux pour voir ce que vous aimez dans ce qui semble bon dépendra vraiment de ce que vous avez sur la page aussi, sorte que vous pouvez ajuster l'opacité. Ils sont très puissants, et je t'aide à donner une chance et à montrer que je suis sorti. 8. Modes de mélange CSS: et cette vidéo, nous allons voir comment vous pouvez utiliser les modes de mélange en CSS pour ajouter des effets comme photo shop et nous allons également construire sur ce que nous avons fait dans la liste précédente. Donc, nous allons mettre en place notre HTML. On va mettre fin au responsable dans un tag, et je vais utiliser les styles basés sur la scène comme leçons précédentes. Donc ça va finir dans les fonds et je veux une copie et coller dans les 20 bits de balisage que nous avons utilisés parce que c'est tout ce que nous allons utiliser dans ce stylo aussi. Et nous allons utiliser des variables CSS similaires à ce que nous avons fait auparavant. On va utiliser l'attente. Nous allons également utiliser le noir celui-ci, et sont mélangés faible qui va utiliser. On va l'envoyer en superposition. Mais il y a comme avec les abris. Il y a des tonnes d'options et plus tard à la fin, je vais donner la possibilité d'appliquer le filtre que nous avons utilisé dans les leçons précédentes. Nous aurons cela aussi disponible. Ensuite, nous pouvons mettre en place nos styles html de base que nous avons, mais nous avons utilisé si morceau de cuisson que et similaire aux filtres CSS. Il y a en fait un bug en chrome. Ça semble être Crumb sur Lee. Nous devons définir une couleur d'arrière-plan sur la balise HTML. Elle ne peut pas être transparente. Sinon, vous ne verrez aucun mode de fusion s'afficher. Alors c'est ça. Ensuite, je vais réutiliser les styles de corps que nous avons utilisés dans la leçon précédente. Nous utiliserons la même image de fond et aussi le même style de héros. Donc, je vais copier fait dans ce conteneur bien encore flex et en fait avec des mises implicites qu'il est 100% avec. Donc nous avons notre héros, les mêmes styles avant. Et puis nous allons réutiliser le tigre dans des styles, bureau Wells, copier-coller. C' est bien, et pour celui-ci, je ne vais pas mettre le texte au centre juste parce que pour la lisibilité, les effets s'appliquaient . Il est difficile de lire sur le dessus de la salle arrière, donc c'est pour cela que c'est légèrement différent de la dernière. Écoutez, et voici où je vais appliquer le mode de mélange mixte. Il va aller sur la section héros, et c'est un peu subtil, mais vous pouvez voir comment le feu. Retirez-le. Nous avons du texte noir car c'est la couleur du texte par défaut. Et puis quand j'applique le mode de fusion, il commence juste à le mélanger avec l'arrière-plan. C' est un effet intéressant, et il y a beaucoup d'options pour cela est, eh bien, que vous pourriez jouer avec. Si vous passez en mode débogage, vous pouvez faire inspecter, puis vous pouvez jouer avec C. Nous avons dit est une variable CSS donc vous pouvez juste jouer autour. Je suis désolé. Ce n'est pas le bon. Nous voulons jouer avec une humeur de sang mixte afin que vous puissiez le régler à ce pourrait être plus facile. Je l'ai dit directement ici. Ok, conduit et l'écran de gravure couleur tag héros fait disparaître fondamentalement. L' approvisionnement en or semble assez similaire au noir. Il y a beaucoup d'options ici, donc c'est amusant de jouer avec ça. Et puis l'autre chose que je voulais montrer à Waas. Si nous le voulons, nous pourrions également appliquer le filtre CSS que nous avons utilisé dans la liste précédente. De cette façon, vous pouvez voir que vous pouvez utiliser les filtres CSS avec le mode de mélange en même temps et obtenir encore plus d'options, et je vais fournir un lien pour le stylo de code que j'ai créé où vous cantata aller entre les deux et définir différents et voir à quoi cela ressemble. Et je voulais aussi montrer que vous pourriez essayer de vous asseoir une couleur de police différente si nous mettons du blanc ici . C' est aussi un effet intéressant dans vous pouvez voir comment il ya comme des combinaisons illimitées vous pourriez faire alors j'espère certainement que cela vous a inspiré à essayer quelques-unes de ces. Même si vous utilisez simplement le filtre ou dans le mode mélange individuellement, vous avez encore des tonnes d'options, et il peut certainement fournir beaucoup d'intérêt visuel, alors essayez-le. 9. Bonus : Animation SVG Partie I: et ces deux prochaines vidéos, nous allons parler de SPG et comment nous pouvons animer des éléments de fichiers SPG avec juste CSS. Si vous n'êtes pas si intéressé par SPG, hésitez pas à sauter Thies pour les considérer comme des vidéos bonus, et vous pouvez passer à la prochaine leçon finale après cela. Alors, qu'est-ce que SPG ? SPG est l'échelle des graphismes d'électeurs, et la chose la plus importante à leur sujet est qu'ils sont nettes à toutes les tailles d'écran, y compris les écrans de rétine et les écrans de non-rétine. Ils peuvent être animés avec juste CSS comme on va dio. Ils peuvent également être animés avec JavaScript, et ils sont même de multiples façons de les utiliser. Vous pouvez les utiliser avec Justin image tag comme une image régulière. Vous pouvez également les intégrer directement dans votre HTML, ce que nous allons faire pour donner plus de contrôle sur le style afin qu'ils soient assez puissants. Et pour créer Edit S P G, je recommande certainement un logiciel d'édition vectorielle comme Adobe Illustrator ou il y a beaucoup de libre là-bas est bien, je crois que l'évasion. Alors sentez-vous pour vous, orteil, regardez autour de vous. D' accord, commençons avec notre vidéo de phase 1 de notre SPG Bones et cette première phase, nous allons préparer les actifs qui seront utilisés pour la deuxième phase quand nous les apporterons à Copan. Ce que nous allons faire, c'est utiliser ce paysage gratuit de montagne d'hiver, P et G, et ensuite nous allons le recadrer un peu, et un illustrateur va créer un SPG qui s'assoit au-dessus de lui. Et puis nous ajouterons nos étoiles et illustrateur. Et puis nous apporterons tout dans le Copan et animerons les étoiles. Et parce que tout est de la même taille, il va évoluer de haut en bas avec le navigateur avec deux. Vous pouvez donc télécharger cette image à partir d'ici pour commencer. Je l'ai déjà fait. Je vais créer un nouveau document dans Illustrator. Vous pouvez utiliser n'importe quel logiciel d'édition vectorielle que vous possédez. Je vais aller avec 2000 pixels sur 9 60 pixels longs pour mon document, parce que c'est à ça que j'ai mis à l'échelle dans l'image de montagne. Mais vous pouvez utiliser la taille de rectangle que vous voulez. Alors je vais faire le dossier. Je vais apporter l'image de la montagne, et je vais montrer comment vous pouvez créer l'image directement ici dans Illustrator. Alors je vais faire de la merde. Ensuite, il va sélectionner automatiquement ce qu'il pense que je devrais laisser tomber. Mais je vais remplacer ça. Je vais frapper la serrure pour maintenir le rapport d'aspect. Je vais aller à 2000 pixels et frapper, appliquer, et puis il est encore un peu trop grand. Donc, je recadre vraiment encore. Il commence la sélection automatique à partir d'un remplacement. Et puis je suis allé sans isoler ce rapport d'aspect parce qu'on allait juste frotter l'espace vide maintenant. Donc je vais aller jusqu'à la taille de notre planche environ, euh et ensuite nous allons faire une demande. Maintenant, notre image de montagne est prête. La montagne. C' est bon de nommer vos couches. Je vais l'emmener à l'aéroport. Ensuite, nous allons créer une nouvelle couche pour nos étoiles. Et d'abord, nous allons créer un rectangle juste pour nous assurer que le calque d'étoiles a les mêmes dimensions que cette photo. Je peux réellement taper le haut ici, et puis le rectangle est créé, et je vais juste aligner cela avec l'image. Et maintenant qu'on a ça va le cacher pour voir ce qu'on fait. Les étoiles pour les étoiles. Je vais utiliser un remplissage noir et un trait transparent. Et puis je vais utiliser l'outil étoile, et je vais créer des étoiles dans trois tailles différentes d'étoiles, comme un signe normal du zoom avant de son Nous voyons mieux. Donc ça va être comme la taille normale. Ensuite, nous utiliserons ces noms de calque plus tard pour le style. Donc j'appelle juste cette étoile. Et puis nous allons créer une étoile légèrement plus grande qui sera notre taille moyenne. On appellera ce plat étoile médium et ensuite on créera une autre étoile de taille une plus grande. Il appellera cela a commencé, et puis je vais faire est de copier et coller pour créer plus de ceux-ci. Et je maintiendrai les mêmes noms de couches qui utiliseront plus tard. Si vous voulez continuer seul, n'hésitez pas. Je vais accélérer le reste de la vidéo. Mais d'abord, je vais vous expliquer comment nous allons exporter ces actifs pour les stars qu'on va faire. Assurez-vous que nous avons le rectangle visible pour va faire la sélection d'exportation de fichier et ensuite nous avons le bon a défini. On a l'air bien. SPG est un format et assurez-vous que ces idées d'objet dit à jeter des gains parce que sinon les noms de couche ne seront pas dans le SPG. Et nous en avons besoin pour le style. Et vous allez exporter l'actif, puis similaire pour l'image de montagne. Si vous l'avez recadrée, vous devrez également l'exporter. Nous pouvons exporter pour les écrans. J' ai oublié, Teoh veut seulement commencer haut les étoiles pour ne pas vous confondre. Alors faites l'exportation de fichiers pour les écrans et sélectionnez notre port qui contiendra nos montagnes. Et PNG est le format un X est très bien et l'aéroport d'exportation. Et maintenant je vais continuer à créer des étoiles. Alors n'hésitez pas à rester à regarder. Vous pouvez le ralentir si nécessaire, sinon je vous verrai dans la prochaine phase deux vidéo et nous sommes prêts. 10. Bonus : SVG, animation, partie II: Bon, maintenant nous sommes prêts à utiliser nos actifs en compagnie. Juste une étape de plus que je vais faire, ce qui est facultatif. Je vais optimiser mon SPG en utilisant cet outil en ligne appelé SPG org. C' est gratuit d'utiliser la seule chose que je veux m'assurer que je n'ai pas fusionné chemin parce que ça va changer. Les étoiles sous-jacentes réelles que nous voulons maintenir sont des chemins séparés. Donc, tant que tu cuisines , que ça ressemble à ça et que tu vois les étoiles ici, tu es bon d'y aller. Je vais télécharger ça à partir de là, et on sera prêts à travailler sur son stylo. J' ai déjà commencé un nouveau stylo ici, et j'ai ajouté le méditatif que nous avons utilisé. Et j'ai également ajouté script de danse, qui est un Google Funds. Et j'ai ajouté, sont des styles html basés que nous avons utilisé ainsi que ce style d'image réactif. Juste pour s'assurer que l'image s'adapte correctement et maintenant nous pouvons travailler sur notre HTML. On va avoir une classe de héros, et ensuite j'aurai un conteneur pour contenir mes images de héros. Et puis maintenant, il est temps d'utiliser ce SPG. On va le copier et le coller entièrement. Donc, je vais l'ouvrir et contrôler un ou quoi que vous choisissiez un tout sélectionner, puis copier et puis coller. Et la seule chose que je veux faire est d'ajouter une classe d'étoiles. Et pendant que je suis là quand tu as changé le titre en étoiles aussi et puis je vais supprimer ce premier chemin, qui était ce rectangle parce que nous n'en avons plus besoin. Donc notre SPD est défini et dans ce même div, je vais inclure notre image. Vous pouvez vous sentir libre de référencer les liens de stylo que j'ai fournis. Utilisez mon image si vous le souhaitez ou si vous le pouvez. Si vous avez co print pro compte, vous pouvez télécharger votre propre fichier directement sur Copan. Sinon, vous pouvez l'héberger sur un service d'imagerie tel que scintillement ou cela pourrait même fonctionner à partir de Dropbox. Donc je vais utiliser mon Voyons voir ce qu'ils ferment la montagne. Donc j'ai le ton disponible que je vais juste coller ici. C' est toujours bon d'envoyer une étiquette de note. Maintenant, nous avons nos montagnes et nos étoiles pour pouvoir commencer pendant que je suis ici. Je vais juste ajouter le reste du HTML. C' est juste un slogan. Et maintenant, nous avons fini avec HTML. part ce que je vois, j'ai oublié d'ajouter notre classe, qui aura besoin de son style sur l'image qui va être une classe de montagnes. Et maintenant, nous avons certainement un peu de style à faire. abord, je vais copier et coller dans certaines variables CSS qui utiliseront en incluant notre police. Et maintenant, nous pouvons aller de l'avant et commencer à ajouter à nos styles. Je vais utiliser un style qui va empiler l'image, elle, l'image de montagne et notre SPG ça va être la position Lto. Nous allons utiliser une marge de valeurs de positionnement à gauche de dame de 100%. Et c'est juste une autre façon d'empiler les choses les unes sur les autres. Maintenant que nous pouvons, nous voyons qu'ils sont empilés et je vais aussi mettre en place un peu d'arrière-plan sur la section héros , qui va être par défaut en bleu et le prochain de je vais Teoh Donc les images de héros l'ont fait. Je vais ajouter quelques styles là-bas plein de cachés juste pour m'assurer que tout s'insère à l'intérieur qui est notre conteneur tombe à l'intérieur zéro juste assure. Il y avait un écart entre l'image de la montagne et le bord du port de vue. Donc, cela se débarrasse de cela parce que nous ne pouvons normalement pas utiliser display black, mais nous ne voulons pas utiliser cela dans cette mise en page particulière. Ensuite, je vais ajouter par des styles de slogan et je vais ajouter quelques requêtes médias juste orteil augmenter les côtés parce qu'il est un peu petit sur le bureau qui a l'air bien. Et puis vous pouvez voir que SPG a besoin d'un style. Les étoiles utilisent toujours leur Phil sombre, et nous voulions être Attendre afin que nous puissions simplement utiliser la propriété fill pour changer cela et la hauteur de 100% et économiser. Ok, alors c'est le point où nous allons ajouter nos animations étoiles. Je vais utiliser quelques cadres clés différents juste pour quelques variations. Mais vous pouvez certainement créer un de ces et les utiliser pour toutes vos étoiles. Donc, ce 1er 1 est pour les étoiles de taille régulière, et il est juste de changer la capacité à différents points de l'animation sur. Ensuite, les grandes étoiles obtiendront ces cadres clés. Donc, c'est juste un changement d'opacité, mais juste des valeurs de propriété légèrement différentes à des moments différents. Et puis pour les moyennes étoiles, j'en ai même une autre. Donc, je voulais juste ajouter beaucoup de variation, mais vous n'avez certainement pas à le faire. Et puis nous allons ajouter les animations pour que nous utilisions ces images clés. Nous devons donc utiliser les attributs de données et les sélecteurs R. Donc, ce sera pour les plus petites étoiles. Et je vais aller quatre secondes de magasin la clé d'animation, franchement, scintillant star, ça va être assouplir pour l'assouplissement. Je suis dans un retardé, il commence pour la première course pendant 0,2 secondes juste pour une variation plus. Ça va se répéter pour toujours, aller dans des directions alternatives et en fait courir à l'envers. Et là, vous pouvez voir que c'est déjà en train de prendre effet. Et la copie ceci et nous dions une chose similaire. Mais pour les moyennes étoiles, on va y aller avec trois secondes. Il est bon de varier ces événements juste pour plus d'intérêt. Juste parce que la nature est aussi a beaucoup de variance. On va y aller avec quatre secondes de retard et on n'utilisera pas l'arrière et ensuite on se dirigera vers ces étoiles et je vais utiliser deux secondes là et ça va avoir les grandes images clés. Et nous allons aussi revenir en arrière, juste pour la variation, et vous pouvez voir que c'est déjà arrivé. Maintenant, je répète les choses et j'ai l'air bien, et il y a juste un autre ensemble de cadres clés que je vais ajouter. Et c'est pour la section héros, la couleur de fond. J' ai décidé que je le voulais aussi. Changement. Ça va commencer par le bleu que nous avons mis, puis il va aller à un bleu plus foncé, puis un bleu encore plus foncé, et nous allons l'appliquer à la section trouver notre héros. On va aller avec paresseux record sur les images clés, que je viens de créer. Je vais fixer une durée de. C' est quelque chose dont j'avais besoin. Vous pouvez jouer avec les valeurs à coup sûr. Je vais aller avec deux secondes de retard si je la première manche peut sortir pendant un moment, et ensuite nous avons été en place aussi, et vous pouvez voir comment vous pouvez faire beaucoup avec ces animations subtiles mises en place. C' est quelque chose d'unique. J' espère que cela vous inspire à essayer quelques animations avec SPG et certainement envisager les superposer avec un PNG pour des options de style supplémentaires. 11. Considérations de site: et enfin, dans cette vidéo, je voulais aborder quelques considérations à garder à l'esprit lors de l'utilisation de l'une des techniques que nous avons abordées dans ce cours. Tout d'abord, quelques directives pour les animations que vous voudrez éviter d'ajouter des animations qui interfèrent avec la capacité de vos utilisateurs à interagir avec votre site. Ainsi, par exemple, un site de bloc que vous ne voulez pas avoir une animation longue qui vole sur tout l'écran. Cela rend difficile pour les utilisateurs de lire vos messages sanguins ou sur les sites d'un détaillant quelque chose qui va rendre difficile pour un utilisateur de passer par le flotteur de contrôle. Vous voudrez également définir vos durées d'animation de manière appropriée, donc généralement, ce serait une demi-seconde ou moins, donc quelque chose de court qui ne va pas fonctionner éternellement et distraire l'utilisateur, puis, en termes de performance, les meilleures propriétés pour attaquer notre capacité et transformer ceux qui donnent la performance la plus lisse . Et si vous cherchez plus d'informations à ce sujet, je vais fournir quelques liens et la ressource est en termes de styles. Vous voudrez vous assurer que le texte est lisible lorsque vous avez beaucoup de choses en dessous du texte. Évidemment, il y a certainement une possibilité. Le texte ne sera pas si lisible. Donc, vous voulez vous assurer de prendre votre couleur de police, votre couleur d'arrière-plan et tout grain et fourni en compte également. Aziz. Couleurs de l'image que vous utilisez et de l'avant que vous utilisez Vous devez envisager d' utiliser un outil de contraste des couleurs lorsque vous sélectionnez la palette de couleurs pour votre site. Cela inclura les couleurs utilisées pour les arrière-plans et pour Fox, et je vais fournir quelques liens pour cela aussi. Et puis, lorsque vous utilisez des propriétés CSS plus récentes, y compris les modes de fusion des filtres CSS de grille CSS, vous voudrez prendre en considération la prise en charge du navigateur que vous pouvez utiliser. Puis-je utiliser l'orteil de dot org ? Recherchez ce qu'est le support du navigateur, puis assurez-vous que vous fournissez quelques retours pour anciens rouseurs afin qu'ils aient encore une bonne expérience. Leslie. Vous souhaitez optimiser vos images. Vous pouvez utiliser l'image Optima Fear sur Mac. Vous pouvez utiliser des outils basés sur le Web, et je vais fournir d'autres liens. Assurez-vous que vous prenez cette étape supplémentaire juste pour empêcher vos utilisateurs d'attendre pour toujours télécharger d'énormes images sur votre site, et j'espère que cela a été utile 12. Conclusion: vous avez terminé le cours. Félicitations et merci d'avoir pris ce cours. J' espère que vous partirez avec de nouvelles techniques que vous pouvez utiliser dans votre prochain projet Web , où vous regardez un peu d'intérêt visuel pour le projet de classe, vous prendrez deux ou plusieurs des techniques que nous avons apprises dans cette classe et les appliquer dans votre propre projet Web. En outre, fournir une face qui pourrait être utilisée comme point de départ si vous n'avez pas de projet en cours . Si vous aimez que votre soumission de stylo de code soit ajoutée à la collection de classes que je vais créer sur Copan, faites-le moi savoir. Merci encore et à la prochaine fois.