Frontières ont été une partie de CSS depuis le début, mais CSS3 ajoute quelques nouvelles options très intéressantes. Les navigateurs modernes supportent désormais les frontières fabriqués à partir d'une image ainsi que des coins arrondis et la boîte ombres. Ces techniques promettent d'ajouter de nouvelles fonctionnalités passionnantes pour vos créations.

Frontières de l'image

CSS3 vous permet d'utiliser une image pour une frontière de l'élément. Le mécanisme est assez puissant car il détecte les bords d'une image et “ tranches ” pour créer les bords et les coins de la frontière des bords et des coins de l'image.

L'image de trame est stockée sous forme de Frame.jpg dans le même répertoire que le fichier HTML. Il dispose d'un centre transparent. Appliquer le code suivant pour ajouter une bordure de l'image autour de tous les éléments de la page:

 h2 {border-width: 15px; border-image: url ("Frame.jpg") 25% répétition - webkit-frontière-image: url ("Frame.jpg") 25% répétition - moz-border-image: url ("Frame.jpg") 25% répétabilité}

Voici comment vous ajoutez une image à la frontière:

1. Acquérir votre image.

   L'image doit déjà être conçu comme une sorte de frontière. Typiquement, il sera une forme sur les bords, soit avec un centre de couleur unie ou un centre transparent.

2. Spécifiez la largeur de la bordure.

   Vous aurez besoin d'indiquer la largeur de la bordure directement. La frontière de l'image de trame est redimensionnée à la taille la taille que vous voulez.

3. Calculez combien de la frontière de l'image que vous voulez.

   Si vous ne mettez pas le signe pour cent, la valeur calcule en pixels. Vous pouvez ajouter quatre valeurs si vous préférez utiliser des quantités différentes de l'image d'origine pour chaque limite.

4. 
   
   
   
   

   Indiquez le comportement que vous voulez.

   L'image originale est presque jamais la même taille que l'élément que vous êtes désireux d'entourer, de sorte que vous pouvez fournir une pointe d'expliquer comment le navigateur doit gérer les éléments de plus de l'original. Les choix les plus courants sont répéter (répéter l'image d'origine) ou étendue (pour reprendre l'espace entier). Avec une simple image comme le Frame.jpg utilisé dans cet exemple, les résultats seront les mêmes.

   

Comment ajouter des coins arrondis

CSS plus ancien était connu pour être très rectangulaire, de sorte concepteurs de sites Web a essayé d'adoucir leurs conceptions en ajoutant des coins arrondis. Cela a été un effet difficile à réaliser. CSS3 simplifie grandement la création de coins arrondis avec le border-radius régner.

Il est assez facile d'obtenir des coins arrondis sur les navigateurs qui prennent en charge la balise:

Round Corners Démo

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 aigus, vous aurez besoin d'un petit rayon. Vous pouvez mesurer le rayon dans l'une des mesures communes, mais pixels (PX) et la largeur de caractères (em) sont les plus couramment utilisés.

La bordure est pas visible sauf si l'élément a le Couleur de fond ou frontière défini. Notez qu'il existe des variations de chaque balise pour soutenir coins spécifiques. Cela peut être utile si vous ne souhaitez pas appliquer le même rayon à tous les quatre coins de votre élément. Les navigateurs les plus récents supportent désormais le générique border-radius régner.

Vous pouvez prendre 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 border-radius règle générale, il sera tout simplement créer les coins carrés ordinaires.

Comment ajouter une boîte ombre

Box ombres sont souvent ajoutés à des éléments pour créer l'illusion de profondeur.

L'effet zone d'ombre est pas difficile à réaliser, mais il se fait normalement dans le cadre d'une définition de classe de sorte qu'il peut être réutilisé dans toute la page. Voici quelques exemples de code:

Shadow Box Démo
Cette boîte a une ombre

Ajout d'une boîte de l'ombre est beaucoup plus facile dans CSS3 que par le passé. Voici les étapes:

1. Définissez une classe.

   Souvent, vous souhaitez appliquer les mêmes paramètres à un certain nombre d'éléments sur une page, de sorte que la boîte de l'ombre est souvent combiné avec d'autres éléments comme Couleur de fond et frontière dans une classe CSS qui peuvent être réutilisés dans toute la page.

2. Ajouter le box-ombre régner.

   Les navigateurs les plus récents prennent en charge la norme box-ombre règle, mais vous pouvez également inclure des préfixes navigateur pour accueillir navigue plus.

3. Spécifiez le décalage.

   Une ombre est généralement décalé par rapport au rectangle auquel il appartient. Les deux premières valeurs indiquent le décalage horizontal et vertical. Mesurer utilisant l'une des mesures de la norme CSS (normalement des pixels ou EMS).

4. Déterminer le flou et la propagation des distances.

   Vous pouvez également modifier le comportement de l'ombre en précisant à quelle vitesse l'ombre brouille et dans quelle mesure elle se propage. Ce sont des paramètres optionnels.

5. Indiquer la couleur de l'ombre.

   Vous pouvez faire de l'ombre toute couleur que vous souhaitez. Noir et gris sont communs, mais vous pouvez obtenir des effets intéressants en ramasser d'autres couleurs.

Beaucoup d'autres effets d'ombre sont possibles. Vous pouvez ajouter plusieurs ombres, et vous pouvez également utiliser la insérer mot-clé pour produire une ombre intérieure pour la faire ressembler à une partie de la page est découpée.