Aller au contenu

More nifty corners


MarvinLeRouge

Sujets conseillés

Salut :D

oui, après le lien qui a été donné sur un autre topic, je suis allé voir cette technique, et elle est assez chouette... En fait, j'ai pas grand chose à ajouter, juste qu'elle n'est sémantiquement pas géniale, et que l'utilisation du javascript peut géner, mais si ça ne nuit pas à l'affichage sans le JS, pourquoi pas...

Je ne sais pas si je l'utiliserai j'avoue ;)

Mais faut voir ce qui est faisable... Tu veux l'améliorer comment ? Si t'as des idées :D

dit : les liens du site officiel et d'une traduction google pour les pauvres anglophobes... (j'ai pas cherché meilleur traducteur, désolé, enfin c'est lisible :P)

Modifié par sarc
Lien vers le commentaire
Partager sur d’autres sites

J'aurais besoin de pouvoir notamment paramétrer l'épaisseur des bordures dans les coins, et le rayon de courbure des coins.

Je regarderai également si je ne trouve pas d'autres améliorations intéressantes à apporter.

Je pense aussi que j'apporterai plusieurs versions des fonctions suivant le besoin, afin de diminuer le nombre de tests.

Lien vers le commentaire
Partager sur d’autres sites

Oui, c'est bien ce qui est expliquée, mais pour l'instant on doit faire sans vu qu'elle n'est effectivement pas supportée lol...

Marvin, le rayon de l'arrondi ça devrait pas poser trop de problèmes, (tant que ça reste relativement petit...) et j'ai pensé à la bordure, ça devrait pas poser trop trop de problèmes non plus, mais ça rajoute encore des lignes...

Lien vers le commentaire
Partager sur d’autres sites

Oui, c'est bien ce qui est expliquée, mais pour l'instant on doit faire sans vu qu'elle n'est effectivement pas supportée lol...

Si si elle est supportée :smartass: , mais seulement par les navigateurs mozilla à partir des versions suivantes :

netscape 1.7.0 +

mozilla 0.9.5 +

en fait, elle doit être codée moz-border-radius

C'est une solution sympa, car elle se "dégrade" bien : les utilisateurs d'IE ou d'Opera auront juste des coins carrés :dots:

Tant pis pour eux :twisted:

Lien vers le commentaire
Partager sur d’autres sites

Tant pis pour eux twisted.gif

Surtout tant pis pour le site :( ou dommage plutôt... Les arrondis des cadres participent à l'identité visuelle de ton site, donc il faudrait que ça touche le plus grand nombre de personnes ! Là, c'est quand même proche de 80% donc bon... :(

Maintenant faut aussi faire le compromis entre taille du chargement, sémantique, accessible à tous ou pas...

Lien vers le commentaire
Partager sur d’autres sites

-moz-border-radius est très bien, mais :

1) c'est propriétaire (ça ne le sera plus quand-si border-radius sera implémenté)

2) mon but est plus de toucher 80% des utilisateurs que 20%. En effet, bien que je pense que ces 20% ont raison d'utiliser un navigateur de meilleure qualité, priver les 80% restant de l'aspect graphique "par défaut" que je souhaite donner au site serait a) irrespectueux pour eux B) irresponsable s'il s'agit d'un projet commercial

Je préfère donc que seuls les gens qui ont décidé de désactiver javascript et/ou les css (ce qui doit représenter moins de 15% me semble-t-il) ne voient que des coins carrés, plutôt que tous ceux qui ont ie (soit 80% ou plus suivant les régions).

NB : c'est -moz-border-radius (le - au début)

Lien vers le commentaire
Partager sur d’autres sites

Yo bien sûr que je tease, là (d'où le :twisted: dans le message d'origine) ! Parfois ça me gonfle de voir qu'on pourrait mettre tout ça en oeuvre facilement mais qu'à cause de Kro$oft et autres navigateurs non compatibles on doit en rester à du bricolage, et bloquer l'avancée des techniques web.

Au delà du coup de provoc ;) La compatiblité d'un site avec tous les navigateurs est essentielle. Mais à part concevoir graphiquement des coins arrondi, aujourd'hui je ne vois pas de solution pratique.

Nifty corners est ingénieux, mais le rendu n'est pas extraordinaire, à mon goût... à chacun de voir ce qu'il veut faire !

Modifié par davidm
Lien vers le commentaire
Partager sur d’autres sites

_AT_davidm : ok, je n'avais pas remarqué que c'était du teasing. Le problème avec le fait de faire des coins graphiques, c'est que tu dois créer plein de code surnuméraire et faire watt-millions de réglages pour que ça marche sous truc et sous bidule. Avec ça au moins, ça marche tout seul et ça te permet de garder ton code propre. Bien sûr, le jour où ie supporte border-radius (sous quelque nom que ce soit), je prends.

_AT_Sarc : si t'es bon en js et si tu veux m'aider, je suis preneur :D

Lien vers le commentaire
Partager sur d’autres sites

Bah figure toi que... je suis pas fort en JS :D

Tu m'aurais dis HTML, PHP, ou encore CSS, j'aurais dis que j'aurais pu me débrouiller, mais le JS c'est pas encore trop mon truc... :D

Mais je regarderai le code de leur JS plus précisément, histoire de voir si je comprends tout :P

Lien vers le commentaire
Partager sur d’autres sites

Oui Dudu, moi je pensais qu'il serait préférable de créer une belle fonction PHP avec tous les paramètres (taille, bordure, couleur, etc..), qui nous crée un code : au moins pas besoin de JS... Par contre, le code sera downloadé à chaque fois, mais est-ce pire que de DL les images ? Je pense pas...

Donc moi jpeux aider à faire une fonction PHP, mais pas de JS :D

Sarc, militant anti-JS-inutile :D

Lien vers le commentaire
Partager sur d’autres sites

Tu oublies que le php s'exécute au niveau du serveur ^_^

Tout ce qu'il fait c'est générer du HTML (ou autres langage), en aucun cas il ne remplace un langage côté client (JS) ;)

Lien vers le commentaire
Partager sur d’autres sites

Je pense qu'utiliser GD pour ajouter un copyright sur chaque image doit être possible. Surement moins évident, mais si tu produit beaucoup d'image ça peut valoir le coup.

Concernant le fait de pouvoir virer un watermark avec photoshop, pas trop d'accord ce n'est pas si facile si tu inséres un watermark en transparence qui soit suffisamment grand sans défigurer l'image. Le principe retenu par les pros des banques d'image d'ailleurs comme veer : pas de watermark sur les thumbnail et un big watermark (1/4 de l'image) sur les aperçus.

Lien vers le commentaire
Partager sur d’autres sites

davidm, il me semble que tu viens de te tromper de sujet :D

Xavier, en fait je parlais de faire une fonction PHP pour faire facilement en html+css les coins arrondis... La méthode en javascript est-elle énormément mieux que celle en html+css ? Je ne sais pas, en tout cas moi perso je ne peux pas aider en JS, mais plutôt en CSS + html.

La fonction PHP servirait en fait à automatiser le code, pour qu'il soit facile à utiliser par tous... (coin_arrondi($couleur, $couleur2, $taille, $taillebordure, $couleurbordure) est plus facile à utiliser que de recopier le code en changeant tous les paramètres..)

Problème évident : le CSS serait interne... :(

Aucune bonne méthode en fait, faisons des coins carrés !! :D

Lien vers le commentaire
Partager sur d’autres sites

Il y a aussi la grosse technique pas prise de tête B)

background: transparent url(ma-belle-image-avec-les-coinsarrondis.ext) 50% 50% no-repeat

C'est bourrin et çà empêche la fluidité mais alors qu'est ce que c'est efficace, dis donc :lol:

Ouais, david tu t'es violemment emmêlé entre les topics on dirait

Lien vers le commentaire
Partager sur d’autres sites

davidm, il me semble que tu viens de te tromper de sujet :D

<{POST_SNAPBACK}>

Ooops ! :blush:

Voilà ce que c'est de surfer sur plusieurs fenêtre en même temps :fou: , j'étais sur le sujet concernant la protection des images...

Lien vers le commentaire
Partager sur d’autres sites

Non pas vraiment mais j'avais deux fenêtres ouvertes sur le hub, d'où la confusion... nerd multi-tasking quoi :nerd:

Lien vers le commentaire
Partager sur d’autres sites

Méthode qui ne peut s'appliquer qu'à des zones dont on connait par avance les dimensions.

Absolutely, c'est ce que je disais en d'autres termes en parlant des problèmes de fluidité. Tout doit être fixe au niveau des dimensions ;)

mais çà marche très bien quand même, d'abord ! :lol:

Lien vers le commentaire
Partager sur d’autres sites

Veuillez vous connecter pour commenter

Vous pourrez laisser un commentaire après vous êtes connecté.



Connectez-vous maintenant
×
×
  • Créer...