
03 août
Par Clément dans Plugins
Mots-clefs :Bords Arrondis, Chrome, Dégradé, Firefox, Internet Explorer, jQuery, Opera, Plugin, Safari

Comme sont nom l’indique, le plugin jQuery Round Corners permet d’arrondir les angles d’un ou plusieurs éléments sur votre page HTML.
Grâce a ce plugin, finit les problème d’incompatibilités entre navigateur vu que ce plugin fonctionne sur Firefox, Opera, Chrome, Safari mais aussi Internet Explorer 6+ (par contre vous devez ajouter le fichier javascript Explorer Canvas pour le faire fonctionner).
Vous pouvez aussi gérer les dégradés dans vos éléments HTML.
Prenons pour exemple : Je veux une div qui a 2 coins arrondis (les deux coins du haut) et des dégradés selon la position de la sourie sur la div.
C’est très simple, avec ce plugin, il me faut une ligne de code javascript :
$('.demo').bg(['16px', '16px', '0', '0'], [['#eee', '#666'], ['#eee', '#aaa'], ['#aaa', '#ddd']]);
Ici on a deux paramètres, le premier représente les bords arrondis et l’autre les dégradés.
Les bords arrondis s’organise dans cet ordre la : Haut Gauche, Haut Droit, Bas Droite, Bas Gauche.
Les dégradés s’organise dans l’ordre suivant : Dégradé normal, dégradé au passage de la sourie et dégradé au clique.
Je vous conseille de télécharger ce plugin et de lire la documentation. Maintenant plus aucune excuse pour ne plus faire de joli bords arrondis.
« Créer des menus animés avec le plugin jQuery LavaLamp | Comment utiliser la connexion OAuth de Twitter avec PHP »
Aucun trackback
7 commentaires
Amaury
3 août 2009 à 15:04
1Je trouve les exemple horrible, mais le résultat et la simplicité surprenant.
Emballez le moi, je prend
Merci pour cette découverte
Thierry B.
4 août 2009 à 9:23
2J’ai déjà eu l’occasion de tester ce plugin. Et le moins que l’on puisse dire c’est que je n’ai pas été convaincu du tout. Comme une grande partie des plugins génériques, dès qu’on a une architecture html/css qui sort un minimum des sentiers battus, ça ne fonctionne plus ou mal. C’est un peu comme lavalamp qui requiert 50 conditions au niveau du CSS, du positionnement des éléments et qui finalement rendent ton code plus lourd qu’autre chose.
Mais sinon, (histoire qu’on ne me traite pas de grincheux
) j’aime beaucoup ton blog et en particulier les articles sur le Zend Framework !
Sam
18 août 2009 à 0:25
3Je suis en train de l’essayer pour un projet personnel.
Cependant il ne marche pas sous IE pour moi :s
J’ai pourtant rajouté le js dont tu parlais ainsi :
ais-je loupé une étape ?
Merci d’avance
Sam
19 août 2009 à 18:38
4Possibilité d’avoir une aide ?
excanvas.js est le seul qui ne veut pas marcher (d’où le problème de compatibilité IE).
Clément
20 août 2009 à 8:47
5@Sam: Pourtant je viens de tester … et ça marche … tu utilise quelle version de explorer canvas (excanvas) ? est-il bien inclus ?
Ben
17 septembre 2009 à 22:26
6Il y a aussi http://www.dillerdesign.com/experiment/DD_roundies/ qui a l’air un peu plus léger. D’ailleurs Diller a aussi dans sa sacoche un bon PNG fix qui au passage règlera les problèmes de transparence des pngs sous IE6
Michel
21 septembre 2009 à 0:05
7Je préfère utiliser http://malsup.com/jquery/corner/ qui marche partout correctement et il n’y pas besoin du Explorer Canvas.
Laisser un commentaire
Devenir Fan de Dator.fr
Nuage de tags
Sponsors
Blogs Amis
Derniers Posts
Derniers Commentaires
Les meilleurs sujets
Propulsé par WordPress