Astuces CSS pour bousculer vos mises en page Web
L'apprentissage de nouvelles astuces CSS est l'un des meilleurs moyens de changer la conception de votre site Web. Si vous travaillez dans l'industrie du Web depuis un certain temps, vous avez peut-être l'impression de toujours coder ou de concevoir les mêmes mises en page. Les tendances vont et viennent, mais la majorité des sites se ressemblent - en utilisant la grille à 12 colonnes, les mises en page encadrées à deux et trois colonnes et des formes similaires. Non seulement cela devient un peu ennuyeux à regarder, mais l'expérience utilisateur n'est pas terrible.
Une façon de le changer est de s'inspirer de domaines ou de domaines qui vont au-delà de la conception numérique. Pourquoi ne pas utiliser des designs imprimés ou éditoriaux pour votre site Web? Vous pouvez briser les vieilles habitudes avec de nouvelles propriétés CSS qui ouvrent un nouveau monde de possibilités. Vous pouvez utiliser un décent Générateur de site Web pour vous inspirer.
Si vous souhaitez plus de conseils de conception Web, consultez notre guide du parfait mise en page du site Web , ou revoir Conception atomique . De plus, voici les expérience utilisateur conseils que vous devez savoir.
Une révolution CSS est en cours - des outils comme Flexbox ou Grille CSS offrent des moyens simples de créer des mises en page intéressantes. En utilisant CSS, vous pouvez créer des styles visuels qui vont bien au-delà de ceux que vous connaissez peut-être.
Dans cet article, nous partagerons quelques conseils CSS qui vous aideront à briser le moule dans les mises en page de votre site Web, avec seulement quelques lignes de code.
01. Explorer les modes de fusion CSS
L'imagerie bichromatique et les effets de coloris font partie des tendances les plus en vogue en matière de conception Web. Ils sont très populaires sur le Web grâce à Spotify, qui les met en œuvre de manière cohérente. Vous pouvez enfin arrêter de créer plusieurs versions colorées différentes de vos ressources et appliquer les effets directement dans le navigateur.
L'utilisation des modes de fusion CSS n'est pas seulement un excellent moyen d'unifier l'apparence du contenu sur les sites Web, elle vous permet également de définir différentes versions de couleur d'une image, en ne modifiant qu'une seule valeur CSS: la couleur. Il existe 15 valeurs de mode de fusion possibles, y compris l'écran, la superposition, l'éclaircissement et l'assombrissement.
Il existe quelques méthodes d'implémentation, selon le type d'élément auquel vous souhaitez appliquer l'effet. Par exemple, vous pouvez utiliser background-image et background-color définis sur le conteneur background-blend-mode: assombrir; , ou créez une superposition avec des pseudo-éléments (i.e. :avant que et :après ) sur l'emballage de l'image afin d'obtenir un effet de coloration.
Pour obtenir un effet bichromie satisfaisant, il est recommandé d’utiliser une image en noir et blanc à contraste élevé. Vous pouvez le faire en appliquant des filtres CSS pour définir des niveaux de gris et un niveau de contraste élevé.
Une autre propriété intéressante est mix-blend-mode , qui vous permet de mélanger le contenu de l'élément avec le contenu ou l'arrière-plan de son parent direct. Cela fonctionne particulièrement bien sur les lettres superposées. Vous vous demandez peut-être pourquoi, dans ce cas, nous ne nous contentons pas d’ajuster l’opacité - la réponse est simple: nous pouvons facilement perdre l’éclat des couleurs en utilisant uniquement la transparence.
L'ère des images pouvant être modifiées directement dans votre navigateur Web approche, mais nous ne pouvons pas oublier compatibilité du navigateur - le support est limité pour les modes de fusion pour le moment. Et pour garder ces images en sécurité, assurez-vous d'explorer votre stockage en ligne options.
02. Ajouter un masque
Le masquage indique à votre navigateur quels éléments d'actif doivent être visibles et est très utile pour créer des formes et des mises en page créatives. Le masquage peut être effectué de trois manières: en utilisant une image raster (par exemple au format PNG avec des parties de transparence), des dégradés CSS ou des éléments SVG.
Notez que contrairement à une image raster typique, SVG peut être mis à l'échelle ou transformé sans perte significative de qualité.
img { mask-image: url(‘mask.png’) linear-gradient(-45deg, rgba(0,0,0,1) 20%, rgba(0,0,0,0) 50%); mask-image: url(#masking); /*referencing to the element generated and defined in SVG code*/ } Il est important de mentionner que Firefox ne prend en charge que le dernier, nous devons donc utiliser un élément de masque SVG en ligne. Et si nous utilisons une image raster avec des niveaux de transparence? Les parties transparentes de l'image ne seront pas vues - en d'autres termes, les fragments opaques seront affichés, cachant d'autres éléments.
Le masquage est particulièrement puissant car il vous permet d'appliquer les mêmes propriétés aux images d'arrière-plan, en définissant leur position, leur taille et leur répétition.
Un excellent cas d'utilisation du masquage CSS est dans les articles qui combinent du texte et des images. Les conteneurs et les images irréguliers sont très populaires dans l'impression, mais leur mise en œuvre sur le Web est fastidieuse et prend du temps. Mais grâce au masquage, plus maintenant!
Vous pouvez également vous amuser à utiliser les niveaux de transparence pour découper une partie des images animées (par exemple. Fichiers GIF ). Cependant, lorsque vous utilisez ces propriétés, n'oubliez pas la prise en charge de plusieurs navigateurs et ajoutez des préfixes de fournisseur.
03. N'ayez pas peur de couper
Une autre fonctionnalité intéressante est le découpage CSS. La limite d’une forme est appelée clip-path (à ne pas confondre avec la propriété clip obsolète), et le découpage définit la zone d'image qui doit être visible. Le découpage est similaire à la découpe d'un morceau de papier - tout ce qui se trouve à l'extérieur du chemin sera caché, tandis que tout ce qui se trouve à l'intérieur du chemin sera visible.
clip-path: circle(radius at x, y); clip-path: url(#clipping); /*referencing to SVG element*/Par exemple, si une fonction de cercle définit un masque d'écrêtage sur le dessus d'une image, vous ne verrez que la partie de l'image dans ce cercle.
Ce qui est cool, c'est que nous pouvons utiliser les fonctions de forme et SVG comme chemins de clip, ce qui nous donne beaucoup d'opportunités - par exemple, nous pourrions les animer en formes de morphing. Regarde ça article de Chris Coyier sur la création de JPG transparent à l'aide du chemin de clip SVG.
Si vous vous demandez quelle est la différence entre le découpage et le masquage, rappelez-vous que les masques sont des images et les clips ne sont que des chemins vectoriels. Il convient de mentionner que le masquage consommera plus de mémoire, car vous travaillez avec une image complète, donc tout doit être fait pixel par pixel.
C'est pourquoi il est recommandé d'utiliser des masques lorsque vous souhaitez un effet de transparence partielle; si vous voulez des bords nets, il est préférable d’utiliser les chemins d’élément.
04. Sortez des sentiers battus
Forme extérieure et forme à l'intérieur à la rescousse! Qui a dit que les conteneurs de texte doivent toujours être rectangulaires? Sortons de la boîte, littéralement, et découvrons de nouveaux formulaires qui rendent nos mises en page plus riches et moins carrées. Les propriétés shape-outside et shape-inside vous permettent d'habiller votre contenu autour de chemins personnalisés en CSS.
Alors, comment ça marche? Appliquez simplement le code suivant à l'image flottante ou au conteneur donné:
shape-outside: circle(50%); /* content will flow around the circle*/Il est important de noter que la propriété float et les dimensions de l'élément - hauteur et largeur - doivent être définies, sinon cela ne fonctionnera pas. Pour la forme avec laquelle vous pouvez aller cercle() , polygone() , encart () ou ellipse() .
Une autre valeur possible est la URL () fonction. Dans ce cas, cela permet à la propriété shape-outside de définir une forme d'élément basée sur l'image. Vous pouvez choisir d'utiliser le URL () fonction au lieu du polygone() lorsque vous avez un graphique particulièrement sophistiqué avec de nombreuses courbes et points, et que vous voulez que le contenu s'enroule en douceur.
Si vous souhaitez créer plus d'espace entre votre élément et le contenu, utilisez le marge de forme propriété, qui agira comme une marge. Les fonctions de forme peuvent être animées, mais uniquement pour les polygones définis - le URL () la fonction ne peut malheureusement pas être animée.
Prise en charge du navigateur pour forme extérieure est limité pour le moment, mais croisez les doigts pour sa mise en œuvre rapide dans d'autres navigateurs.
05. Essayez SVG pour l'animation
Pour être honnête, je ne peux pas imaginer le Web d'aujourd'hui sans SVG (Image Vectorielle). Son nom parle de lui-même - il évolue, donc il répond à toutes les préoccupations concernant site Web adaptatif . Le graphique SVG sera net, quelle que soit la résolution d’écran de l’appareil sur lequel il est visualisé.
Outre l'évolutivité, il existe une autre fonctionnalité qui devrait vous encourager à jouer avec SVG: la possibilité de manipuler SVG avec CSS. Si vous n’avez jamais essayé de vous familiariser avec les animations CSS et le code SVG, vous devez l’essayer maintenant - c’est incroyable à quelle vitesse vous pouvez obtenir des effets étonnants.
Vous pensez peut-être que dans certains cas, il est plus facile d’utiliser des images raster, cependant, SVG a un gros avantage par rapport aux images ordinaires. Les mots inclus dans SVG sont conservés dans le et restent ainsi du texte, ce qui le rend consultable, sélectionnable et accessible. Cela signifie également que vous pouvez le modifier directement dans le code. Cependant, nous devons nous rappeler d'incorporer le visage de la police pour être sûr que la police sera rendue.
L'animation de SVG avec CSS est comme l'animation de tout autre élément en HTML - cela peut être fait avec des transitions, des transformations et des animations d'images clés. Une fois que vous êtes familiarisé avec le code SVG, le reste est simple et très intuitif, car vous le faites essentiellement comme vous le feriez en HTML.
La chose la plus cool à propos de SVG est que vous pouvez saisir la partie que vous voulez et la rendre vivante avec des animations CSS. Cela signifie que nous pouvons créer des effets dynamiques très intéressants, pas nécessairement en utilisant JavaScript. SVG a sa propre API DOM, donc en fait tout le code SVG peut être facilement inspecté à l'aide de DevTools, que je recommande fortement d'utiliser lors de l'exploration de ce sujet.
06. Faites du bruit
Les années 80 et 90 sont de retour! Glitch - l'esthétique du chaos, du bruit et du brouillage - devient une tendance de design populaire cette année. La célébration des pépins, des échecs et des erreurs peut également être vue sur le Web. Si vous souhaitez jouer avec la perspective et être visuellement plus chaotique, vous pouvez le faire facilement en transformant et en biaisant les éléments de votre site.
L'exemple parfait de la façon de le faire en CSS uniquement peut être trouvé sur CodePen du capitaine anonyme , qui présente un texte animé biaisé. Une ligne de code fait la magie:
transform:skew(60deg, -30deg) scaleY(.66667);07. Soyez créatif avec le collage
Les créations inspirées du collage profitent de leur moment dans les arts visuels - tout en recherchant cet article, le travail de Rosanna Webster et Barrakuz a immédiatement volé mon cœur - et même sur le Web, ils attirent de plus en plus d'attention. En cas de doute, consultez la page d'accueil de MailChimp (ci-dessous). Avez-vous remarqué le collage?
L'approche traditionnelle consiste simplement à attacher des images raster qui ont été préparées dans un éditeur graphique, mais avec les techniques dont j'ai parlé dans cet article, il est possible de créer des effets similaires en utilisant les propriétés CSS. Vous pouvez même préparer collages qui s'adaptent vraiment aux exigences du Web - et sont évolutives, animées et interactives.
J'ai préparé quelques exemples utilisant toutes ces propriétés CSS intéressantes, afin que vous puissiez voir comment elles peuvent être combinées pour obtenir un style de type collage sur le Web. Jetez un œil à mes exemples .
08. N'oubliez pas le support du navigateur
Si vous vous sentez retenu lorsque vous souhaitez utiliser des propriétés CSS qui, selon vous, ne sont pas prises en charge par tous les navigateurs, le @les soutiens la règle est là pour vous aider. @les soutiens vous permet de vérifier la prise en charge par le navigateur de la propriété CSS: paires de valeurs.
Le code inclus dans le @les soutiens block ne sera rendu que si ces conditions sont vraies, sinon le code n'a pas été lu par le navigateur. Dans un cas où le navigateur ne comprend pas @les soutiens , il ne génère pas non plus une partie donnée du code.
@supports (mix-blend-mode: overlay) { .example { mix-blend-mode: overlay; } }La combinaison de fonctionnalités telles que les modes de fusion, le masquage, le découpage, les formes CSS et la puissance du SVG nous donne un excellent ensemble d'outils pour stimuler notre créativité et rompre avec la norme. Avec ces outils, nous avons la possibilité de créer une version Web des éléments que nous voyons actuellement sur papier.
Bien que certaines propriétés puissent encore rencontrer des problèmes de compatibilité avec les navigateurs (si vous rencontrez de nombreux problèmes, envisagez une solution plus robuste hébergement Web service), n’hésitez pas à jouer avec eux. Bien que la prise en charge du navigateur puisse être limitée maintenant, ce ne sera probablement pas le cas à l'avenir. C'est juste une question de temps.
Cet article a été initialement publié dans le magazine net.
Articles Liés:
