Propriété CSS3 Border-Image faisant des photos vraiment cool!
Créer des frontières n’a rien de nouveau HTML Et CSS; nous avons pu ajouter des frontières depuis le début. Vous connaissez peut-être les frontières solides, les bordures en pointillés, les bordures en pointillés, etc..
Cependant, avec la nouvelle propriété CSS3 border-image, la création de bordures sur un élément HTML est de plus en plus avancée. Eh bien, tout simplement, nous pouvons maintenant ajouter une bordure en utilisant une image comme source, ce qui nous permettra d’ajouter des bordures plus attrayantes. Très bien, voyons maintenant comment cette propriété fonctionne.
Prise en charge de la syntaxe et du navigateur
L'image de bordure dans CSS3 est définie à l'aide de la syntaxe abrégée suivante:
border-image: [source de l'image] [tranche] [largeur] [départ] [répéter];
La syntaxe ci-dessus est la version officielle du W3C qui n'est prise en charge que par Chrome, alors qu'Opera, Firefox et Safari exigent toujours la version préfixée (-o-, -moz-, -webkit-), et Internet Explorer sans surprise ne supporte pas cette propriété du tout.
En outre, le [largeur] et le [début] valeur dans cette image de bordure propriété ne sont pas encore pris en charge par les navigateurs. Cependant, la valeur de la largeur peut être remplacée à l'aide de la commande largeur de la bordure propriété.
En bref, pour le moment, nous ne pouvons appliquer que la valeur de [source de l'image], [tranche] et [répéter] .
border-image: [source de l'image] [tranche] [répéter];
Tranche d'image
Avant de commencer à démontrer cette propriété, parlons de la “tranche d'image” d'abord parce que c'est quelque chose de nouveau dans la déclaration d'une propriété. La tranche d’image définira ici la coupe de l’image qui prend respectivement le point de départ en haut, à droite, en bas et à gauche des bords de l’image et divisera ensuite l’image en neuf sections, comme illustré par l’image suivante..
Dans l'image ci-dessus, vous verrez que les sections 1, 3, 7 et 9 deviendront les coins de la frontière, et les sections 2, 4, 6 et 8 deviendra le bord ou la ligne, en s'assurant que la section où il deviendra le bord est répétable ou extensible.
La valeur des tranches peut être déclarée avec un pixel unité ou un pourcentage (%) unité de mesure flexible.
plus de références:
- Arrière-plans et bordures CSS niveau 3
Créer un cadre photo
Maintenant, démontrons la propriété dans un exemple réel.
Cette fois, nous allons mettre en œuvre le image de bordure propriété pour créer un cadre photo et nous utiliserons l'image ci-dessous comme source. Nous avons soigneusement mesuré l’image afin qu’elle puisse être découpée, répétée et étirée correctement, quelle que soit la largeur et la hauteur du contenu..
Remarque: vous pouvez télécharger l'image ci-dessus à partir de ce lien.
De plus, dans cette démonstration, nous utiliserons ce superbe Cinemagraph de From Me to You comme photo..
(Source de l'image: De moi à toi)
Le balisage
Le balisage est aussi simple que cela:
N'oubliez pas de remplacer le images_2 / css3-border-image-propriété-faire-photos-vraiment-cool_3.jpg avec ta propre photo.
Les styles
Et puis, donnons-lui un cadre en utilisant image de bordure.
Si vous regardez l'image ci-dessus, notre largeur d'image est 180px au total. Cette valeur peut ensuite être divisée en 6 lequel chaque division étant 30px; et nous allons donc trancher l'image pour 30px.
Si vous utilisez une valeur de longueur pour la tranche, vous devez exclure le px unité, car il sera automatiquement traduit en pixel, mais si vous décidez d’utiliser un pourcentage, vous aurez toujours besoin d’ajouter le (%).
En ce qui concerne la répétition d'image, nous utiliserons la valeur par défaut; répéter. Alternativement, vous pouvez utiliser étendue et ne vous inquiétez pas, l'image de la frontière restera gracieuse.
img border-image: url ("images / frame.png") 30 répéter; -o-border-image: url ("images / frame.png") 30 répéter; -moz-border-image: url ("images / frame.png") 30 répéter; -webkit-border-image: url ("images / frame.png") 30 répéter; largeur de la bordure: 30px; En outre, nous souhaitons également placer l’image au centre de la fenêtre du navigateur et ajouter une texture d’arrière-plan au document pour le rendre plus attrayant..
html background: url ('images / lightpaperfibers.png'); .wrapper margin: 20px auto; hauteur: 476px; largeur: 675px; text-align: center; D'accord, je pense que nous avons terminé ici, voyons maintenant dans un navigateur.
- Démo
- Source de téléchargement
Avez-vous l'impression de regarder un tableau magique à Poudlard??
Pensée finale
Ce image de bordure est sans aucun doute un ajout intéressant à la famille CSS3; nous ne sommes plus limités aux simples frontières simples.
Et dans cet article, nous vous avons montré comment créer un cadre d'image sans se soucier du contenu ni, dans ce cas, des dimensions (largeur et hauteur) de la photo. La hauteur et la largeur peuvent être flexibles, tant que la source de la bordure est répétable ou extensible.
Enfin, si vous êtes encore un peu perplexe à propos de image de bordure, il existe un outil que vous pouvez utiliser pour vous aider à en créer un plus facilement: l'outil d'image de bordure
