Coins arrondis avec CSS et JavaScript

 

    & nbsp;   Le contenu va ici   & nbsp;       Table>

Il y a quelques années, cela aurait été une solution acceptable. Aujourd'hui, c'est un hack laid: c'est énormément de balisage redondant pour une décoration visuelle relativement peu importante. En fait, le code ci-dessus ne fonctionnera même pas comme prévu dans les documents desservis en utilisant un doctype strict - de petites lacunes apparaîtront sous les images du coin, causées par le fait que les images sont des éléments en ligne et, par conséquent, laisseraient de l'espace sous l'image pour les «queues» sur des lettres telles que «Y» et «J». La solution, comme expliqué par Eric Meyer dans les images, les tables et les lacunes mystérieuses, est d'ajouter la règle suivante à votre feuille de style:

td img { display: block; }

Cela produit le résultat souhaité, comme indiqué ici.

Mais maintenant, nous utilisons les hacks CSS pour réparer les hacks de table laids! Examinons les moyens de mettre en œuvre le même effet en utilisant uniquement CSS.

En règle générale, toute image décorative doit être implémentée en tant qu'image d'arrière-plan CSS sur un élément de page existant, plutôt que d'être déposé sur la page proprement dite à l'aide d'une balise . Il est facile de déterminer si une image est décorative ou contient du contenu réel: demandez-vous si l'absence de l'image aurait un effet sur le contenu global de la page. Dans le cas des coins arrondis, la réponse n'est évidemment pas.

Les images d'arrière-plan CSS sont des choses remarquablement puissantes. Vous n'avez qu'à regarder les nombreux designs merveilleux exposés au CSS Zen Garden pour des preuves de cela. À l'aide de CSS, une image d'arrière-plan peut être appliquée à n'importe quel élément sur une page. De plus, il peut être répété horizontalement, verticalement ou pas du tout; Il peut être positionné dans la zone d'arrière-plan de l'image en utilisant des mesures absolues, ou par rapport à l'un des quatre coins; Il peut même être fait pour rester fixé en place lorsque le contenu de l'élément défile. Malheureusement, CSS 2 impose une limitation petite mais significative: vous ne pouvez appliquer qu'une seule image d'arrière-plan à chaque élément de la page. Pour rendre correctement les coins arrondis sur un , nous devons appliquer quatre images d'arrière-plan, une dans chaque coin.

Boîtes de largeur fixe

Si la largeur de la boîte à laquelle nous appliquons des coins décoratives est fixe, la moitié du problème est déjà résolue. Si nous savons que la boîte aura toujours 200 pixels de large, au lieu de créer quatre images d'arrière-plan (une pour chaque coin), nous pouvons en créer deux: un pour le haut de la boîte et un pour le bas. Le défi est désormais réduit à l'application de deux images d'arrière-plan à notre

. Il est temps de profiter de notre balisage.

Une boîte avec des coins arrondies ne serait pas très amusante si elle ne contenait aucun contenu. Considérez ce qui suit:

td img { display: block; }

assez simple, hein? Le titre de la boîte vit dans un

(je suppose que

et

ont déjà été utilisés plus dans la hiérarchie de la page) et le contenu qui suit est un paragraphe et une liste non ordonnée. La clé pour résoudre nos deux problèmes de fond réside dans le

, qui vient en haut de la boîte. Tout ce que nous avons à faire est d'appliquer une image d'arrière-plan en haut de la

, et une autre au bas du contenu , et l'effet est complet:

<div > 
<h3>Exciting features!</h3> 
<p>Your new Widget2000 will...</p> 
<ul> 
 <li>... clean your shoes</li> 
 <li>... walk your dog</li> 
 <li>... and balance your cheque book!</li> 
</ul> 
</div>

Cliquez ici pour voir les résultats.

Les documents bien structurés sont généralement pleins de crochets comme celui-ci qui peuvent être soigneusement exploités pour appliquer plusieurs arrière-plans et obtenir des effets visuels spécifiques. Apprendre à les identifier est une partie importante du travail avec CSS.

Éléments imbriqués

Appliquer quatre arrière-plans à une seule div est toujours hors de notre portée. Mais que se passe-t-il si nous avons imbriqué quatre divs, un pour chaque arrière-plan? Cela résout notre problème, mais se fait au détriment d'un balisage supplémentaire sans valeur structurelle:

div.rounded { 
  width: 200px; 
  background: #1b5151 url(200pxbottom.gif) no-repeat bottom center; 
  padding-bottom: 15px; 
} 
div.rounded h3 { 
  padding-top: 15px; 
  background: transparent url(200pxtop.gif) no-repeat top center; 
}

et, dans le CSS:

<div ><div><div><div> 
Content goes here 
</div></div></div></div>

Le code s'affiche comme indiqué ici.

Il devrait être clair ce qui se passe ici. Chacun des quatre divs se voit attribuer une image d'arrière-plan arrondi, positionnée dans le haut à droite, le haut-gauche, le bas droit et le bas à gauche respectivement. Bien que la largeur de la div contenant soit réglée à 200px, elle pourrait tout aussi facilement être définie sur quelque chose de plus flexible pour une utilisation avec des conceptions liquides - les coins fonctionneraient toujours, peu importe à quel point la div contenant était grande ou petite.

Nous avons maintenant une solution au problème, qui utilise beaucoup moins de balisage que l'exemple de tables d'origine. Mais, il n'est toujours pas parfait: il utilise trois divs supplémentaires, qui n'ajoutent rien de valeur à la structure globale du document. Pouvons-nous faire mieux? Il est temps de se tourner vers JavaScript.

en utilisant le dom

En utilisant JavaScript et le DOM, il est possible de manipuler la structure d'un document après avoir été chargé par le navigateur. Les coins arrondis sont un effet de présentation qui peut être caché aux agents utilisateur non javascript sans aucune réduction significative de leur expérience globale du site, il n'y a donc aucun problème éthique avec l'utilisation de JavaScript pour ce type de transformation. Notre solution finale ne nécessitera qu'un seul

dans le document source. Nous utiliserons JavaScript pour ajouter dynamiquement les trois divs étrangers nécessaires à l'effet d'angle arrondi.

voici le balisage:

td img { display: block; }

Je pense que vous conviendrez que nous ne pouvons pas faire grand-chose pour le rendre plus simple que cela, sauf peut-être d'échanger le pour un

si le contenu est structurellement mieux défini comme un paragraphe. Faire ce changement est laissé comme un exercice pour le lecteur.

Maintenant, voici le javascript:

<div > 
<h3>Exciting features!</h3> 
<p>Your new Widget2000 will...</p> 
<ul> 
 <li>... clean your shoes</li> 
 <li>... walk your dog</li> 
 <li>... and balance your cheque book!</li> 
</ul> 
</div>

Le script est divisé en deux sections logiques. La première section itère sur tous les éléments du document, construisant un tableau de ceux qui contiennent «arrondi» dans leur attribut de classe (rappelez-vous, les éléments peuvent avoir plusieurs classes séparées par des espaces). La deuxième partie du script passe par chacun de ces éléments tour à tour, créant trois divs supplémentaires et les emballant autour de l'original. Examinons le code plus en détail:

div.rounded { 
  width: 200px; 
  background: #1b5151 url(200pxbottom.gif) no-repeat bottom center; 
  padding-bottom: 15px; 
} 
div.rounded h3 { 
  padding-top: 15px; 
  background: transparent url(200pxtop.gif) no-repeat top center; 
}

Ici, nous supprimons entièrement la classe "arrondie" de notre

d'origine. La raison en sera claire dans le CSS; Essentiellement, nous ne voulons pas que les styles originaux appliqués pour affecter cet élément.

<div ><div><div><div> 
Content goes here 
</div></div></div></div>

Nous avons créé le plus

le plus extérieur, qui sera utilisé pour appliquer l'image d'arrière-plan en haut à droite ainsi que la largeur globale de la boîte. Notez que nous avons réglé la classe sur «Round2»; Cela sera défini dans notre CSS, avec des différences subtiles par rapport à la classe «arrondie» fournie aux clients non compatibles avec JavaScript.

div.rounded { 
  width: 200px; 
  background: #1b5151 url(tr.gif) no-repeat top right; 
} 
div.rounded div { 
  background: transparent url(tl.gif) no-repeat top left; 
} 
div.rounded div div { 
  background: transparent url(br.gif) no-repeat bottom right; 
} 
div.rounded div div div { 
  background: transparent url(bl.gif) no-repeat bottom left; 
  padding: 15px; 
}

Le DOM W3C ne fournit pas de méthode directe pour remplacer un nœud dans un document par un autre nœud. Au lieu de cela, vous devez utiliser la méthode RempaceChild () d'un nœud pour remplacer l'un de ses enfants par un autre nœud. Une astuce utile pour remplacer le nœud que vous regardez consiste à accéder à son propre parent à l'aide de la propriété ParentNode, puis à utiliser /#c#.replacechild pour l'échanger contre autre chose. Si cela n'a pas de sens pour vous, ne vous inquiétez pas - pensez simplement à la ligne ci-dessus comme remplaçant notre nœud d'origine par le nouveau nœud TR que nous venons de créer.

<div > 
Content goes here. 
</div>

Nous avons maintenant créé trois nouveaux éléments et les avons insérés dans le document. Il ne reste plus qu'à réinsérer notre nœud d'origine, avec son contenu:

td img { display: block; }

À ce stade, notre arbre de document réel est presque identique à celui de l'exemple

imbriqué

ci-dessus, la seule différence étant que l'élément extérieur a une classe de «arrondi2» au lieu de «arrondi». Voici le CSS:

<div > 
<h3>Exciting features!</h3> 
<p>Your new Widget2000 will...</p> 
<ul> 
 <li>... clean your shoes</li> 
 <li>... walk your dog</li> 
 <li>... and balance your cheque book!</li> 
</ul> 
</div>

voici le résultat.

Le premier ensemble de règles, pour div.onded, n'est utilisé que dans les navigateurs qui n'exécutent pas le javascript. Notez que la largeur est de 170px et le rembourrage 15px, ce qui augmente à une largeur totale de 200px (la largeur plus le rembourrage gauche et droit). Si vous en avez besoin pour fonctionner dans IE 5 / Windows, qui interprète les valeurs de rembourrage différemment, vous devrez appliquer le tristement célèbre Hack de modèle de boîte. Vous avez déjà vu le deuxième ensemble de règles dans l'exemple précédent.

en regardant vers l'avenir

La technique ci-dessus fonctionnera dans tous les navigateurs modernes et tous les futurs navigateurs qui prennent en charge les normes CSS2 et DOM 2. CSS 3 introduit un certain nombre de nouvelles façons d'atteindre cet effet, ce qui rendra les techniques ci-dessus obsolètes. Ainsi que le support de coin arrondi natif (déjà disponible dans la famille de navigateurs de Mozilla) CSS présente le puissant :: extérieur pseudo-élément, qui permet d'insérer des éléments stylables supplémentaires d'une manière similaire à l'exemple javascript indiqué dans cet article. Si cela ne suffit pas, les images de bordure permettra à peu près n'importe quelle décoration frontalière à laquelle vous pourriez vous soucier de penser.

Malheureusement, il faudra des années avant que le support CSS 3 ne soit largement disponible. Jusque-là, JavaScript est plus que capable de prendre une partie du mou.

Questions fréquemment posées (FAQ) sur CSS et JavaScript Rended Corners

Comment puis-je créer des coins arrondis avec CSS?

Créer des coins arrondis avec CSS est assez simple. Vous pouvez utiliser la propriété «Border-Radius» pour y parvenir. La propriété «Border-Radius» peut avoir une, deux, trois ou quatre valeurs. Une seule valeur appliquera le même rayon aux quatre coins. Deux valeurs appliqueront le premier rayon aux coins supérieur gauche et inférieur à droite, et le deuxième rayon aux coins du haut à droite et du bas à gauche. Trois valeurs appliqueront le premier rayon au haut à gauche, la seconde en haut à droite et en bas à gauche, et le troisième au bas à droite. Quatre valeurs appliqueront un rayon différent à chaque coin, dans l'ordre supérieur-gauche, top-droite, en bas à droite, bas à gauche.

Par exemple, pour appliquer un rayon de 10px à tous les coins d'un div, vous utiliseriez:

div {
frontraire-radius: 10px;
}

>

Puis-je créer des coins arrondis avec JavaScript?

Oui, vous pouvez créer des coins arrondis avec JavaScript, bien qu'il soit plus courant d'utiliser CSS à cet effet. Si vous devez créer des coins arrondis dynamiquement en fonction de l'entrée des utilisateurs ou d'autres facteurs, JavaScript pourrait être le meilleur choix. Vous pouvez utiliser la méthode «CanvasRenderingContext2d.roundRect ()» pour dessiner un rectangle avec des coins arrondis sur une toile. Cette méthode prend cinq paramètres: les coordonnées X et Y du coin supérieur gauche du rectangle, la largeur et la hauteur du rectangle, et le rayon des coins.

Comment puis-je créer un cercle avec CSS?

Créer un cercle avec CSS est un cas spécial de création de coins arrondis. Si vous réglez la propriété «Border-Radius» à 50%, les coins seront suffisamment arrondis pour former un cercle. L'élément doit également avoir une largeur et une hauteur égales. Par exemple:

div {
largeur: 100px;
hauteur: 100px;
border-radius: 50%;
}

Cela créera un div qui est un cercle parfait.

Puis-je créer des coins arrondis sur un seul côté d'un élément? Élément en spécifiant différentes valeurs pour la propriété «Border-Radius». Par exemple, pour arrondir uniquement les coins supérieur gauche et haut de gamme d'une div, vous utiliseriez:

div {
border-radius: 10px 10px 0 0;
}

Cela appliquera un rayon 10px sur le coin supérieur et les coins supérieurs à droite, et aucun rayon (i.e. coins.

Comment puis-je créer une bordure avec des coins arrondis?

Créer une bordure avec des coins arrondis est tout aussi simple que de créer un élément avec des coins arrondis. Vous appliquez simplement la propriété «Border-Radius» à l'élément avec la frontière. Par exemple:

div {
Border: 1px Solid Black;
Border-Radius: 10px;
}

Cela créera une div avec une bordure noire de 1px et des coins arrondis avec un rayon 10px.

Vous pouvez créer des coins arrondis avec différents radats sur le même élément? coins avec des rayons différents sur le même élément en spécifiant différentes valeurs pour la propriété «Border-Radius». Par exemple, pour créer une div avec un rayon de 10px dans le coin supérieur gauche, un rayon de 20px sur les coins du haut à droite et du bas à gauche, et un rayon de 30px dans le coin inférieur droit: 10px 20px 20px 30px; CSS?

Oui, vous pouvez créer des coins elliptiques avec CSS en spécifiant deux valeurs pour chaque coin de la propriété "Border-Radius". La première valeur est le rayon horizontal, et la deuxième valeur est le rayon vertical. Par exemple:

div {
Border-Radius: 10px 20px;
}

Cela créera une div avec des coins elliptiques, avec un rayon horizontal de 10px et un rayon vertical de 20px.

Puis-je animer la propriété «Border-Radius»?

Oui, vous pouvez animer la propriété «Border-Radius» à l'aide de transitions ou d'animations CSS. Par exemple, pour modifier progressivement le rayon de bordure de 0 à 50% sur une période de 2 secondes, vous pouvez utiliser:

div {
border-radius: 0;
transition: border-radius 2s;
}

divi: hover {
border-radius: 50%;
}
Pour devenir arrondi lorsque vous en survolerez, et le changement se produira progressivement sur 2 secondes.

Puis-je utiliser des pourcentages pour la propriété "Border-Radius"?

Oui, vous pouvez utiliser des pourcentages pour la propriété "Border-Radius". Le pourcentage est relatif à la dimension correspondante de l'élément. Par exemple, si vous définissez «Border-Radius» à 50%, les coins seront suffisamment arrondis pour former un cercle (ou une ellipse, si la largeur et la hauteur de l'élément ne sont pas égales).

Puis-je créer des coins arrondis sur les images?

Oui, vous pouvez créer des coins arrondis sur des images en appliquant la propriété «Border-Radius» à l'élément IMG. Cela peut être un bel effet pour les miniatures ou les images de profil. Par exemple:

img {
border-radius: 10px;
}

Cela appliquera un rayon de 10px aux coins de toutes les images.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!