8 astuces intelligentes avec les fonctions CSS

La puissance du CSS est bien au-delà de l'imagination de nombreux développeurs Web. Au fil du temps, la langue de feuille de style est devenue de plus en plus puissante, apportant des fonctions au navigateur qui nécessitaient à l'origine JavaScript. Cet article présentera huit conseils de fonction CSS intelligents qui ne nécessitent aucun javascript.

Points clés

Les fonctions
• CSS peuvent être utilisées pour créer divers effets et fonctions tels que les infractions, les titres de vignettes, les comptoirs et les effets en verre givrés sans JavaScript.
Les fonctions
• calc() peuvent être utilisées pour créer des systèmes de grille plus intelligents et l'alignement des éléments de position fixe, offrant une plus grande flexibilité et précision dans la conception.
La fonction
• CSS permet également des animations créatives à l'aide de la fonction cubic-bezier(), ainsi que le potentiel d'utiliser des éléments HTML comme images d'arrière-plan en utilisant la fonction element(), bien que ce dernier ne soit actuellement pris en charge que par Firefox.

1. purs info-bulleurs CSS

   De nombreux sites Web utilisent toujours JavaScript pour créer des info-bulleurs, mais en fait, il est plus facile d'utiliser CSS. La solution la plus simple consiste à utiliser les propriétés de données dans le code HTML pour fournir du texte d'info-bulle, tel que data-tooltip="…". Avec cette balise, vous pouvez mettre ce qui suit dans CSS pour afficher le texte de l'info-bulle dans la fonction attr():

   .tooltip::after {
     content: attr(data-tooltip);
   }

   C'est très simple et clair, non? Bien sûr, plus de code est nécessaire pour styliser réellement les info-bulleurs, mais ne vous inquiétez pas, il existe une grande bibliothèque CSS pure spécifiquement à cet effet appelé hint.css.

2. (abus) Attributs de données personnalisés et fonction ATR ()

   Nous avons utilisé attr() pour les info-bulleurs, mais il a d'autres cas d'utilisation. En combinant les propriétés de données, vous pouvez créer des images miniatures avec des titres et des descriptions en utilisant une seule ligne de code HTML:

   <a class="caption" href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b" data-title="秃鹫" data-description="...">
     <img src="/static/imghwm/default1.png"  data-src="https://img.php.cn/upload/article/000/000/000/174011191897662.jpg?x-oss-process=image/resize,p_40"  class="lazy" alt="8 Clever Tricks with CSS Functions " />
   </a>

   Vous pouvez maintenant utiliser la fonction attr() pour afficher le titre et la description:

   .caption::after {
     content: attr(data-title);
     ...
   }

   Ceci est un exemple de travail d'une miniature avec un titre d'animation d'affichage de survol: [Codepen Exemple lien] (en supposant que le lien Codepen doit être inséré ici)

   Remarque: Le contenu généré peut avoir des problèmes d'accessibilité. Cet article sur la prise en charge de l'accessibilité pour le contenu généré CSS fournit une interprétation utile de ce sujet.

COMPTERS CSS

3. Vous pouvez utiliser des compteurs CSS, ce qui semble être de la magie. Ce n'est pas la fonctionnalité la plus connue, et la plupart des gens peuvent penser qu'il ne le soutient pas très bien, mais en fait, chaque navigateur prend en charge les compteurs CSS: [Puis-je utiliser CSS-Counters?] (En supposant que puis-je utiliser devrait être inséré ici lien)

   Bien que vous ne devriez pas utiliser les compteurs CSS pour les listes ordonnées (<ol></ol>), les compteurs sont parfaits pour la pagination ou afficher des numéros sous des articles dans la galerie. Vous pouvez également compter le nombre d'éléments sélectionnés, ce qui est très impressionnant étant donné que vous avez besoin de très peu de code (et pas de javascript): [Exemple de lien de codepen] (en supposant que le lien Codepen doit être inséré ici).

   Les compteurs CSS sont également excellents pour changer dynamiquement les nombres dans la liste des projets, qui peuvent être réorganisés par glisser-déposer: [Codepen Exemple lien] (en supposant que le lien Codepen doit être inséré ici).

   Comme avec le dernier exemple, n'oubliez pas que le contenu généré peut avoir des problèmes d'accessibilité.

4. Utilisez des filtres CSS pour obtenir l'effet de verre givré

   Avec la libération d'iOS 7, Apple nous apporte un effet de «verre givré» - des éléments flous et transparents qui ressemblent à des fenêtres en verre givré. Inspiré par la mise en œuvre d'Apple, cet effet a commencé à apparaître dans de nombreux endroits. La reproduction de cet effet est un peu délicate avant d'avoir un filtre CSS, vous devez utiliser une image floue pour créer un effet en verre givré. Maintenant, presque tous les principaux navigateurs prennent entièrement en charge les filtres CSS, il est donc beaucoup plus facile de reproduire cet effet. [Puis-je utiliser CSS-filtres?] (En supposant que puis-je utiliser le lien doit être inséré ici)

   À l'avenir, nous pouvons utiliser les fonctions

   et

   pour créer des effets similaires, mais ces deux fonctions ne sont actuellement prises en charge que par Safari. backdrop-filter filter()

5. Utilisez des éléments HTML comme image d'arrière-plan

   Habituellement, vous spécifiez un fichier JPEG ou PNG comme image d'arrière-plan, ou peut-être un dégradé. Mais saviez-vous qu'à l'aide de la fonction

   , vous pouvez également utiliser

   comme image d'arrière-plan? Actuellement, la fonction element() est uniquement prise en charge par Firefox: [puis-je utiliser la fonction CSS-Element?] (En supposant que le lien puis-je utiliser doit être inséré ici) <div> <code>element() Les possibilités sont presque illimitées, voici un exemple de MDN.

6. Créez des grilles plus intelligentes avec calc ()

   Le maillage fluide est une grande chose, mais il y a des problèmes graves. Par exemple, il n'est pas possible de faire l'espacement entre le haut et le bas de la même taille que l'espacement entre la gauche et la droite. De plus, le marquage est très déroutant, selon le système de grille que vous utilisez. Même Flexbox lui-même n'est pas la solution finale, mais en utilisant la fonction

   (qui peut être utilisée comme valeur en CSS), la grille peut s'améliorer. Dans ce tutoriel sur ce site, George Martsoukos montre quelques exemples pratiques, comme une grille de galerie avec un espacement parfait. En utilisant des préprocesseurs CSS comme SASS, la construction de systèmes de maillage créatif peut être très simple et facile à entretenir. Étant donné que la prise en charge du navigateur est presque parfaite,

   est une fonctionnalité pratique que vous devriez certainement utiliser. [Puis-je utiliser Calc?] (En supposant que puis-je utiliser le lien doit être inséré ici) calc() calc()

7. Utilisez CSS calc () pour aligner la position: éléments fixes

   Un autre cas d'utilisation pour une fonction consiste à aligner les éléments avec des positions fixes. Par exemple, si vous avez un wrapper de contenu à gauche et à droite avec un espacement des fluides, et que vous souhaitez aligner précisément les éléments fixes à l'intérieur de ce wrapper - vous aurez du mal à déterminer la sélection d'attribut "droite" ou "gauche" quelle valeur ? Avec

   , vous pouvez combiner des valeurs relatives et absolues pour aligner parfaitement les éléments: calc() calc()

   Ceci est un exemple: [Codepen Exemple lien] (en supposant que le lien Codepen doit être inséré ici)

   .tooltip::after {
     content: attr(data-tooltip);
   }

8. Animer avec cubic-bezier ()

   Pour rendre l'interface utilisateur d'un site Web ou d'une application plus attrayante, vous pouvez utiliser des animations, mais les options d'assouplissement standard sont très limitées. Par exemple, "linéaire" ou "facilité de sortie". Quelque chose comme un rebond d'animation n'est pas possible même avec des options standard. En utilisant la fonction

   , vous pouvez animer les éléments exactement comme vous le souhaitez.

   cubic-bezier() Il existe deux façons d'utiliser

   - comprendre les mathématiques derrière elle et la construire vous-même, ou utiliser le générateur

   . cubic-bezier() cubic-bezier Honnêtement, je choisirai ce dernier.

Conclusion

L'utilisation habile des fonctions CSS résout non seulement des problèmes connus (comme la construction d'un système de grille plus intelligent), mais vous offre également une plus grande liberté créative. À mesure que le support du navigateur s'améliore, vous devez soigneusement regarder votre CSS et l'améliorer à l'aide de fonctions comme

.

calc()

Des questions fréquemment posées sur les fonctions CSS

En tant que débutant, quelles fonctions CSS de base dois-je comprendre?

La fonction

CSS est utilisée pour définir la valeur de l'attribut CSS. Certaines fonctions de base que chaque débutant devraient connaître comprennent

,

, rgb(), rgba(), hsl() et hsla(). Les fonctions calc() et rgb() sont utilisées pour définir les couleurs, tandis que les fonctions rgba() et hsl() sont utilisées pour définir des couleurs en fonction de la teinte, de la saturation et de la luminosité. La fonction hsla() vous permet d'effectuer des calculs pour déterminer la valeur d'attribut CSS. calc()

Comment utiliser la fonction calc () dans CSS?

La fonction

dans

dans CSS est utilisée pour effectuer des calculs qui peuvent être utilisés comme valeurs d'attribut. Cette fonction peut utiliser le "" (addition), "-" (soustraction), "*" (multiple) et "/" (division) Opérateurs mathématiques. Par exemple, vous pouvez utiliser calc() pour créer une div qui moins 20 pixels pour la largeur de la fenêtre 50% comme indiqué ci-dessous: calc(). div { width: calc(50% – 20px); }

Quelle est la différence entre les fonctions RGB () et RGBA () dans CSS?

La principale différence entre les fonctions

et

dans rgb() CSS est que rgba() contient un canal alpha qui spécifie l'opacité de la couleur. Le paramètre alpha est un nombre entre 0,0 (entièrement transparent) et 1,0 (entièrement opaque). Par exemple, pour définir le rouge translucide, vous pouvez utiliser: rgba(). color: rgba(255, 0, 0, 0.5);

Comment créer des gradients à l'aide des fonctions CSS?

Les fonctions

CSS peuvent être utilisées pour créer des gradients à l'aide des fonctions linear-gradient() et radial-gradient(). Par exemple, pour créer un gradient linéaire du rouge au bleu, vous pouvez utiliser: background: linear-gradient(red, blue);. De même, pour créer un gradient radial du rouge central au bord du bleu, vous pouvez utiliser: background: radial-gradient(red, blue);.

Puis-je convertir des éléments en utilisant les fonctions CSS?

Oui, les fonctions CSS peuvent être utilisées pour convertir des éléments. L'attribut transform peut être utilisé avec diverses fonctions telles que rotate(), scale(), skew() et translate() pour modifier l'apparence d'un élément. Par exemple, pour faire pivoter un élément de 45 degrés, vous pouvez utiliser: transform: rotate(45deg);.

Quel est le but de la fonction ATR () dans CSS?

La fonction

dans attr() dans CSS est utilisée pour renvoyer la valeur d'attribut de l'élément sélectionné. Ceci est utile pour générer du contenu, etc. Par exemple, vous pouvez utiliser attr() pour afficher la valeur de la propriété "HREF" du lien dans l'info-bulle: a:after { content: attr(href); }.

Comment utiliser la fonction var () dans CSS?

La fonction var() dans CSS est utilisée pour insérer la valeur d'une propriété personnalisée (également appelée "variable CSS". Par exemple, vous pouvez définir une propriété personnalisée --main-color: blue; puis l'utiliser dans CSS comme suit: color: var(--main-color);.

Puis-je créer des animations à l'aide de fonctions CSS?

Oui, les fonctions CSS peuvent être utilisées pour créer des animations. L'attribut animation dans CSS est un attribut abrégé pour huit attributs différents, y compris animation-name, animation-duration, animation-timing-function, etc. Par exemple, pour créer une animation de 2 secondes appelée "Slidein", vous pouvez utiliser: animation: slidein 2s;.

Quel est le but de la fonction

url () dans CSS?

La fonction

dans url() dans CSS est utilisée pour inclure des fichiers. L'utilisation la plus courante des fonctions consiste à relier à des feuilles de styles externes ou à inclure des images. Par exemple, pour définir l'image d'arrière-plan d'un élément, vous pouvez utiliser: url(). background-image: url('image.jpg');

Puis-je créer des transformations 3D à l'aide de fonctions CSS?
Oui, la fonction CSS peut être utilisée pour créer des transformations 3D. L'attribut

dans CSS peut être utilisé avec des fonctions telles que transform, rotateX(), rotateY(), rotateZ(), scale3d() et translate3d() pour créer des transformations 3D. Par exemple, pour faire pivoter un élément autour de l'axe des x, vous pouvez utiliser: transform: rotateX(45deg);.

Veuillez noter que j'ai fait de mon mieux pour pseudo-originalité le texte d'origine et préserver le format et l'emplacement d'origine de l'image. Comme je ne peux pas accéder au codepen et puis-je utiliser des sites Web, j'ai remplacé le lien connexe avec les espaces réservés. Veuillez trouver et insérer le bon lien vous-même.