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 utilisant css

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

Vous rencontrez souvent le besoin de créer des blocs avec des bords arrondis. Demandé comment résoudre la tâche du tout, j'ai fait une sélection d'articles intéressants et des leçons sur ce sujet.

Voici un aperçu de 38 articles, répartis en 4 catégories par méthodes de mise en œuvre.


Sans utiliser de balises vides

Un bloc CSS simple et sémantiquement correct avec du code pur

Crée un bloc et ajoute la possibilité de créer un en-tête de bloc. Il varie en largeur et en hauteur. Malgré l'ombre de l'exemple, l'implémentation d'une ombre translucide n'est pas fournie.
Un bloc CSS simple et sémantiquement correct avec du code pur


Coins arrondis en CSS

Très belle apparence, implémentation simple, une petite quantité d'éléments HTML. Par contre, peut-être, vous ne pouvez inclure que 4 images pour chacun des coins. Mais hélas ne fonctionne pas dans IE.
Coins arrondis en CSS


Bloc Teaser CSS

Il existe une implémentation de la méthode à une et deux images. Un petit nombre d'éléments HTML. Très pratique pour créer des teasers.
Bloc Teaser CSS


Liens vers les dernières nouvelles

Solution très intéressante basée sur une liste non ordonnée. Le plus est une implémentation simple et un petit nombre d'éléments HTML. Beau design avec la fonction de changement de couleur en survolant la souris (mais cette douceur ne fonctionne pas dans IE).
Liens vers les dernières nouvelles


CSS et coins arrondis: Bordures avec des arcs

L'inconvénient indéniable est la présence de 8 divs pour la mise en œuvre. Aussi dans l'article il y a une description d'une autre méthode, qui utilise 2 fois moins de divs, mais le bloc est rempli de couleur.
CSS et coins arrondis: Bordures avec des arcs


Les angles supérieurs d'en haut

Mis en œuvre sur la base de listes de définitions. Assez beau design, la possibilité de créer un en-tête. Il n'y a pas de support pour changer la largeur. Mais il existe une possibilité pratique de changer rapidement la couleur des en-têtes et du bloc lui-même.
Les angles supérieurs d'en haut


Créer un bloc arrondi ou un design avec CSS et XHTML

Comme dans la méthode précédente, tout est mis en œuvre sur la base d'une liste de définitions. Deux méthodes de mise en œuvre sont considérées dans l'article. Aussi apparu la possibilité d'étirer la largeur.
Créer un bloc arrondi ou un design avec CSS et XHTML


Bloc en caoutchouc avec des angles et une surface facilement variables

Les moins dans cette méthode est aussi un grand nombre de divs (5) et 4 fichiers image. Mais il existe des exemples intéressants pour la mise en œuvre.
Bloc en caoutchouc avec des angles et une surface facilement variables


Angles de bordure arrondis

Ce n'est pas une leçon complète, mais elle montre le principe de l'utilisation d'une seule pension et de l'image.
Angles de bordure arrondis


Arrondir les coins en CSS

Toute une leçon agréable. Son inconvénient, peut-être, est le nombre relativement important d'éléments HTML et la présence de 4 images pour chacun des coins.
Arrondir les coins en CSS


Créer des angles et des limites arbitraires

Utilisez 4 fichiers avec des images (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 angles et des limites arbitraires


Coins arrondis à l'épreuve des balles

Un article très détaillé avec beaucoup d'exemples. Mais une mise en œuvre assez complexe. En outre, 4 images sont utilisées.
Coins arrondis à l'épreuve des balles


Dessin des ombres et des cadres d'éléments de conception

Article de Vladimir Tokmakov. Une implémentation très complexe, mais bien sûr, la possibilité de créer des ombres semi-transparentes s'applique aux plus. Article en russe.
Dessin des ombres et des cadres d'éléments de conception


Coins arrondis avec largeur fixe

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


Bloc d'étirement CSS avec 4 angles arbitraires

Tout à fait une bonne leçon. La possibilité de laisser tomber les ombres. Plus - la possibilité de créer des en-têtes.
Bloc d'étirement CSS avec 4 angles arbitraires


Faire les coins arrondis en utilisant les pseudo-éléments: avant et après

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


Créer des angles et des limites arbitraires. Partie II

Une méthode est décrite dans laquelle l'arrière-plan n'est pas continu, mais gradient. 4 images sont utilisées.
Créer des angles et des limites arbitraires. Partie II


Coins arrondis dans divs

Trois méthodes de mise en œuvre sont décrites. Tables, divas et divas sans images. Cette dernière option n'est pas très bonne, car de nombreuses étiquettes vides sont utilisées.
Coins arrondis dans divs


Coins arrondis et blocs avec une ombre

Peut-être pas un bon moyen, puisque 5 images sont utilisées. Mais il semble être possible de créer une ombre. Plus - n'utilisez que deux éléments HTML.
Coins arrondis et blocs avec une ombre


Mise en page intéressante

Un article sur Habré, dans lequel les agresseurs tentent d'offrir leurs solutions. Article en russe.
Mise en page intéressante


Utiliser des tags 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


Caoutchouc CSS coins arrondis

Utilise deux étiquettes vides en haut et en bas du bloc. Il y a 6 images pour la mise en œuvre.
Caoutchouc CSS coins arrondis


CSS: Angles intelligents

Utilise un blanc pour le haut et deux pour le bas. Tout à fait une mise en œuvre agréable.
CSS: Angles intelligents


Comment faire des divisions divergentes avec des bords arrondis

Il semble être et avec PNG, mais encore une fois dans IE ne fonctionne pas. Comme un plus, vous pouvez appeler une leçon sur le dessin des bords arrondis :)
Comment faire des divisions divergentes avec des bords arrondis


Coins arrondis

Un article détaillé avec beaucoup de photos. Mais à chaque coin de la merveille, plus un div pour le contenu.
Coins arrondis


Arrondir les coins sans utiliser d'images

La méthode de création non-cardinale des coins arrondis. Mais il y a beaucoup d'éléments <B> vides (un peu comme les blocs GMail).
Arrondir les coins sans utiliser d'images


Utiliser JavaScript

Présentation de DomCorners

Il existe plusieurs variantes sur le nombre d'images utilisées dans l'article. Moins l'utilisation de tags vides.
Présentation de DomCorners


Angles et limites arbitraires transparents. Version 2

Un exemple plaisant d'utilisation. Belle décoration Suppression des ombres semi-transparentes, mais les ombres ne fonctionnent pas dans IE.
Angles et limites arbitraires transparents. Version 2


Nifty angles avec anti-aliasing

Une sorte d'ajout au script est Nifty Corners. N'utilise pas d'images. Vous pouvez changer le rayon de l'arrondi à la fois le long de l'axe X et Y.
Angles astucieux sans lissage


Coins arrondis

Implémentation très simple, juste un élément div. Aussi dans les commentaires beaucoup d'ajouts.
Coins arrondis


http://www.curvycorners.net

Un site distinct dédié aux coins arrondis. Beaux exemples d'utilisation. Implémentation très simple 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

Assez de possibilités. Il est également basé sur Nifty. La possibilité de créer une ombre, mais ne fonctionne pas dans IE.
RUZEE.Borders - coins arrondis avec Javascript


jQuery arrondi

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


Générateurs de bords arrondis

ArrondiCornr

Beaucoup d'opportunités Génère 4 types de blocs, y compris les boutons. Le seul inconvénient est la présence de balises vides dans le code généré.
ArrondiCornr


Spiffy Corners

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


Spanky Corners 1.1

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


Spiffy Box

Génère une image png avec les paramètres donnés. Les avantages peuvent être attribués au code HTML simple. L'article contient également un lien vers la leçon sur laquelle le code généré a été généré.
Spiffy Box