Vlastnosti hraničného obrázka CSS3 Vytváranie fotiek naozaj cool!
Vytváranie hraníc nie je ničím novým HTML & CSS; od začiatku sme mohli pridať hranice. Možno ste boli oboznámení s pevnými hranicami, bodkovanými hranicami, prerušovanými okrajmi atď.
Ale s novou vlastnosťou CSS3 border-image, vytváranie hraníc na element HTML sa stáva pokročilejším; jednoducho povedané, teraz môžeme pridať hranicu pomocou obrazu ako zdroja, ktorý nám umožní pridať atraktívnejšie hranice. Dobre, teraz uvidíme, ako táto vlastnosť funguje.
Syntax a podpora prehliadača
Obraz hraníc v CSS3 je definovaný pomocou nasledujúcej syntaxe skrátenia:
hraničný obrázok: [zdroj obrázka] [štrbinový] [šírka] [začiatok] [opakovanie];
Syntax uvedený vyššie je oficiálna verzia zo služby W3C, ktorá je podporovaná iba v prehliadači Chrome, zatiaľ čo Opera, Firefox a Safari stále vyžadujú predponu (-o-, -MOZ-, -WebKit-) a program Internet Explorer neprekvapuje túto vlastnosť vôbec nepodporuje.
Okrem toho [Šírka] a [Úvod] hodnota v tomto border-image Vlastnosti zatiaľ nie sú podporované v žiadnych prehliadačoch, ale šírka môže byť nahradená pomocou border-width vlastnosť.
Takže, skrátka, teraz môžeme použiť iba hodnotu [zdroj obrázka], [Plátok] a [Opakovanie] .
hraničný obrázok: [zdroj obrázkov] [rozdelenie] [opakovanie];
Obrázok Slice
Než budeme pokračovať v preukázaní tejto vlastnosti, poďme sa rozprávať o tom “obrázok plátok” pretože je to niečo nové pri vyhlasovaní majetku. Obraz obrázka tu definuje rez obrazu, ktorý má začiatočný bod z horného, pravého, spodného a ľavého okraja obrazu, ktorý následne rozdelí obraz na deväť častí, ako je znázornené na nasledujúcom obrázku.
Na obrázku vyššie uvidíte sekcie 1, 3, 7 a 9 sa stane rohom hraníc a úsekov 2, 4, 6 a 8 sa stane okraj hranice alebo čiary, uistite sa, že časť, v ktorej sa stane hranou, je opakovateľná alebo roztiahnuteľná.
Hodnotu rezov možno deklarovať pomocou a pixel jednotky alebo percentuálny podiel (%) jednotka pre flexibilné meranie.
ďalšie odkazy:
- CSS Pozadie a hranice Úroveň 3
Vytvorenie fotorámčeka
Teraz ukážeme nehnuteľnosť ako skutočný príklad.
Tentokrát sa chystáme implementovať border-image vlastnosť vytvoriť fotorámček a ako zdroj použijeme obrázok nižšie. Pozorne sme merali obrázok, aby mohol byť správne nakrájaný, opakovaný a natiahnutý bez ohľadu na šírku obsahu a výšku.
Poznámka: môžete obrázok prevziať z tohto odkazu.
Tiež v tejto demonštrácii použijeme tento úžasný film Cinemagraph by From Me to You ako fotografiu.
(Zdroj obrázku: odo mňa k tebe)
Označenie
Označenie je také jednoduché:
Nezabudnite nahradiť images_2 / CSS3-border-image-property-making-fotky-naozaj-cool_3.jpg s vlastnou fotkou.
Štýly
A potom mu dať rám pomocou border-image.
Ak sa pozriete na obrázok vyššie, naša šírka obrazu je 180px spolu. Táto hodnota sa potom dá rozdeliť na 6 ktoré každá divízia je 30PX; a tak budeme rozrezať obrázok 30PX.
Ak použijete hodnotu dĺžky pre segment, mali by ste vylúčiť px jednotka, pretože bude automaticky preložená pixel, ale ak sa rozhodnete použiť percento, budete musieť ešte pridať (%).
Pokiaľ ide o opakovanie obrázkov, použijeme predvolené; opakovať. Môžete tiež použiť natiahnuť a nebojte sa, hraničný obrázok bude stále vyzerať ladne.
img border-image: url ("images / frame.png") 30 opakovanie; -o-hraničný obrázok: url ("images / frame.png") 30 opakovanie; -moz-okraj-obrázok: url ("images / frame.png") 30 opakovanie; -webkit-okraj-obrázok: url ("images / frame.png") 30 opakovanie; šírka hranice: 30px; Okrem toho chceme umiestniť obrázok do stredu okna prehliadača, ako aj pridať textúru pozadia do dokumentu, aby to bolo presvedčivejšie.
html (pozadie: url ('images / lightpaperfibers.png'); .wrapper margin: 20px auto; výška: 476px; šírka: 675px; text-align: center; Dobre, myslím, že sme tu skončili, teraz ho pozrieme v prehliadači.
- demonštrácie
- Stiahnuť zdroj
Máte pocit, že sa pozeráte na magickú maľbu v Rokforte?
Záverečné myslenie
toto border-image je nepochybne pekný prírastok v rodine CSS3; už sa nesmieme obmedzovať na jednoduché hladké hranice.
A v tomto príspevku sme vám ukázali, ako môžeme vytvoriť rám obrazu bez obáv o obsah, alebo v tomto prípade o rozmeroch fotografie (šírka a výška). Výška a šírka môžu byť flexibilné, ak je hraničný zdroj opakovateľný alebo roztiahnuteľný.
Nakoniec, ak ste stále trochu zmätení border-image, existuje nástroj, ktorý môžete použiť na vytvorenie jednoduchšieho: nástroj na hraničný obraz
