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

 

 

Diffusez ce contenu sur vos réseaux
Tweet about this on Twitter
Twitter
Share on LinkedIn
Linkedin
Share on Facebook
Facebook

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 !

Laisser un commentaire

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