Avec un titre comme celui-ci, si tu ne brûles pas d’envie de lire ce billet c’est que tu as un gros problème.

Parmi les évolutions notables du réseau ARPANET, on peut noter son changement de nom en « Internet », l’apparition du porn en masse, l’explosion de World of Warcraft et la dernière mouture des feuilles de style en cascade.

Appelé « CSS3 », ce standard est aujourd’hui supporté par la majorité des navigateurs web récents, et même par cette saleté d’Internet Explorer si on en croit les bruits de couloir.

Après cette charmante introduction, il est plus que de temps de sauter dans le vif du sujet. Je vais aujourd’hui te montrer comment créer simplement et en CSS un bloc de citation comme celui-ci.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae metus arcu, vel rhoncus purus. Donec leo leo, ullamcorper ac pretium eget, cursus vestibulum libero. Donec quis odio mi. Nam interdum dictum est id scelerisque. Cras lacus est, sagittis in pulvinar id, volutpat vel felis. Nunc in ipsum nulla, a hendrerit tellus. Curabitur adipiscing felis quis quam blandit rhoncus. Nullam eu justo metus. Nullam non metus purus, sed vehicula sem.

Tu remarqueras les guillemets situés en haut à gauche et en bas à droite, ce bel arrangement relevant du défi il y a quelques années est aujourd’hui fort simple grâce à une nouveauté de CSS3, à savoir la possibilité d’avoir plusieurs images de fond dans une seule balise « DIV ».

Pour faire la même chose chez toi il te suffit de créer deux images contenant ces guillemets, puis de les placer dans le répertoire qui contient ta feuille de style.

Tu peux voler les miennes si tu veux.

J’y ai ajouté un petit espace de quelques pixels sur le haut, afin que l’image ne soit pas collée à la barre traversante.

De même que pour l’image du haut, un espace a été ajouté sur le bas de celle-ci.

Ensuite, dans ton fichier CSS tu crées un bloc que tu appelles par exemple « citation ».

1
2
3
4
5
6
7
8
9
10
11
12
13
.citation {

    background-image: url("quote_haut.jpg"), url("quote_bas.jpg");
    background-position: left top, right bottom;
    background-repeat: no-repeat, no-repeat;

    color: #555;
    margin: 0px;
    padding: 10px 50px 10px 50px;
    border-top: 2px solid #c8c8c8;
    border-bottom: 2px solid #c8c8c8;
    display: block;
}

Tu noteras que la propriété « background-image » n’a pas une, mais deux images de fond. Ouais mon gars, deux! Le séparateur étant la virgule entre les deux.

La première image sera affichée en haut à gauche, et la deuxième en bas à droite. Tout cela grâce à la propriété « background-position » , qui a également deux valeurs, toujours séparées par des virgules.

Même concept pour « background-repeat » .

N’oublie pas de régler les valeurs de « padding » , afin que le texte ne viennent pas se superposer aux guillemets. Je te rappelle l’ordre des quatre valeurs de ce genre de propriété : haut, droite, bas, gauche. Comme une montre.

Le reste n’est que formatage de couleur, ainsi que l’affichage de deux barres en dessus et en dessous grâce à « border-top » et « border-bottom » .

Finalement, tu te débrouilles pour que ton texte de citation soit correctement formaté en l’entourant de la balise « DIV » utilisant cette classe.

1
2
3
<div class="citation">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>

Si tu utilises WordPress tu peux alors faire en sorte que toutes tes citations utilisent cette mise en page. Pour cela il te faut modifier le bloc « blockquote » dans ton fichier CSS, tout comme « citation » plus haut mais sans le point à gauche (on modifie la balise entière, pas une classe).

1
blockquote {

Merci qui? Merci CSS3!