This page has been robot translated, sorry for typos if any. Original content here.

38 articles sur la création de coins arrondis sur des sites en css

38 articles sur la création de coins arrondis sur des sites

Souvent confronté à la nécessité de créer des blocs à bords arrondis. Demandant comment résoudre le problème, j'ai fait une sélection d'articles intéressants et de leçons sur ce sujet.

Voici une revue de 38 articles répartis en 4 catégories selon les méthodes de mise en œuvre.


Sans l'utilisation de balises vides

Bloc CSS simple, sémantiquement correct, avec code propre

Crée un bloc et ajoute la possibilité de créer un en-tête de bloc. S'étire en largeur et en hauteur. Malgré l'ombre sur l'exemple, la mise en œuvre d'une ombre translucide n'est pas fournie.
Bloc CSS simple, sémantiquement correct, avec code propre


Coins arrondis en CSS

Très bel aspect, implémentation simple, une petite quantité d’éléments HTML. Par contre, peut-être, ne peut-on attribuer que la présence de 4 images pour chacun des coins. Mais hélas ne fonctionne pas dans IE.
Coins arrondis en CSS


Bloc teaser CSS

La mise en œuvre des méthodes à une et deux images est fournie. Un petit nombre d'éléments HTML. Très pratique pour créer des teasers.
Bloc teaser CSS


Liens vers les dernières nouvelles

Décision très intéressante basée sur une liste non ordonnée. Un plus serait une simple implémentation et une petite quantité d'éléments HTML. Beau design avec la fonction de changer la couleur lorsque vous passez la souris (mais ce plaisir ne fonctionne pas dans IE).
Liens vers les dernières nouvelles


CSS et coins arrondis: Bordures avec arcs

L'inconvénient indéniable est la présence de 8 divs à vendre. L'article décrit également une autre méthode dans laquelle 2 fois moins de divs sont utilisés, mais le bloc est rempli de couleurs.
CSS et coins arrondis: Bordures avec arcs


Coins supérieurs

Mis en œuvre à partir de listes de définitions. Très beau design, la possibilité de créer un titre. Il n'y a pas de support pour changer la largeur. Mais il existe une opportunité pratique de changer rapidement la couleur des en-têtes et du bloc lui-même.
Coins supérieurs


Création d'un bloc arrondi ou d'une conception avec CSS et XHTML

Comme dans la méthode précédente, tout est implémenté en fonction de la liste de définitions. L'article décrit deux manières de mettre en œuvre. En outre, il y avait la possibilité d'étirer des largeurs.
Création d'un bloc arrondi ou d'une conception avec CSS et XHTML


Bloc de caoutchouc avec coins et surface facilement ajustables

L'inconvénient de cette méthode est également le grand nombre de divs (5) et 4 fichiers d'image. Mais il existe des exemples intéressants pour la mise en œuvre.
Bloc de caoutchouc avec coins et surface facilement ajustables


Coins arrondis de la frontière

Ce n'est pas une leçon complète, mais montre le principe de l'utilisation d'une bordure unique et d'images.
Coins arrondis de la frontière


Coins arrondis en CSS

Assez belle leçon. Son inconvénient est peut-être un nombre relativement grand d’éléments HTML et la présence de 4 images pour chacun des coins.
Coins arrondis en CSS


Créer des coins et des bordures arbitraires

4 fichiers avec des images sont utilisés (la largeur maximale du bloc dépend de la largeur de l'image). Mais une leçon très détaillée.
Créer des coins et des bordures arbitraires


Coins arrondis "Bulletproof"

Article très détaillé avec beaucoup d'exemples. Mais une implémentation assez compliquée. De plus, 4 images sont utilisées.
Coins arrondis


Dessiner des ombres et des frontières

Article de Vladimir Tokmakov. Une implémentation très compliquée, mais les avantages, bien sûr, est la possibilité de créer des ombres translucides. Article en russe.
Dessiner des ombres et des frontières


Coins arrondis avec une largeur fixe

Un exemple d'utilisation intéressant. Mais un moins dans la largeur fixe de cette méthode. Plus est une implémentation très simple.
Coins arrondis avec une largeur fixe


Bloc d'étirement CSS avec 4 angles arbitraires

C'est une bonne leçon. Capacité à projeter des ombres. Plus - la possibilité de créer des en-têtes.
Bloc d'étirement CSS avec 4 angles arbitraires


Faire des coins arrondis avec des pseudo-éléments: avant et: après

L'article a déjà été décrit sur Habré. Une implémentation très simple, mais tous les exemples de cet article ne fonctionnent pas dans IE. Utilisé 4 fichiers avec des images pour la mise en œuvre. Article en russe.
Faire des coins arrondis avec des pseudo-éléments: avant et: après


Créez des coins et des bordures arbitraires. Partie II

On décrit une méthode dans laquelle l’arrière-plan n’est pas solide, mais dégradé. 4 images sont utilisées.
Créez des coins et des bordures arbitraires. Partie II


Coins ronds en DIV

Décrit 3 façons de mettre en œuvre. Tables, divas et divas sans images. La dernière option n'est pas très bonne, car beaucoup de balises vides sont utilisées.
Coins ronds en DIV


Coins arrondis et blocs avec ombre

Peut-être pas un très bon moyen, car il utilise 5 images. Mais il semble que la possibilité de créer une ombre est fournie. De plus, utilisez seulement deux éléments HTML.
Coins arrondis et blocs avec ombre


Disposition amusante

Un article sur Habré dans lequel les habrazhiteli essaient de proposer leurs solutions. Article en russe.
Disposition amusante


Utiliser des balises vides

Plus de coins arrondis avec CSS

Agréable sur l'apparence de la technique, mais il est dommage qu'il n'y ait pas de mise en œuvre de PNG sous IE.
Plus de coins arrondis avec CSS


Coins en caoutchouc CSS

Utilise deux balises vides en haut et en bas du bloc. Par contre se réfère à 6 photos pour la mise en oeuvre.
Coins en caoutchouc CSS


CSS: Smart Corners

Utilise un vide pour le haut et deux pour le bas. C'est une belle implémentation.
CSS: Smart Corners


Comment faire des divas extensibles avec des bords arrondis

Cela semble être avec PNG, mais encore une fois dans IE ne fonctionne pas. En plus, vous pouvez appeler une leçon sur les contours arrondis. :)
Comment faire des divas extensibles avec des bords arrondis


Coins arrondis étirés

Grand article détaillé avec beaucoup de photos. Mais à chaque coin de la diva, plus div pour le contenu.
Coins arrondis étirés


Arrondir les coins sans utiliser d'images

La façon de créer des coins arrondis non cartographiques. Mais il y a beaucoup d'éléments <B> vides (une méthode similaire aux blocs GMail).
Arrondir les coins sans utiliser d'images


Utiliser javascript

Vue DomCorners

L'article propose plusieurs variantes sur le thème du nombre d'images utilisées. Utilisation négative des balises vides.
Vue DomCorners


Angles et bordures arbitraires transparents. Version 2

Un bel exemple d'utilisation. Beau design. Supprime les ombres translucides, mais les ombres ne fonctionnent pas dans IE.
Angles et bordures arbitraires transparents. Version 2


Nifty angles de lissage

À sa manière, l’ajout au script Nifty Corners est ajouté. N'utilise pas d'images. Vous pouvez modifier le rayon d'arrondissement à la fois sur l'axe X et sur l'axe Y.
Nifty angles sans lissage


Coins arrondis

Très simple implémentation, juste une div. Aussi dans les commentaires beaucoup de add-ons.
Coins arrondis


http://www.curvycorners.net

Un site séparé dédié aux coins arrondis. Beaux exemples d'utilisation. Très simple implémentation et nombreuses options de personnalisation.
www.curvycorners.net


Nifty Corners Cube

Un script très populaire qui vous permet de créer des coins arrondis sans images. Beaucoup d'options pour la mise en œuvre.
Nifty Corners Cube


RUZEE.Borders - coins arrondis avec javascript

Beaucoup de possibilités. Aussi basé sur Nifty. La possibilité de créer une ombre, mais ne fonctionne pas dans IE.
RUZEE.Borders - coins arrondis avec javascript


arrondi jQuery

Peut-être le plus grand choix d'angles différents. Un petit nombre d'éléments HTML à implémenter.
arrondi jQuery


Générateurs de bords arrondis

RoundedCornr

Un grand nombre d'opportunités. Génère 4 types de blocs, y compris les boutons. Le seul point négatif est la présence de balises vides dans le code généré.
RoundedCornr


Coins épineux

Générateur très simple. Mais il génère un très grand nombre d'éléments <B> .
Coins épineux


Spanky Corners 1.1

Un simple générateur avec de bons codes HTML génère un fichier CSS séparé pour IE.
Spanky Corners 1.1


Boîte Spiffy

Génère une image png avec les paramètres spécifiés. Les avantages incluent un code HTML simple. L'article contient également un lien vers la leçon, qui a généré le code généré.
Boîte Spiffy