Accueil > javascript > bords-arrondis-javascript

{ Bords arrondis en javascript }

Introduction

Vous en rêviez ? Le voilà ! Le script qui arrondi les coins des images, en plus de son extrême facilité à installer ce script offre une multitude de configurations possibles. Une fois le script appelé dans l'en-tête de la page il ne vous reste plus qu'à appliquer des classes aux images.

Téléchargement des fichiers

Télécharger l'archive et placer le fichier "justcorners.js" dans votre dossier "js". Si vous décidez de le placer ailleurs, n'oubliez pas de modifier le chemin d'accès au fichier dans vos pages HTML.

télécharger

Attache du script à la page

Copiez-collez cette ligne de code dans la/les page(s) HTML ou vous souhaitez utilisez l'arrondi sur les images.

<script type="text/javascript" src="js/justcorners.js"></script>

Etape 3 : Choix des classes et intégration

Ci-dessous un apérçu des différentes possibilités permise par le script.


Exemple 1

Les quatres coins sont arrondis à 32px

montreux corner.js

class ="corners iradius32"

Exemple 2

Tous les bords sont arrondis à une valeur de 16px

corner 16px

class ="corners iradius16"

Exemple 3

Dans cette exemple on ajoute au tour de l'image une bordure dont la taille est spécifiée dans la classe "iborder", puis la couleur de la bordure avec la classe "icolor"

corner 16px

class ="corners iborder2 icolor666666"

Example 4

Dans ce dernier exemple on montre qu'il est possible de jouer avec les angles qui doivent être arrondis et ceux qui ne le sont pas. Pour ce faire, la classe "iradiae0110" sans oublier la classe "iradius" plus la valeur en px associées pour les angles affectés aux arrondis.

corner 16px

class ="corners iradiae0110 iradius32"

Les paramètres que vous pouvez définir sont les suivants :

"corners" : initialisation de la classe

"irradius" : ouverture de l'angle d'arrondi (en px)

"iborder" : largeur de la bordure (en px)

"icolor" : couleur de la bordure (en hexadécimal)

Comme vous avez surement pu le constater dans les exemples ci-dessus, les classes peuvent s'additionner sans aucun problème, c'est même un bon moyen de donner une touche de personnalisation à vos images.