Donner du style à la balise HTML blockquote
Du plus simple ou plus sophistiqué, faites des citations avec style!
Compatibilité: Ce code CSS fonctionne parfaitement avec tous les navigateurs, dont Internet Explorer depuis la version 8. Pour les versions antérieures de IE, le rendu se dégrade, mais le contenu reste fonctionnel.
Le code décrit dans chaque exemple, tel quel, s'applique à toutes les balises sur le site ou les pages concernées par la feuille de style. Mais dans le le code source de cette page nous utilisons plutôt des classes pour pouvoir présenter ensemble des styles différents.
Si votre site utilise les balises blockquote pour autre chose que des citations, par exemple pour mettre du texte en retrait, ce qui n'est pas une pratique conseillée, il faut plutôt utiliser une règle de style comme par exemple:
.retrait
{
margin: 16px 32px 16px 32px;
} Style simple
Le style le plus simple pour la balise blockquote: cela consiste à appliquer un retrait, mettre le texte en italique, et changer la police de caractères.
Et voici un exemple...
blockquote
{
font-style: italic;
margin-left: 32px;
font-family: Georgia, "Times New Roman", serif;
}Et la démonstration:
Je m'oppose à ceux qui voient le futur négativement. C'est là que je vais passer le reste de ma vie.
- Charles Kettering.
Barre verticale
On peut mettre plus en relief encore le fait qu'il s'agisse d'une citation avec une barre verticale...
blockquote
{
font-style: normal;
font-size: 16px;
margin-left: 32px;
font-family: Consolas, "Times New Roman", Verdana;
border-left: 4px solid #CCC;
padding-left: 8px;
}Le code #CCC correspond à la couleur grise. Vous pouvez bien sûr choisir la couleur, avec par exemple: #900 pour le rouge, #09C pour du bleu turquoise, #090 pour du vert, etc...
Et à l'occasion nous essayons une police de caractère différente, la .
Le résultat:
Si tu as besoin d'une main secourable, tu en a deux aux bouts des bras.
- Jules Renard.
Utilisation d'une image
Et si on ajoutait un peu de fantaisie? Pour cela on va utiliser une image. Une fois encore, on essaie une police différente.
Le principe - très classique - consiste à utiliser l'image comme motif de fond pour la balise, sans répétition, et à décaler le texte à l'intérieur de la balise pour montrer l'image avec la propriété padding-left.
blockquote
{
font-style:normal;
margin-left:32px;
font-family:"Segoe Print", "Times New Roman", Verdana;
padding-left: 48px;
background:url('/css/images/blockquote.png');
background-repeat:no-repeat;
min-height: 30px;
}Le socialisme n'a jamais pris racine aux Etats-Unis parce que les pauvres ne se voient pas comme des personnes que l'on exploite mais comme des millionnaires provisoirement dans le besoin.
- John Steinbeck.
En appliquant le même principe on peut aussi créer une infobulle...
Infobulle
Cette fois on doit ajouter une balise supplémentaire pour figurer l'appendice de la bulle, parce celle-ci a une bordure mais cette bordure doit s'interrompre au niveau de l'appendice.
Pour obtenir ce résultat, on trace l'appendice à gauche de la bulle, mais en le superposant de 2 pixels sur celle-ci de façon à ce qu'il efface une partie de la bordure et qu'un tracé complet soit formé avec la bordure et l'appendice.
La propriété float:left permet de s'assurer que l'appendice soit positionné à gauche de la bulle.
La propriété z-index assure que l'appendice soit placé devant bordure.
<div class="bubble"></div>
<blockquote>
</blockquote>
blockquote
margin-left:46px;
font-family:"Segoe Print", "Times New Roman", Verdana;
padding: 8px;
min-height: 44px;
border:2px solid black;
border-radius:6px;
z-index:1;
}
.bubble
{
background: url('/css/images/bubble.png') no-repeat;
margin:16px 0 0 0;
width:48px;
height:20px;
padding:0;
position:relative;
z-index:10;
float:left;
}Télécharger l'image de l'appendice.
Je ne veux pas prévoir l'avenir. Je me préoccupe de prendre soin du présent. Dieu ne m'a donné aucun contrôle sur le moment qui suit.
- Gandhi.
Citation à coté de l'image de l'auteur
La citation sera placée à coté de le photo de son auteur. L'image a la propriété float:left.
Donner à la citation la forme d'un phylactère ajoute une difficulté supplémentaire: la marge gauche de la bulle doit être modifiée pour prendre en compte la largeur de la photo de l'auteur. Il faudrait donc que toutes les photos utilisées dans ce contexte soient redimensionnées pour avoir aient la même largeur en accord avec la marge définie dans la feuille de style du phylactère.
On pourra éventuellement contourner cette difficulté en plaçant l'appendice et la bulle à l'intérieur d'un nouveau calque...
<img src="images/victor-hugo.jpg" width="124" height="150" class="author" />
<div class="bubble"></div>
<blockquote></blockquote>
.author
{
float:left;
clear:both;
}
blockquote
{
margin-left:170px;
font-family:"Segoe Print", "Times New Roman", Verdana;
padding: 8px;
min-height: 44px;
border:2px solid black;
border-radius:6px;
z-index:1;
}
.bubble
{
background: url('/css/images/bubble.png') no-repeat;
margin:16px 0 0 0px;
width:48px;
height:20px;
padding:0;
position:relative;
z-index:10;
float:left;
}
L’avenir, fantôme aux mains vides, qui promet tout et qui n’a rien!
De quelque mot profond tout homme est le disciple.
L’eau qui ne court pas fait un marais, l’esprit qui ne travaille pas fait un sot.
Citations de Victor Hugo.
Utilisation de CSS 3 : Solution optimale
Dans ce cas l'effet qui consiste à représenter un phylactère disparait sur les navigateurs anciens, mais la présentation reste acceptable. Sur IE7 par exemple, on aura la citation dans un rectangle à coté de l'image de l'auteur. Cela fonctionne avec IE8.
C'est en fait le meilleur choix car l'effet est rendu avec une simple balise <blockquotes>, on n'a pas besoin d'ajouter l'image de l'appendice dans la page comme dans le cas précédent.
<img src="images/ray-bradbury.jpg" width="124" height="147" class="author" />
<blockquote></blockquote>
La différence dans le code est dans l'utilisation de la pseudo-classe :after qui permet de lier deux règles CSS entre elles. La propriété content est aussi nécessaire.
.author
{
float:left;
clear:both;
}
blockquote
{
position:relative;
font-family:"Segoe Print", "Times New Roman", Verdana;
padding:8px;
margin:8px 8px 8px 180px;
color:black;
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
background:white;
border:2px solid black;
min-height:64px;
}
blockquote:after
{
content:"";
position:absolute;
left:-48px;
display:block;
top:48px;
background: url('https://www.xul.fr/css/images/bubble.png') no-repeat;
width:48px;
height:20px;
padding:0;
}
Je me souviens d'une soirée à New York il y a 35 ans de cela. Ils m'appelaient Buck Roger ou Flash Gordon. Je leur disais: Donnez-moi votre numéro de téléphone, s'il vous plaît.
- Pourquoi? me demandait-on.
- Parce que le jour où l'homme mettra le pied sur la lune, vous recevrez un appel.
Ray Bradbury, auteur de science-fiction.