Trames d'image en utilisant CSS3 border-image

Trames d'image en utilisant CSS3 border-image


CSS3 permet de spécifier une image en tant que bordure d'un élément, au lieu de juste une couleur unie.Alors que sur la surface de cela ne semble pas particulièrement intéressant, la façon dont la propriété fonctionne, il est plus que celui qui rencontre l'oeil. Le border-image vous permet de spécifier la propriété d'une seule image à des fins puis les tranches de cette image pour créer l'effet frontière désirée. Oui, le CSS est désormais trancher. border-image est actuellement pris en charge dans tous les navigateurs modernes, à des degrés divers sauf IE (comme d'IE9). La syntaxe abrégée est:

border-image: url (image.png) 25 40 12 10 étirer;

Où:

• URL : L'image qui devrait être utilisé comme l'image de bordure.
• slicevalues ​​: Jusqu'à quatre numéros qui indiquent où le navigateur devrait tranche de l'image:
  • La 1ère valeur fixe le décalage de la première coupe horizontale du haut de l'image. Pour les unités de pixel, ne comprennent pas les "px" suffixe.
  • La 2ème valeur fixe le décalage de la deuxième coupe verticale de la bordure droite de l'image.
  • La valeur troisième fixe le décalage de la troisième coupe horizontale du bas de l'image.
  • La valeur quatrième fixe le décalage de la quatrième coupe verticale de la bordure gauche de l'image.
• étirer : Comment les tranches doivent être orientés à l'intérieur des frontières de l'élément. Les valeurs valides sont "étirer", "répéter", "rond", ou "espace".

Pour slicevalues ​​, si un seul nombre est défini, la même valeur sera utilisée pour toutes les 4 coupes. Si deux nombres sont définis, le premier est utilisé pour les coupes haut et en bas, et la seconde le coupe droite et à gauche. Peu importe, 4 coupes sont faites à l'image au total, et le navigateur se retrouve avec 9 tranches qu'il utilise pour rassembler l'image de bordure d'un élément. Chaque tranche est utilisé pour remplir les bords correspondants de la frontière de l'élément, avec la tranche du centre couvrant l'élément lui-même (et devrait être rendue transparente dans la plupart des cas).
Ce poste n'est pas à propos d'une description détaillée de la frontière de l'image - qui devra être pour un autre poste. Pour ce poste, ce que je veux démontrer, c'est comment utiliser cette propriété pour ajouter facilement des trames d'image à conteneurs sur votre page. D'abord, créer l'image que vous souhaitez utiliser comme cadre; ici j'ai fouetté deux cadres simples pour illustrer la technique:

Exemple 1:

Notez que les deux images ci-dessus ont un intérieur 

transparent pour le contenu qu'ils peuvent m

ontrer à travers cadrage.

Maintenant, au cœur de la matière à ajouter 

une bordure d'image à un élément, 

de définir les frontières de l'image 

propriété avec slicevalues ​​qui coupent l'image

 comme vous le souhaitez. Également définir

 une largeur de bordure de propriété écho 

de ces valeurs. Assez parlé, à quelques exemples

 dès maintenant! Notez que les exemples ci-dessous

 ne fonctionne pas sous IE (comme d'IE9):

Le code CSS:

. IMAGEBORDER {

border-width: 20px;

-moz-border-image: url (frame.gif) 20 étirer; / * version de Mozilla * /

-webkit-border-image: url (frame.gif) 20 étirer; / * Webkit Version * /

-o-border-image: url (frame.gif) 20 étirer; / * Opera version * /

ms-border-image: url (frame.gif) 20 étirer; / * syntaxe IE quand il prend en charge cette prop * /

border-image: url (frame.gif) 20 étirer; / * Version standard * /

}

Balisage:

<div class="imageborder" style="width:50%;min-height:150px">

texte contenu ici ...

</ div>

Exemple2:

Balisage

<img src="coconut.jpg" class="imageborder" />

Exemple3

Le code CSS: 

. Imageborder2 {

border-width: 30px 25px;

-moz-border-image: url (frame2.png) 25 30 étirer;

-webkit-border-image: url (frame2.png) 25 30 étirer;

-o-border-image : url (frame2.png) 25 30 étirer;

-ms-border-image: url (frame2.png) 25 30 étirer;

border-image: url (frame2.png) 25 30 étirer;

}.

Balisage:

<div class="imageborder2" style="width:470px;height:300px;background:url

(ocean_thumb.jpg) centre centre no-repeat">

</ div>

Posted in: blogger image html css