Donnez du relief à vos titres avec un soupçon de CSS3

par Youcef · Publié 21 juin 2013 · Mis à jour 27 mars 2020

Comment réaliser un effet « letterpress » sur vos titres ?

HTML

<h1 class="letterpress"><a href="https://www.blog-trading.fr/">Le Blog du Trading</a></h1>
<pre>

CSS

h1.letterpress {
margin : 50px 0; /* marges en haut et en bas du titre */
}
h1.letterpress a {
font-size: 70px; /* taille de la police */
color: #305ABC; /* Couleur de la police */
text-decoration: none; /* Enlèvement du soulignement sur les liens */
text-shadow: 0 -2px 0 #222222; /* Ombre portée qui donne du volume : effet letterpress */
}