WRInaute discret
Je suis tombée là dessus :
http://www.roundedcornr.com/
c'est bien pratique et ça peut servir à d'autres....
http://www.roundedcornr.com/
c'est bien pratique et ça peut servir à d'autres....
des boites avec des coins arrondis
- Auteur de la discussion natespritcabane
- Date de début
WRInaute impliqué
Sympa comme truc ! Merci 'cabane
++
++
WRInaute passionné
Je le rajoute à ma liste d'outils.
WRInaute accro
Des div imbriqués et 4 images...
J'aime mieux en JS (avec jQuery):
http://www.malsup.com/jquery/corner/
J'aime mieux en JS (avec jQuery):
http://www.malsup.com/jquery/corner/
Oulala vous êtes obsolètes messieurs dames
voilà pour votre gouverne
http://www.cssplay.co.uk/boxes/krazy.html
pas d'images, pas de js, 100% css :wink:
voilà pour votre gouverne
http://www.cssplay.co.uk/boxes/krazy.html
pas d'images, pas de js, 100% css :wink:
WRInaute impliqué
Ouaip, pas mal non plus ...
J'avais déjà vu ces exemples mais je pensais qu'ils utilisaient des propriétés uniquement compatibles Mozilla, ça n'est apparemment pas le cas ...
Merki pour le tuyau
++
J'avais déjà vu ces exemples mais je pensais qu'ils utilisaient des propriétés uniquement compatibles Mozilla, ça n'est apparemment pas le cas ...
Merki pour le tuyau
++
Personnelement j'utilise une image qui contient uniquement les 4 coins (donc ça fait 15px sur 15px par exemple), ça évite d'avoir 4 images à charger, sans compter que si vous avez 3/4 cadres arrondis différent, ça vous fait 16 images à charger au lieu de 4.
Puis à l'aide de CSS, on selectionne le coin gauche/droit/haut/bas et ça marche sur tous les navigateurs (Mac compris)
Exemple pour le coin bas droit.
#basdroit {
float: right;
background: url('coin.gif') bottom right no-repeat;
height: 13px;
width: 13px;
}
Vous limitez l'affichage à 13*13 px (soit la taille du coin qui vous interesse) et vous faites ça sur chaque coin ...
Puis à l'aide de CSS, on selectionne le coin gauche/droit/haut/bas et ça marche sur tous les navigateurs (Mac compris)
Exemple pour le coin bas droit.
#basdroit {
float: right;
background: url('coin.gif') bottom right no-repeat;
height: 13px;
width: 13px;
}
Vous limitez l'affichage à 13*13 px (soit la taille du coin qui vous interesse) et vous faites ça sur chaque coin ...
Faudra surtout attendre que cette propriété soit supportée par une majorité de navigateurs par rapport à ceux qui sont actuellement utilisés par les internautes pour surfer (qui a pointé du doigt MSIE6 ??? lol :lol: ). Et là, on risque d'attendre beaucoup plus longtemps ... :roll:jeroen a dit:
WRInaute discret
nonel a dit:
Oui oui ça marche voir mon www. En tous cas avec IE 6.0
WRInaute passionné
natespritcabane a dit:
Effectivement le message a des coins arrondis!
WRInaute occasionnel
ce qui me gêne avec cette solution (que je vais recommander quand même), c'est l'obligation d'ajouter des balises HTML à des fins de design... on revient doucement vers la "tag soup" de nos jeunes années ? (avec les soucis qu'on connait : difficultés de maintenance, augmentation de la bande passante nécessaire, diminution de la condensation des mots-clefs...)
L'avantage de JQuery (il me semble) c'est qu'il est "unobstrusive", on lui dit quelle box doit avoir des coins arrondis, et il se débrouille avec, sans rajouter un seul span. Ensuite, oui, certains visiteurs auront le JS désactivé, donc ils verront des coins carrés. Et là, je m'auto-cite: le geek qui coupe son js, il passera jamais ailleurs que sur slashdot ou sourceforge. donc qu'il n'aie pas les jolis arrondis....
L'avantage de JQuery (il me semble) c'est qu'il est "unobstrusive", on lui dit quelle box doit avoir des coins arrondis, et il se débrouille avec, sans rajouter un seul span. Ensuite, oui, certains visiteurs auront le JS désactivé, donc ils verront des coins carrés. Et là, je m'auto-cite: le geek qui coupe son js, il passera jamais ailleurs que sur slashdot ou sourceforge. donc qu'il n'aie pas les jolis arrondis....
Je ne connais pas jquery, mais en ce qui me concerne j'envisage sérieusement d'utiliser ça : Nifty corners
C'est du js plutôt léger et cela semble très pratique à utiliser.
Il y a d'autres versions plus évoluées (je n'ai pas encore tout lu) mais la première est déjà excellente!
Finalement, je viens de terminer l'étude de la 3ème version : chapeau à l'auteur!
On peut faire un paquet de truc, c'est génial.
Deux paramètres à passer et c'est tout.
Le code obtenu est beaucoup plus propre qu'en mettant des div de partout
Pour ceux qui pensent que c'est nul lorsque le js est desactivé, voici ce qui se passe
Avec javascript
Sans javascript
C'est du js plutôt léger et cela semble très pratique à utiliser.
Il y a d'autres versions plus évoluées (je n'ai pas encore tout lu) mais la première est déjà excellente!
Finalement, je viens de terminer l'étude de la 3ème version : chapeau à l'auteur!
On peut faire un paquet de truc, c'est génial.
Deux paramètres à passer et c'est tout.
Le code obtenu est beaucoup plus propre qu'en mettant des div de partout
Pour ceux qui pensent que c'est nul lorsque le js est desactivé, voici ce qui se passe
Avec javascript
Sans javascript
Dans le même style que xTrade : http://www.curvycorners.net/ .
WRInaute discret
xTrade a dit:
Humm ça mérite réflexion parce que c'est vrai que si ça doit alourdir le code... c'est pas le but. Moi ce qui me gêne un peu c'est la lourdeur de la procédure si on veut changer de couleur par exemple...
natespritcabane a dit:
L'intérêt de la version js que je suis en train d'installer, c'est qu'elle utilise au maximum les définitions en css.
Le seul truc à ajouter dans la page html est un truc du genre Nifty("#GaucheAds","bottom");
Et si le js est désactivé, les bords sont carrés, c'est tout.
WRInaute accro
Bobulum a dit:
Cool via curvycorners je suis tombé sur un plugin pour jQuery avec anti-aliasing:
http://blue-anvil.com/archives/anti-ali ... ith-jquery
Discussions similaires
