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

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

letterpress css3

HTML

<h1 class="letterpress"><a href="http://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 */
}

Résulat final

Le Blog du Trading

 

 

Youcef

Consultant en référencement, chef de projet Web et entrepreneur, l'écriture et la pédagogie font aussi partie de mes passions. Avec ce blog, ma mission est d'aider les entrepreneurs, qui ne sont pas spécialistes du web, à réussir leur propre site, et qu'il soit surtout visible !

Vous aimerez aussi...

Laisser un commentaire

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