Ajouter un guillemet de grande taille pour citer du texte

Publié le 20 mars 2008 par Dave Lizotte
Vous avez certainement remarqué sur plusieurs sites, un guillemet de taille géante lorsque la personne cite un extrait de texte dans son article. Vous voyez ce que je veux dire ? Peut-être pas alors, regarder l'image qui suit. Celle-ci représente parfaitement ce dont je vous explique.
 
Alors, vous vous demandez comment faire cela? Et bien c'est très simple à l'aide de CSS. Le tout s'effectue en quelques lignes.
  • Tout d'abord, il vous faut une image de « guillemet ». Et oui le tout se fait avec une image!
  • Ensuite, utiliser le code css suivant :
blockquote:first-letter {
    background: url(images/Guillemets.gif) no-repeat left top;
    padding-left: 18px;
    font: italic 1.4em Georgia, "Times New Roman", Times, serif;
}
  • Ensuite il ne vous reste plus qu'à créer vos blocs de citation dans votre texte.
<blockquote>
    Ma citation .... .... .... .... ....
</blockquote>