Le code pour réaliser cette lettrine est simple, on place la lettre destinée à être transformée en lettrine dans une balise et on attribue des propriétés de styles CSS à cette balise.

Voici le code :

<p>
<span style="margin-right:10px;margin-top:5px;float:left;
color:white;background-color:#C00000;border:1px solid #850000;
font-size:80px;line-height:60px;padding:3px;font-family:times;
">L</span>orem ipsum dolor sit amet,
consectetuer adipiscing elit. Curabitur consequat mi sed
eros. Etiam leo urna, tincidunt vel, elementum et, varius
id, metus. Nullam eu dolor vitae ligula rutrum porta.
Integer eget ante nec justo euismod laoreet. Maecenas nulla.
Aenean pellentesque, pede ac consequat pretium, ipsum pede
placerat sapien, egestas semper quam erat at tellus. Nam
mattis velit non tellus. Nam lacinia, sem at porttitor
sodales, dui neque consequat nunc, id vehicula sem leo quis
libero. Phasellus eu mi et mauris faucibus cursus. Nulla
dignissim odio in quam. </p> <p> Nullam eget
quam in erat interdum pharetra. Vestibulum dictum, sapien
viverra mattis luctus, lorem ipsum suscipit justo, nec
commodo lorem est a lorem. Donec mattis eros laoreet ipsum.
Etiam sagittis. Donec augue ligula, malesuada a, malesuada
at, eleifend quis, urna. Phasellus vestibulum, risus id
pulvinar faucibus, tortor metus tincidunt sem, eu iaculis
ligula urna ac est. Nunc quam mi, cursus non, congue sit
amet, posuere aliquet, neque. Vestibulum posuere venenatis
erat. Cras consequat, metus id consequat ultricies, lectus
mauris dictum nisi, sit amet cursus eros magna quis mauris.
Vestibulum pellentesque, quam sed ornare porttitor, odio
metus lacinia velit, a consectetuer dolor nulla nec felis.
Aliquam dolor. Integer ipsum eros, dictum venenatis,
pulvinar non, ultricies euismod, nunc. </p>
<div style="clear:both;"><br /></div>

et voici un exemple :

L

orem ipsum dolor sit amet, nullam eget quam in erat interdum pharetra. Vestibulum dictum, sapien viverra mattis luctus, lorem ipsum suscipit justo, nec commodo lorem est a lorem. Donec mattis eros laoreet ipsum. Etiam sagittis. Donec augue ligula, malesuada a, malesuada at, eleifend quis, urna. Phasellus vestibulum, risus id pulvinar faucibus, tortor metus tincidunt sem, eu iaculis ligula urna ac est. Nunc quam mi, cursus non, congue sit amet, posuere aliquet, neque. Vestibulum posuere venenatis erat. Cras consequat, metus id consequat ultricies, lectus mauris dictum nisi, sit amet cursus eros magna quis mauris. Vestibulum pellentesque, quam sed ornare porttitor, odio metus lacinia velit, a consectetuer dolor nulla nec felis. Aliquam dolor. Integer ipsum eros, dictum venenatis, pulvinar non, ultricies euismod, nunc.


N'oubliez pas de laisser un commentaire ;-)