Contenu
- 01. Faire correspondre les images aux jeux de couleurs du site
- 02. Partager uniformément l'espace dans la dernière ligne d'une grille
- 03. Créer des animations de particules avec box-shadow
- 04. Animer des polyèdres avec des transformations
- 05. Master ’calc ()’ pour le positionnement
- 06. Rendre le modèle de boîte sensé avec le ’dimensionnement de la boîte’
- 07. Centrer verticalement avec CSS
- 08. Cibler une banque d'objets associés
- 09. Contrôle de la césure
- 10. Tirez parti des modes d'écriture
- 11. Utilisez des dégradés de manière inhabituelle
- 12. Utiliser la correspondance de chaînes sur les liens
- 13.Faire travailler FOUT pour vous
- 14. Explorez SVG pour les arrière-plans
- 15. Focalisez les utilisateurs avec des transitions 3D
- 16. Créez des menus circulaires avec CSS et mathématiques
- 17. Animer des liens au survol
- 18. Créez des animations d'images clés simples
- 19. Créez des effets 3D flottants avec des ombres
- 20. Mettez à jour les éléments de la page à l'aide de ": target"
- 21. Fournissez des commentaires avec des animations subtiles
- 22. Préparez-vous à "animera"
- 23. Humaniser les champs de saisie
- 24. Pause et lecture des animations CSS
- 25. N'utilisez pas de variables CSS
À un moment donné, quelle que soit la technologie, on a le sentiment qu’à peu près tout ce qui peut être fait a été fait. Quand quelque chose n'est plus aussi nouveau et brillant, l'intérêt diminue et l'attention est attirée sur la prochaine grande chose. Cela a souvent été le cas dans l'industrie du Web, qui a tendance à être terriblement excitée par un certain aspect de la technologie avant, tôt ou tard, de la reléguer au banal.
Lorsque CSS est apparu pour la première fois, il était révolutionnaire et, au fil du temps, il a évolué pour permettre aux concepteurs de créer des mises en page de pages Web flexibles, bien conçues et belles. Récemment, cependant, il y a eu la suggestion de divers milieux que CSS est fatigué et peut-être que son temps au soleil est passé.
Je veux montrer qu'il y a encore beaucoup d'enthousiasme et de vie dans le monde du CSS, que ce soit dans des propriétés de pointe que vous n'avez peut-être pas encore explorées, ou en utilisant un aspect du CSS d'une manière que vous n'aviez pas envisagée auparavant.
Voici quelques conseils de certains des meilleurs experts CSS du secteur.
(Remarque: certaines techniques de cette fonctionnalité sont de pointe et peuvent ne pas être entièrement prises en charge par tous les navigateurs. Testez et assurez-vous que les solutions de secours sont en place avant de lancer tout travail.)
01. Faire correspondre les images aux jeux de couleurs du site
Christopher Schmitt, organisateur de la conférence
Les conférences ont leurs propres couleurs et, avec de nombreux orateurs, le flux de travail pour la gestion des portraits peut être complexe. L'application manuelle de filtres n'est pas mise à l'échelle et dépend de votre accès, par exemple, à une action Photoshop spécifique. J'utilise maintenant des PNG en niveaux de gris haute résolution et j'ajoute des tons à l'aide de filtres CSS. Cela me permet de faire correspondre n'importe quel portrait au schéma d'un événement et de réutiliser des images sur plusieurs thèmes. J'ai juste besoin d'une nouvelle règle CSS pour chacun. Voir une démo.
02. Partager uniformément l'espace dans la dernière ligne d'une grille
Stephen Hay, designer et auteur
Si vous avez un nombre inconnu d’éléments à afficher dans une grille, vous pouvez utiliser Flexbox pour diviser la dernière ligne de manière égale. Donc, s'il n'y a qu'un seul élément, il occupera toute la ligne; s'il y a deux éléments, la ligne sera divisée en deux, et ainsi de suite. Voir une démo.
03. Créer des animations de particules avec box-shadow
Ana Tudor, codeuse et passionnée de mathématiques
En mélangeant boîte ombre avec quelques maths et Sass, vous pouvez tracer des courbes 2D, émuler des mouvements 3D et créer des animations de particules folles que tout le monde va confondre avec celles de toile! Voir une démo et une autre.
04. Animer des polyèdres avec des transformations
Ana Tudor, codeuse et passionnée de mathématiques
Vous avez probablement vu des polygones CSS purs créés avec des bordures, mais nous avons un outil beaucoup plus puissant dans le transformer propriété. Le chaînage et l'application de transformations sur des éléments imbriqués nous permettent de créer des polygones complexes avec des arrière-plans ou des bordures d'image et des intérieurs transparents. En utilisant des transformations 3D, nous pouvons combiner ces formes 2D en polyèdres et faire fusionner, déplier, exploser ou se recombiner les solides d'une manière facilement confondue avec WebGL. Voir une démo.
05. Master ’calc ()’ pour le positionnement
Ana Tudor, codeuse et passionnée de mathématiques
j'ai aimé calc () à partir du moment où je l'ai découvert. Il est utile pour apprivoiser les marges, le remplissage ou les dimensions, et peut être une bouée de sauvetage lorsqu'il est utilisé pour positionner ou dimensionner des arrière-plans, à l'intérieur de dégradés ou de transformations, et combiné non seulement avec les mêmes anciennes unités, mais aussi avec les nouvelles et intéressantes de la fenêtre.
06. Rendre le modèle de boîte sensé avec le ’dimensionnement de la boîte’
Sawyer Hollenshead, développeur et designer Oak Studios
Utiliser boîte-dimensionnement pour sauver votre santé mentale. Sans cela, un élément avec une largeur définie de 250 pixels et 25 pixels de remplissage se combine à une largeur de 300 pixels, ce qui rend le mélange de pixels et de pourcentages difficile. Avec dimensionnement de la boîte:bordure-boîte les bordures et le remplissage sont à la place placés dans la largeur définie.
07. Centrer verticalement avec CSS
Trent Walton, fondateur de Paravel
Historiquement, il était difficile de centrer verticalement quelque chose avec CSS, par exemple si vous avez une image avec du texte adjacent que vous souhaitez aligner verticalement. Au lieu de piétiner et de maudire, utilisez Flexbox pour gérer les problèmes d'alignement. Voir une démo.
08. Cibler une banque d'objets associés
Jonathan Smiley, partenaire de Zurb et responsable de la conception
Réduisez l'épaisseur des lignes CSS en utilisant des sélecteurs d'attributs approximatifs sur les noms de classe, pour cibler une grande banque d'objets associés, plutôt que d'attacher des attributs communs à chaque classe. Par exemple ... [class * = "- block-grid-"] {} ... ciblerait les goûts suivants: .small-block-grid-3 .large-block-grid-5
09. Contrôle de la césure
Savid Storey, défenseur du Web ouvert
La césure est prise pour acquise dans l'impression, et certains développeurs utilisent le traits d'union propriété en ligne, mais rares sont ceux qui connaissent d'autres propriétés qui offrent un contrôle plus précis. Si vous ne faites pas attention, vous obtenez des échelles de césure où les tirets sont utilisés sur plusieurs lignes. En règle générale, il n'y en a pas plus de deux d'affilée, que vous pouvez contrôler à l'aide de lignes de limite de trait d'union. Aussi, traits d'union-limite-caractères vous permet de spécifier la longueur minimale d'un mot qui sera coupé, ainsi que le nombre minimal de caractères avant et après la coupure du trait d'union.
10. Tirez parti des modes d'écriture
David Storey, défenseur du Web ouvert
Les modes d'écriture vous permettent de définir la direction dans laquelle le texte s'écoule. Certains textes d'Asie de l'Est sont écrits verticalement, les lignes croissantes de droite à gauche, spécifiées par écriture-mode: vertical-rl (tb-rl dans IE). Le texte vertical n’est pas vraiment utilisé dans les systèmes d’écriture européens, mais il peut être utile pour les en-têtes de tableaux lorsque l’espace horizontal est limité.
11. Utilisez des dégradés de manière inhabituelle
Ruth John, designer
Les dégradés d'arrière-plan peuvent avoir fière allure lorsqu'ils sont utilisés avec des bordures et des puces. J'utilise à la fois sur mon blog et avec un préprocesseur pouvant appeler un mixin avec le code réutilisé, afin de ne pas le répéter manuellement. Ne devenez pas supercrazy car les dégradés peuvent être lourds pour le processeur. Mixin SCSS pour les puces de liste:
@mixin gradedBullet ($ color) {background-image: linear-gradient (left, lighten ($ color, 15%) 10px, $ color 11px, $ color 20px, darken ($ color, 15%) 21px, darken ($ color , 15%) 30px, transparent 31px); }
12. Utiliser la correspondance de chaînes sur les liens
Ruth John, designer
Sur mon blog, j'ai utilisé des sélecteurs d'attributs CSS avec une correspondance de chaîne pour styliser les icônes sociales. Celles-ci apparaissent tout au long de mon blog, parfois avec du texte et parfois sans, mais toujours avec une icône. Pour styliser le bon lien avec l'icône sociale correcte, j'utilise une correspondance de chaîne sur le href attribut de l'élément d'ancrage. j'utilise *= alors le href sur l'élément d'ancrage ne doit contenir que la chaîne que je spécifie.
/ * pour tous les liens sociaux * / .social a: before {display: inline-block; padding-right: 30px; font-family: 'FontAwesome';} / * Chaque lien spécifique * / .social a [href * = "twitter"]: before {content: " f099"; color: # 52ae9f;} .social a [href * = "github"]: avant {contenu: " f09b"; color: # 5f2e44;} .social a [href * = "feed"]: before {content: " f09e"; couleur: # b47742;}
13.Faire travailler FOUT pour vous
Jason Pamental, directeur chez H + W design
Le Web est construit sur le principe qu'il doit fournir du contenu, même si le navigateur ne peut pas rendre le bling. Les polices Web à chargement lent peuvent être frustrantes, FOUT (Flash Of Unstyled Text) gênant lorsque la navigation et le texte se reflètent pendant le téléchargement des polices. Google et Typekit apportent une réponse: le chargeur de polices Web. En injectant des classes dans une page, en fonction de l'état de chargement des polices, vous pouvez styliser les solutions de secours avec ces classes pour réduire au minimum la redistribution, éliminant également le syndrome du «contenu invisible» de WebKit. Voir une démo.
14. Explorez SVG pour les arrière-plans
Emil Björklund, développeur web inUse
Les seuls navigateurs qui ne prennent actuellement pas en charge SVG sont IE8 et versions antérieures et Android 2 WebKit.Il est donc possible d'utiliser SVG pour les arrière-plans en CSS, en particulier avec une solution de secours PNG, telle que Grunticon. SVG peut être stylisé par CSS, et il y a un aperçu intéressant des propriétés CSS (filtres!) De SVG avec lesquelles nous pouvons jouer comme appliqué au HTML.
15. Focalisez les utilisateurs avec des transitions 3D
Emil Björklund, développeur web inUse
Utilisation des transformations 3D et utilisation des dimension z dans les interfaces utilisateur peut être vraiment utile, notamment pour masquer / afficher ou réduire / étendre le contenu. Il est également assez facile d’avoir un retour à une transition 2D, ou aucune transition du tout, dans ces situations. C’est un domaine dans lequel une petite amélioration progressive peut aller très loin.
16. Créez des menus circulaires avec CSS et mathématiques
Sara Soueidan, développeur frontend
Les menus circulaires sont populaires dans les applications mobiles et vous pouvez utiliser des transitions et des transitions CSS pour créer un menu circulaire simple. Ce menu peut être modifié et personnalisé pour créer également un menu ouvrant vers le haut ou vers le bas. Il n’existe pas de moyen direct en CSS de traduire un élément en diagonale, mais vous pouvez utiliser la valeur du rayon du cercle sur lequel vous souhaitez positionner les éléments et appliquer une règle mathématique simple pour calculer les valeurs de translation horizontale et verticale à transmettre au translateX () et translateY () les fonctions. De cette façon, vous vous retrouvez avec un diagonale translation pour déplacer les éléments de menu vers les positions correctes sur le cercle. L'événement de clic qui ferme / ouvre le menu peut être géré à l'aide de JavaScript, ou vous pouvez aller plus loin et avoir un menu CSS uniquement en utilisant un hack de case à cocher CSS. Dans ma démo, j'utilise JavaScript et l'API classList HTML5, qui n'est pas prise en charge dans tous les navigateurs, vous devrez donc afficher la démo dans un navigateur moderne pour la faire fonctionner, ou décommenter le code jQuery au lieu d'utiliser l'API classList code.
Voir une démo et un didacticiel complet. Exemple de hack CSS Checkbox.
17. Animer des liens au survol
Paul Lloyd, concepteur d'interactions The Guardian
Il ne faut pas se fier aux états de survol pour faire fonctionner une action ou fournir des informations importantes, mais vous pouvez toujours améliorer les interfaces pour les utilisateurs utilisant la souris. Sur 24ways.org, nous révélons les titres des articles lorsque vous survolez les liens dans la navigation précédente / suivante. Ceci a été réalisé en créant un ::après pseudo-élément contenant du contenu généré provenant de la valeur d'un Les données- attribut, avec une transition CSS appliquée pour le faire glisser dans la vue au survol. Voir une démo.
18. Créez des animations d'images clés simples
Paul Lloyd, concepteur d'interactions The Guardian
Sur 24ways.org, nous avons ajouté des volets d'angle animés aux résumés, qui s'ouvraient au survol. Cela a été fait en combinant les @keyframes règle avec la propriété animation, modifiant la position d'une image d'arrière-plan pour obtenir une animation basée sur un sprite. L'astuce consiste à déclarer le nombre d'images que vous avez dans votre sprite d'animation avec le pas() valeur. Voir une démo.
19. Créez des effets 3D flottants avec des ombres
Catherine Farman, développeur Happy Cog
Un projet récent nécessitait une photo de produit flottante avec une ombre ronde en dessous, créant un effet 3D de sortie de l'écran. L'ombre utilise plusieurs fonctionnalités CSS3: rayon de la frontière transparence alpha et boîte ombre. Cela fonctionne bien pour les grilles de produits, les images de présentation dans un héros de page d'accueil ou tout design fantaisiste avec une courbure skeuomorphique. Voir une démo.
20. Mettez à jour les éléments de la page à l'aide de ": target"
Simon Madine, développeur web senior HeRe
CSS n'est pas un langage de programmation au sens habituel du terme, mais vous pouvez toujours faire des choses intelligentes sans revenir à JavaScript. Par exemple, le :cible La pseudo-classe est appliquée aux éléments qui sont la cible d'un lien cliqué.
Vous pouvez l'utiliser pour définir l'état d'une page, cibler un parent contenant de nombreux éléments, et vos liens deviennent un moyen de contrôler l'apparence et la mise en page de tous les enfants en un seul clic. Voir une démo.
21. Fournissez des commentaires avec des animations subtiles
Neil Renicker, concepteur et développeur
Pseudo-éléments CSS ::avant que et ::après avec les transitions CSS, peut permettre une animation délicieuse qui fournit des commentaires subtils aux utilisateurs de la souris. Par exemple, créez une flèche CSS dans un pseudo-élément, appliquez une transition au pseudo-élément (transition: tous les .15s de facilité d'entrée-sortie;), puis ajoutez une simple modification de mise en page au :flotter pseudo-classe (telle que la modification margin-top). Voir une démo.
22. Préparez-vous à "animera"
Paul Lewis, codeur et membre de l'équipe des relations avec les développeurs Chrome
Si vous avez utilisé -webkit-transform: translateZ (0) pour rendre vos pages plus rapides comme par magie, le hack, qui dans de nombreux navigateurs crée simplement une nouvelle couche de composition, est remplacé par animera. Bientôt, vous serez en mesure d'indiquer au navigateur ce que vous prévoyez de modifier à propos d'un élément (sa position, sa taille, son contenu ou sa position de défilement) et le navigateur appliquera la bonne optimisation sous le capot. Plus d'information.
23. Humaniser les champs de saisie
Yaron Schoen, fondateur de Made For Humans
L'ajout d'animations rapides aux éléments avec lesquels les utilisateurs interagissent permet à une interface de se sentir moins informatique. Avec les champs de saisie, essayez de mettre un appel de transition à l'intérieur, donc chaque fois que vous faites la mise au point ou que vous la détachez, la transition s'effectue en douceur.
input, textarea {-moz-transition: tous les 0.2s en douceur; -o-transition: toutes les sorties de 0.2s; -webkit-transition: toutes les sorties de 0.2s; -ms-transition: toutes les sorties de 0.2s; transition: tous les 0,2s de détente;
24. Pause et lecture des animations CSS
Val Head, designer et consultant
Vous pouvez mettre en pause et lire une animation CSS en modifiant sa état de lecture de l'animation propriété. Le définir sur "Pause" arrête votre animation en place, jusqu'à ce que vous changiez état de lecture de l'animation à fonctionnement, par exemple en survol.
.animating_thing {animation: spin 10s linéaire infini; état de lecture de l'animation: mis en pause; }. animation_thing: hover {état de lecture d'animation: en cours d'exécution; }
25. N'utilisez pas de variables CSS
Dave Shea, concepteur et auteur
Nous obtenons enfin des variables CSS, par exemple pour écrire une fois la valeur hexadécimale d'une couleur et la référencer via une feuille de style. Mais la spécification officielle est verbeuse, ajoute de la complexité syntaxique, offre des fonctionnalités décevantes et n'est en grande partie pas prise en charge par la plupart des navigateurs. À une époque où Sass est très populaire et va au-delà des variables avec une logique de programmation puissante comme les fonctions personnalisées et les déclarations if / else, la spécification officielle est bien courte.
Espérons que ces meilleurs conseils ont renouvelé votre vision du CSS et des possibilités qu'il représente dans le développement et la conception Web. N'oubliez pas de tester minutieusement l'une de ces techniques pour vérifier la prise en charge du navigateur avant de mettre tout travail en ligne.
Mots: Craig Grannell Illustration: Mike Chipperfield
Cet article a été initialement publié dans le numéro 253 du magazine net.
