Lettrine en CSS3

Il était un temps où les ressources typographiques du HTML étaient limitées.

Très limitées. Les pages HTML d'antan ne pouvaient embarquer des polices comme de vulgaires fichiers média. De ce fait, les webmestres devaient se contenter de ce qu’il y avait à bord de la machine de l’internaute —ces fameuses « web safe fonts »—, celles intégrées aux différents OS (à moins d'acrobaties telles que SiFR ou Flir).
Mais ces temps sont révolus grâce à CSS et la règle @font-face.

CSS et sa règle @font-face permettant d'afficher n'importe quelle police on se met à rêver.
Vous avez l'âme d'un copiste (souvenez-vous de cette scène du film « Le Nom de la rose » où des moines dans le scriptorium écrivaient, debout devant leur écritoire, sur les parchemins) ? Alors enfilez votre robe de bure, rasez-vous le sommet du crâne pour obtenir une tonsure monacale, enfilez des sandales et suivez-moi : nous allons faire une enluminure gothique pour enrichir la typo de vos pages Web...

• • •

Trouvez la police

Rendez-vous sur Font Squirrel et trouvez dans la famille Blackletter la plus moche celle qui vous plaît.
Téléchargez le kit font-face.
Pour l'exemple, c'est Proclamate que j'ai choisi :
Proclamate

Embarquez la police

Mettez la police dans votre espace Web avec la feuille de style du package :


@font-face {
	font-family: 'Proclamate Light Light';
	src: url('proclamate_light.eot');
	src: local('Proclamate Light Light'), local('ProclamateLight-Light'), url('proclamate_light.woff') format('woff'), url('proclamate_light.ttf') format('truetype'), url('proclamate_light.svg#ProclamateLight-Light') format('svg');
}

@font-face {
	font-family: 'Proclamate Heavy Heavy';
	src: url('proclamate_heavy.eot');
	src: local('Proclamate Heavy Heavy'), local('ProclamateHeavy-Heavy'), url('proclamate_heavy.woff') format('woff'), url('proclamate_heavy.ttf') format('truetype'), url('proclamate_heavy.svg#ProclamateHeavy-Heavy') format('svg');
}

@font-face {
	font-family: 'Proclamate Incised Heavy';
	src: url('proclamate_incised.eot');
	src: local('Proclamate Incised Heavy'), local('ProclamateIncised-Heavy'), url('proclamate_incised.woff') format('woff'), url('proclamate_incised.ttf') format('truetype'), url('proclamate_incised.svg#ProclamateIncised-Heavy') format('svg');
}

Dans l'exemple c'est proclamate_incised que je vais utiliser pour rendre ma lettrine illisible.

Trouvez votre image de fond

Rendez-vous sur From Old Books, « Scanned Images, Engravings and Pictures From Old Books », et fouillez dans le grenier à la recherche d'un fond.
Pour l'exemple c'est dans cette page que j'ai trouvé l'écusson de Saint Luc. Plus moche ? Oui oui, il y en a.

Créez votre lettrine

On va définir la classe :

là il s'agit de dire que la lettrine va s'appliquer à la 1ère lettre du paragraphe se situant immédiatement sous le titre enserré par la balise h2. La pseudo-classe CSS : :first-letter étant maintenant reconnue par tous les navigateurs modernes plus besoin de l'isoler dans une balise span.
Ainsi :


h2+p:first-letter

On va suite appeler la police :

font-family:proclamate_incised, 'Times New Roman', serif;

On positionne ensuite sa lettrine

Il suffit de dire grâce à l'attribut "float: left;" qu'elle collera à gauche de notre paragraphe en laissant la suite du texte la contourner et en fixant les marges intérieures padding et extérieures margin :


	float:left;
	padding:28px;
	margin: -24px 24px 4px 0px;

On place son image de fond :


background: #fff url(enluminure.png) no-repeat center center;

On sculpte la glyphe :

Taille, couleur, et on rajoute un effet d'ombre pour la détacher du fond pour un effet 3D ; là, c'est CSS3 qui entre en piste :


	font-size:140px;
	text-shadow:1px 2px 4px #000;
	line-height: 1.4em;

Voilà le code complet :


h2+p:first-letter {
font-family:proclamate_incised, 'Times New Roman', serif;
float:left;
padding:28px;
margin: -24px 24px 4px 0px;
background: #fff url(enluminure.png) no-repeat center center;
color: #C12100;
font-size:140px;
text-shadow:1px 2px 4px #000;
line-height: 1.4em
		}

Et le résultat :

une enluminure gothique avec les CSS3.

Cet article a été inspiré par Евгений Якимович et adapté de Забытые возможности :first-letter.




Commentaires :

Nico||#1
Nico
Héhéhé, un tutoriel sympa ! Merci ! :)
Vincent||#2
Vincent
Tutoriel bien fait et exemple inspirant.

Merci aussi

Les commentaires pour ce billet sont fermés