Ligne originale utilisant les propriétés CSS3

Code 31/07/2020 1 min

Récemment, j'ai participé à une formation sur OpenClassRooms où on devait réaliser un projet avec un soulignement uniquement sur le début du texte et je voulais vous montrer trois techniques possibles

Voici un exemple sur Codepen.io avec trois façon de faire, vous voulez encore plus de façons de faire ça avec CSS TRICKS

Le code HTML ressemble à ceci en utilisant la balise <span>.

<main>
<div>
<h1 class="demo-1">
<span>Demo 1</span> – Underlines with pseudo-elements
</h1>
<h1 class="demo-2"><span>Demo 2</span> – Underlines with border-bottom</h1>
<h1 class="demo-3">
<span>Demo 3</span> – Underlines with background-image
</h1>
</div>
</main>

Tout d'abord, je dois mettre un style général.

/* Reset style */
*,
*:before,
*:after {
box-sizing: border-box;
margin: 0;
padding: 0;
border: 0;
}
html {
box-sizing: inherit;
font-size: 100%;
}
/* Common style*/
body {
padding: 40px;
font-family: "Fredoka One", cursive;
font-size: 80%;
background: Yellow;
}
main {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 20px;
width: 100%;
height: 100vh;
background: black;
overflow: auto;
}
main div {
padding: 40px;
width: 80%;
color: white;
background: blue;
resize: both;
overflow: auto;
}
h1 {
margin-bottom: 1.5em;
line-height: 1.8;
}
h1:nth-child(1) {
margin-top: 1em;
}
h1 span {
position: relative;
}

Remarquez la valeur pour line-height: 1.8 sur <h1> ce qui donne de l'espace au texte qui ce place au dessous quand je réduit la fenêtre du navigateur et la position: relative sur le <span> qui me servira pour le pseudo-elements dans le premier exemple

Exemple avec pseudo-elements :

/* DEMO 1 */
.demo-1 span:before {
content: "";
position: absolute;
left: 0;
bottom: -10px;
width: 100%;
height: 6px;
background: red;
}

Exemple avec border-bottom :

/* DEMO 2 */
.demo-2 span {
padding-bottom: 4px;
border-bottom: solid 6px green;
}

Exemple avec background-image :

/* DEMO 3 */
.demo-3 span {
padding-bottom: 10px;
background-image: linear-gradient(to bottom, orange 33%, transparent 33%);
background-position: 0 1.35em;
background-repeat: repeat-x;
background-size: 2px;
}

Pour ma part, je préfère avec pseudo-elements surtout quand on comprend l'importance du position: absolute de la balise enfant et pour la balise parent position: relative après, ce n'ai n'y plus n'y moins de dessiner une forme (un trait dans cet exemple) et le positionnée.

Sur la démo 3 avec background-image est un peut plus compliquer à mettre en place et demande un peut plus de techniques mais fonctionne tout aussi bien. Toutefois, vérifier la compatibilité du navigateur et idem avec box-shadow.

OK, maintenant vous savez faire des lignes originales en utilisant les propriétés du CSS3, il y a d'autres façons de faire, je pense au SVG avec un exemple sur CSS-TRICKS.

À très bientôt pour d'autres démos.


Merci de votre patience. J’ai créé ce site pour partager ma passion du Web en proposant à la fois des projets personnels ou professionnels et parler code sur mon blog. Vous pouvez me retrouver sur Twitter. Voir d'autres articles dans la catégorie Code

← Précédente

Biographie

Joël Lesenne
  • 👨‍💻Je suis un développeur et intégrateur Web.
  • 🇫🇷Je suis né près de Lille(59), je vis à Lyon(69) France.
  • 💻Je crée des interfaces UX/UI originale et moderne.

Rester en contact

M’écrire pour parler de votre projet contact@joellesenne.dev, voir mon CV, mon Laboratoire ou me trouver sur d'autres plateformes : Dribbble Instagram Github Codepen & Twitter