Une petite bulle

22 mars 2008

Faire une présentation en CSS, dans une bulle, qui donne l'apparence d'une BD ... c'est franchement facile ... (vous pouvez voir l'effet sur le côté du blog)

Le code CSS

div.bulle { width: auto; font-family: Verdana, Arial, Helvetica, sans-serif; color: #4F536C; font-size: 0.75em; margin-bottom: 24px; } div.bulle blockquote { margin: 0px; padding: 0px; border: 1px solid #4f536c; background-color: #e3d8c3; } div.bulle blockquote p { margin: 10px; padding: 0px; } div.bulle cite { position: relative; margin: 0px; padding: 7px 0px 0px 15px; top: 6px; background: transparent url(https://storage.canalblog.com/90/37/415861/23510721.gif ) no-repeat 20px 0; font-style: normal; }

Un exemple de l'image à insérer dans le code CSS

A insérer entre les balises <body> et </body>

<div class="bulle"> <blockquote> <p>Oups !!! Une p'tite bulle ...en CSS </p> </blockquote> <cite><img height="159" alt="souris" src="https://storage.canalblog.com/64/80/415861/23512556.gif" width="150" border="0" /></cite> </div>

Posté par arian à 15:11 - Commentaires […] - Permalien [#]

Tags: Bulle