10 astuces CSS incroyables pour transformer vos mises en page Web

Toute personne ayant de l'expérience dans la conception de sites Web, que vous ayez utilisé des constructeurs de sites Web de bricolage ou créé un site à partir de rien, a probablement déjà entendu parler de CSS. Cet outil incroyablement puissant peut être utilisé pour transformer vos mises en page Web, vous donnant le pouvoir de prendre le contrôle de votre site Web et de réaliser votre vision créative. Mais comment pouvez-vous utiliser des feuilles de style en cascade pour libérer le potentiel de votre prochain site Web ?

Ce guide ne détaillera qu'une gamme de propriétés CSS qui ont toutes été utilisées pour créer l'en-tête que vous pouvez voir dans l'image ci-dessus. Vous pouvez trouver ce projet ici sur CodePen, vous donnant la chance de l'essayer par vous-même.

Manipulation d'images CSS

La première étape que nous devons franchir pour créer notre section d'en-tête consiste à ajouter des images à la page. Vous pouvez utiliser une gamme de méthodes pour atteindre cet objectif, nous avons donc couvert les plus populaires, ainsi que quelques astuces pour vous aider à manipuler vos images.

1. Image d'arrière-plan CSS

Nous voulons avoir une image d'arrière-plan plein écran pour notre en-tête, et la propriété CSS background-image est idéale. Tout d'abord, nous devons créer un conteneur pour notre image (et le reste des éléments dans l'en-tête).

Nous avons commencé par ajouter une balise div avec "header" comme classe, puis nous avons défini sa hauteur à 100vh et son largeur à 100vw; cela nous donne une boîte qui a exactement la même taille que la fenêtre. Nous avons également ajouté une règle CSS pour le corps de la page, avec son débordement défini sur masqué et son marges fixées à 0px.

Avec le conteneur en place, nous pouvons ajouter une image d'arrière-plan, et il y a trois règles CSS différentes dont nous avons besoin pour atteindre cet objectif. Le premier, background-image, a besoin d'une URL pour agir comme source de l'image d'arrière-plan, et nous avons utilisé le catalogue pratique Unsplash pour cela. Nous devons également définir le taille de fond à couvrir et le position d'arrière-plan vers le bas, mais vous voudrez peut-être les expérimenter pour obtenir les meilleurs résultats.

2. CSS Background-Blend-Mode

Les modes de fusion CSS permettent de mélanger des images et du texte, un peu comme la fonction de fusion d'un logiciel comme Adobe Photoshop. Pour que les modes de fusion fonctionnent avec notre image d'arrière-plan, nous définissons le couleur de fond à blanc semi-transparent avant d'ajouter le mode de fusion que nous voulions utiliser.

Suivant ceci, background-blend-mode a été réglé sur soft-light, nous permettant d'adoucir l'image.

3. CSS Clip-Path

Pour notre prochaine astuce, nous utiliserons une règle appelée clip-path. Lorsque vous utilisez des balises HTML img, vous pouvez définir un chemin qui masquera des parties des images avec lesquelles vous travaillez. Vous pouvez choisir d'utiliser des formes générales pour cela, mais vous pouvez également utiliser une application génératrice de SVG pour créer un design plus complexe.

Nous avons ajouté une balise div avec "flex_image_box" pour agir comme un conteneur pour trois images, en utilisant la propriété CSS display pour la transformer en flexbox (nous en reparlerons plus tard). Trois balises img ont été ajoutées à l'intérieur de la balise div, avec des identifiants définis comme "img1", "img2" et "img3". Réglage de la largeur de chaque image à 600px, nous pouvons laissez la propriété hauteur vide sans changer le rapport hauteur/largeur des images; il est maintenant temps d'ajouter notre clip-path !

Pour créer nos trois triangles, nous avons utilisé le même chemin de clip de polygone pour img1 et img3, avec une version inversée en place pour img2. Nous avons également dû jouer avec le positionnement de notre conteneur flex-box pour nous assurer que les images se trouvent dans la bonne position sur l'écran. Nos règles de chemin de clip peuvent être vues ci-dessous.

4. Opacité CSS

L'opacité définit le niveau de transparence de tout élément HTML. Nous fixons le opacité de nos images à 90%, les rendant légèrement opaques afin qu'ils se fondent bien avec le fond.

Texte et images réactifs CSS

Nous avons déjà exploré l'art de créer de superbes sites Web réactifs en utilisant HTML, CSS et JavaScript dans le passé, mais nous pouvons nous baser sur les principes que vous comprenez déjà pour mieux comprendre les compétences dont vous avez besoin pour maîtriser la mise en page de votre site Web.

1. CSS Responsive/Relative Units

Les unités CSS telles que px, pt et cm sont des unités absolues, ce qui signifie qu'un navigateur Web les affichera à la même taille, quelles que soient la largeur et la hauteur de la fenêtre qu'elles occupent. Les unités relatives sont différentes, produisant des hauteurs et des longueurs relatives à d'autres mesures, comme la fenêtre du navigateur ou un élément parent. Les unités relatives ci-dessous sont couramment utilisées et essentielles pour la conception Web réactive.

• em: Cette unité est généralement utilisée avec du texte. Il est relatif à la taille de police de l'élément courant, ce qui fait que 4em est quatre fois plus grand que la taille de police définie.
• rem: Comme em, rem est relatif à la taille de police d'un élément; l'élément racine dans une hiérarchie est utilisé pour définir la taille de sortie.
• vw/vh: Détermination de la largeur et de la hauteur en fonction de la taille de la fenêtre d'affichage, 2vw équivaut à 2 % de la largeur du navigateur tandis que 2vh équivaut à 2 % de la hauteur du navigateur.
• %: L'unité % calcule les dimensions en fonction de la taille du parent d'un élément.
• vmin/vmax: ces unités produisent des dimensions relatives à 1 % des dimensions les plus petites ou les plus grandes de la fenêtre d'affichage, fournissant aux éléments les moyens de répondre directement à la taille d'une fenêtre de navigateur.

2. Taille de police CSS

Cette propriété peut être définie à l'aide de valeurs par défaut prédéfinies soit par la feuille de style principale du site Web, soit par le navigateur Web de l'utilisateur. Ces valeurs incluent medium, xx-small, x-small, small, large, x-large et xx-large, medium étant défini comme valeur par défaut pour tout texte dépourvu de balise CSS de taille de police. Alternativement, des valeurs relatives peuvent être employées lors de l'utilisation de la propriété CSS font-size, et c'est le méthode que nous avons utilisée pour nous assurer que le texte de notre section d'en-tête est correctement dimensionné pour tout fenêtre d'affichage.

Nous avons ajouté deux balises d'en-tête à notre code HTML, ce qui nous permet d'ajouter du texte au projet. L'un est un grand en-tête principal, tandis que l'autre est un sous-en-tête, et ils utilisent tous deux des unités relatives.

En rapport: Comment changer la taille de la police HTML dans CSS

3. Largeur et hauteur CSS

Tous les éléments HTML sont livrés avec des dimensions de hauteur et de largeur, qu'il s'agisse de div, img, a ou de tout autre type de balise. Ces dimensions peuvent être automatiquement définies sur des valeurs par défaut, mais elles peuvent également être dictées par les concepteurs Web en utilisant les règles appropriées; nous avons utilisé ces deux méthodes pour cet en-tête.

Des unités réactives ont été utilisées pour l'image d'arrière-plan, avec une hauteur définie sur 100vh et une largeur définie sur 100vw, mais nous avons également utilisé des unités absolues pour nos trois images. Cela vaut la peine d'explorer et d'expérimenter les unités de largeur et de hauteur CSS, avec des options comme "hériter" fournissant le signifie adopter les dimensions d'un élément parent, et il existe de nombreuses autres astuces comme celle-ci que vous pouvez utiliser.

4. CSS Mix-Blend-Mode

CSS mix-blend-mode est très similaire au mode background-blend, sauf qu'il peut être appliqué à n'importe quel élément, plutôt que d'être exclusivement pour les arrière-plans. Nous avons utilisé cette propriété sur notre rubrique H1 pour ajouter de la texture et rendre le projet plus intéressant. Nous avons commencé par définir notre couleur du texte au noir, suivi du réglage de la mode mix-blend pour superposer.

Cela vaut la peine d'explorer les différentes options de mélange dont vous disposez lorsque vous traitez du texte, car les arrière-plans avec des profils de couleurs uniques répondront différemment aux paramètres que vous utilisez.

5. Transformation de texte CSS

CSS text-transform est une propriété intelligente qui permet aux concepteurs de modifier la casse du texte sur leurs sites Web sans affecter la façon dont les moteurs de recherche le lisent. Par exemple, nous avons mettre text-transform en majuscule sur notre en-tête H1, en faisant de chaque lettre une majuscule, peu importe la façon dont nous la saisissons dans notre code HTML.

Propriétés de débordement CSS

HTML peut souvent sembler être un cadre rigide qui définit des limites strictes pour le contenu de vos sites Web, mais ce n'est pas le cas lorsque des propriétés de débordement sont utilisées.

Débordement CSS et débordement de texte

Overflow et text-overflow sont des propriétés CSS très similaires. Le débordement peut être appliqué à n'importe quel élément, vous donnant le contrôle sur le contenu capable d'échapper à ses limites. Text-overflow est similaire, bien qu'il ne s'applique qu'au texte et vous donne la possibilité d'ajouter des paramètres supplémentaires à vos règles. Nous n'avons utilisé que le débordement pour ce projet (nous l'avons utilisé pour restreindre la taille du corps de notre page), mais vous pouvez en savoir plus sur le débordement de texte sur le W3Schools site Internet.

Utilisation de CSS pour vos mises en page Web

CSS est un outil incroyablement puissant, permettant aux concepteurs et développeurs Web de créer de superbes sites Web à l'aide de code. Nous vous encourageons à jeter un coup d'œil au CodePen que nous avons fourni au début de l'article, car cela vous donnera un aperçu encore plus approfondi du fonctionnement de tous ces outils. De plus, vous pouvez jouer avec l'en-tête que nous avons créé pour ajouter vos propres touches finales.

8 trucs et astuces CSS essentiels que tout développeur devrait connaître

Utilisez-vous ces méthodes CSS clés pour un flux de travail rapide et une belle conception Web?

Lire la suite

A propos de l'auteur