Solutions CSS intelligentes pour les défis courants de l'interface utilisateur —

C'est incroyable de voir ce que nous pouvons faire avec CSS aujourd'hui, surtout si vous vous souvenez encore à quel point il était difficile autrefois de comprendre les contextes d'empilement ou pourquoi les marges se sont effondrées et pourquoi top: float n'a pas fonctionné. Dans cet article, nous examinerons simplement cela : des choses passionnantes et amusantes que nous pouvons faire avec CSSen explorant les problèmes courants et les cas d'utilisation auxquels nous devons tous faire face dans notre travail.

Richer, Life- Comme les ombres avec CSS

Les ombres aident à transmettre du sens et à ajouter une valeur supplémentaire à une interface utilisateur. Cependant, beaucoup d'ombres que nous voyons sur le Web ces jours-ci n'utilisent pas tout leur potentiel. Changeons cela !

Une plongée en profondeur complète dans toutes les choses des ombres vient de Rob O'Leary. Son article sur CSS Tricks explore comment la lumière affecte les ombres et comment définir une source de lumière – la base pour créer des effets d'ombre authentiques. Une fois cette base définie, vous apprendrez à utiliser les ombres pour évoquer la profondeur, élever des éléments et les insérer, comment superposer des ombres et, bien sûr, quelle propriété CSS utiliser pour quel cas d'utilisation. Rob examine également les implications en termes d'accessibilité et de performances que les ombres apportent, ainsi que la manière de les animer.

Un autre article fantastique sur le sujet vient de Josh W Comeau. Pour mettre fin à ces « boîtes grises floues qui ne ressemblent pas vraiment à des ombres », comme Josh décrit l'état actuel de la plupart des ombres sur le Web, il montre comment transformer des ombres-boîtes typiques en de belles ombres réalistes. . Un petit détail qui rend toute interface utilisateur beaucoup plus tactile.

Effet de découpe de papier CSS

Si vous avez déjà voulu créer un effet de découpe de papier pour un titre, vous avez peut-être eu beaucoup de mal. Vous devez peut-être configurer deux div distincts qui se chevaucheraient ensuite. L'espacement devrait être défini en unités relatives, bien sûr, ce qui pourrait être un peu difficile à obtenir d'un écran à l'autre. élément et un attribut de données.

L'effet de découpe de papier CSS de Stephanie Eckles résout définitivement le problème avec les propriétés CSS personnalisées, la grille CSS, les transformations CSS et une bonne fonction CSS à l'ancienne attr() . Stéphanie utilise un attribut data sur h1 avec un span à l'intérieur. attr() récupère la valeur de l'attribut dataqui est ensuite utilisé pour la propriété content dans un :after -pseudo élément. Les hautes lumières, les ombres et les couleurs peuvent ensuite être ajustées avec CSS Custom Properties. Réutilisable et simple à entretenir !

Et si vous êtes intéressé par plus de magie de Stéphanie et d'autres personnes merveilleuses qui aiment le CSS, jetez un œil à StyleStageoù le CSS moderne obtient la vedette qu'il mérite.[19659015]Utiliser une ellipse transparente pour illustrer l'effet de découpe »/>

Jetez également un coup d'œil à l'article d'Ahmad Shadeed sur Thinking About The Cut Out Effectqui explique dans les moindres détails comment décider quand SVG pourrait avoir plus de sens et comment l'implémenter dans un réel scénario de vie. L'article fournit également de nombreux exemples de code pour commencer !

La minicarte pour le Web

Nous les avons déjà vus : de minuscules barres horizontales qui se trouvent généralement en haut de la page. Lorsqu'un utilisateur fait défiler vers le bas, la barre horizontale se remplit, de sorte que l'utilisateur sait combien il lui reste réellement à faire défiler.

Et si nous le rendions un peu plus contextuel cependant ? Peut-être que la page comprend des images et des vidéos, ou des citations et des sections distinctes – ne serait-il pas intéressant de les mettre en évidence différemment, tout en permettant aux lecteurs d'épingler une position sur la page et de revenir en arrière si nécessaire ? Eh bien, Rauno Freiberg le pensait aussi. Rauno Freiberg a une suggestion .

La mini-carte de Rauno pour le Web (actuellement ne fonctionne que dans Firefox) rend triviale la création d'une représentation sur mini-carte de la page entière, tout en permettant aux lecteurs d'épingler une section de la page et de naviguer entre elles. Pour y parvenir, Rauno utilise une propriété CSS expérimentale element() pour afficher une image en direct à partir d'un élément HTML arbitraire (qui n'est actuellement disponible que dans Firefox).

Conditional Border Radius In CSS

Quand conception de cartes, vous voudrez peut-être qu'un border-radius ait une valeur assez importante lorsqu'il y a suffisamment d'espace pour l'afficher avec d'autres cartes. Pourtant, lorsqu'il n'y a pas d'espace et peut-être pas de marge non plus sur la carte — comme cela peut être le cas sur des écrans plus petits — vous voudrez peut-être réduire border-radius à 0 . Comment y parviendriez-vous ?

Ahmad Shadeed a examiné ce problème de manière assez détaillée dans son article sur Conditional Border Radius In CSS. L'idée, suggérée à l'origine par Heydon Pickering et Naman Goel, est d'utiliser un nombre suffisamment grand pour déclencher un état ou l'autre. Sur des écrans plus petits, si la différence entre 100vw et 100% est 0alors le rayon sera également 0 ; mais si la différence est plus grande, une valeur plus grande serait utilisée. Vous pouvez également jeter un œil au CodePen.

CSS Grainy Gradients

Et si vous vouliez en ajouter noise pour apporter un peu de texture à une image ? Bien sûr, vous pouvez exporter des images au format PNG, WebP ou AVIF, mais idéalement, nous voudrions ajouter du "bruit" au-dessus des SVG, afin que nous puissions toujours désactiver et désactiver le bruit si nous le souhaitons.

Dans son article CSS-Tricks sur les dégradés granuleuxJimmy Chion explique comment générer du bruit coloré pour ajouter de la texture à un dégradé avec juste un éclat de CSS et de SVG. Comme l'explique Jimmy, l'idée est d'utiliser un filtre SVG pour créer le bruit, puis d'appliquer ce bruit en arrière-plan. Ensuite, nous le superposons sous un dégradé, affinons la luminosité et le contraste, et voilà, vous avez un dégradé qui s'efface progressivement.

Problème résolu ! Vous pouvez également explorer le Grainy Gradient Aire de jeux que Jimmy a mis en place.

Multi-Line Background Gradient

Certaines choses peuvent sembler impossibles à faire avec CSS — enfin, jusqu'à ce que quelqu'un trouve un hack à faire ça arrive. Comme dans ce cas : pouvez-vous obtenir un texte rembourré multiligne avec un dégradé qui ne se réinitialise pas pour chaque ligne ?

Oui, comme le montre Matthias Ott. La solution de Matthias est un peu bidon, mais elle conduit au résultat souhaité grâce à un pseudo-élément qui est ajouté en haut du texte. Une idée intéressante à bricoler.

Focus de champ de formulaire sans contours

Qui a dit que les formulaires devaient être ennuyeux ? Hakim El Hattab a créé une démo qui prouve que même quelque chose d'aussi simple qu'un formulaire demandant un nom, une adresse e-mail et un mot de passe est une occasion de sortir des sentiers battus et de susciter une étincelle de plaisir.

Pour y parvenir, Hakim combine la mise au point et la validation des formulaires dans une animation subtile mais surprenante qui se débrouille sans aucun contour de mise au point sur les champs eux-mêmes. Au lieu de cela, un point marque le champ qui est focalisé. Lorsque le focus passe à un autre champ, l'animation est déclenchée et le point passe au nouveau champ actif, établissant une connexion entre les deux. La validation des champs de formulaire est également intégrée de manière transparente, le point s'agrandissant et affichant une coche. Si vous souhaitez approfondir le code, Hakim a également publié une démo sur Codepen. Inspirant !

Transition des dégradés CSS

Si vous avez déjà essayé de faire la transition des dégradés en CSS, vous avez probablement remarqué que cela ne fonctionne pas. Au lieu de passer progressivement d'un dégradé à l'autre, le changement se produit immédiatement, brutalement, sans transition en douceur entre les deux.

Comme Keith J. Grant l'a découvertnous pouvons cependant réaliser la transition avec une solution de contournement intelligente. Nous utilisons pour cela un pseudo-élément et une transformation d'opacité. Tout d'abord, nous appliquons un dégradé à l'élément, puis positionnons son pseudo-élément pour remplir l'élément, puis nous lui appliquons le deuxième dégradé. Et on « fait la transition » entre deux dégradés en faisant passer l'opacité du pseudo-élément. Vous pouvez consulter un exemple de travail complet sur CodePen.

Améliorer les performances de l'image avec image-set()

Avez-vous entendu parler de image-set() déjà ? Vous pouvez le considérer comme un arrière-plan CSS équivalent à l'attribut HTML srcset pour les balises img. Les navigateurs basés sur Chromium et Safari le supportent depuis quelques années maintenant, Firefox n'a suivi que récemment. Ollie Williams examine ce que nous pouvons et ce que nous ne pouvons pas faire avec cela aujourd'hui.

Comme le décrit Ollie, un cas d'utilisation pour image-set() est de fournir plusieurs résolutions d'une image d'arrière-plan et de laisser au navigateur le soin de décider quelle image est servie à un utilisateur – un res pour les utilisateurs d'appareils sophistiqués et une image à faible résolution pour ceux qui utilisent des connexions lentes ou des écrans avec une densité de pixels inférieure, par exemple.

Un autre cas d'utilisation très prometteur manque encore de prise en charge du navigateur, malheureusement : formats d'image tels que AVIF, WebP ou HEIF tout en ajoutant une solution de secours pour les navigateurs plus anciens. Si vous voulez déjà obtenir quelque chose comme ça aujourd'hui et que vous n'avez pas besoin de background-imagel'élément <picture> pourrait être une alternative à considérer, comme le suggère Ollie. Une excellente lecture pour vous aider à améliorer les performances de l'image.

Clip-Path Pop-Out Effect

Avec clip-path: path() pris en charge par les principaux navigateurs, il est temps de faire preuve de créativité. Mikael Ainalem montre un beau cas d'utilisation pour la fonctionnalité plutôt nouvelle : un effet pop-out lisse au beurre.

Mikael utilise clip-path: path() pour distinguer une photo d'une personne de son arrière-plan en forme de cercle. Lorsque vous la survolez, la personne semble s'élever de l'intérieur du cercle, créant une impression 3D sympa. Parfait pour les pages « À propos de nous ».

Bouton 3D fantaisiste

Les détails comptent. Concevoir un joli bouton ne semble pas être une entreprise compliquée : un peu de rembourrage ici et là, une couleur funky, un texte accessible et quelques états de bouton. Eh bien, Josh Comeau est allé jusqu'au bout pour concevoir un bouton 3D vraiment fantaisiste sur lequel vous voudrez peut-être cliquer plus d'une fois.

L'idée est simple : nous créons deux calques et décalons un peu le premier plan au début. Au survol, nous décalons la couche avant vers le bas. Ensuite, nous ajustons le contour de la mise au point avec outline-offsetou utilisons :focus:not(:focus-visible) pour masquer le contour lorsque le bouton est mis au point et que l'utilisateur utilise un dispositif de pointeur.

Ensuite, nous décalons le bouton de quelques pixels lorsqu'il survole, animons la transformation un peu, ajustons la courbe de Bézier pour l'animation et ajoutons un peu de flou, pour une ombre plus douce et plus naturelle. Et voilà – nous avons un bouton 3D fantaisiste qui est accessible, fonctionne sur mobile et sur ordinateur de bureau et c'est un plaisir d'appuyer et de cliquer dessus. Bien sûr, vous pouvez trouver le extrait de code complet sur le blog de Josh.

CSS Charts

Vous devez peut-être concevoir un graphique à colonnes, ou un graphique à barres, ou même un graphique à colonnes multi-ensembles de données ou des colonnes empilées. Par où commencer ? Peut-être qu'avec Charts.cssun cadre de visualisation de données CSS qui utilise des classes d'utilitaires CSS pour styliser les éléments HTML en tant que graphiques.

Créé par Lana Gordiievski et Rami Yushuvaev, le framework prend en charge de nombreux types de graphiques, n'a aucune dépendance et est très léger. Il comprend également une documentation complète sur ses composants et types de graphiques intégrés plus le code source est disponible sur GitHub (sous licence MIT). Et si vous avez besoin d'approches un peu plus créatives, Preethi explique comment créer des graphiques CSS avec des formes intéressantes sur CSS-Tricks également.

La nouvelle réinitialisation CSS

Qu'utilisez-vous pour normaliser les styles sur tous les navigateurs ? Récemment, il y avait de nouvelles approches pour réduire la taille de la réinitialisation CSS globale, et peut-être qu'elles seraient également de bons candidats pour vos projets.

Avec sa Modern CSS ResetAndy Bell a réduit la réinitialisation CSS à son minimum en ajoutant des règles de dimensionnement des boîtes, en supprimant les marges par défaut, en définissant les valeurs par défaut de la racine principale et du corps. Parallèlement à cela, Andy supprime toutes les animations, les transitions et le défilement fluide pour les personnes qui préfèrent ne pas les voir, et a ajouté des propriétés modernes telles que scroll-behavior et text-decoration-skip-ink par défaut.

Le New CSS Reset d'Elad Shechter adopte une approche légèrement plus agressive. Elad supprime tous les styles par défaut que nous obtenons sur des éléments HTML spécifiques, à l'exception de la propriété d'affichage. Les deux approches valent la peine d'être étudiées !

Ah, la bonne vieille mise en page change ! Comme l'explique Bramus Van Damme l'une des raisons légèrement plus obscures des changements de mise en page est due à différents types de barres de défilement sur le Web. Alors que les barres de défilement superposées sur iOS/macOS sont placées sur le contenu (et ne sont pas affichées par défaut), d'autres barres de défilement sont placées dans la « gouttière de la barre de défilement », c'est-à-dire l'espace entre le bord de la bordure intérieure et la bordure extérieure. bord de remplissage.

Lorsque le contenu d'une boîte devient trop volumineux, le navigateur affiche, par défaut, une barre de défilement. Dans ce dernier cas, cela provoquera un décalage de mise en page. Heureusement, ce problème pourrait bientôt disparaître pour de bon. Découvrez une nouvelle propriété brillante scrollbar-gutter : en la définissant sur stablenous pouvons faire en sorte que le navigateur affiche toujours la gouttière de la barre de défilement, même si la boîte ne déborde pas.

Et pour garder les choses symétriques, nous pouvons utiliser scrollbar-gutter: stable both-edges. La fonctionnalité n'est pas encore disponible, mais arrive très bientôt dans Chromiumavec d'autres moteurs de rendu, espérons-le bientôt.

Les choses surprenantes que CSS peut animer

Lorsque vous pensez à animer des propriétés CSS, lesquelles vous viennent à l'esprit ? Will Boyd a examiné la question sous un angle différent et a décidé d'explorer les propriétés qui ne lui viennent pas immédiatement à l'esprit, celles qui ne sont généralement pas associées à l'animation, mais qui s'avèrent être animables.

Dans son article « Les choses surprenantes que CSS peut animer », Will plonge profondément dans ces propriétés animables de manière inattendue – et, bien sûr, les choses astucieuses que vous pouvez faire en les animant. z-indexpar exemple, peut être utilisé pour des animations en couches, opacity vous aide à faire disparaître un modal juste avec CSS. Un excellent rappel de la puissance du CSS.

Ressources d'apprentissage

L'apprentissage ne s'arrête jamais, n'est-ce pas ? Ci-dessous, nous avons compilé des informations utiles et amusantes ! — des ressources parfaites pour faire passer vos compétences CSS au niveau supérieur. Et si vous êtes déjà un pro CSS, il y a aussi des défis pour mettre vos connaissances à l'épreuve. Profitez-en !

Vocab CSS et aide-mémoire

Vous y avez peut-être déjà été. Juste au moment où vous travaillez sur un délai serrévous devez rechercher quelque chose rapidement. Pour CSS, vous ne vous tromperez jamais avec CSS Tricks Almanacet vous pouvez également rechercher le Vocabulaire CSS rassemblé par Ville V. Vanninen de Finlande.

19659101]Vocabulaire CSS vous aide à trouver les bons mots lorsque vous parlez de CSS. ( Grand aperçu)

Learn Flexbox The Fun Way

Qu'est-ce que les grenouilles, les zombies et les tours ont en commun ? Eh bien, ce sont vos meilleurs amis lorsque vous apprenez Flexbox. Car, soyons honnêtes : Flexbox est très puissant une fois que vous l'avez compris, mais y parvenir peut être assez difficile. Alors rendons l'apprentissage un peu plus amusant.

Dans le jeu Flexbox Froggyvous aidez une petite grenouille et ses amis à retrouver leurs nénuphars en, vous l'aurez deviné, en écrivant CSS. Le jeu se compose de 24 niveaux qui vous emmènent des bases mêmes du positionnement Flexbox à des défis plus avancés.

Si les zombies sont plus dans votre allée, Flexbox Zombies est fait pour vous. Chaque section du jeu dénoue une partie de l'intrigue, introduit un nouveau concept Flexbox et présente des soi-disant « défis de survie de zombies » qui vous aident à consolider vos nouvelles compétences.

Enfin et surtout, vous vous pouvez également jeter un œil à Flexbox Defense. Inspiré des jeux de tower defense, votre travail consiste à empêcher les ennemis entrants de franchir vos défenses – en positionnant vos tours avec CSS, bien sûr. Les trois jeux fonctionnent directement dans votre navigateur. Bon flexboxing !

Grille CSS, sélecteurs CSS et autres compétitions

Voulez-vous faire passer vos compétences CSS au niveau supérieur ? Ces trois petits jeux vous aident à faire exactement cela – littéralement. Dans Grid Gardenvous deviendrez l'heureux propriétaire d'un jardin de carottes. 28 niveaux vous attendent dans lesquels vous devez prendre soin de votre récolte à l'aide de la grille CSS.

Si vous pensez que vos compétences en matière de sélecteurs CSS pourraient avoir besoin d'être peaufinées, CSS Diner est fait pour vous. Assiettes, pommes, cornichons — dans chacun des 32 défis, vous devrez utiliser un sélecteur CSS différent pour sélectionner des éléments spécifiques sur une table.

Et si vous êtes prêt pour une compétition, n'oubliez pas de consulter également CSSBattle. Dans le jeu de golf CSSvous utiliserez vos compétences CSS pour reproduire visuellement des cibles avec le plus petit code possible pour atteindre le sommet du classement. Chacun des défis est dédié à un sujet spécifique comme visibilitydisplaytransitionou z-index.

Wrapping Haut de page

Avez-vous récemment rencontré une ressource ou une technique CSS qui a changé votre façon d'aborder un défi particulier ? Faites-nous savoir dans les commentaires ci-dessous! Nous aimerions en savoir plus.

(vf)