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!

   

12 commentaires

  1. En général, quand je vois un article sur CSS3, c’est d’un gout moyen et avec des explications obscures. Sauf ici. Je comprends mieux pourquoi le AAA est toujours d’actualités en ces lieux !

    PS : la sinécure c’est avec CSS3 — avant ce n’était justement pas une sinécure ;) Merci d’avoir suivi notre minute ortho-latiniste.
  2. @Julietromeo
    S’amuser avec CSS, tout un art! :mrgreen:

    La sinécure étant effectivement un travail simple, et non pas l’inverse, je ne dois pas être le seul à faire cette erreur je pense. J’ai corrigé mon article, merci! (chinois)
  3. En fait, dans le padding que tu appliques au texte, seuls le padding à droite et à gauche servent à éviter d’empiéter sur les guillemets. Les paddings en haut et en bas servent juste à éviter que les barres soient collées au texte, ce que tu as résolu sur les guillemets en leur ajoutant une bordure autour.

    Moi, ce que j’aime dans CSS3, c’est la possibilité de faire des cadres avec les coins arrondis simplement avec une seule commande, sans devoir recourir à l’artifice des images à coins arrondis.

    (coucou)
  4. @Patrick
    C’est tout à fait ça, ces 10 pixels que j’ai ajouté en haut et en bas sont au contraire des deux autres purement esthétiques.

    Ah les coins arrondis, souvenirs d’avant CSS3 où il fallait effectivement jouer avec des images pour donner l’illusion des courbes. (pendu)
  5. Je veux m’échapper de mes cours de programmation en faisant un p’tit tour sur ton blog, et que vois-je ? DU CSS !!!

    Quand est-ce que tu nous fais de petits articles sympatoche sur des films ou série, ou tes articles Facebook était drôle aussi !! :mrgreen:
  6. @Hina
    Désolé d’avoir pourri ta détente. :mrgreen:

    Un billet sur un vieux film de science fiction est en cours, mes articles lus en quelques minutes (voire secondes) prennent plusieurs jours pour être rédigés.
  7. Hello,
    Une question sur laquelle je rame depuis un moment : est-il possible de créer une zone cliquable (façon image map) sur le background-image en css ?
    Autrement qu’en trichant avec une image invisible, je veux dire (car ça a ses limites).
    Merci l’expert !
    @astringues
  8. @astringues
    S’il y a une solution elle serait du côté HTML, CSS n’étant que de la mise en page. Peut-être avec jQuery, mais ça me semble compliqué désolé. (sigh)
  9. Merci quand même !
    @astringues
  10. C’est bon ça, merci Gael *o*
  11. Après m’être pris la tête pendant des années en CSS pour faire ça, je lis cet article. C’est dégoûtant de simplicité ! Il faudrait interdire CSS3 aux débutants pour qu’ils comprennent un peu leur douleur de « comment c’était avant » ;-) !
  12. @astringues & chymaille
    (chinois)

    @mitch
    J’ai aussi galéré un bon moment avec les versions précédentes de CSS dans l’espoir d’arriver à ce résultat, pour finalement toujours abandonner.

    De notre temps au moins on avait les mains dans le cambouis. (radoteur)

Tu peux même laisser ton avis

Note juste que tout commentaire désobligeant, illégal, publicitaire, agressif, mal écrit ou tout simplement ennuyeux sera cruellement supprimé sans préavis, sans explication et sans excuse par le dictateur autoproclamé actuellement au pouvoir.

Émoticônes à discrétion

|-| XX( ??? <3 ;-) :yes: :twisted: :roll: :oops: :no: :mrgreen: :lalala: :idea: :evil: :cry: :crazy: :arrow: :?: :-| :-x :-p :-o :-P :-D :-? :-) :-( :!: 8-O 8) (zzz) (woohoo) (vomi) (tusors) (troll) (suisse) (suicide) (sigh) (siffle) (roses) (radoteur) (pope) (pleure) (pendu) (ouch) (mur) (mechant) (lulz) (lol) (hum) (haha) (god) (fou) (fache) (evilfinger) (endormi) (embarrasse) (coucou) (chinois) (censored) (bouffon) (bisou) (badday) (avosordres) (applau)