coins arrondis

obtenir ces boutons

Coins arrondis

Il est très facile d'ajouter des coins arrondis à un élément d'un blog.

Pour arrondir les coins d'une image, cliquer ici.

* * * * *
La méthode qui suit fonctionne avec tous les navigateurs sauf Internet explorer.

Il suffit d'introduire les codes suivants dans la mise en page d'un élément :

-moz-border-radius: 20px 20px 20px 20px;-webkit-border-top-left-radius: 20px;-webkit-border-top-right-radius: 20px;-webkit-border-bottom-left-radius: 20px;-webkit-border-bottom-right-radius: 20px;-goog-ms-border-radius: 20px 20px 20px 20px;border:1px solid #bbbbbb;

Exemples : les cadres arrondis à fond rouge dans la colonne de gauche.

1) Le code ajouté dans un gadget "HTML/JavaScript" est le suivant :

<style type="text/css">.cadrearrondi{-moz-border-radius: 20px 20px 20px 20px;-webkit-border-top-left-radius: 20px;-webkit-border-top-right-radius: 20px;-webkit-border-bottom-left-radius: 20px;-webkit-border-bottom-right-radius: 20px;-goog-ms-border-radius: 20px 20px 20px 20px;border:1px solid #bbbbbb;font-weight:bold;background: red; width: 286px; text-align: center; padding: 3px 6px; font-size: 24px;}
.cadrearrondi a{text-decoration:none;color:white;background:red;}
.cadrearrondi a:hover {color: yellow;}<style type="text/css">

Comment ajouter un gadget HTML/JavaScript

2) Il suffit ensuite, d'entourer le code du gadget par les balises :

<div class="cadrearrondi">

et

</div>

* * * * *
Pour ajouter des coins arrondis qui fonctionnent avec tous les navigateurs dont Internet explorer, il faut placer une image au format .gif à chaque coin.

Le site http://wigflip.com/cornershop/ permet de créer ces images en ligne.

Il faut définir la couleur de la boîte, la couleur de la page, la taille de l'arrondi (par exemple 10 pixels) et Transparent = None.

Sauvegarder ensuite les 4 images *.gif obtenues sur le disque dur.

Elles peuvent être hébergées sur Picasa comme les autre images utilisées par Blogger.

Exemple:

test test test


Le code utilisé est le suivant :

<div class="arrondis"><div class="hautdroit"><img src="http://kalsey.com/tools/css/rounded/images/tl.gif" alt="" class="coins"/></div><p style="margin: 0 10px;">test test test

</p><div class="basdroit"><img src="http://kalsey.com/tools/css/rounded/images/bl.gif" alt="" class="coins"/> </div></div>

<style type="text/css">.arrondis {width: 250px;margin-left:200px;background-color: #f90;color: #fff;}.hautdroit {background: url(http://kalsey.com/tools/css/rounded/images/tr.gif) no-repeat top right;}.basdroit {background: url(http://kalsey.com/tools/css/rounded/images/br.gif) no-repeat top right;}img.coins {width: 15px;height: 15px;border: none;}</style>


Remarque : toutes les instructions se touchent pour pouvoir être intégrées dans un message. Dans un template ou un gadget, ce n'est pas nécessaire.

Le principe est simple. On affiche :
- le coin en haut à gauche et, en même temps, le coin droit en arrière-plan ;
- un texte
- le coin en bas à gauche et, en même temps, le coin droit en arrière-plan.

Aucun commentaire: