CSS3 Svojstvo granice slike Stvaranje fotografija stvarno kul!
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