ICI header("Location: http://www.mytesting.fr ");

Comment faire une rosace encadrée.

par André Marini 15 Mars 2015, 08:39 Images

Comment faire une rosace encadrée.

Voici le code pour faire une rosace dans un cadre.

Cet artifice est du plus bel effet dans un blog, soit pour le texte, soit pour insérer des images.

 

<div class="divTransform"><strong><span style="color:#FFFFFF;">Je t&#39;aime</span></strong></div>

 

Pour insérer une image, ce code devient:

<div class="divTransform"><img src="URL de l'image"></div>

En respectant les dimensions de l'image qui, dans le cas présent, doit être au maximum de 200 par 100 mais tout ceci peut être modifié.

 

CODE

 

<style type="text/css">.divTransformCadre{
position:relative; width:400px; height:420px; border:solid 3px black;
}
.divOrigine{
width:6px; height:12px;
position:absolute; top:198px; left:198px;
background-color:green; border-radius:2px;
}
.divTransform{
position:absolute; top:148px;
width:200px; height:100px;
border:solid 2px grey; border-radius:52px;
text-align:center; font-size:24px; line-height:100px;
background-color:blue;
transform-origin:200px 50% 0;
-webkit-transform-origin:140px 50% 50; -moz-transform-origin:200px 10% 10;
-ms-transform-origin:200px 50% 10; -o-transform-origin:200px 10% 10;
}
</style>


<div class="divTransformCadre">
<div class="divOrigine">&nbsp;</div>
<div class="divTransform"><strong><span style="color:#FFFFFF;">Je t&#39;aime</span></strong></div>
<div class="divTransform" style="transform:rotate(80deg); -ms-transform:rotate(60deg); -webkit-transform:rotate(60deg); -moz-transform:rotate(60deg); -o-transform:rotate(60deg);"><strong><span style="color:#FFFFFF;">un peu</span></strong></div>
<div class="divTransform" style="transform:rotate(120deg); -ms-transform:rotate(120deg); -webkit-transform:rotate(120deg); -moz-transform:rotate(120deg); -o-transform:rotate(120deg);"><strong><span style="color:#FFFFFF;">beaucoup</span></strong></div>
<div class="divTransform" style="transform:rotate(180deg); -ms-transform:rotate(180deg); -webkit-transform:rotate(180deg); -moz-transform:rotate(180deg); -o-transform:rotate(180deg);"><strong><span style="color:#FFFFFF;">passionn&eacute;ment</span></strong></div>
<div class="divTransform" style="-ms-transform:rotate(240deg); -webkit-transform:rotate(240deg); -moz-transform:rotate(240deg); -o-transform:rotate(240deg);"><strong><span style="color:#FFFFFF;">&agrave; la folie</span></strong></div>
<div class="divTransform" style="-ms-transform:rotate(300deg); -webkit-transform:rotate(300deg); -moz-transform:rotate(300deg); -o-transform:rotate(300deg);"><strong><span style="color:#FFFFFF;">pas du tout</span></strong></div>
</div>

RESULTAT

 

 
Je t'aime
un peu
beaucoup
passionnément
à la folie
pas du tout

commentaires

Haut de page