CSS3 Svojstvo granice slike Stvaranje fotografija stvarno kul!

Ovaj članak je dio našeg "Serija vodiča za HTML5 / CSS3" - posvećeni pomoći da postanete bolji dizajner i / ili programer. Kliknite ovdje da biste vidjeli više članaka iz iste serije.

Stvaranje granica nije ništa novo u sustavu HTML & CSS; mogli smo dodati granice od početka. Možda ste poznavali čvrste granice, točkaste granice, isprekidane granice i tako dalje.

No, s novim svojstvom CSS3 border-image, stvaranje granica na HTML elementu postaje sve naprednije; Jednostavno rečeno, sada možemo dodati granicu koristeći sliku kao izvor koji će nam omogućiti da dodamo privlačnije granice. U redu, da vidimo kako radi ova nekretnina.

Sintaksa i podrška preglednika

Slika obruba u CSS3 definirana je pomoću sljedeće skraćenice sintakse:

 border-image: [izvor slike] [slice] [width] [outset] [ponavljanje];

Gornja sintaksa je službena verzija iz W3C koja je podržana samo u Chromeu, dok Opera, Firefox i Safari još uvijek zahtijevaju prefiksnu verziju (-o-, -moz-, -WebKit-), a Internet Explorer ne iznenađuje što uopće ne podržava ovu nekretninu.

Nadalje, [širina] i [Polazak] vrijednost u ovome Granica slika svojstva još nisu podržana u bilo kojem pregledniku, međutim, vrijednost širine može se zamijeniti pomoću border-width svojstvo.

Dakle, ukratko, za sada možemo primijeniti samo vrijednost [izvor slike], [kriška] i [ponoviti] .

 border-image: [izvor slike] [slice] [ponoviti];

Image Slice

Prije nego što nastavimo demonstrirati ovu imovinu, razgovarajmo o tome “isječak slike” prvo kao nešto novo u proglašavanju imovine. Isječak slike ovdje će definirati rez slike koji će uzeti početnu točku od vrha, desno, dolje i lijevo od rubova slike koji će zatim podijeliti sliku na devet dijelova, kao što je prikazano na sljedećoj slici..

Na gornjoj slici vidjet ćete odjeljke 1, 3, 7 i 9 postat će uglovi granice i dijelovi 2, 4, 6 i 8 postat će rubni rub ili crta granice, pazeći na to da dio na kojem će biti rub bude ponovljiv ili rastezljiv.

Vrijednost rezova može se deklarirati s a piksela jedinica ili postotak (%) jedinica za fleksibilno mjerenje.

više referenci:

• Pozadine i granice CSS-a Razina 3

Izrada okvira za fotografije

Sada, pokazajmo svojstvo u stvarnom primjeru.

Ovaj put, mi ćemo provesti Granica slika za izradu okvira za fotografije i koristit ćemo sliku ispod kao izvor. Pažljivo smo izmjerili sliku tako da se može pravilno narezati, ponoviti i istegnuti bez obzira na širinu i visinu sadržaja.

Bilješka: sliku možete preuzeti s ove veze.

Također, u ovoj demonstraciji koristit ćemo ovu zapanjujuću Cinemagraph od From Me to You kao fotografiju.

(Izvor slike: Od mene do tebe)

Oznaka

Oznaka je jednostavna kao ova:

Ne zaboravite zamijeniti images_2 / CSS3 granica-slika-nekretnine odluka-fotografije-stvarno-cool_3.jpg s vlastitom fotografijom.

Stilovi

I onda, dajmo mu okvir pomoću Granica slika.

Ako pogledate sliku iznad, naša širina slike je 180px ukupno. Ova se vrijednost tada može podijeliti na 6 koja je svaka podjela 30px; i tako ćemo isjeći sliku 30px.

Ako koristite vrijednost duljine za isječak, trebali biste isključiti oznaku px jedinica, jer će se automatski prevesti na piksela, ali ako odlučite koristiti postotak i dalje ćete morati dodati (%).

Što se tiče ponavljanja slika, koristit ćemo default; ponoviti. Alternativno, možete koristiti rastezanje i ne brinite, granična slika će i dalje izgledati graciozno.

 img border-image: url ("images / frame.png") 30 ponoviti; -o-border-image: url ("images / frame.png") 30 ponavljanje; -moz-border-image: url ("images / frame.png") 30 ponavljanje; -webkit-border-image: url ("images / frame.png") 30 ponavljanje; granica-širina: 30px;  

Osim toga, želimo postaviti sliku u središte prozora preglednika, kao i dodati pozadinsku teksturu dokumentu kako bi je učinili privlačnijim.

 html pozadina: url ('images / lightpaperfibers.png');  .wrapper margin: 20px auto; visina: 476px; širina: 675px; poravnavanje teksta: centar;  

U redu, mislim da smo završili ovdje, sada ćemo ga vidjeti u pregledniku.

• Demo
• Preuzimanje izvora

Osjećate li se kao da gledate čarobnu sliku u Hogwartsu?

Završna misao

Ovaj Granica slika nesumnjivo je lijep dodatak u CSS3 obitelji; više nećemo biti ograničeni na jednostavne granice.

I u ovom postu, pokazali smo vam kako možemo stvoriti okvir za slike bez brige o sadržaju ili u ovom slučaju dimenzijama fotografije (širina i visina). Visina i širina mogu biti fleksibilni, sve dok je granični izvor ponovljiv ili rastezljiv.

Konačno, ako ste još uvijek pomalo zbunjeni Granica slika, tu je alat koji vam može pomoći da lakše kreirate: alat za slike granice