„CSS3 Border-Image Property Making Photos“ tikrai graži!
Sienų kūrimas nėra naujas HTML & CSS; nuo pat pradžių galėjome pridėti sienų. Gali būti, kad esate susipažinę su tvirtomis sienomis, punktyrinėmis sienomis, brūkšnėmis ir pan.
Tačiau, naudojant naują CSS3 sienos atvaizdo nuosavybę, HTML elementų ribų kūrimas tampa vis pažangesnis; gerai, paprasčiausiai, dabar mes galime pridėti sieną, naudodami kaip šaltinį, kuris leis mums pridėti daugiau patrauklių sienų. Gerai, dabar pažiūrėkime, kaip veikia šis turtas.
Sintaksė ir naršyklės palaikymas
CSS3 sienos vaizdas yra apibrėžiamas naudojant šią trumpąją sintaksę:
border-image: [vaizdo šaltinis] [gabalas] [plotis] [pradžia] [pakartoti];
Viršuje esanti sintaksė yra oficiali versija iš W3C, kuri yra palaikoma tik „Chrome“, o „Opera“, „Firefox“ ir „Safari“ vis dar reikalauja pirminės versijos (-o-, -moz-, -žiniatinklio rinkinys-) ir „Internet Explorer“ nenuostabu, kad šis turtas apskritai nepalaiko.
Be to, [plotis] ir [pradžia] vertę sienos vaizdas nuosavybė dar nepalaikoma jokiose naršyklėse, tačiau plotis gali būti pakeistas naudojant sienos plotis nuosavybė.
Taigi, trumpai tariant, dabar galime taikyti tik [vaizdo šaltinis], [gabalas] ir [pakartoti] .
border-image: [image source] [slice] [pakartoti];
Image Slice
Prieš pradėdami parodyti šį turtą, pakalbėkime apie “vaizdo gabalas” pirmiausia, nes tai yra kažkas naujo skelbiant turtą. Paveikslėlio gabalas čia apibrėžia atvaizdo pjūvį, kuris atitinkamai ima pradžios tašką iš viršutinės, dešinės, apatinės ir kairiosios vaizdo kraštų, kurie vėliau taip pat padalins vaizdą į devynias dalis, kaip parodyta sekančiame paveikslėlyje.
Viršuje esančiame paveikslėlyje pamatysite, kad sekcijos 1, 3, 7 ir 9 taps sienos kampais ir sekcijomis 2, 4, 6 ir 8 taps sienos kraštu arba linija, užtikrindami, kad sekcija, kurioje ji taps, yra pakartojama arba ištempiama.
Skiltelių vertę galima deklaruoti su a pikselių vienetą arba procentą (%) lanksčiai matuoti.
daugiau nuorodų:
- CSS fonai ir sienų lygis 3
Nuotraukų rėmelio kūrimas
Dabar parodykime nekilnojamąjį pavyzdį.
Šį kartą vykdysime sienos vaizdas nuosavybės, kad sukurtumėte nuotraukų rėmelį, ir mes naudosime žemiau esantį vaizdą kaip šaltinį. Mes kruopščiai matavome vaizdą, kad jis būtų tinkamai supjaustytas, kartojamas ir ištemptas, neatsižvelgiant į turinio plotį ir aukštį.
Pastaba: galite atsisiųsti aukščiau esantį vaizdą iš šios nuorodos.
Be to, šioje demonstracijoje naudosime šią nuostabią „Cinemagraph“ iš „Me“ į jus kaip nuotrauką.
(Vaizdo šaltinis: iš manęs į tave)
Žymėjimas
Žymėjimas yra toks paprastas:
Nepamirškite pakeisti images_2 / css3-border-image-property-making-photos-tikrai-cool_3.jpg su savo nuotrauka.
Stiliai
Ir tada leiskite jai rėmo naudoti sienos vaizdas.
Jei žiūrite į aukščiau esantį vaizdą, mūsų vaizdo plotis yra 180 pikselių iš viso. Tada šią vertę galima suskirstyti į 6 kiekvienas padalinys yra 30px; ir taip mes supjaustysime vaizdą 30px.
Jei naudosite pjūvio ilgio vertę, turėtumėte išskirti px vienetas, nes jis bus automatiškai išverstas pikselių, bet jei nuspręsite naudoti procentinę dalį, vis tiek turėsite pridėti (%).
Kalbant apie vaizdo pasikartojimą, naudosime numatytąjį; pakartokite. Arba galite naudoti ruožas nesijaudinkite, pasienio vaizdas vis dar atrodys grakštus.
img border-image: url ("images / frame.png") 30 pakartoti; -o-border-image: url ("images / frame.png") 30 pakartojimas; -moz-border-image: url ("images / frame.png") 30 pakartojimas; -webkit-border-image: url ("images / frame.png") 30 pakartojimas; sienos plotis: 30px; Be to, mes taip pat norime įdėti vaizdą į naršyklės lango centrą, taip pat pridėti dokumento fono tekstūrą, kad ji būtų labiau įtikinama.
html background: url ('images / lightpaperfibers.png'); .wrapper margin: 20px auto; aukštis: 476px; plotis: 675px; teksto derinimas: centras; Gerai, manau, kad čia darome, dabar žiūrėkime į naršyklę.
- Demo
- Atsisiųsti šaltinį
Ar jaučiatės, kaip žiūrite į stebuklingą paveikslą Hogvartoje?
Galutinė mintis
Tai sienos vaizdas neabejotinai yra puikus papildymas CSS3 šeimoje; mes nebegalime apsiriboti paprastomis paprastomis sienomis.
Ir šiame pranešime parodėme, kaip galime sukurti vaizdo rėmelį nesirūpindami turiniu arba šiuo atveju nuotraukos matmenimis (plotis ir aukštis). Aukštis ir plotis gali būti lankstūs, jei pasienio šaltinis yra pakartojamas arba ištempiamas.
Galiausiai, jei jūs vis dar truputį nesuprantate sienos vaizdas, yra įrankis, kurį galite naudoti, kad padėtų jums lengviau sukurti: sienos vaizdo įrankį
