CSS3 Border-Image -ominaisuuden tekeminen Valokuvat ovat todella viileitä!

Tämä artikkeli on osa meidän "HTML5 / CSS3-oppaiden sarja" - omistettu auttamaan sinua parantamaan suunnittelijaa ja / tai kehittäjää. Klikkaa tästä nähdä lisää saman sarjan artikkeleita.

Rajojen luominen ei ole mitään uutta HTML & CSS; olemme voineet lisätä rajoja alusta alkaen. Olet ehkä tuntenut kiinteät reunat, katkoviivat, katkoviivat ja niin edelleen.

Uuden CSS3-raja-kuvan ominaisuuden myötä HTML-elementin reunojen luominen on kehittymässä; hyvin, yksinkertaisesti sanottuna, voimme nyt lisätä rajan käyttämällä kuvaa lähteenä, jonka avulla voimme lisätä houkuttelevampia rajoja. Hyvä on, nyt katsotaan miten tämä ominaisuus toimii.

Syntaksi ja selaimen tuki

CSS3: n reunakuva on määritelty seuraavalla lyhytnimellä:

 border-image: [kuva lähde] [viipale] [leveys] [alku] [toista];

Yllä oleva syntaksi on virallinen versio W3C: stä, jota tukee vain Chrome, kun taas Opera, Firefox ja Safari tarvitsevat edelleen etukäteen asetettua versiota (-O-, -MOZ-, -webKit-), ja Internet Explorer ei yllättäen tue tätä ominaisuutta lainkaan.

Lisäksi [leveys] ja [Alusta] arvo tässä border-kuva omaisuutta ei ole vielä tuettu missään selaimessa, mutta leveysarvo voidaan korvata käyttämällä border-width omaisuus.

Lyhyesti sanottuna, nyt voimme vain soveltaa arvoa [kuvan lähde], [viipale] ja [toistaa] .

 border-image: [image source] [slice] [toista];

Image Slice

Ennen kuin voimme osoittaa tämän ominaisuuden, puhutaanpa siitä “kuvan siivu” ensin, koska se on jotain uutta kiinteistön julistamisessa. Tässä kuvaesite määrittelee kuvan leikkauksen, joka ottaa kuvan alareunan ylä-, oikea-, ala- ja vasemmanpuoleisen aloituspisteen, joka myöhemmin jakaa kuvan yhdeksään osaan, kuten seuraavassa kuvassa on esitetty..

Yllä olevassa kuvassa näet, että osiot ovat 1, 3, 7 ja 9 tulee reunan kulmiin ja osiin 2, 4, 6 ja 8 tulee reuna- tai reunaviiva, varmista, että osa, josta se tulee, on toistettavissa tai venyvä.

Viipaleiden arvo voidaan ilmoittaa a: lla pikselin yksikkö tai prosenttiosuus (%) yksikkö joustavalle mittaukselle.

lisää viitteitä:

• CSS-taustat ja -rajat 3

Valokuvakehyksen luominen

Nyt näytetään omaisuutta todellisessa esimerkissä.

Tällä kertaa aiomme toteuttaa border-kuva ominaisuus luoda valokuvakehys ja käytämme alla olevaa kuvaa lähteenä. Olemme mitanneet kuvan huolellisesti, jotta se voidaan viipaloida, toistaa ja venyttää riippumatta sisällön leveydestä ja korkeudesta.

Huomautus: voit ladata yllä olevan kuvan tästä linkistä.

Tässä esittelyssä käytämme myös tätä upeaa Cinemagraph-ohjelmaa From Me: stä sinuun valokuvana.

(Kuvalähde: From Me To You)

Merkintä

Merkintä on yhtä yksinkertainen kuin tämä:

Älä unohda korvata images_2 / CSS3-border-image-ominaisuus päätöksenteossa-valokuvia-todella-cool_3.jpg omalla valokuvallasi.

Tyylit

Ja sitten annamme sille kehyksen käyttämällä border-kuva.

Jos katsot yllä olevaa kuvaa, kuvan leveys on 180px yhteensä. Tämä arvo voidaan sitten jakaa 6 jonka jokainen jako on 30px; ja niin me viipymme kuvan 30px.

Jos käytät pituusarvoa viipaleelle, sinun pitäisi jättää pois px yksikkö, koska se käännetään automaattisesti pikselin, mutta jos päätät käyttää prosenttiosuutta, sinun on vielä lisättävä (%).

Mitä tulee kuvan toistoon, käytämme oletusarvoa; toistaa. Vaihtoehtoisesti voit käyttää venyttää ja älä huoli, rajakuva näyttää silti siroilta.

 img border-image: url ("images / frame.png") 30 toistoa; -o-border-image: url ("images / frame.png") 30 toistoa; -moz-border-image: url ("images / frame.png") 30 toistoa; -webkit-border-image: url ("images / frame.png") 30 toistoa; raja-leveys: 30px;  

Lisäksi haluamme myös sijoittaa kuvan selainikkunan keskelle sekä lisätä taustakuvion asiakirjaan, jotta se olisi pakottavampi.

 html background: url ('images / lightpaperfibers.png');  .wrapper margin: 20px auto; korkeus: 476px; leveys: 675px; text-align: center;  

Hyvä on, mielestäni olemme täällä, nyt katsotaan sitä selaimessa.

• esittely
• Lataa lähde

Tuntuuko sinusta, että katsot maagista maalausta Hogwartsissa?

Lopullinen ajatus

Tämä border-kuva epäilemättä on mukava lisä CSS3-perheeseen; meitä ei enää rajoiteta yksinkertaisiin tavallisiin rajoihin.

Ja tässä viestissä olemme osoittaneet, miten voimme luoda kuvakehyksen huolimatta sisällöstä tai tässä tapauksessa valokuvan mitoista (leveys ja korkeus). Korkeus ja leveys voivat olla joustavia, kunhan rajalähde on toistettavissa tai venytettävissä.

Lopuksi, jos olet vielä hieman hämmentynyt border-kuva, on työkalu, jonka avulla voit luoda helpommin: reunakuvan työkalu