Comment les sites comme ces permettent d'afficher des images avec des coins arrondis?
J'ai vérifié avec Firebug que l'image en cours de téléchargement a des angles tranchants mais que l'image étant affichée a été modifiée d'une manière ou d'une autre.
EDIT: Je parle des images vignettes arrondies observées dans la section "Featured" des articles sur le site mentionné.
7 Réponses :
Ils utilisent des images pour arrondir sur les coins. Vous pouvez le faire avec des balises Leur site utilise des images arrondies ... Je ne sais pas ce que vous dites en Firebug, mais ils sont arrondis. Alternativement au lieu d'utiliser des balises distinctes Une alternative est coins arrondis dans CSS , mais tous les navigateurs sont supportés Ce n'est pas encore encore.
Pouvez-vous s'il vous plaît élaborer. Je n'ai pas compris :( comme ils le font ou donnent des éléments tels que
s et de telles images d'arrière-plan avec CSS.
, vous pouvez utiliser des images de fond CSS pour des sections entières ou des frontières.
1 commentaires
Je pense que vous êtes confondu - Découvrez l'image pour ces gros callouts -
http://pad3.whatstatic.com/skins/wikiHow/Images /Actricebox_background_curl.png
... et voici l'image qui est assise sur le principal conteneur Div (div.actions_shell) -
http://pad1.whatstatic.com/skins/wikiHow/Images /actions_top.png
... Les deux incluent les coins arrondis.
En ce qui concerne les vignettes de la section "En vedette", ils se superposent à une .png qui est transparent à l'exception des découpes de coin arrondies blanches:
http://pad1.whatstatic.com/skins/wikiHow/Images /corner_sprite.png
Je crois que Crimson fait référence aux images vignettes arrondies sous des articles présentés.
Non, jetez un coup d'œil aux images de la section des articles en vedette.
GOTCHA - Eh bien, la réponse est toujours essentiellement la même - elles utilisent simplement des images qui incluent des coins arrondis, dans le cas des vignettes en vedette, les coins arrondis sont sur un .png qui est posé sur le dessus.
Essayez le jQuery arrondi Plugin d'angle . Je pense que cela peut faire ce que vous recherchez
Vous pouvez également faire cela sans images (la lire quelque part, vous ne pouvez plus trouver le lien), en définissant ceci dans votre feuille de style:
#divallrounded { /* every border rounded */
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
Ne travaillerait que pour des images en chrome / safari: dans Firefox, cela ne fonctionne pas pour les images et, dans l'IE, cela ne fonctionne nulle part.
Seul un addendum de moi est sûr d'utiliser la version officielle W3C (proposée) à la fin, donc: frontière-rayon: 10px; - Les navigateurs ne soutenaient pas une petite action de coin arrondi, ils se rattraperont éventuellement, et jusque-là un coin carré ou quatre est généralement une variance de conception acceptable. (Viva La Progressive Amélioration.)
Il utilise une superposition d'image qui contient les bordures courbes .
moz-border-radius: 5px; -webkit-border-radius: 5px;
Je ne vois rien sur le lien que vous avez posté. Pouvez-vous indiquer une ressource expliquant cette technique de superposition?
Il y a plusieurs façons d'y parvenir, mais dans ce cas, voici comment ils l'ont fait:
Si vous regardez dans le HTML, vous verrez que le est à l'intérieur d'un
, et à l'intérieur du même est un deuxième , corner_sprite.png . Si vous regardez cette image, vous verrez que c'est une série de coins blancs qui correspondent à différentes tailles. Utilisant CSS, ils superposent cette image sur l'image dont ils veulent arrondir afin que les coins alignent l'image de la taille appropriée. Le fichier CSS qu'ils font en sont ici . Continuez la recherche sur "Rounders" (une magnificateur CSS pourrait être utile ici).
Il n'y a vraiment pas besoin de quoi utiliser Voir:
portes coulissantes et
Coins personnalisés
Oubliez tous ces messages parlant de étiquettes pour réaliser ce que fait ce site. Vous pouvez tout faire avec CSS (sans utiliser les propriétés CSS3). Le truc sur les coins arrondis consiste à trouver des éléments supplémentaires pour accrocher votre image d'angle sur le CSS.
Moz-Bord-Radius et -WebKit-Border-Radius . La propriété CSS3 est simplement appelée Border-rayon et tous les navigateurs modernes le supportent.
Mais ce n'est pas la technique utilisée dans le lien. En outre, le CSS3 BORDER-RADIUS est actuellement tellement mis en œuvre pour valoir la peine d'être utile que comme étant en tant qu'entrave futur et dans ajout à le -moz - et -webkit - (sans parler de la version -khtml - ).
Mon commentaire était que les navigateurs qui prennent en charge les versions Moz et -WebKit sont les mêmes que ceux qui prennent en charge la version standard Border-rayon , donc il est donc Assez auto-vaincre pour utiliser la version verbeuse.
Merci de clarifier - j'ai mis à jour ma réponse.