20 astuces CSS que vous n'avez probablement jamais utilisées auparavant

1. Introduction: Salut, je m'appelle Aga et je suis concepteur de codage. J' aime la couleur rose et les dinosaures, mais le plus important est que j'ai préparé des classes CSS spéciales, pour vous. 20 trucs CSS que vous n'avez probablement pas utilisés auparavant. Avez-vous déjà entendu parler de la propriété Line Clamp ou du nombre de colonnes ? Avez-vous déjà appliqué Conic Gradient en CSS ? Eh bien, sinon, ça va être un voyage très intéressant parce que je vais vous montrer 20 astuces CSS, qui ne sont pas très populaires pour être honnête, mais j'espère que vous trouverez créatif et cela stimulera votre travail sur les conceptions de laboratoire. Les classes sont destinées à tous ceux qui ont déjà écrit une ligne de code CSS et qui sont familiers avec les classes CSS. Je vais vous montrer 19 propriétés CSS et une balise HTML. Avec tous, vous serez en mesure de créer mises en page encore plus créatives et des effets encore plus cool. Je suis sûr qu'ils vont booster votre flux de travail quotidien tout en codant vos conceptions. J' ai hâte de vous voir sur la liste des étudiants. Au revoir. 2. Préparatifs - ce dont vous avez besoin: Ce dont vous aurez besoin pour les cours. D' abord, votre navigateur préféré. J' aime utiliser Chrome et Firefox. Deuxième, éditeur de code. les classes, j'utilise l'éditeur Atom. Vous pouvez facilement le télécharger depuis atom.io et le troisième paquet de la section projets que j'ai créé, spécialement pour vous. Vous y trouverez le squelette du site dans lequel nous allons citer quelques exemples et quelques astuces CSS. Le paquet inclut le résultat du fichier HTML d'index PNG, qui est la mise en page finale que nous visons. Plus tard, vous pourrez comparer à quoi ressemble votre site Web s'il est similaire à celui-ci et nous avons des actifs img, tous les actifs que j'ai utilisés dans la mise en page, tous les actifs que j'ai utilisés dans le site Web, et bien sûr CSS. Styles dans lesquels nous allons ajouter des lignes et créer des CSS. Si je l'ouvre sur atom, je peux voir le code HTML et styles.css où je vais mettre tous les nouveaux éléments tout au long du cours. Ici, vous pouvez voir que j'ai aussi laissé quelques commentaires afin vous sachiez immédiatement où mettre le nouveau CSS. 3. Astuce #1 - Arrière-plans multiples: Trick numéro 1, plusieurs arrière-plans. Si vous vous êtes déjà demandé si vous pouvez utiliser plusieurs images pour votre arrière-plan, la réponse est que oui, vous pouvez le faire. Nous pouvons utiliser la fonctionnalité d'image de fond pour ajouter plus d'une image. Nous utilisons simplement la fonction URL, et séparer toutes les autres images par des virgules. Nous pouvons empiler des arrière-plans, mais pour des informations importantes est, que le premier arrière-plan que vous fournissez est sur le calque supérieur, et le dernier arrière-plan est affiché à l'arrière. Seul le moins d'arrière-plan peut inclure la couleur d'arrière-plan. Bien sûr, d'autres ont des propriétés pour l'arrière-plan telles que la répétition d'arrière-plan, ou la position d'arrière-plan peut également être appliquée. Commençons l'exercice. Maintenant, nous sommes tous configurés pour ajouter les arrière-plans. Ouvrons l'index HTML de notre paquet, c'est le site que nous avons, et comme mentionné, nous allons ajouter deux images à notre arrière-plan. Si je regarde sous le site Web qu'il est déjà codé, cela ressemblera à ceci. Nous avons deux arrière-plans, et l'un est dans le coin supérieur gauche, l'autre en bas à droite. Nous allons également ajouter une pièce jointe d'arrière-plan fixe, que vous pouvez voir que ces deux arrière-plans sont fixés en un seul endroit. Nous avons cet effet de parallaxe. D'accord. Revenons à notre code, nous sommes dans le styles.css, et si nous ouvrons nos outils de développement, nous verrons que c'est la section d'en-tête, c'est le sélecteur que nous avons. Je cherche un en-tête, celui-ci, et ici, j'ai laissé un commentaire qui dit qu'ici nous ajoutons plusieurs arrière-plans. Nous avons la couleur de fond, que nous pouvons ajouter image d'arrière-plan, fonction URL, et ces deux images sont dans le dossier de l'image. Ouvrons le dossier img et nous devrions avoir hand.jpeg, et colors.jpg. Ces deux fichiers, j'ajoute le premier, peu importe lequel sera le premier parce qu'ils ne se chevauchent pas l'un dans l'autre. J' écris img/hand.jpeg, l'autre fonction URL à nouveau dans le dossier img/colors.jpg. D' accord. Je suis en train d'enregistrer et de rafraîchir notre site Web, comme vous pouvez le voir, il y a un changement. Nous pouvons voir l'arrière-plan, la main, mais ici nous avons deux images appliquées. La première chose que nous devons changer est certainement la taille de fond, la main ne sera pas étirée à toute la largeur. On peut le faire, disons par 430 pixels, et l'autre 470. Malheureusement, l'arrière-plan est répété par défaut, nous devons réinitialiser cela, background-repeat : pas de répétition ; grâce à cela, nous n'aurons qu'une seule image, et les images sont bloquées, tout ce que vous pouvez voir sont coincés. Le premier à l'avant est hand.jpeg car il est le premier dans la liste dans la fonction URL, et le second est colors.jpg et les couleurs sont en dessous. Définissons la position pour eux. Nous pouvons définir la position de fond, définissant pour la main, il sera à gauche et en haut, et pour les couleurs, il sera à droite. Ce sont les lignes que nous devons ajouter pour notre code, et à l'arrière il y a aussi appliqué, background-attachment : fixed ; nous pouvons voir ceci, parallaxe comme effet. Si je l'ai commenté, il se comportera d'une manière différente. Ce que je fais, je copie simplement ces lignes et je les colle ci-dessous. vous plaît rappelez-vous que vous pouvez utiliser toutes les autres propriétés secondaires pour les arrière-plans tels que la taille de l'arrière-plan pour s'adapter à la position et simplement faire la même chose simplement séparer les valeurs pour l'arrière-plan donné en utilisant une virgule et simplement l'enregistrer. Nous pouvons mélanger des arrière-plans, vous pouvez mélanger des images, et vous pouvez également ajouter des couleurs d'arrière-plan. Voyons voir, j'ai ces deux arrière-plans de lumière. 4. Astuce n° 2 - Unités de largeur et de hauteur de la fenêtre d'affichage (vw & vh): Astuce numéro deux, largeur de la fenêtre et hauteur de la fenêtre. La fenêtre d'affichage est la zone dans laquelle le navigateur affiche le site. Il s'agit de l'écran, la hauteur de l'écran moins l'espace réservé au panneau du navigateur. Parfois, nous voulons définir la hauteur de l'élément ou la largeur en fonction de la taille de la fenêtre. Nous pouvons utiliser la largeur de la fenêtre et les unités de hauteur de la fenêtre, et c'est quelque chose que nous voulons également utiliser dans notre mise en page. Nous avons notre site Web et nous voulons définir l'en-tête pour 80 pour cent de la hauteur de la fenêtre d'affichage. Au lieu de définir 800 pixels, nous pouvons écrire 80 hauteur de clôture. Si je le définit comme 50, vous pouvez voir que c'est la moitié de la hauteur de l'écran. Si je change de l'affichage plein écran, vous verrez qu'il est plus petit, donc il est recalculé en fonction de la hauteur de la fenêtre, passant par une hauteur de clôture. Donc, je le change à 80, et je veux l'appliquer dans mon code aussi. Écrire 80 fenêtre d'économie de hauteur, et c'est à ça que ça ressemble. Bien sûr, vous pouvez également jouer avec la largeur de la fenêtre et la hauteur de la fenêtre. Je préfère ne pas l'appliquer au texte, ce n'est pas une méthode très recommandée, mais vous pouvez facilement jouer avec elle sur les images ou les boîtes, les conteneurs. Par exemple, nous pouvons ajouter ici hauteur, 100, hauteur de la fenêtre, et vous verrez qu'il correspond parfaitement à 100 pour cent de la hauteur de la fenêtre du navigateur. Si je le change en plus petit, vous verrez qu'il change réellement sa hauteur. 5. Astuce n°3 - La sténographie des polices: Truc numéro trois, raccourci de police. Au lieu de répertorier toutes les propriétés SAP pour les polices telles que font-style, font-weight, font-size, line-height ou font-family, nous pouvons tout écrire en une seule ligne en utilisant le raccourci de police. Comment le faire ? Voyons voir. Revenons donc à votre site Web et nous avons la rubrique h1 et nous aimerions en fait h2, et nous aimerions appliquer à cette police abrégée. Ici, nous pouvons voir que nous avons font-family. Nous avons quelques styles comme le poids de police. On a une hauteur de ligne. Donc, nous allons utiliser la propriété raccourci. Alors trouvons le h2. C' était un diviseur de classe. Nous avons donc ici nos styles définis pour la rubrique. Donc, j'écris le raccourci de la police et coller ici ma feuille de triche. Je me souviendrai de quelle propriété SAP va dans quel ordre ? Nous avons d'abord défini le style de police, qui est une variante de police normale, ce qui est aussi normal. Poids-police, on en a 900, c'est d'ici, donc je peux enlever ça. Font-size, qui est de 100 pixels, en le supprimant également. Hauteur de ligne, qui est 0%. Donc c'est fait, puis font-family, donc je copie Darker Grotesque et sans serif. Retirer aussi bien. Si je n'ai rien manqué, nous devons supprimer la hauteur de ligne. Sauvez-le. Je peux encore avoir mon commentaire. Rafraîchissons le site Web. Notre raccourci de police fonctionne correctement. Si je l'ai commenté, je verrais que ces propriétés ne sont plus appliquées. Donc, bien sûr, vous pouvez jouer avec. Vous pouvez le modifier et rendre votre code plus efficace et plus court, grâce à cette propriété abrégée. 6. Astuce #4 - Trait de texte: Nous pouvons obtenir un effet de contour pour la police en caressant du texte et en ne remplissant pas cet intérieur. Malheureusement, cette fonctionnalité n'est pas entièrement supportée par les anciens navigateurs, cependant, cela ne signifie pas que nous ne pouvons pas expérimenter avec elle. Pour cela, nous devons appliquer deux propriétés. Le premier, -webkit-text-fill -color et avoir ce préfixe webkit est crucial. Le second, -webkit-texts-stroke. Si nous regardons sur la page qui est déjà codée, vous verrez qu'il y a le contour noir de l'en-tête. Agrandir ceci à l'effet CD. Si je plonge dans le code, vous verrez que pour le titre, nous avons une couleur de remplissage de texte appliquée. La chose cool est que nous pouvons également le rendre transparent pour créer un effet vraiment cool. Nous pouvons également changer la couleur pour en faire un vert, faire ce que vous voulez. Bien sûr, nous avons le contour qui est défini par le trait de texte, et nous pouvons définir la largeur du trait en pixels. On peut à cinq heures, on peut à un, tout ce que tu veux. Nous sommes également en mesure de changer sa couleur. Tu peux faire ce que tu veux. Appliquons ceci aux fonctionnalités dans notre code. Nous avons -webkit-text-fill-color, qui dans notre cas est blanc. Nous avons -webkit-texts-stroke. Ici, nous ajoutons deux pixels pour le contour et la couleur. Je rafraîchis mon site web que je peux voir ce bel effet du contour. Si vous voulez créer un sac complet pour les navigateurs qui ne prennent pas en charge cela pour les propriétés CSS, vous pouvez utiliser l'ombre de texte. Commentons-le simplement. Je colle la propriété de l'ombre de texte. Mais d'abord, nous devons appliquer la police de couleur, la couleur blanche. Vous verrez qu'en utilisant l'ombre de texte, nous pouvons créer quelque chose comme un effet de contour, que nous avons obtenu en utilisant le trait de texte et la couleur de remplissage. Je voulais juste vous montrer que vous avez cette option pour appliquer un repli en utilisant t shadow. Mais je vous recommande fortement de jouer avec la couleur de remplissage et le trait de texte. 7. Astuce #5 - Ombre projetée: Trick numéro 5, ombre portée. Ombre portée est la fonction CSS qui applique un effet d'ombre portée à l'image. Quelle est la différence entre une ombre portée et une box-shadow ? Voyons voir. Si nous appliquons une ombre de boîte, vous verrez immédiatement la différence. ombre de la boîte applique l'ombre derrière l'élément, derrière la boîte de l'élément, sorte que vous avez le rectangulaire. Pour l'ombre portée, elle s'applique à l'élément lui-même. Si j'ai l'image qui a une certaine transparence, tout comme cette image de ces feuilles, vous verrez que l'ombre est créée pour chaque partie de l'image. C' est pourquoi il est bon de savoir que nous avons une propriété d'ombre portée, la même propriété est également appliquée pour la main. Si je le cache, vous verrez que les ombres apparaissent. Si j'ai box-shadow, l'ombre est appliquée à l'ensemble rectangulaire. Ajoutons-le dans notre manteau. Pour l'ombre portée, nous avons 1,2,3, trois coordonnées, donc x, y, ne sont pas coordonnées, mais le flou et la première valeur est la couleur de l'ombre que nous avons. On a une ombre portée, ajoutons ça à la plante. Nous avons une ombre portée filtrée, 10 pixels pour l'axe x, pour un axe y, 40 pixels, 30 pixels pour le flou et pour la couleur, nous avons noir mais avec une transparence de 5 %. Je rafraîchis mon site Web, et je peux voir pour cette plante que j'ai une ombre portée appliquée. Bien sûr, nous pouvons manipuler, nous pouvons changer ces valeurs à 45, bien sûr, ajouter ceci à notre main, sauver, rafraîchir le site et je peux voir que pour ma main, l'ombre est appliquée aussi bien. 8. Astuce #6 - Filtre flou: Trick numéro six, Filter Flou. La propriété Filter et sa valeur de flou appliquent un effet de flou à l'image. Plus la valeur que nous aurons, plus le flou que nous créerons. Le pixel qui se trouve à l'intérieur de la parenthèse est le rayon du flou. Nous n'avons plus besoin d'utiliser Photoshop pour avoir des effets flous sur notre image sur un site Web. Jetons un coup d'oeil dans le code. Ceci est le site dans sa version finale et vous pouvez voir que nous avons ces feuilles floues appliquées ici. Ajoutons cet effet pour cette image et celle-ci, ceci est l'arrière-plan de la plante de classe et l'arrière-plan de la plante de classe en bas. Je vais passer à décoder où dans notre CSS donc j'ai arrière-plan de la plante et appliquer le flou de filtre à, ajoutons cinq pixels. Notre rayon aura cinq pixels. Je rafraîchis la page et je vois que mes feuilles sont floues. Simplement, facile, efficace. Vous pouvez également vérifier la partie centrale de la page où nous avons également feuille. Pour cette image, nous avons la classe appelée fond de plante appliquée. C' est pourquoi le filtre de flou fonctionne également. 9. Astuce #7 - Unité de caractère (ch): Truc numéro 7, unité de caractère. Nous pouvons appliquer l'unité de caractères. Il représente la largeur du caractère « 0 » dans la police actuelle, particulièrement utilisée en combinaison avec des polices monoespacées. Ceci est similaire dans l'esprit à x-height. Seulement, ch est basé sur la largeur du caractère 0 au lieu de la hauteur de ce caractère X. Au lieu de définir la largeur de nos paragraphes en pixels, nous pouvons appliquer des unités de caractères. Si vous vérifiez le site qui est déjà codé, vous pouvez voir que le texte a une largeur limitée. Comparons-le à notre stade actuel. Restez en contact. C' est le titre que nous aimerions raccourcir en termes de largeur et pour ce cas, nous pouvons appliquer la largeur maximale qu'il est défini dans l'unité de caractères. Nous avons l'en-tête de contact H2 et nous pouvons appliquer la largeur maximale, appliquons huit unités de caractères et nous aurons notre texte limité. Je copie simplement cette propriété, revenez au code chercher le titre de conduite et en ajoutant une unité de caractère. Vous pouvez voir ici dans le commentaire que j'ai ajouté la largeur maximale et l'unité de caractères. Je peux l'écrire comme ça. Bien sûr, nous pouvons jouer avec elle aussi pour les paragraphes. Par exemple, ici, nous pouvons écrire max-width, disons 50 caractères et notre paragraphe sera raccourci. En termes de largeur. 10. Astuce #8 - Première lettre: Truc numéro 8, première lettre. La première lettre est un pseudo-élément qui sélectionne la première lettre dans la première ligne d'un élément de niveau bloc. Par exemple, paragraphe. Inspiré par les éléments imprimés, nous pouvons facilement transférer ces idées sur le web. Ici, nous pouvons voir l'effet que nous visons. C' est la première lettre du paragraphe, lettre F, et je l'applique ici, pseudo-élément avec la première lettre. Voyons à quoi ressemble le CSS. J' ai appliqué un pseudo-élément, première lettre. Il existe certaines propriétés de police telles que la famille de taille de police, la transformation de texte. Mais aussi j'ai ajouté float-gauche et quelques marges pour que cette lettre soit parfaitement ajustée au texte flottant. Appliquons ceci dans notre code. C' est mon état actuel du site Web, et je suis impatient de paragraphe. C' est l'introduction de la classe p, je cherche un cours d'introduction. Première lettre. Donc j'ai déjà créé un sélecteur pour vous, et nous voulons qu'il flotte à gauche. Nous voulions avoir cette lettre en majuscules. Nous voulions avoir une famille de polices, Karla, taille de police 100 pixels. Plus tard, nous pouvons appliquer à elle, notre raccourci pour la propriété de police, ligne et quelques marges. Disons que pour l'instant, nous allons le modifier directement dans les outils d'adaptation, mais ajoutons pour commencer 10 pixels. Je rafraîchis ma page. Je vois ce pseudo-élément pour les travaux de la classe d'introduction. Je suis désolé, j'ai fait l'erreur. Ça devrait être la hauteur de la ligne bien sûr. Bon, rafraîchissant. Tout en bas, j'ai ce pseudo-élément, élément de première lettre répertorié. Du côté gauche, je voudrais avoir zéro pixels, et peut-être du côté droit, 20. Comparons-le à l'exemple précédent. Je pense que nous pouvons également ajouter une marge du haut. Donc, comme 15 disons de l'avoir bien équipé avec le texte, qu'il flotte le paragraphe. Je fais face à la marge, coller l'épargne. Je peux aussi, au lieu d'écrire ces trois lignes, je peux écrire la police normale. C' est la variante de style. Ensuite, quelle était la suite ? On peut jeter un coup d'oeil dans le séparateur. C' était le style, la variante, poids, la taille, la hauteur de la ligne, la famille de polices. D' accord, attendez, on a une taille normale, une hauteur de ligne et une famille de polices. Enlevenons-le. Rafraîchissez, tout a l'air bien. C' est ainsi que nous pouvons appliquer le pseudo-élément de première lettre au paragraphe. Vous pouvez également l'ajouter. Par exemple, nous avons une liste ici. Copions les styles que nous avons et créons un pseudo-élément. Nous avons des listes numérotées et pseudo-élément, première lettre. Tu dois admettre que c'est un peu fou. Mais en gardant à l'esprit que c'est possible, nous pouvons créer des effets vraiment intéressants plus tard. Je vous recommande totalement de jouer avec le pseudo-élément de première lettre, et bien sûr, vous pouvez agrandir la lettre, afin de rendre l'effet encore plus impactant. 11. Astuce #9 - Pince de ligne: [ MUSIQUE] Truc numéro 9, pince de ligne. La propriété webkit line clamp permet de limiter le contenu d'un conteneur bloc, au nombre spécifique des lignes que nous définissons. Il est important de savoir qu'il ne fonctionne qu'avec la combinaison avec la propriété display qui est définie sur webkit box, ou webkit Inline box. Nous devons également appliquer webkit box orients propriété qui est définie sur verticale. Il est également essentiel d'ajouter un débordement, qui est hepta caché, car, grâce à cela, le contenu, serait coupé. Il ne sera pas montré après un nombre spécifique de lignes que nous appliquons. Les pinces de ligne sont à une partie du module de débordement CSS niveau trois, et c'est actuellement le brouillon des éditeurs. Nous pouvons appliquer une pince de ligne, mais seulement avec un préfixe webkit, qui fonctionne étonnamment pour tous les autres principaux navigateurs, pas seulement dans Chrome ou Safari. Nous aimerions appliquer une pince de ligne au paragraphe avec une classe raccourcie. Ce que nous devons faire, nous devons définir ces quatre éléments. Le premier dont je mentionnais est l'affichage et nous devons le définir sur webkit box. La prochaine chose est d'ajouter une pince de ligne webkit. Cette pince de ligne, limitons-la à trois lignes. Ensuite, nous devons appliquer webkit, box orient et mis à la verticale. Comme vous pouvez le voir que le paragraphe est déjà raccourci à trois lignes, mais le reste du texte est toujours affiché. Pour limiter sa hauteur visuellement, nous devons appliquer un débordement, le mettre à caché. Grâce à ce que nous avons obtenu trois lignes de texte, bien que notre paragraphe soit super long et que le texte soit toujours là, mais visuellement, il est tronqué à seulement trois lignes et nous avons une ellipse à la fin. Il donne donc à l'utilisateur des informations qu'il y a en fait un plus, plus de contenu caché dans ce paragraphe. S' il vous plaît rappelez-vous de ces quatre choses qui doivent être appliquées. Bien sûr, je l'ajoute à mon éditeur, raccourci. Oui, c'est là que j'ai laissé un commentaire pour vous, en le collant. Juste rapidement, faire le nettoyage, sauver, rafraîchir, et j'ai le paragraphe raccourci. 12. Astuce n°10 - Liste numérotée: Trick numéro 10, liste numérotée. Nous pouvons facilement créer une liste numérotée en utilisant ol tack. Ce que nous avons obtenu en conséquence sont des nombres affichés avant chaque élément de la liste, c'est vraiment pratique et utile. Mais qu'en est-il de coiffer ces chiffres, avez-vous déjà essayé ça ? Pour ce faire, nous devons jouer avec certaines propriétés CSS appelées compteurs CSS. Les compteurs CSS vous permettent d'ajuster leurs périodes de contenu en fonction de son emplacement dans le document. Pour utiliser un compteur CSS, il doit d'abord être initialisé à une valeur avec la propriété de reset du compteur. Ensuite, lorsque nous avons terminé avec l'initialisation, plus tard, la valeur des compteurs peut être augmentée ou diminuée et cela est fait par incrément de compteur. La valeur d'un compteur peut être affichée à l'aide d'une fonction de compteur ou de compteurs et d'une propriété de contenu. Voyons le côté pratique des compteurs CSS. Maintenant, jetons un coup d'oeil dans notre liste. C' est la tranche ordonnée à la dette que j'ai déjà préparée pour vous. Ce que j'ai fait, c'est que les nombres qui sont affichés avant chaque élément allié, avant chaque élément de la liste. C' est la pelouse de style liste. Si je sors, tu verras les chiffres. Mais nous les cachons afin d'utiliser des pseudo-éléments pour utiliser des compteurs CSS. Ça revient dans le décodage. J' ai ma liste numérotée, Ally. La première chose que je dois faire est que j'ai besoin d'appliquer la propriété de compteur incrément. Nous n'utilisons pas la réinitialisation du compteur car cette liste est déjà numérotée et nous avons déjà nos éléments correctement numérotés. La seule chose que nous faisons ici, c'est que nous mettions le contre-incrément à allié. C' est le nom donné, donc nous pouvons également ajouter, par exemple, un élément de liste, tout ce que vous voulez. Ensuite, nous devons créer une pseudo-classe. Donc nous avons numéroté la liste alliée avant. Ici, nous devons ajouter compteur de contenu et adresser le compteur que nous avons déjà créé. La valeur que nous avons déjà créé quel élément de liste. Ça marche comme ça. Ici, bien sûr, nous pouvons ajouter des styles à nos numéros. Mais d'abord, voyons si ça marche. Donc, je garde ceci, rafraîchissant la page et je peux voir les chiffres. Je peux voir que les chiffres apparaissent et que ces chiffres sont exacts. Donc nous avons six éléments. Qui pourrait six personnages, nous avons 1,2,3,4,5,6. Alors à, alors jouons-y un peu. Nous pouvons, par exemple, ajouter un rayon de 50 %. Pour l'instant, nous pouvons ajouter l'arrière-plan. Disons bleu pour l'instant, juste pour jouer avec. Ajoutez une taille de police de 20 pixels. J' économise, rafraîchissant. Je vois que les styles arrivent. Mais appliquons les styles qui sont visuellement attrayants. Donc c'est ma feuille de triche. J' ai déjà les chiffres ici, donc je peux copier la valeur pour l'arrière-plan. Je peux voir que la taille de la police est de 30 pixels et la largeur et la hauteur de la, du cercle est de 45 pixels. C' est le diamètre. Il y a aussi un certain positionnement qui nous aide à garder le nombre bien positionné en fonction de la ligne du texte. Alors faisons-le simplement. J' ai avant ici, j'ai mon arrière-plan, j'ai la hauteur, 45 pixels largeur 45 pixels, position absolue, gauche. Ajoutons moins 40 pixels, hauteur de ligne 45, centre d'alignement du texte, taille de police à 20. Nous avons déjà la taille de police, donc nous pouvons ajouter 30 et changer la hauteur de ligne à 40, il semble plus agréable et la famille de polices devrait être Karla. En fait, taille de police 25 et hauteur de ligne 45. Ça a l'air bien. On dirait quelque chose que nous voulions réaliser. Prenant tous les styles qui sont ici, et je le colle à mon pseudo élément, actualisez. Je peux voir que le nombre de ces styles, vous pouvez utiliser des compteurs CSS pour différents éléments dans la section du site Web. Donc, plus tard, je vous donnerai un exercice pour essayer d'appliquer des nombres à, par exemple, des en-têtes ou des paragraphes, des éléments différents, que la liste numérotée, qui est déjà l'élément numéroté. Il est donc un peu plus facile d'appliquer des compteurs CSS pour les pseudo-éléments. 13. Astuce #11 - Tronquez le texte: Truc numéro 11, tronquer le texte. J' ai déjà mentionné tronquer le texte avec serre-ligne. Nous pouvons également utiliser une méthode différente. Pour tronquer le texte, nous avons besoin de trois propriétés CSS, espace blanc, débordement et débordement de texte. L' espace blanc doit être défini sur « no-wrap », overflow » à « hidden » et « text overflow » à « text ellipsis ». Le débordement de texte se produit uniquement lorsque la propriété de débordement du conteneur a la valeur cachée, défilement ou auto et espaces blancs non enveloppés. C' est pourquoi nous avons besoin de trois d'entre eux pour atteindre cet effet. Jetons un coup d'oeil à notre site Web, et nous aimerions tronquer ce paragraphe en une seule ligne. Ce que nous pouvons faire, c'est que nous pouvons appliquer ces trois propriétés que j'ai déjà mentionnées. Bon, donc nous cherchons le paragraphe, il est là. Je peux en fait ajouter une classe. Il s'agit du paragraphe sous la liste numérotée. Je cherche la liste numérotée. Ici, nous avons le paragraphe, je vais le titre tronquer. J' ajoute ces trois propriétés. Pour le faire fonctionner, c'est débordement : caché : débordement de texte : ellipse ; et le dernier est, blanc-espace : nowrap ; Je l'enregistre. Rafraîchir mon site Web, et ce que je peux voir, c'est que mon paragraphe entier est raccourci à une seule ligne, et cette ligne est terminée par une ellipse. Si je commande, une des propriétés, vous verrez que cela ne fonctionne pas comme prévu. Sans ellipse de débordement de texte, nous n'avons pas d'ellipse à la fin. Sans espace blanc : nowrap ; Malheureusement, le texte n'est pas tronqué. Le débordement fonctionne, mais que se passe-t-il si nous ajoutons un espace blanc : nowrap ; et un débordement de texte : ellipse ? Eh bien, en fait, tout le paragraphe est quelque part ici. Mais parce que nous n'avons pas de débordement : caché ; le reste du texte qui n'est pas tronqué, est toujours affiché. Merci au débordement : caché ; nous n'avons qu'une seule ligne et il se termine par des ellipses. Merci au débordement de texte : ellipse. Nous pouvons jouer avec elle et l'adapter à vos besoins. 14. Astuce #12 - Texte dégradé: Truc numéro 12, dégradés de texte. Imaginons que nous aimerions appliquer un gradient à cette rubrique. Restez en contact. La question est, peut-on réellement appliquer des arrière-plans dégradés pour les détectes ? Oui, on peut. On peut le faire. Merci à certaines propriétés CSS que nous avons. Jetons un coup d'oeil dans le code. Nous attendons avec impatience la direction du contact. Oui, exactement celle-là. La première chose que nous devons ajouter est l'arrière-plan. Arrière-plan qui sera coupé à notre texte. Je voudrais appliquer un gradient radial et j'ai déjà ma feuille de triche. Deux couleurs, rose et jaune que je voudrais utiliser. Nous avons la couleur d'arrière-plan, puis la couleur d'arrière-plan doit être masquée par rapport à la forme du texte. Le reste doit être coupé de sorte que nous devons nous débarrasser des éléments inutiles du conteneur où se trouve le texte. Nous pouvons y parvenir en appliquant la propriété webkit, clip de fond webkit. C' est celui que nous devons avoir et nous appliquons des textes parce que nous voulons découper le texte. La dernière chose que nous devons appliquer, remplir la couleur et nous devons définir cela à un transparent. Nous avons webkit, texte, couleur de remplissage, et appliquer à transparent. Je rafraîchis la page et la magie arrive. J' ai un beau dégradé appliqué à mon texte. Si je sors, par exemple, la couleur de remplissage, vous verrez immédiatement que le dégradé ne fonctionne pas. Ce sont les propriétés cruciales que nous devons ajouter, et, bien sûr, nous pouvons ajouter webkit-texts-stroke, et que deux pixels noirs. C' est l'effet que nous aimerions obtenir en fin de compte. Je suis en train de copier cette ligne, de coller, et un beau texte dégradé apparaît. Bien sûr, vous pouvez jouer avec l'arrière-plan en appliquant le gradient linéaire. Vous pouvez jouer avec les couleurs. Vous pouvez ajouter d'autres d'entre eux. N' hésitez pas à faire ce que vous voulez avec les gradients. J' espère que vous allez vous amuser. 15. Astuce #13 - Sélection de texte croisé: Truc numéro 13 ; Sélection de texte croisé. Lorsque nous sélectionnons une partie, n'importe quelle partie du texte dans le navigateur, il montre la couleur bleue. C' est la couleur par défaut qui est générée dans chaque navigateur. Mais il y a des astuces de CSS qui nous aident à changer cela, à changer de couleur pour un navigateur différent. Nous sommes dans le fichier CSS dans notre exercice et créons une pseudo-classe qui est appelée sélection. Pour celui-ci, nous pouvons appliquer la couleur que nous aimons faire surligner notre texte. Donc, pour penser que j'applique simplement une couleur de fond et que je choisis la couleur jaune, je l'enregistre, rafraîchit mon site Web, et je peux voir que la sélection est jaune. Si je supprime cette pseudo-classe à la classe de sélection, vous verrez le bleu par défaut. Revenons donc à notre couleur jaune, et appliquons une couleur différente. Par exemple, pour Firefox, j'utilisais Chrome, mais passons à Firefox et avons une couleur différente pour Firefox. Donc, pour Firefox, nous devons ajouter pseudo-classe d'élément pseudo-pseudo-classe, mais avec le préfixe du fournisseur. Donc, j'ajoute moz pour Mozilla et la sélection. Appliquons la couleur de fond, le saumon. J' ouvre Firefox, qui était déjà préparé pour vous et si je sélectionne un texte, c'est de couleur saumon. Pour Chrome, c'est jaune. Donc, vous pouvez jouer avec, et je pense que c'est un joli petit effet qui a l'influence sur l'expérience utilisateur. N' hésitez pas à utiliser une sélection empilée, hésitez pas à la changer, n' hésitez pas à utiliser des arrière-plans différents. 16. Astuce #14 - Dégradé conique: Trick numéro 14, gradient conique. J' ai été super surpris quand j'ai trouvé que nous pouvons utiliser le CSS pur pour créer des graphiques à secteurs. Je pense que c'est super amusant parce que pour une visualisation simple, nous n'avons pas besoin de créer SVG ou nous n'avons pas besoin d'appliquer des bibliothèques JavaScript compliquées. C' est juste CSS et c'est juste une ligne de protection de code pour faire le site Web, je suis en train de lier ici en ce moment. Il décrit que l'ingrédient de coning est la fonction CSS qui crée une image composée d'un dégradé avec des transitions de couleur, tourné autour d'un point central plutôt que de rayonner à partir du centre. C' est pourquoi nous pouvons obtenir ce diagramme circulaire comme effet. Jetons un coup d'oeil à notre site web. Ce que vous pouvez voir est le graphique circulaire, qui est créé avec une seule ligne de CSS. Jetons un coup d'oeil comment il est construit. J' ai trois couleurs dans un graphique à secteurs. C' est le jeu de propriétés d'arrière-plan. Il définit à la valeur ingrédient conique. On a trois couleurs. Ce qui se passe ici, c'est qu'ils sont divisés en pourcentages. La première couleur, celle orange, prend 25 pour cent du cercle entier. Vous pouvez voir que c'est exactement un quart de quart. Ensuite, nous avons le bleu, qui prend 25-56 pour cent, ce qui est 31 pour cent. Celui-ci, et le dernier prend le reste. De 56-100, ce qui est de 34 pour cent. C' est ainsi que nous pouvons construire un gradient conique. Bien sûr, vous pouvez jouer avec différentes couleurs. Revenons à notre code lorsque vous cherchez un graphique à secteurs. C'est ici. Nous avons appliqué retour arrondi gradient conique. Ici, nous avons, par exemple, du saumon, du bleu et du jaune. Désolé de ne pas coller les couleurs appropriées, mais j'espère que vous les obtiendrez à partir du paquet. Saumon, disons de zéro pour cent à 30, de 30-50, et jaune de 50 pour cent à 100. Je le sauve, je rafraîchis la page. Ce que je vois, c'est presque le résultat que nous aimerions obtenir. Mais la chose est que nous avons également besoin d'appliquer rayon border-épaisseur le pourcentage pour atteindre le cercle. J' applique le rayon border-50 pour cent et j'ai le graphique. Je le colle en sauvegardant, et mon graphique est prêt. Bien sûr, vous pouvez changer les couleurs de la légende. Vous pouvez changer les couleurs pour jouer avec elle, son symbole, c'est amusant et je pense que vous pouvez également l'utiliser à des fins décoratives. 17. Astuce # 15 - Balises de rupture de mots: Truc numéro 15, balise de saut de mots. Bien que j'ai intitulé le cours 20 trucs CSS, je vais mentionner une balise HTML qui est une opportunité de pause de travail. Ce n'est pas très populaire, mais j'ai décidé de partager mes informations parce que je pense que cela pourrait être très pratique dans certaines situations. Alors jetons un coup d'oeil. Balise opportunité de pause de travail spécifie où dans un texte, il serait correct d'ajouter un saut de ligne. Il peut être utilisé dans les cas où un mot est trop long ou nous avons peur que le navigateur casse nos lignes au mauvais endroit. Dans la deuxième partie, vous verrez qu'il y a un numéro de téléphone et qu'en est-il de diviser ce texte en quelques parties ? Qu' en est-il de casser ce texte dans des endroits particuliers ? Par exemple, pour tous les cinq chiffres, tous les cinq caractères. Comment ce numéro de téléphone long se comportera si nous changeons la largeur du navigateur ? Voyons voir. Le nombre reste dans une ligne et en fait il a changé sa position, c'est maintenant à l'intérieur, mais se comporte toujours aussi plein que la ligne. Que faire si vous voulez le casser à plusieurs endroits sans ajouter d'espace supplémentaire, caractère supplémentaire. Nous pouvons utiliser la balise d'opportunité de pause de travail. Voyons donc notre HTML. Ceci est mon numéro de téléphone, span disrupt dans une balise span. Je peux ajouter une balise de pause de travail tous les quatre, cinq ou six caractères. Donc ici, nous pouvons donner le numéro pair, et tout notre numéro de téléphone sera rompu. J' économise, rafraîchissant et je vois que mon numéro de téléphone est maintenant cassé. Il commence à la première ligne et il apparaît également dans la seconde. Une de la partie de ce numéro. Vous pouvez donc voir que c'est la première, la deuxième partie, la troisième et la dernière. Ainsi, en rendant le navigateur de fenêtre plus petit, plus étroit, vous verrez que certaines parties du nombre changeront sa position par rapport à la balise d'opportunité de pause de travail. C' est le numéro de téléphone, nous pouvons le supprimer, et nous pouvons écrire ici, par exemple, un mot très long . Après chaque mot, nous pouvons ajouter balise de saut de mot. Il va donc diviser tout le texte en lignes que nous aimerions atteindre. Tellement noué autour d'eux. Nous avons un texte très long, soulignons cela. Je ne peux pas le voir. C' est donc le mot très long. Vous pouvez voir qu'il garde très longtemps. Donc ça ne se divise pas au milieu du mot et ici nous avons un autre mot très long. Bien que cela puisse sembler très niche tag, je pense qu'il y a certains cas que cela pourrait aider. 18. Astuce #16 - Points de balles personnalisés: Truc numéro 16 ; Points de puces personnalisés. Qu' en est-il de la création d'une liste qui n'est pas ordonnée, en utilisant la balise UL, mais ayant une puce personnalisée ? Nous pouvons également appliquer une image. Comment le faire ? Eh bien, jetons un coup d'oeil dans le code. Si je vérifie le code, je verrai que ma liste de codes de classe a des éléments de liste, et la chose très importante est de réinitialiser le style de liste, le définir sur none. Nous voulons avoir ces points noirs par défaut. La prochaine chose qu'il est appliqué ici est le pseud-élément. C' est la classe pseudo-élément avant. Il est appliqué à l'élément LI, l'élément de la liste. Pour le faire fonctionner, nous devons définir le contenu. Il peut être vide, mais il est très important d'avoir la propriété content. Ensuite, nous avons un certain positionnement lié à ce cercle jaune et un fond. Si je change la couleur d'arrière-plan, vous verrez directement le changement qui se produit ici. Bien sûr, nous pouvons avoir les carrés, nous pouvons changer la hauteur et la largeur de celui-ci. Nous pouvons jouer avec un certain positionnement, tout dépend de vous. Il y a aussi une chose magique que nous pouvons ajouter, et c'est ajouter l'arrière-plan au contenu. Il y a aussi une chose cool que nous pouvons réellement appliquer une image, à la pseudo-classe avant. Que faire si je voudrais ajouter une image ici ? Image avant chaque élément de la liste non ordonnée. Nous pouvons le faire en utilisant la propriété de contenu et nous définissons la valeur à URL. Au lieu d'avoir ce contenu vide, bien sûr, nous pouvons écrire quelque chose ici. Laissez-moi l'écrire encore une fois. Comme un, deux, trois, nous pouvons réellement fournir la fonction URL. La fonction qui a le chemin vers notre image, je me souviens que j'ai l'image appelée icône banane, et c'est un tag IMG. Donc, j'écris url (.. /img/banana-icon.png), et j'ai mon icône avec la banane prête. Bien sûr, je peux commander l'arrière-plan, ou peut-être que je peux le changer pour l'avoir en couleur rose. Je peux aussi mélanger l'arrière-plan. Je peux mélanger certaines dimensions avec le contenu, qui est en fait une image ici. Votre tâche est maintenant de créer une chose similaire. Je suis passé sur le site Web sur lequel nous travaillons actuellement, et si vous allez un peu plus bas, vous verrez qu'il y a une liste. Ce serait génial si nous pouvions y appliquer les styles. La chose que vous devez vous rappeler est que, nous devons d' abord réinitialiser le style de liste. Si j'y accède, nous avons la liste des classes UL. Pour cette LI, nous avons déjà le style de liste défini sur none, ce qui est très important. Ensuite, nous devons appliquer la pseudo-classe avant pour l'élément LI, et le très important est le contenu. Même si nous ne voulons pas appliquer une image ici, le contenu est très important pour que la pseudo-classe apparaisse réellement. Je vous laisse cette tâche. Si vous rencontrez des problèmes, vous pouvez revenir à la première seconde de la leçon et voir comment la pseudo-classe est créée. Si je passe à l'éditeur de code, vous verrez que j'ai déjà créé ce sélecteur pour vous, donc nous avons avant la pseudo-classe pour l'élément LI dans le conteneur qui a la classe de liste, et vous pouvez écrire ici tout ce que vous voulez obtenir le point à puce personnalisé. Veuillez vous souvenir de la propriété de contenu. 19. Astuce #17 - Ajustement de l'objet: Trick numéro 17, object-fit. Object-fit, propriété CSS, définit comment le contenu de img ou vidéo doit être redimensionné pour s'adapter à son conteneur. Nous avons différentes options, telles que couvrir, remplir et contenir. Jetons un coup d'oeil à des exemples pratiques. Dans cet exercice, nous allons limiter la hauteur du conteneur d'images. C' est le résultat final que nous aimerions obtenir. Si nous inspectons l'image, nous verrons qu'elle a en fait 600 pixels de largeur et 400 pixels de hauteur. Dans notre projet actuel, nous voyons que notre image est super longue en termes de hauteur. Ce que nous allons faire, c'est d'introduire des limites. J' ai l'object-fit de classe, je l'ai déjà créé pour vous. Ajoutons de la hauteur pour un 100 pixels. Malheureusement, l'image entière est de plus en plus petite, mais nous aimerions obtenir un résultat différent, celui que je vous ai déjà montré dans la mise en page précédente. Pour cela, nous pouvons également ajouter avec 100 pour cent, grâce à ce que notre image sera étirée. Mais je n'aime pas le fait qu'il change réellement sa proportion. Grâce à object-fit, nous pouvons définir comment l'image se comportera dans cette zone de limitation, le conteneur que nous avons mis sur la balise img. Nous pouvons choisir « contenir », sorte que l'image entière sera contenue dans ce conteneur, 600 par 400 pixels. Nous pouvons ajouter une couverture, sorte qu'elle sera étirée à la plus grande largeur que nous pouvons « remplir » de sorte, chaque pixel sera rempli par l'image, peu importe comment elle devrait être étirée. Nous ne pouvons définir aucun, sorte que l'image conservera sa taille naturelle. Choisissons « couverture » pour cela. Object-fit encore une fois, couvrir et c'est le résultat que nous aimerions atteindre. Je pense que object-fit est une grande propriété aussi en termes de design responsive, parfois nous avons des proportions vraiment étranges des images, et cela varie également en fonction de la résolution, que ce soit mobile ou bureau. Je vous recommande fortement de jouer avec. Je veux juste copier toutes ces propriétés que j'ai écrites. Je reviens à mon code et à la recherche d'object-fit de classe, qui est prêt pour vous, en collant ces lignes, donc la hauteur avec un object-fit. Rafraîchir le site et mon image semble vraiment agréable. 20. Astuce #18 - Comptage des colonnes: Truc numéro 18, nombre de colonnes. La propriété de nombre de colonnes casse le contenu de l'élément donné , par exemple, paragraphe en nombre spécifié de colonnes. Ainsi, le navigateur distribuera uniformément le contenu dans exactement le nombre que nous lui avons donné. Alors que faire si nous voulons avoir deux colonnes au lieu de ce bloc de texte, nous pouvons facilement le faire. Nous avons l'outro de classe, et ici nous pouvons appliquer les propriétés de comptage de colonnes et le définir à deux. Juste comme ça. Facile et simple. Bien sûr, vous pouvez augmenter le nombre. Nous pouvons revenir à la situation précédente où nous n'avons qu'une seule colonne. Il est donc très facile de manipuler le contenu du conteneur en utilisant le nombre de colonnes. Revenir à mon code à la recherche d'outro, coller le nombre de colonnes à enregistrer, rafraîchir et mon changement est prêt. 21. Astuce #19 - Combinateur de frères et sœurs adjacents: Trick numéro 19, combinateur frère adjacent. Le combinateur frère adjacent correspond au deuxième élément que s'il suit immédiatement le premier élément. Qui plus est, les deux sont des enfants du même élément parent. Que faire si je voudrais styler ce paragraphe et ajouter une marge supérieure plus grande et que la largeur soit limitée ? Je peux voir que ce paragraphe est les enfants de col-md-6, et c'est la balise suivante, le sélecteur suivant après la légende du graphique. Nous pouvons utiliser le combinateur frère adjacent. J' ai déjà préparé un sélecteur pour toi. Ce sélecteur sélectionne le paragraphe qui est immédiatement après la classe chart-legend. En d'autres termes, le paragraphe suit immédiatement la légende du graphique. Si je voudrais appliquer ici margin-top 20 pixels et max-width, disons, 300 pixels, je l'enregistre, actualise ma page, et je vois que ces styles sont appliqués et ces styles sont appliqués uniquement à ce paragraphe. Les autres paragraphes, comme par exemple celui-ci, ne sont pas affectés par notre sélecteur. Même si j'ajoute un autre paragraphe, nous pouvons changer son contenu, et ce paragraphe sera aussi les enfants du conteneur col-md-6. Voyons quelles tuiles l'affecteraient. Voyons comment notre site Web sera rendu et comment ressemblera ces deux paragraphes. Je rafraîchis la page. Si vous le comparez, vous verrez que seuls les premiers paragraphes juste après la légende du graphique auront les styles appliqués. Celui-ci aurait juste un sélecteur de p général que nous avons créé plus tôt. Nous pouvons dire que le combinateur frère adjacent fonctionne. Vous pouvez l'utiliser à diverses fins. Parfois, il est plus facile pour nous d'utiliser de tels sélecteurs plutôt que de créer des classes. Je pense que ça vaut la peine de jouer avec. 22. Astuce #20 - Combinateur général de frères et sœurs: Trick numéro 20, combinateur frère général. combinateur frère général sépare deux sélecteurs et ne correspond au deuxième élément que s'il suit le premier élément. Cependant, il n'est pas nécessaire que le deuxième élément soit le suiveur immédiat. Ces deux éléments devraient être les enfants du même élément parent. Donc, la même situation que pour le combinateur frère général. Que se passe-t-il si nous voulons appliquer un style, par exemple, hauteur de ligne pour tous les paragraphes qui suivent la légende du graphique, mais pas nécessairement immédiatement après la légende du graphique. Toutes les balises p, donc tous les paragraphes qui suivent la légende des graphiques afin celui-ci et celui-ci aient les styles appliqués. Ajoutons la hauteur de la ligne, 200 pour cent et si je rafraîchis la page, la première et la seconde auront la hauteur de la ligne 200 et les autres paragraphes auront 150. N' hésitez pas à utiliser le combinateur général pour vos besoins. 23. Mot de fin: Donc je vous laisse avec une étape actuelle du site. Si vous avez fait tous les exercices que j'expliquais, c'est l'étape que vous devriez avoir à ce stade. Donc, il y a des choses qui doivent encore être ajoutées si nous la comparons à la version finale, j'ai sur mon ordinateur, vous verrez que nous devons toujours travailler sur cette section où je l'applique plusieurs arrière-plans et de bien sûr, vous pouvez trouver toutes les images dans le paquet. Il y a aussi quelques styles sur le texte ici. Donc, nous devrions appliquer ici les images, nous devrions changer le trait de texte ici. Donc encore quelques devoirs pour toi. Si vous souhaitez comparer votre site Web à partir des exercices. Vous pouvez ouvrir le fichier PNG. Il y a dans le paquet, sorte que vous verrez tous les détails à fond. Bien sûr, vous êtes invité à expérimenter avec CSS que j'ai préparé pour vous. Vous pouvez modifier les valeurs. Vous pouvez utiliser les techniques créatives que je viens de vous montrer à des fins diverses. Bien sûr, vous êtes le bienvenu pour montrer ce que vous avez trouvé. Je suis très impatient de suivre vos progrès et de voir ce qui vous inspire. Veuillez poster vos œuvres dans la section de la communauté. En général, j'espère que vous vous êtes amusé et que vous êtes devenu plus familier avec les propriétés CSS.