Un titre funky en CSS

Cette semaine j’ai trouvé une petite astuce pour rajouter un disque coloré au début d’un titre. L’effet est plutôt sympa (les goûts et les couleurs…) et l’avantage c’est qu’aucune image n’est nécessaire. Deux lignes de HTML et un peu de CSS 3 suffisent.

Commençons déjà par le marquage HTML.

<div class="entry-title">
	<h2>Funk is not what you think</h2>
	<div>Funk is not what you think</div>
</div>

Tout ce que l’on a à faire c’est dupliquer notre titre h2, mais on va le mettre dans une div à la suite de notre h2 (ce sera notre disque). Ainsi, on ne perturbera pas la sémantique de notre balise h2 d’origine. Puis, on englobe tout ceci dans une autre div qui servira au positionnement du disque.

Passons maintenant à la mise en forme CSS.

.entry-title {
	position: relative;
	text-indent: 34px;
	font-size: 36px;
	line-height: 100px;
	height: 100px;		/* Because IE sucks */
}

On commence par styler la div englobante: comme j’aime les grands titres, le disque fera 100px de diamètre avec une police large, d’où leline-height afin de centrer le tout verticalement. Un text-indent pour décaler le texte vers la droite et position: relative afin de positionner le disque en absolu plus tard. Pour le height: 100px, c’est uniquement pour donner le layout au titre pour IE.

Pour le titre h2:

.entry-title h2 {
	color: #fff;
	text-shadow: 0 0 10px #000;
}

Rien de compliqué, comme j’ai un fond sombre dans cet exemple, je met le texte en blanc et je rajoute une ombre noire autour (pour text-shadow, il faudra peut-être utiliser la notation rgba si votre fond est clair, afin de régler un alpha).

Et enfin notre disque:

.entry-title div {
	color: #271b0d;
	background-color: #ff7100;
	width: 100px;
	height: 100px;
	-moz-border-radius: 50px;
	-webkit-border-radius: 50px;
	-khtml-border-radius: 50px;
	border-radius: 50px;
	-moz-box-shadow: 0 0 10px #000;
	-webkit-box-shadow: 0 0 10px #000;
	-khtml-box-shadow: 0 0 10px #000;
	box-shadow: 0 0 10px #000;
	position: absolute;
	left: 0;
	top: 0;
	overflow: hidden;
	white-space: nowrap;
}

Premièrement je règle la couleur du texte sur la même couleur que le fond du site (ici, marron) puis la couleur de notre futur disque avec background-color.
Ensuite je passe aux dimensions de la div: notre disque doit faire 100px de diamètre donc largeur et hauteur sont à 100px, puis on utilise un border-radius de 50px afin de créer un rond.
Comme j’ai mis une ombre sur le texte de la balise h2, je fais de même avec ma div, mais cette fois avec box-shadow.
On positionne enfin le tout en absolu.
Pour être sûr que notre texte marron ne va pas dépasser du cercle, et venir couvrir le texte blanc, on doit utiliser un overflow: hidden.
Petite subtilité: si mon titre est par exemple « Je suis funky », le premier mot « Je » est court et le reste du titre va passer à la ligne, faisant disparaître le début du mot suivant sensé apparaître dans notre disque. On doit donc utiliser un white-space: nowrap afin que tout reste sur une ligne.

Dernière chose, la fonte:

.entry-title h2, .entry-title div {
	font-family: funkyfont, helvetica, arial, sans-serif;
	font-weight: normal;
}

On doit bien sûr appliquer la même fonte à la balise h2 et au disque, mais pas seulement, il faut aussi qu’ils aient tous les deux le même font-weight. Par défaut, un titre h2 est en « bold », pas notre disque puisqu’il s’agit une div. Pour ma part, j’ai préféré utiliser un font-weight: normal pour ne pas dénaturer la fonte utilisée.

Et voilà votre titre funky :)

Concernant IE, on peut se passer des ombres, mais pour le disque il faudra en passer par un autre moyen pour l’obtenir. Le script Roundies.js est un bon moyen, ou alors se résigner à utiliser une image.