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

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

Je n’ai pas eu le temps cette semaine de vous rédiger un article (shame on me) alors je me rattrape en ce dernier jour, avec une petite astuce que j’ai découvert cette semaine.

Pour cet article, je vais reprendre la structure des articles « snippets », c’est à dire : du code à appliquer et peu de bla-bla !

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

letterpress css3

HTML

</pre>
<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

J’ai découvert cette astuce à l’occasion de la refonte du site Le Blog du Trading, où vous pouvez voir ce code « en live ». Je vous présenterais très bientôt cette refonte sous forme d’étude de cas…ça pourra en inspirer certains !

Tant que vous y êtes, vous aurez sûrement envie d’approfondir le sujet des ombrages, pour réaliser notamment de très beaux boutons en volume.

Enjoy ! (et maintenant je vais répondre aux commentaires qui s’entassent depuis plus d’une semaine…mais pourquoi les journées ne font-elle que 24h ??)

astuce, CSS, CSS3, débutant

A propos de MarieEve Louvel

Depuis 3 ans, je partage mes connaissances sur ce blog, pour les entrepreneurs désireux de créer leur site vitrine et/ou leur blog professionnel avec WordPress. Mon expérience professionnelle va de l'accompagnement à la formation, en passant par de la création de site ou de logiciel. Retrouvez mes cours en ligne sur mon site FeelWeb Formation [http://feelwebformation.com]

17 commentaires

  1. Salut MarieEve je vous remercie pour cet article absolument magnifiques les effets !. Cependant je cherche à rendre cet effet pour une newsletter, s’agit il du même code?? merci encore une fois et bonne continuation!

    Répondre
    • Salut Karyn,

      Ouhlàà…CSS3 n’est pas compris par les clients mails. Ca ne va pas être possible, désolée !

      Répondre
  2. Bonjour Marie-Eve,

    Je ne comprends pas trop la ligne 1 et la ligne 4 de la partie CSS. Pourquoi letterpress est il définit de cette façon?
    Est ce une classe prédéfinie en CSS ou est-ce le programmeur qui la définit et la nomme comme il le souhaite?

    Répondre
    • Bonjour François,

      Non c’est un nom de classe donné arbitrairement. Tu peux utiliser class= »toto » ça marchera tout aussi bien. La ligne importante pour l’effet « letterpress », c’est celle avec la propriété text-shadow.

      Répondre
  3. Sorry j’ai oublié de cocher l’option « seulement réponses à mes commentaires »

    François

    Répondre
  4. Je trouve le résultat plutôt pas mal! merci :)

    Répondre
  5. Bonjour,
    Pour un site WordPress, dans quel fichier doit on copier coller la ligne de HTML?
    Merci

    Répondre
    • Bonjour,

      Vous pouvez mettre ce code à la fin de votre fichier style.css
      Si ça ne marche pas, laissez le code en place et donnez moi l’url, je jetterais un oeil.

      Répondre
  6. merci bien à vous; et pour le blog très intéressant et impressionnant; nos connaissances ont toujours besoin
    de tel blogs pour rester en mise à jour avec ce qui nous entoure.

    Répondre
  7. Merci, pour les CSS que tu nous propose et ça donne l’effet que j’attends de ces codes.

    Répondre
  8. Merci pour cette astuce. L’effet visuel qu’elle procure est appréciable.
    Si la journée était plus que 24h, on va poser la même question :)

    Répondre
  9. Merci pour ce code. A mon avis, il est important de l’utiliser avec parcimonie et de manière très légère (dans des tons quasiment identiques). Le risque est d’avoir rapidement un rendu « amateur / arc-en-ciel » !

    Répondre
  10. Elle est superbe cette petite astuce! Mais il faudra faire attention à ne pas l’employer partout, ce qui pourrait très vite lasser les internautes en visite sur le blog…
    Merci pour ces explications!

    Répondre
    • En effet…à utiliser avec modération !

      Répondre

Soumettre un commentaire

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

This Blog will give regular Commentators DoFollow Status. Implemented from IT Blögg

EmailEmail
PrintPrint