Catégories
Plugin et site web

8 règles horizontales et diviseurs améliorés avec CSS

Certains éléments de conception sont si courants qu'ils deviennent presque une réflexion après coup. La règle horizontale en fait partie. Il est facile de les placer simplement dans notre contenu sans aucune attention aux détails.

Mais cette vénérable balise HTML est capable de faire bien plus – grâce à un CSS intelligent. Les règles horizontales peuvent être assez décoratives, que vous préfériez un design audacieux ou subtil. Ils peuvent également être utilisés comme mécanisme de marque amélioré, avec des éléments de couleur et de logo en remorque.

Si vous souhaitez faire passer vos RH au niveau supérieur, vous voudrez consulter cette collection de diviseurs fantaisistes qui vont au-delà de la valeur par défaut. Allons creuser!

La boîte à outils Web Designer

Téléchargements illimités: plus de 1 000 000 modèles Web, thèmes, plug-ins, éléments de conception et bien plus encore!

La mesure d'un HR

Cet exemple est incroyablement intelligent, même s'il est un peu extrême. Il comprend un grand conglomérat de


des balises (100 en tout) conçues pour simuler l'apparence d'une règle. Pratique? Peut être pas. Mais c’est certainement créatif.

Voir le stylo
Une règle horizontale par John W

Lignes en ligne

Bien que cet extrait de code n'utilise pas de règle horizontale réelle, il simule l'effet avec CSS. Le texte ou d'autres éléments de conception peuvent être placés en ligne avec le séparateur, ce qui crée un effet accrocheur. C'est aussi délicieusement simple en termes de code.

Voir le stylo
Règle horizontale en ligne par Ohad

Formes emblématiques

Voici la preuve que la subtilité peut encore se démarquer. Une règle horizontale standard est enrichie de formes (cercle, losange, étoile, etc.) et offre un visuel attrayant. Combiné à la largeur courte et aux couleurs vives de la règle, il aide les lecteurs à délimiter une section de contenu d'une autre.

Voir le stylo
«  Règles horizontales fantaisie '' par szpakoli

Règles d'accordéon

Les accordéons sont devenus l'un des éléments d'interface utilisateur les plus populaires en raison de leur penchant pour économiser de l'espace. Cette version CSS pure de la fonctionnalité inclut des règles horizontales dans le cadre de l'interface utilisable. Un rare exemple du bon vieux


utilisé à des fins fonctionnelles.

Voir le stylo
Effet d'accordéon avec règles horizontales par Will Boyd

Variations de style simples

Cet extrait de code propose 9 règles horizontales intéressantes qui peuvent s'adapter à une variété de styles et de cas d'utilisation. Les exemples incluent l'utilisation de symboles, de texte centré, de couleurs et de motifs de bordure. Il y en a pour tous les goûts.

Voir le stylo
Quelques styles RH par Mark Murray

Style moyen avec accessibilité

Placer du texte dans une règle horizontale peut être délicat. Cela implique souvent des techniques qui ne sont pas très accessibles. Cet extrait de code est différent, car il utilise le contenu de

Mots clés. Il offre non seulement une esthétique cool de style moyen, mais il est également convivial pour les lecteurs d'écran.

Voir le stylo
Diviseurs de style moyen accessibles par Zoë Bijl

Designs décoratifs et minimaux

Vous aimeriez peut-être que vos séparateurs soient beaux sans vous distraire du reste de votre contenu. Cette collection de 18 styles simples est faite pour vous. Les effets sont bien exécutés sans aller trop loin avec des fonctionnalités flashy.

Voir le stylo
18 styles simples pour les règles horizontales (hr CSS Design) par Ibrahim Jabbari

Chemise de Charlie Brown ou cheveux de Bart Simpson?

Lors de la visualisation de ce motif en zig-zag, on évoque des images de personnages de dessins animés. Mais c'est aussi un peu de code intelligent. C’est une combinaison de deux


balises avec des dégradés CSS inclinés. Maintenant, quel personnage représente-t-il le mieux? Allons-y avec les cheveux de Bart.

Voir le stylo
«  Règle horizontale en zigzag '' par m0cha

(Horizontalement) Diviser et conquérir

Bien sûr, le style par défaut d'une règle horizontale fait le travail – mais où est le plaisir? Inspirez-vous des exemples ci-dessus et créez quelque chose qui complète l'ensemble de votre excellent travail de conception.

Besoin d'encore plus d'inspiration? Consultez notre collection CodePen pour plus d'extraits de diviseur.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *