CSS3 Border-Image Property Making Fotogrāfijas tiešām atdzist!
Robežu radīšana nav nekas jauns HTML & CSS; kopš sākuma mēs esam spējuši pievienot robežas. Iespējams, esat iepazinies ar cietām robežām, punktētām robežām, punktētām robežām utt.
Taču ar jauno CSS3 robežu attēla īpašībām robežu izveide uz HTML elementu kļūst arvien progresīvāka; labi, vienkārši sakot, mēs tagad varam pievienot robežu, izmantojot avotu, kas ļaus mums pievienot pievilcīgākas robežas. Labi, tagad redzēsim, kā šis īpašums darbojas.
Sintakse un pārlūkprogrammas atbalsts
CSS3 robežu attēls tiek definēts, izmantojot šādu īsfilmu sintaksi:
border-image: [image source] [šķēle] [platums] [sākums] [atkārtot];
Iepriekš minētā sintakse ir oficiālā versija no W3C, kas tiek atbalstīta tikai pārlūkprogrammā Chrome, savukārt operētājsistēmai Opera, Firefox un Safari joprojām ir nepieciešama iepriekšēja versija (-o-, -moz-, -webkit-), un Internet Explorer nepārsteidz, ka tas vispār neatbalsta šo īpašumu.
Turklāt [platums] un [sākums] vērtību robežu attēls īpašums vēl nav atbalstīts nevienā pārlūkprogrammā, tomēr platuma vērtību var aizstāt ar robežu platums īpašums.
Tātad, īsi sakot, tagad mēs varam piemērot tikai [attēla avots], [šķēle] un [atkārtot] .
border-image: [image source] [šķēle] [atkārtot];
Image Slice
Pirms mēs turpinām demonstrēt šo īpašumu, runāsim par “attēla šķēle” Pirmkārt, tas ir kaut kas jauns, deklarējot īpašumu. Attēla šķēlums šeit noteiks attēla griezumu, kas attiecīgi aizņem sākuma punktu no augšējās, labās, apakšējās un kreisās puses malas, kas pēc tam arī sadalīs attēlu deviņās daļās, kā parādīts ar šādu attēlu.
Iepriekš redzamajā attēlā redzēsiet, ka sadaļas 1, 3, 7 un 9 kļūs par robežas stūriem un sekcijām 2, 4, 6 un 8 kļūs par robežas malu vai līniju, pārliecinoties, ka sekcija, kurā tā kļūs, ir atkārtojama vai izstiepama.
Šķēļu vērtību var deklarēt ar a pikseļi vienību vai procentuālo daļu (%) vienība elastīgai mērīšanai.
vairāk atsauču:
- CSS foni un robežu līmenis 3
Foto rāmja izveide
Tagad parādīsim īstu piemēru.
Šoreiz mēs īstenosim robežu attēls īpašums, lai izveidotu foto rāmi, un mēs izmantosim zemāk redzamo attēlu kā avotu. Mēs rūpīgi izmērām attēlu, lai to varētu pareizi sagriezt, atkārtot un izstiept neatkarīgi no satura platuma un augstuma.
Piezīme: varat augšupielādēt attēlu no šīs saites.
Arī šajā demonstrācijā mēs izmantosim šo satriecošo Cinemagraph no No Me uz Jums kā fotoattēlu.
(Attēla avots: no manis līdz jums)
Marķējums
Marķējums ir tik vienkāršs kā:
Neaizmirstiet nomainīt images_2 / css3-border-image-property-making-photos-really-cool_3.jpg ar savu fotogrāfiju.
Stili
Un tad, dodam tai rāmi, izmantojot robežu attēls.
Ja aplūkojat iepriekš redzamo attēlu, mūsu attēla platums ir 180px kopā. Pēc tam šo vērtību var iedalīt 6 kas ir katrs sadalījums 30px; un tāpēc mēs sagriezīsim attēlu 30px.
Ja šķēles garuma vērtība tiek izmantota, jums jāizslēdz px vienība, jo tā tiks automātiski tulkota pikseļi, bet, ja jūs nolemjat izmantot procentus, jums joprojām būs jāpievieno (%).
Attiecībā uz attēla atkārtošanos mēs izmantosim noklusējuma iestatījumu; atkārtojiet. Varat arī izmantot stiept un neuztraucieties, robežu attēls joprojām izskatīsies graciozs.
img border-image: url ("images / frame.png") 30 atkārtošana; -o-border-image: url ("images / frame.png") 30 atkārtošana; -moz-border-image: url ("images / frame.png") 30 atkārtošana; -webkit-border-image: url ("images / frame.png") 30 atkārtošana; robežu platums: 30px; Turklāt mēs vēlamies ievietot attēlu pārlūkprogrammas loga centrā, kā arī pievienot dokumentam fona tekstūru, lai padarītu to pārliecinošu.
html background: url ('images / lightpaperfibers.png'); .wrapper margin: 20px auto; augstums: 476px; platums: 675px; teksta saskaņošana: centrs; Labi, es domāju, ka mēs esam šeit, tagad aplūkosim to pārlūkprogrammā.
- Demo
- Lejupielādēt avotu
Vai jūtaties, ka jūs meklējat burvju gleznu Cūkkārpā?
Galīgā doma
Tas robežu attēls neapšaubāmi ir jauks papildinājums CSS3 ģimenē; mēs vairs nevaram aprobežoties ar vienkāršām vienkāršām robežām.
Un šajā amatā mēs esam parādījuši, kā mēs varam izveidot attēla rāmi, neuztraucoties par saturu vai šajā gadījumā fotoattēla izmēriem (platums un augstums). Augstums un platums var būt elastīgi, kamēr robežu avots ir atkārtojams vai izstiepams.
Visbeidzot, ja jūs joprojām esat mazliet neizprotami robežu attēls, ir rīks, ko varat izmantot, lai palīdzētu jums izveidot vieglāk: robežu attēla rīks
