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

ENCADREMENTS SPECIAUX: Le cadre arrondi aux angles.

par André Marini 4 Mars 2015, 10:26 Texte

ENCADREMENTS SPECIAUX: Le cadre arrondi aux angles.

Après avoir développé plusieurs encadrements en rectangle ou en carré, voici comment faire des encadrements spéciaux.

 

1) Tout d'abord, le cadre rectangulaire aux angles arrondis.

 

CODE

 

<div style="width:450px; height:60px; border-radius:10px; border:solid 3px blue; 
text-align:center; line-height:30px;"> 
  <strong>
Mise en place d'un encadrement aux angles arrondis,</strong>
   <br /><strong>
Avec la couleur bleue et le texte gras, centré.</strong>
</div>

 

RESULTAT 

Mise en place d'un encadrement aux angles arrondis,
Avec la couleur bleue et le texte gras, centré.

2) Mise en place du même encadrement avec modification de la couleur du texte.

 

Ici, bleu que l'on indique soit par <span style="color:#0000CD;">, soit par <span style="color:blue;">

 

CODE

 

<div style="width:450px; height:60px; border-radius:10px; border:solid 3px blue; 
text-align:center; line-height:30px;"> 
  <strong>
<span style="color:#0000CD;">Mise en place d'un encadrement aux angles arrondis,</span></strong>
   <br /><strong>
<span style="color:#0000CD;">Avec la couleur bleue et le texte gras, centré.</span></strong>
</div>

 

RESULTAT 

 

 

Mise en place d'un encadrement aux angles arrondis,
Avec la couleur bleue et le texte gras, centré.

 

3) Si l'on modifie les dimensions du cadre, on peut, bien entendu, mettre une image.

 

CODE

 

<div style="width:300px; height:450px; border-radius:10px; border:solid 3px blue; 
text-align:center; line-height:30px;"><img src="http://img.over-blog-kiwi.com/1/30/51/51/20150304/ob_4116b8_cache-cache.jpg" /></div>

 

RESULTAT

 

commentaires

Haut de page