Arrondir les coins d’un tableau HTML. Comment arrondir les coins en CSS et HTML. Arrondir les coins des images. Décalage du cadre extérieur Décalage du contour

Vous pouvez également créer des bords arrondis uniquement pour les coins supérieurs ou inférieurs de l'élément, ou donner à chaque coin un rayon d'arrondi différent - beaucoup de place pour l'imagination ! Exemple:

BorderElement ( couleur d'arrière-plan : #EEDDFF ; bordure : 6px solide #7922CC ; bordure-rayon : 25px ; ) .borderElement1 ( couleur d'arrière-plan : #FFE8DB ; bordure : 6px solide #FF5A00 ; bordure-rayon : 15px 100px 15px 100px ; )

Mais ce n’est pas tout : au lieu de simples coins arrondis, vous pouvez spécifier un arrondi elliptique. Pour ce faire, vous devrez préciser deux valeurs séparées par une barre oblique (pour les demi-axes horizontal et vertical de l'ellipse). Donnons un exemple sur un bloc de 150x450 pixels :

BorderElement ( couleur d'arrière-plan : #EEDDFF ; bordure : 6px solide #7922CC ; rayon de bordure : 280px/100px ; )

Vous pouvez mélanger les valeurs (c'est-à-dire utiliser à la fois des arrondis réguliers et elliptiques dans le même style), et vous pouvez également ajouter un style personnel pour chaque coin en utilisant les propriétés appropriées :

• border-top-left-radius - pour le coin supérieur gauche ;
• border-top-right-radius - pour le coin supérieur droit ;
• border-bottom-left-radius - pour le coin inférieur gauche ;
• border-bottom-right-radius - pour le coin inférieur droit.

Le principe de l'arrondi des coins

L'image ci-dessous montre comment l'arrondi des coins est calculé en CSS. Ainsi, si une seule valeur est spécifiée pour l'angle - par exemple, 20px - cela signifie que l'arrondi se produira le long d'un cercle d'un rayon de 20 pixels. Dans le cas où deux valeurs sont spécifiées séparées par une barre oblique, par exemple 30px/20px , les coins seront arrondis le long d'une ellipse. La première valeur dans ce cas est la longueur du demi-axe horizontal de l'ellipse - 30px, et la deuxième valeur est la longueur du demi-axe vertical - 20px :

La propriété CSS border-radius est prise en charge par tous les navigateurs modernes.

Il existe de nombreux exemples et tutoriels sur Internet pour arrondir les coins d'un bloc ou d'un tableau, mais, en règle générale, ces tutoriels sont basés sur l'utilisation d'images ou sur l'utilisation de blocs supplémentaires.

Dans le tutoriel d'aujourd'hui, je vais vous montrer comment vous pouvez coins de table ronds en utilisant uniquement CSS.

Balisage direct (le deuxième tableau diffère par la disposition des cellules dans la rangée supérieure) :

Cursus pellentesque, nunc ut facilisis hendrerit

1. Arrondissez les coins directement à table (table tag).

BContentTables( border:1px solid #CCCCCC; width:100%; moz-border-radius : 10px; /* Firefox */ -webkit-border-radius : 10px; /* Safari, Google Chrome */ -khtml-border-radius : 10px; /* KHTML */ -o-border-radius : 10px; /* Opera */ -ms-border-radius : 10px; /* IE8 */ border-radius : 10px; ; marge : 0,7em auto ;

2. Supprimez tout arrière-plan de la première ligne.

Tr.bCTable_Header (arrière-plan : aucun ;)

3. À l'aide de la pseudo-classe :first-child et du combinateur > sélectionnez la première cellule du tableau. Arrondissez le coin supérieur gauche de la première cellule. Le fond de la première ligne est constitué du fond des cellules de cette ligne.

4. À l'aide de la pseudo-classe:last-child et du combinateur > sélectionnez la dernière cellule de la première ligne. Pour cela, nous arrondissons le coin supérieur droit.

Tr.bCTable_Header:first-child > td:last-child( border-radius:0 10px 0 0; -webkit-border-radius:0 10px 0 0; -moz-border-radius:0 10px 0 0; -ms- border-radius:0 10px 0 0; -o-border-radius:0 10px 0 0; -khtml-border-radius: 0 10px 0 0);

5. Arrondissez les coins inférieurs de la dernière ligne. N'oubliez pas de supprimer l'arrière-plan de la dernière ligne ; L'arrière-plan de la ligne est défini par l'arrière-plan des cellules de la dernière ligne.

BContentTables tr:last-child( border-radius:0 0 10px 10px; -webkit-border-radius:0 0 10px 10px; -moz-border-radius:0 0 10px 10px; -ms-border-radius:0 0 10px 10px; -o-border-radius:0 0 10px 10px; -khtml-border-radius: 0 0 10px 10px;

6. Ensuite, par analogie avec les points 3-4, dans la dernière ligne, nous arrondissons les coins de la première cellule et de la cellule extérieure.

BContentTables tr:dernier enfant td(couleur de fond:#F1F1F2;) .bContentTables tr:dernier enfant td:premier enfant(border-radius:0 0 0 10px; -webkit-border-radius:0 0 0 10px; -moz-border-radius:0 0 0 10px; -ms-border-radius:0 0 0 10px; -o-border-radius:0 0 0 10px; bContentTables tr:dernier-enfant td:dernier-enfant (border-radius:0 0 10px 0; -webkit-border-radius:0 0 10px 0; -moz-border-radius:0 0 10px 0; -ms-border- rayon:0 0 10px 0; -o-border-radius:0 0 10px 0; -khtml-border-radius: 0 0 10px 0);

Prise en charge du navigateur

Bonjour, après-midi, soir ou nuit à tous. Dmitry Kostin est avec vous encore et encore. Un jour, je regardais différentes photos et puis j'en ai aimé certaines. Et ils les aimaient parce qu’ils avaient des bords arrondis. Cela semble immédiatement plus intéressant. Vous ne pensez pas ? Et c’est pourquoi, dans la leçon d’aujourd’hui, j’aimerais vous expliquer comment arrondir les coins dans Photoshop pour rendre la photo plus intéressante.

Ce que j’aime dans Photoshop, c’est que dans de nombreux cas, la même chose peut être réalisée de plusieurs manières. C'est donc ici. Commençons avec notre Photoshop.

Lissage à l'aide des bordures

Cette méthode est similaire à la précédente, mais reste très différente. Nous ferons tout avec la même image.

En créant une forme

La troisième méthode est déjà radicalement différente des deux précédentes. Alors faites une pause de quelques secondes et continuez. Je ne changerai pas l'image et je rechargerai cette voiture dans Photoshop.

Voyez-vous avec quoi vous vous êtes retrouvé ? L'image a maintenant des bords arrondis, et tout cela parce qu'elle est affichée uniquement là où se trouve notre rectangle arrondi dessiné. Mais maintenant, vous pouvez recadrer la photo supplémentaire à l'aide de l'outil Cadre, ou vous pouvez immédiatement enregistrer l'image et vous aurez déjà une image séparée avec des coins arrondis.

Essayez de tout faire vous-même et dites-moi en même temps laquelle des méthodes présentées vous convient le mieux.

Et au fait, si vous avez des lacunes dans Photoshop ou si vous souhaitez simplement l'apprendre pleinement dans les plus brefs délais, je vous recommande fortement d'en regarder une. excellent cours Photoshop pour les débutants. Le cours est bien fait, tout est raconté et montré à merveille, et chaque matière est discutée en détail.

Eh bien, je termine ma leçon pour aujourd'hui. N'oubliez pas de vous abonner aux nouveaux articles et de les partager avec vos amis. J'étais contente de te voir sur mon blog. Je t'attends encore. Au revoir.

Cordialement, Dmitri Kostin

Tout le monde en a depuis longtemps assez des coins rectangulaires traditionnels dans la conception de sites Web. Les coins arrondis sont à la mode, réalisés non pas à l'aide d'images, mais à travers des styles, pour lesquels la propriété border-radius est utilisée. Cette propriété peut avoir une, deux, trois ou quatre valeurs séparées par un espace, qui déterminent le rayon de tous les coins ou de chacun individuellement.

Dans le tableau 1 montre un nombre différent de valeurs et le type de bloc obtenu dans ce cas.

Code	Description	Voir
div ( rayon de bordure : 10 px ; )	Rayon d'arrondi pour tous les coins à la fois.
div ( rayon de bordure : 0 10px; )	La première valeur définit le rayon des coins supérieur gauche et inférieur droit, la deuxième valeur définit le rayon des coins supérieur droit et inférieur gauche.
div ( rayon de bordure : 20px 10px 0; )	La première valeur définit le rayon du coin supérieur gauche, la seconde - à la fois le coin supérieur droit et le coin inférieur gauche, et la troisième valeur - le coin inférieur droit.
div ( rayon de bordure : 20px 10px 5px 0; )	Définit séquentiellement le rayon des coins supérieur gauche, supérieur droit, inférieur droit et inférieur gauche.

L'exemple 1 montre comment créer un bloc avec des coins arrondis.

Exemple 1. Coins d'un bloc

HTML5 CSS3 IE 9+ Cr Op Sa Fx

Le résultat de cet exemple est présenté sur la Fig. 1.

Riz. 1. Bloc aux coins arrondis

Un effet intéressant peut être obtenu si vous définissez le rayon d'arrondi sur une valeur supérieure à la moitié de la hauteur et de la largeur de l'élément. Dans ce cas, vous obtiendrez un cercle. L'exemple 2 montre comment créer un bouton rond avec une image.

Exemple 2 : bouton rond

HTML5 CSS3 IE 9+ Cr Op Sa Fx

Le résultat de cet exemple est présenté sur la Fig. 2.

Riz. 2. Bouton rond

Dans le navigateur Opera, arrondir à est appliqué incorrectement si une bordure n’est pas spécifiée via la propriété border.

La propriété border-radius peut être combinée avec d'autres propriétés, par exemple en ajoutant une ombre à un élément. Dans l'exemple 3, un ensemble de cercles est créé, dont l'un est mis en évidence à l'aide de box-shadow . Cet ensemble peut être utilisé pour naviguer à travers des pages ou des photos.

Exemple 3. Lueur

HTML5 CSS3 IE 9+ Cr Op Sa Fx

Le résultat de cet exemple est présenté sur la Fig. 3.

Riz. 3. Brillez autour du cercle

En utilisant border-radius, vous pouvez créer non seulement un cercle, mais également une ellipse, ainsi qu'un arrondi elliptique pour un bloc. Pour ce faire, vous devez écrire non pas une valeur, mais deux, séparées par une barre oblique. Écrire 20px/10px signifie que le rayon horizontal du congé sera de 20 pixels et le rayon vertical de 10 pixels. L'exemple 4 montre comment créer des coins elliptiques pour ajouter une légende de style bande dessinée à une photo.

Exemple 4 : Ellipses

HTML5 CSS3 IE 9+ Cr Op Sa Fx

Vous êtes votre propre professeur

Le résultat de cet exemple est présenté sur la Fig. 4.

Riz. 4. Utiliser des coins elliptiques

Vous pouvez également modifier l'apparence des coins des images en ajoutant la propriété border-radius au sélecteur img, comme indiqué dans l'exemple 5.

Exemple 5 : Images

HTML5 CSS3 IE 9+ Cr Op Sa Fx

Coins arrondis en CSS peut être fait de plusieurs manières, très nombreuses, et certaines d'entre elles peuvent être considérées comme obsolètes, puisque CSS 3 a introduit de nouvelles propriétés qui vous permettent d'arrondir les coins des éléments HTML. Cependant, premièrement, les anciens navigateurs ne prennent pas en charge ces propriétés, et deuxièmement, de telles idées naissent parfois dans le cerveau créatif d'un concepteur que seules les anciennes méthodes peuvent sauvegarder. Par conséquent, nous examinerons ici plusieurs options différentes pour créer des coins arrondis en CSS : de la plus simple à la plus complexe.

Dans ces exemples, les coins des éléments initialement blocs sont arrondis, et dans certains exemples ces blocs sont utilisés comme éléments auxiliaires. Mais rappelez-vous que vous pouvez facilement faire la même chose avec des éléments de niveau ligne, en leur attribuant une valeur block ou inline-block si nécessaire.

Coins arrondis en CSS 3 sans images

Cet exemple utilise les propriétés de CSS 3 qui vous permettent d'arrondir facilement les coins sans l'aide d'images.

Exemple HTML et CSS : arrondir les coins avec CSS 3 sans images

Bloquer le contenu.

Description de l'exemple

1. Pour arrondir les coins, nous utilisons la propriété CSS 3, comprise par tous les navigateurs modernes.
2. Pour les anciens navigateurs Firefox, Chrome et Safari, nous utilisons des propriétés spéciales avec les préfixes -moz- et -webkit- , qui apparaissaient avant que la propriété principale ne soit prise en charge. Malheureusement, il n'existe pas d'analogues similaires pour les anciens Opera et IE. Veuillez noter que lors de la création de courbes complexes, les propriétés avec préfixes peuvent ne pas fonctionner correctement. C'est pourquoi dans le code CSS, elles étaient répertoriées plus haut que la propriété principale, de sorte que selon priorités de style, les navigateurs qui comprennent déjà « pur » l'ont utilisé.

Les propriétés avec préfixes ne figurent pas dans la spécification CSS, leur utilisation entraînera donc un code invalide.

Coins arrondis en CSS sans images

Cet exemple ne contient pas non plus d'images, mais utilise des blocs supplémentaires. L'essence de la méthode est qu'avant et après le contenu principal, plusieurs blocs sont indiqués qui, à mesure qu'ils s'en éloignent, diminuent progressivement en largeur à l'aide de marges externes latérales. Grâce à cela, l'imitation des coins arrondis se produit.

Cette méthode est mauvaise car le code est « jonché » de blocs supplémentaires, mais, malheureusement, dans de nombreux exemples, de tels blocs seront présents. Un autre inconvénient est qu'avec de grands rayons de courbure, vous devrez ajouter encore plus de blocs que ceux utilisés dans l'exemple.

Exemple HTML et CSS : arrondir les coins sans utiliser d'images

Bloquer le contenu.

Description de l'exemple

1. A l'intérieur du bloc avec class = "block" nous indiquons un élément pour le contenu principal ("content_block") devant lequel nous plaçons des blocs pour simuler l'arrondi des coins ("b1" , "b2" , "b3" ). Après cela, nous les mettons de la même manière, mais dans l'ordre inverse.
2. Nous définissons les blocs de simulation sur la hauteur et les marges latérales (CSS) requises pour créer l'apparence de coins. Nous avons également réinitialisé la taille de leur police (CSS) et la définissons sur :hidden - ceci est destiné aux navigateurs plus anciens qui peuvent augmenter la hauteur et la rendre plus grande que celle spécifiée.
3. Dans cet exemple, en plus d'arrondir les coins, une imitation de cadre a également été ajoutée ; si vous n'en avez pas besoin, supprimez simplement toutes les « bordures » des éléments et supprimez la couleur de fond du « b3 ». bloc.

Le moyen le plus simple de faire apparaître des coins arrondis en CSS est d'utiliser une image comme arrière-plan de l'élément. Dans ce cas, les dimensions de l'élément sont généralement les mêmes que la taille de l'image d'arrière-plan. L'inconvénient de cette méthode est que le contenu de l'élément ne doit pas s'étendre au-delà de sa portée, c'est-à-dire qu'il doit avoir une certaine taille limitée.

Exemple HTML et CSS : arrondir les coins à l'aide d'une seule image

MENU

Description de l'exemple

1. À l'aide de la propriété CSS, nous définissons une image d'arrière-plan pour le bloc, dont nous interdisons la réplication verticale et horizontale (pas de répétition), car dans ce cas, cela n'est pas requis.
2. Pour éviter que le texte à l'intérieur du bloc ne touche ses bords, nous définissons son remplissage (CSS) à 5 px de chaque côté.
3. Ensuite, vous devez définir le bloc aux mêmes dimensions que l'arrière-plan. Notre image de fond a des dimensions de 140x32 pixels, mais nous précisons la largeur (CSS) et la hauteur (CSS) du bloc lui-même, réduites de 10px. J'ai dû le réduire à cause de ces mêmes rembourrages internes, qui élargissent également l'élément de 5 pixels dans chaque direction.

Dans l'exemple précédent, la taille du bloc était fixe et dépendait de la taille de l'image d'arrière-plan, ce qui est très gênant. Nous allons maintenant rendre la largeur de notre bloc redimensionnable. Pour ce faire, découpez trois parties de l'image : les côtés et un morceau du centre. Ensuite, nous placerons deux éléments de dimensions fixes à l'intérieur du bloc principal, qui, grâce à un positionnement absolu, seront placés sur ses côtés. Donnons-leur les mêmes parties latérales que le fond, et la partie centrale pour le bloc principal. Cela nous donnera un bloc aux coins arrondis et de largeur variable.

Cette technique est très souvent utilisée pour arrondir des éléments sur une seule ligne, tels que des liens ou des titres de sections/menus.

Exemple HTML et CSS : arrondir les coins à l'aide de SideBlocks

Contenu principal.

Description de l'exemple

1. À l'intérieur de la classe block = "block", nous plaçons deux éléments - "left_bok" et "right_bok", sur lesquels nous définissons les images des parties latérales comme arrière-plan (CSS) et interdisons leur reproduction (pas de répétition). Pour le bloc principal lui-même, nous définissons l'arrière-plan à partir de la partie centrale et lui permettons d'être dupliqué uniquement horizontalement (répétition-x).
2. Nous indiquons une largeur pour les blocs latéraux qui correspond à la taille du fond ; pour nous elle est de 14x32 pixels. Mais pour le bloc principal, comme dans l'exemple précédent, nous fixons la hauteur à 22px pour compenser le remplissage vertical.
3. Nous positionnerons nos parois latérales par rapport au "bloc", nous spécifions donc :relative pour cela, et absolu pour les parois latérales elles-mêmes. Eh bien, nous les plaçons ensuite sur les côtés correspondants du parent en utilisant les propriétés CSS , et .
4. Pour éviter que le contenu du bloc ne soit caché sous les images latérales, nous définissons « block » pour avoir un remplissage latéral (CSS), qui peut être égal ou légèrement plus grand que les côtés eux-mêmes. Nous définissons également de petites marges en haut et en bas afin que le texte ne « colle » pas aux bords.

Dans IE6, il y a un petit bug avec cette méthode :

Si la largeur ou la hauteur du « bloc » est impaire, une indentation désagréable de 1 px apparaîtra entre le bord intérieur du bloc et la barre latérale positionnée à droite, ce qui gâchera l'ensemble de l'image. Ce bug peut être corrigé en utilisant Piratage CSS avec une certaine expression, mais je ne donnerai même pas un tel exemple ici, car cela bloque souvent le navigateur et il vaut mieux ne pas l'utiliser.

Faisons-le différemment. Fixons la marge gauche (CSS) "right_bok" à 100 % pour qu'elle se déplace au-delà de la bordure droite du bloc principal, puis renvoyons-la en arrière, en la déplaçant vers la gauche d'un nombre de pixels égal à sa largeur. IE6 fonctionne correctement avec les valeurs de ces propriétés, il n'a donc d'autre choix que de placer le bloc là où nous en avons besoin.

Cette méthode d'arrondi des coins est similaire à la précédente, mais contrairement à elle, ici ce ne sont pas les éléments HTML qui sont placés sur les côtés, mais ceux ajoutés au bloc principal. pseudo-éléments. Grâce à cette approche, il a été possible de se débarrasser du code HTML inutile de la page.

Exemple HTML et CSS : arrondir les coins à l'aide de pseudo-éléments latéraux

Contenu principal.

Description de l'exemple

1. En utilisant des pseudo-éléments CSS, nous indiquons que nous souhaitons ajouter quelque chose au début et à la fin du bloc principal. Et, en utilisant la propriété CSS, nous ajoutons simplement les images nécessaires de coins arrondis, ou plutôt de côtés. Nous avons donc créé deux pseudo-éléments avec des images.
2. Eh bien, alors nous faisons exactement la même chose que dans l'exemple précédent, seulement nous travaillons avec les pseudo-éléments créés.

Pour IE6 et IE7, les « béquilles » suivantes ont été utilisées dans cet exemple :

1. Comme vous le savez, IE6 et IE7 ne comprennent pas les pseudo-éléments utilisés ici, nous procédons donc comme suit. Nous utilisons expression, qui intègre deux balises à l'intérieur de l'élément principal, et nous leur donnons les mêmes styles que dans l'exemple précédent. Notez que le code injecté qui vient après le premier innerHTML est ajouté immédiatement après la balise d'ouverture "block", et après le deuxième innerHTML, il est ajouté avant la balise de fermeture. Oui, dans notre cas, cela n'a pas d'importance, puisque le positionnement absolu est utilisé, mais il est parfois utile de le connaître.
2. Pour éviter que ce code ne soit vu par d'autres navigateurs, nous le plaçons dans commentaires conditionnels. Ce serait mieux si vous le placiez dans un fichier CSS séparé, connecté à une balise fermée avec les mêmes commentaires.

Coins arrondis en CSS utilisant l'habillage de blocs

L'essence de cette méthode est que les coins de l'image sont d'abord découpés. Ensuite, plusieurs blocs supplémentaires (selon le nombre de coins) sont placés à l'intérieur du bloc principal, qui sont emboîtés les uns dans les autres. Chacun d’eux reçoit un coin d’image comme arrière-plan. Les images sont interdites de reproduction et les coordonnées sont données pour qu'elles prennent place aux coins des blocs. C'est ainsi que l'on obtient l'effet des coins arrondis.

Exemple HTML et CSS : arrondir les coins à l'aide de Block Wrap

Bloquer le contenu.

Description de l'exemple

1. Nous en plaçons quatre autres à l’intérieur du bloc principal. Puisqu'aucun de ces blocs n'a de marges ou de cadres, et que seul le plus intérieur a des retraits, ils sont tous égaux en hauteur et en largeur.
2. À l'aide de la propriété CSS, nous définissons chacun des blocs internes dans un coin comme arrière-plan, leur interdisons de se reproduire et les positionnons aux coins des blocs. Et comme la couleur d’arrière-plan des éléments est transparente, les quatre coins d’arrière-plan sont visibles sur la page.
3. Ajoutez la couleur de fond souhaitée au bloc extérieur avec le coin. Tout est prêt.

Vous pouvez définir explicitement la largeur du bloc en spécifiant la propriété souhaitée dans class="block" , mais pour modifier la hauteur, vous devez utiliser l'élément le plus intérieur (pour nous, c'est "rb").

Coins arrondis en CSS utilisant le positionnement

Ici aussi, des coins sont découpés pour le fond, qui seront indiqués sur les petits blocs. Grâce au positionnement absolu CSS, ces blocs sont placés aux coins de l'élément principal, qui reçoit la couleur d'arrière-plan souhaitée.

Exemple HTML et CSS : arrondir les coins à l'aide du positionnement

Bloquer le contenu.

Description de l'exemple

1. A l'intérieur de l'élément principal (class= "block") nous plaçons quatre balises avec les classes "corn_lt" , "corn_rt" , "corn_lb" , "corn_rb" , qui feront office de blocs de coin.
2. À l'aide de la propriété CSS, nous connectons notre propre image d'arrière-plan à chaque bloc de coin et définissons leur largeur et leur hauteur pour qu'elles soient égales en taille à ces images d'arrière-plan. Juste au cas où, nous réinitialisons la taille de la police (CSS) et supprimons l'excédent (CSS).
3. Nous spécifions le positionnement relatif pour l'élément principal (CSS:relative), puisque nous positionnerons les blocs de coin par rapport à lui, et pour les coins eux-mêmes - absolu (absolu).
4. À l'aide des propriétés CSS , et , nous spécifions les distances de décalage verticales et horizontales pour les blocs de coin afin qu'ils soient situés aux coins du bloc principal.

Il y a quelques problèmes avec cette méthode dans IE6 :

1. Si la largeur du "bloc" n'est pas explicitement spécifiée, les coins de gauche ne se mettront pas en place. La raison en est la présence d'un rembourrage interne dans le bloc. Le moyen le plus simple de résoudre le problème consiste à supprimer l'indentation et à enfermer le contenu principal du "bloc" (sans coins) dans un wrapper de bloc supplémentaire, puis à spécifier l'indentation requise au niveau du wrapper. Mais je l'ai fait différemment ici en activant la mise en page à l'aide de la propriété zoom :1, qui indique à IE6 d'afficher l'élément à sa taille naturelle. Cette propriété n'est pas valide, donc si vous décidez de l'utiliser, je vous recommande d'établir la connexion via commentaires conditionnels.
2. Le même bug d’un pixel évoqué ci-dessus. Mais ici, des espaces peuvent se former non seulement entre les coins droits et le côté droit du bloc, mais également en bas. Et si nous supprimons les espaces à droite, cela ne fonctionnera pas avec ceux du bas. La solution consiste à spécifier explicitement une largeur et une hauteur paires de l'élément principal. Vous pouvez également définir des valeurs impaires, mais vous devrez alors définir les distances pour les décalages vers le bas et vers la droite pour qu'elles ne soient pas nulles, mais -1px.

Essentiellement, la technologie de cette méthode d'arrondi des coins en CSS est la même que la précédente, donc les commentaires détaillés seront omis ici. La seule différence est qu'au lieu d'images de coin d'arrière-plan séparées, une image de sprite commune est utilisée ici. Grâce à cela, le site se charge plus rapidement, car une image « pèse » moins de quatre et hébergement il y a un appel au lieu de quatre.

Un sprite est une image qui combine plusieurs images utilisées comme arrière-plan pour les éléments d’un site Web. La partie du sprite qui constituera l'arrière-plan d'un élément HTML particulier dépend des coordonnées spécifiées dans une propriété CSS spéciale.

Exemple HTML et CSS : arrondir les coins à l'aide du positionnement et des sprites

Bloquer le contenu.

Description de l'exemple

1. À l'aide de la propriété CSS, nous connectons une image de sprite d'arrière-plan aux blocs de coin, qui a une forme ronde avec des dimensions de 22x22 pixels (11x11 pixels pour chaque quart de coin).
2. À l'aide de la propriété CSS, nous spécifions les coordonnées de décalage d'arrière-plan. Par exemple, une valeur de -11px 0 signifie que l'arrière-plan sera décalé vers la gauche de 11px sur l'axe X, mais pas décalé sur l'axe Y. Ainsi, la moitié gauche du sprite dépasse la bordure de l'élément et seule la droite reste. Mais il n'est visible qu'à moitié, puisque sa hauteur est de 22 pixels et que la hauteur du bloc de coin lui-même n'est que de 11 pixels. Il s'avère donc qu'avec cette valeur, l'arrière-plan de l'élément sera le quart supérieur droit du sprite.

Avec IE6, on retrouve les mêmes problèmes que dans l’exemple précédent.

Dans cet exemple, nous arrondirons les coins d'un élément qui a une bordure, mais ce n'est pas une spécificité de cette méthode particulière - vous pouvez facilement utiliser un arrondi avec une bordure dans les exemples précédents.

Nous réaliserons nous-mêmes les arrondis à l'aide de pseudo-éléments créés à partir du bloc principal, mais sans leur appliquer de positionnement.

Et encore une chose. Dans les exemples précédents, les coins ont été découpés avec le fond à l'intérieur, ce qui n'est pas toujours nécessaire, surtout si l'on s'attend à ce que le fond d'un bloc aux coins arrondis ne soit pas uniforme. Par conséquent, l'arrière-plan à l'intérieur du cadre a été rendu transparent (le format PNG le permet) et lorsque les coins ont été découpés, leur intérieur s'est également révélé transparent. Si nécessaire, vous pouvez également utiliser une approche similaire dans les exemples précédents.

Exemple HTML et CSS : arrondir les coins à l'aide de pseudo-éléments

Bloquer le contenu.

arrière-plan , et avec l'aide de celui-ci, nous les positionnons sur le côté droit et interdisons la « reproduction ». Ça y est, les coins sont prêts.

Puisque nous avons spécifié un padding pour « block » (CSS), les pseudo-éléments, et donc les coins, ne sont pas situés aux coins du bloc, mais à 15px des bords. Pour résoudre ce problème, nous donnons aux pseudo-éléments des marges négatives (CSS) sur les côtés nécessaires pour les positionner au-dessus des retraits. Mais nous faisons en sorte que les marges ne soient pas égales à 15, mais à 17px, cela est nécessaire pour couvrir le cadre (CSS) dont la largeur est de 2px (15+2=17). C'est tout maintenant.

Pour IE6 et IE7, nous avons utilisé ici les « béquilles » déjà familières avec l'injection de code HTML, car ces navigateurs ne comprennent pas les pseudo-éléments utilisés ici :

1. À l'aide d'expression, nous intégrons deux balises à l'intérieur de l'élément principal, que nous convertissons également en blocs. Ensuite, nous y plaçons une balise. Et puis ces balises ont les mêmes propriétés que les pseudo-éléments. La seule chose est que nous ajoutons en plus la propriété CSS :relative, sans laquelle le cadre chevauche les coins.

L'inconvénient de cette méthode est que vous ne pouvez pas définir explicitement la hauteur d'un bloc avec des coins arrondis, car si elle dépasse la taille du contenu, les coins inférieurs ne seront pas pressés contre les bords. Cela peut être évité si vous enfermez toujours le contenu principal dans un autre bloc et définissez sa hauteur.

Un autre exemple d'arrondi de coins avec des pseudo-éléments et sans blocs supplémentaires

Cet exemple est similaire au précédent, mais ici nous utilisons le positionnement pour organiser les pseudo-éléments. Grâce à cette approche, il est devenu possible de spécifier explicitement la hauteur d'un bloc aux coins arrondis.

Exemple HTML et CSS : Arrondir les coins où vous pouvez modifier la hauteur du bloc

Bloquer le contenu.

Et encore une fois, pour IE6 et IE7, nous ajoutons plusieurs éléments supplémentaires à l'intérieur du bloc principal à l'aide d'une expression et fermons le code dans des commentaires conditionnels. Seulement cette fois, nous n’essaierons même pas d’émuler des pseudo-éléments, mais nous le ferons plus simplement.

1. Nous ajoutons quatre balises à l’intérieur du « bloc » et leur appliquons un positionnement. Et puis nous leur montrons simplement les coins de l’image comme arrière-plan et les plaçons dans les coins de l’élément principal. Autrement dit, nous agissons exactement comme dans l'une des méthodes décrites ci-dessus.
2. Pour vous débarrasser du bug d'un pixel (qui a été mentionné plus d'une fois ci-dessus), ajoutez une marge gauche (CSS) avec une valeur de 100 % et un décalage négatif égal à -9 px aux éléments du coin droit. En général, si vous vous en souvenez, ce décalage doit être égal à la largeur du bloc de coin (pour nous, c'est 11px), mais n'oubliez pas la bordure de 2px que nous avons ici - nous devons mettre les coins dessus (11px-2px=9px).

À propos, en fait, il serait plus facile d'émuler des pseudo-éléments, comme nous l'avons fait dans l'exemple précédent - de cette façon, il y aurait moins de code supplémentaire. Mais pas dans IE6, ce navigateur aurait besoin de plusieurs « béquilles » supplémentaires et, par conséquent, devrait écrire deux commentaires conditionnels- pour IE6 et IE7, et cela ne ferait que gonfler le code...

Dans Firefox, cette méthode fonctionne correctement à partir de la version 3.6, et dans Opera - à partir de la version 10.0, je n'ai pas trouvé de béquilles pour eux, car cela n'a que peu d'importance.