Astuces ⇒ HTML CSS facebook twitter youtube

Astuces CSS3 ⇒ & Réaliser des coins arrondis



Les coins arrondis  est sûrement l'un des effets graphiques les plus recherchés par les webdesigners.

Maintenant que la propriété border-radius est implémentée même par Internet Explorer, il n'y a plus vraiment de raisons de ne pas l'utiliser. Et pour les vieux navigateurs qui ne la reconnaissent pas.

 

Réaliser des coins arrondis

 

Propriétés utilisées :

    border
    border-radius

Fonctionne avec :

   Chrome 10, Safari 3.2
    Firefox 3.6, SeaMonkey
    MSIE 9+
    Opera 10.5
 

 


Exemple Arrondir les bords d'un cadre

code html:
<div class="coin">    <p>    Lorem ipsum dolor sit amet, consectetur adipiscing elit.     Mauris vulputate laoreet urna. Integer magna.     Donec facilisis lectus sed quam.     Curabitur sit amet lacus id lacus facilisis venenatis.    </p>  </div>
Code css:
.coin {  background-color:#E4EFFF; 

border:1px solid #9FC6FF; padding:5px; /*arrondir les coins en haut à gauche et en bas à droite*/
-moz-border-radius:10px 0;
-webkit-border-radius:10px 0;
border-radius:10px 0; }

Résultat

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vulputate laoreet urna. Integer magna. Donec facilisis lectus sed quam. Curabitur sit amet lacus id lacus facilisis venenatis.


Arrondir les coins d'une image

Pour arrondir les coins d'une image, même principe :

Code (X)HTML
<p>   <img src="/icon.jpg" width="200" height="200" alt="" class="arrond-img" />  </p>  
Codes CSS
/*sans bordure (1ère photo)*/ 
.arrond-img {
-moz-border-radius:7px;
-webkit-border-radius:7px;
border-radius:7px;
}

Resultat

Changer le fond
Oregionale Skin
7astuces
Sélectionnez un Fond (11)
7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces
Fond de contenu
7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces