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

Partagez si vous aimez ->

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

 

 

Partagez si vous aimez ->

Youcef

Concepteur de Sites Web et entrepreneur, l'écriture et la pédagogie font aussi partie de mes passions. Mon objectif est de vous aider à trouver la solution idéale pour créer votre propre Site Internet.

Vous aimerez aussi...

Laisser un commentaire

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

Simple Share Buttons