Sélectionner une page

Astuce CSS : créez une lettrine

13 Fév 18 | Code

Première étape :

Pour créer une belle lettrine pour vos articles voici un site très utile : Google Web Font vous permet d’utiliser des polices d’écriture plus recherchées que celles de d’habitude. C’est une bibliothèque gratuite de polices libres de droit.

Repérez la police que vous souhaitez utiliser, pour cet exemple j’ai choisi : Rye de Nicolle Fally. Cliquez sur « SELECT THIS FONT ».

Insérez la première partie du code dans votre <head>

 

L’étape CSS :

Créez une classe spécifique votre lettrine dans votre CSS. Si vous ne savez ce qu’est le CSS où et comment l’intégrer à votre site je vous renvois à l’article du W3.org.
On utilise le sélecteur de feuille de style first-letter pour spécifier les propriétés CSS de la première lettre d’un élément bloc par exemple <p>.
Créez votre CSS de cette façon :

p:first-letter { 
font-size: 60px; 
line-height:60px; 
margin-right:  5px; 
float: left; 
color: #F55E07; 
}

On insère la deuxième partie de code CSS récupéré sur Google Web Font :

p:first-letter { 
font-family: 'Rye', cursive; 
font-size: 60px; 
line-height:60px; 
margin-right:  5px; 
float: left; 
color: #F55E07; }

On peut aussi lui ajouter du style en lui ajoutant une bordure et un fond:

p:first-letter { 
font-family: 'Rye', cursive; 
font-size: 60px; 
line-height:60px; 
margin-right:  5px; 
float: left; 
color: #F55E07; 
border: 1px solid #faca8f; 
background: #FFE0BA; 
padding: 8px; 
}

Troisième partie un peu de CSS3 :

Voici un site qui permet d’avoir un visuel de l’ombrage que l’on créé avec l’attribut box-shadow : Generateur-de-box-shadow-css3 C’est très pratique lorsque l’on est pas vraiment sûr de l’effet que l’on recherche. Dans notre cas je souhaite créer un décalage blanc de 1px entre mon fond et la bordure.

Voici le code récupéré grâce au générateur et compatible avec différents navigateurs que j’ajoute au CSS existant :

p:first-letter { 
font-family: 'Rye', 
cursive; font-size: 60px; 
line-height:60px; 
margin-right:  5px; 
float: left; 
color: #F55E07; 
border: 1px solid #faca8f; 
background: #FFE0BA; 
padding: 8px; 
-moz-box-shadow: inset 0px 0px 0px 1px #ffffff; 
webkit-box-shadow: inset 0px 0px 0px 1px #ffffff; 
-o-box-shadow: inset 0px 0px 0px 1px #ffffff; 
box-shadow: inset 0px 0px 0px 1px #ffffff; 
}

Pour parfaire le résultat, j’ajoute une ombre de texte pour créer un effet de relief grâce à l’attribut text-shadow :

p:first-letter { 
  font-family: 'Rye', 
    cursive; font-size: 60px; 
  line-height:60px; 
  margin-right:  5px; 
  float: left; 
  color: #F55E07; 
  border: 1px solid #faca8f; 
  background: #FFE0BA; 
  padding: 8px; 
  -moz-box-shadow: inset 0px 0px 0px 1px #ffffff; 
  -webkit-box-shadow: inset 0px 0px 0px 1px #ffffff; 
  -o-box-shadow: inset 0px 0px 0px 1px #ffffff; b
  ox-shadow: inset 0px 0px 0px 1px #ffffff; 
  text-shadow:1px 1px 0px #757575; 
}

Voilà le résultat :

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed ligula ac eros tempor ornare id nec ante. Donec elementum justo dui. Nulla lobortis, purus eu faucibus commodo, tellus eros facilisis nulla, ac sagittis odio turpis sit amet quam. Nulla facilisi. Etiam sed varius risus. Aenean est enim, semper vel rutrum vitae, euismod in diam. Curabitur mollis diam vitae mauris tempor et bibendum arcu vulputate. Aenean quam mi, viverra mollis suscipit tincidunt, adipiscing non nulla.

Le truc en plus :

Mon petit truc en plus c’est d’ajouter une image semi-transparente au fond de la lettrine.
Voici l’image :

Voici le code :

p:first-letter { 
font-family: 'Rye', cursive; 
font-size: 60px; 
line-height:60px; 
margin-right:  5px; 
float: left; 
color: #F55E07; 
border: 1px solid #faca8f; 
background: url(img/lettrine-fond.png) #FFE0BA; 
padding: 8px; 
-moz-box-shadow: inset 0px 0px 0px 1px #ffffff; 
-webkit-box-shadow: inset 0px 0px 0px 1px #ffffff; 
-o-box-shadow: inset 0px 0px 0px 1px #ffffff; 
box-shadow: inset 0px 0px 0px 1px #ffffff; 
text-shadow:1px 1px 0px #757575; 
}

Ce qui donne

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed ligula ac eros tempor ornare id nec ante. Donec elementum justo dui. Nulla lobortis, purus eu faucibus commodo, tellus eros facilisis nulla, ac sagittis odio turpis sit amet quam. Nulla facilisi. Etiam sed varius risus. Aenean est enim, semper vel rutrum vitae, euismod in diam. Curabitur mollis diam vitae mauris tempor et bibendum arcu vulputate. Aenean quam mi, viverra mollis suscipit tincidunt, adipiscing non nulla.

Variez les styles :

On peut varier les styles en changeant les couleurs et images de fond.
Voici une autre image :

Voici un autre jeu de couleur :

p:first-letter { 
font-family: 'Rye', cursive; 
font-size: 60px; 
line-height:60px; 
margin-right:  5px; 
float: left; 
color: #2E6F7B; 
border: 1px solid #b0d7fc; 
background: url(img/lettrine-fond2.png) #D2E8FD; 
padding: 8px; 
-moz-box-shadow: inset 0px 0px 0px 1px #ffffff; 
-webkit-box-shadow: inset 0px 0px 0px 1px #ffffff; 
-o-box-shadow: inset 0px 0px 0px 1px #ffffff; 
box-shadow: inset 0px 0px 0px 1px #ffffff; 
text-shadow:1px 1px 0px #ffffff; 
}

Ce qui donne :

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed ligula ac eros tempor ornare id nec ante. Donec elementum justo dui. Nulla lobortis, purus eu faucibus commodo, tellus eros facilisis nulla, ac sagittis odio turpis sit amet quam. Nulla facilisi. Etiam sed varius risus. Aenean est enim, semper vel rutrum vitae, euismod in diam. Curabitur mollis diam vitae mauris tempor et bibendum arcu vulputate. Aenean quam mi, viverra mollis suscipit tincidunt, adipiscing non nulla.

Vous avez des questions à propos de cet article ? Besoin d'aide sur un autre sujet ? Contactez-moi, je pratique des prix vraiment compétitifs et je réponds généralement rapidement