Plusieurs conseils utiles sur les fonctions CSS-tutoriel CSS-php.cn

CSS fournit une description de style pour le langage de balisage HTML, définissant la manière dont les éléments qu'il contient sont affichés. CSS est une avancée majeure dans le domaine de la conception Web. Il peut être utilisé pour modifier un petit style afin de mettre à jour tous les éléments de page qui lui sont liés. Dans cet article, nous présenterons 8 conseils utiles sur les fonctions CSS.

1. Info-bulle CSS pure

De nombreux sites Web utilisent encore JavaScript pour créer des effets d'info-bulle, mais en fait, cela peut être réalisé plus simplement via CSS. Le moyen le plus simple consiste à ajouter un attribut avec le texte de l'info-bulle dans votre code HTML, tel que data-tooltip="…" . Ensuite, vous pouvez ajouter le code suivant à votre fichier CSS pour afficher le texte de l'info-bulle via la fonction attr() :

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

Assez simple, non ? Bien sûr, nous avons en fait besoin de plus de code pour ajouter des styles aux astuces, mais ne vous inquiétez pas, il existe des bibliothèques CSS puissantes et pures appelées Hint.css et Balloon.css conçues à cet effet.

2. Utilisez les attributs de données personnalisés et la fonction attr()

Nous avons appris à utiliser attr() pour créer des invites, et il existe également certains scénarios dans lesquels cette fonction peut être utilisée. En combinaison avec des attributs de données, vous pouvez créer des vignettes avec un titre et une description avec une simple ligne HTML :

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

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

Voici des exemples spécifiques :

Remarque : Cette méthode peut rencontrer des problèmes avec la prise en charge du navigateur. Pour un contenu spécifique, vous pouvez consulter l'article Prise en charge de l'accessibilité pour le contenu généré par CSS.

3. Compteurs CSS

Vous pouvez obtenir des fonctions impressionnantes grâce aux compteurs CSS. Ce n'est pas une propriété très connue, et la plupart des gens peuvent même penser que les navigateurs ne supportent pas bien cette propriété, mais en fait tous les navigateurs supportent cette propriété :

Mais vous ne devriez pas utiliser les compteurs CSS Utilisés sur les commandes lists

Les compteurs CSS sont également parfaits pour afficher des listes d'éléments qui peuvent être réorganisés par glisser-déposer. Modification dynamique des nombres sur :

Comme pour le dernier exemple, nous devons nous rappeler que le contenu généré via cette méthode peut présenter des problèmes d'accessibilité.

4. Effet givré obtenu par le filtre CSS

Dans iOS7, Apple a implémenté l'effet "verre dépoli" - des éléments translucides et flous qui semblent recouvrir une couche de verre dépoli. Inspiré par Apple, cet effet est utilisé dans de nombreux endroits. Recréer cet effet était un peu délicat avant l'avènement des filtres CSS. Vous devez obtenir cet effet de verre dépoli en utilisant Blur Image. Mais désormais, les filtres CSS sont pris en charge par presque tous les principaux navigateurs, il est donc beaucoup plus facile de reproduire cet effet.

À l'avenir, nous pourrons obtenir cet effet grâce aux filtres d'arrière-plan et aux fonctions filter(), mais actuellement, seul Safari prend en charge les deux fonctions.

Pour plus d'informations sur les filtres CSS, vous pouvez cliquer ici pour en savoir plus.

5. Utiliser des éléments HTML comme arrière-plan

Généralement, nous pouvons définir un fichier JPEG ou PNG comme arrière-plan, ou nous pouvons également définir un arrière-plan dégradé. Mais saviez-vous que vous pouvez définir un

comme image d'arrière-plan en utilisant la fonction element() ? Pour l'instant, la fonction element() n'est supportée que dans Firefox :

Les possibilités sont infinies, voici un exemple sur MDN.

Pour une introduction pertinente à la fonction CSS element(), vous pouvez cliquer ici.

6. Créez de meilleures grilles avec calc()

Les maillages fluides sont excellents mais présentent encore de sérieux problèmes. Par exemple, l’espacement en haut et en bas n’est presque jamais le même que l’espacement à gauche et à droite. De plus, si un système de grille différent est utilisé, le balisage sera très déroutant. Bien que la mise en page flexible ne soit pas la solution finale, en la combinant avec calc() (qui peut être utilisée comme valeur de propriété dans le fichier CSS), nous sommes en mesure de créer une meilleure grille. George Martsoukos énumère ici de nombreux exemples, comme une grille de galerie avec un espacement parfait. En utilisant un langage CSS précompilé tel que Sass, la création d'un système de grille créative peut être très simple et facile à maintenir. Dans le même temps, la prise en charge de calc() par le navigateur est presque parfaite, donc calc() est définitivement une fonction que vous devez maîtriser.

Pour une introduction à la fonction CSS calc(), vous pouvez cliquer ici.

7. Aligner la position : éléments fixes via calc()

Une autre fonction de calc() est d'aligner la position : éléments fixes. Par exemple, vous disposez d'un wrapper de contenu avec un espacement fluide à gauche et à droite. Vous souhaitez aligner avec précision les éléments avec une position fixe dans ce wrapper de contenu. Cependant, dans ce cas, il est très difficile de calculer l'affectation spécifique de la gauche. et les bons attributs. Avec calc(), vous pouvez combiner des valeurs relatives et absolues pour positionner précisément vos éléments :

.wrapper { max-width: 1060px; margin: 0 auto;
}.floating-bubble { position :fixed; right: calc(50% - 530px); /* 50% - la moitié de la largeur de votre wrapper */}

Par exemple :

Vous pouvez avoir une introduction détaillée sur cet aspect Lisez l'article "Alignement de la position : éléments fixes avec CSS calc" de @brnnbrn.

8. Utilisez cubique-bezier() pour implémenter une animation

Afin de rendre l'interface utilisateur d'un site Web ou d'une application plus attrayante, vous pouvez utiliser certaines animations, mais vous pouvez choisir la vitesse de l'effet de transition Les courbes sont assez limitées, comme linéaires ou faciles à entrer. La courbe de vitesse standard ne peut même pas obtenir l'effet d'un mouvement élastique. En utilisant la fonction cubique-bezier(), vous pouvez réaliser exactement l'animation souhaitée.

Il existe deux façons d'utiliser cubique-bezier() : comprendre le mécanisme qui se cache derrière et créer-le vous-même, ou utiliser le générateur cubique-bezier.

Pour être honnête, j'utilise ce dernier.

Pour une introduction détaillée à cubique-bezier(), veuillez cliquer ici.

Résumé

Utiliser les fonctions CSS de manière plus intelligente peut non seulement résoudre les problèmes ci-dessus, tels que la création d'une meilleure grille, mais peut également vous donner plus de liberté de création. À mesure que la prise en charge du navigateur s'améliore, vous pouvez utiliser des fonctions CSS telles que calc() pour modifier et améliorer votre code CSS précédent.

Cet article est traduit sur la base des "8 astuces intelligentes avec des fonctions CSS" de @Anselm Urban. La traduction entière contient notre propre compréhension et nos propres réflexions. Si la traduction n'est pas bonne ou s'il y a quelque chose qui ne va pas, veuillez demander à vos amis. l'industrie pour obtenir des conseils. Si vous souhaitez réimprimer cette traduction, veuillez indiquer la source anglaise : https://www.sitepoint.com/8-clever-tricks-with-css-functions.

Ci-dessus sont 8 conseils sur les fonctions CSS. Les amis qui pensent qu'ils sont bons devraient les récupérer rapidement.

Recommandations associées :

Fonction CSS Jquery pour manipuler dynamiquement le style des nœuds DOM

Conseils CSS3 pour dessiner divers graphiques de base

Les compétences de développement CSS les plus complètes

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!