Nouveau CSS3 Border Techniques - mannequins

Les bordures font partie de CSS depuis le début, mais CSS3 ajoute de nouvelles options vraiment excitantes. Les navigateurs modernes prennent désormais en charge les bordures créées à partir d'une image ainsi que les coins arrondis et les ombres en boîte. Ces techniques promettent d'ajouter de nouvelles capacités passionnantes à vos conceptions.

Bordures d'image

CSS3 vous permet d'utiliser une image pour une bordure d'élément. Le mécanisme est assez puissant car il détecte les bords d'une image et la "découpe" pour créer les bords et les coins de la bordure à partir des bords et des coins de l'image.

L'image du cadre est enregistrée comme image. png dans le même répertoire que le fichier HTML. Il a un centre transparent. Appliquez le code suivant pour ajouter une bordure d'image autour de tous les éléments de la page:

h2 {border-width: 15px; border-image: url ("frame.png") 25% de répétition; -webkit-border-image: url ("frame.png") 25% de répétition; -moz-border-image: url ("frame.png") 25% de répétition;}

Voici comment ajouter une image de bordure:

1. Acquérir votre image.

   L'image devrait déjà être conçue comme une sorte de bordure. Généralement, il s'agit d'une forme sur les bords, avec un centre de couleur unie ou un centre transparent.

2. Spécifiez la largeur de la bordure.

   Vous devrez indiquer la largeur de la bordure directement. La bordure de l'image du cadre est mise à l'échelle pour s'adapter à la taille souhaitée.

3. Calculez combien de bordure de l'image vous voulez.

   Si vous laissez le signe pourcentage, la valeur est calculée en pixels. Vous pouvez ajouter quatre valeurs si vous préférez utiliser différentes quantités de l'image originale pour chaque limite.

4. Indiquez le comportement que vous voulez.

   L'image d'origine n'a presque jamais la même taille que l'élément que vous souhaitez entourer. Vous pouvez donc fournir un conseil pour expliquer comment le navigateur doit gérer les éléments plus grands que l'original. Les choix les plus courants sont répéter (répéter l'image originale) ou étirer (pour occuper tout l'espace). Avec une image simple comme le cadre. png utilisé dans cet exemple, les résultats seront les mêmes.

   

Comment ajouter des coins arrondis

Les CSS plus anciens étaient connus pour être très rectangulaires, alors les concepteurs de sites Web ont essayé d'adoucir leur conception en ajoutant des coins arrondis. C'était un effet difficile à réaliser. CSS3 simplifie grandement la création de coins arrondis avec la règle border-radius.

Il est assez facile d'obtenir des coins arrondis sur les navigateurs qui supportent le tag:

coins. html h1 {largeur: 60%; couleur de fond: # 000066; couleur: # 9999ff; frontière: # 9999ff 3px rainure; marge: auto; text-align: centre; border-radius:. 5em;}

Démonstration des coins arrondis

La règle fonctionne en coupant un arc de chaque coin de l'élément.L'arc a le rayon spécifié, donc pour les angles vifs, vous aurez besoin d'un petit rayon. Vous pouvez mesurer le rayon dans l'une des mesures courantes, mais les pixels (px) et la largeur de caractère (em) sont les plus couramment utilisés.

La bordure n'est visible que si l'élément a la couleur de fond ou la bordure définie. Notez qu'il existe des variantes de chaque tag pour prendre en charge des coins spécifiques. Cela peut être utile si vous ne souhaitez pas appliquer le même rayon aux quatre coins de votre élément. Les navigateurs les plus récents prennent désormais en charge la règle générique border-radius.

Vous pouvez sélectionner un certain nombre de navigateurs de la génération précédente en utilisant le préfixe spécifique au fournisseur. Si votre navigateur ne comprend pas la règle border-radius, il créera simplement les coins carrés ordinaires.

Comment ajouter une ombre de boîte

Les ombres de boîte sont souvent ajoutées aux éléments pour créer l'illusion de profondeur.

L'effet d'ombre de la boîte n'est pas difficile à réaliser, mais il est normalement effectué dans le cadre d'une définition de classe, de sorte qu'il peut être réutilisé dans toute la page. Voici un exemple de code:

boxShadow. html ombre {box-shadow: 10px 10px 10px # 000000; hauteur: 200px; largeur: 200px; rembourrage: 1em; bordure: 1px noir uni; border-radius: 5px; background-color: #EEEEEE;}

Box Shadow Demo
Cette boîte a une ombre

L'ajout d'une ombre est beaucoup plus facile dans CSS3 qu'autrefois. Voici les étapes:

1. Définir une classe.

   Souvent, vous voulez appliquer les mêmes paramètres à un certain nombre d'éléments sur une page, l'ombre de la boîte est souvent combinée avec d'autres éléments comme background-color et border dans une classe CSS qui peut être réutilisée dans toute la page.

2. Ajoutez la règle box-shadow.

   Les derniers navigateurs prennent en charge la règle box-shadow standard, mais vous pouvez également inclure des préfixes de navigateur pour prendre en charge les anciennes navigations.

3. Spécifiez le décalage.

   Une ombre est généralement décalée par rapport au rectangle auquel elle appartient. Les deux premières valeurs indiquent le décalage horizontal et vertical. Mesurez en utilisant l'une des mesures CSS standard (normalement des pixels ou des ems).

4. Déterminez les distances de flou et de propagation.

   Vous pouvez modifier le comportement de l'ombre en spécifiant à quelle vitesse l'ombre floue et à quelle distance elle se propage. Ce sont des paramètres optionnels.

5. Indiquez la couleur de l'ombre.

   Vous pouvez rendre l'ombre de n'importe quelle couleur. Le noir et le gris sont courants, mais vous pouvez obtenir des effets intéressants en choisissant d'autres couleurs.

Beaucoup d'autres effets d'ombre sont possibles. Vous pouvez ajouter plusieurs ombres et vous pouvez également utiliser le mot-clé inset pour produire une ombre intérieure afin de donner l'impression qu'une partie de la page est découpée.