Miten pääset alkuun CSS-muotoilla

Verkko on tyypillisesti ollut laatikoiden ja suorakulmien paikka, mutta uusi CSS-spesifikaatio aikoo muuttaa sitä. Tässä artikkelissa esitän teille CSS-muotoja, selvitän, mitä he ovat, ja keskeisiä käsitteitä, joita tarvitset niiden käytön aloittamiseen.

Kaikki esimerkit liittyvät Githubiin , joten voit tarkastella ja ladata lähdekoodin lähtökohdaksi omalle kokeilulle.

Mitä ovat CSS-muodot?

CSS Shapes specification CSS-muotoja kuvaa geometrisia muotoja CSS: lle. Eritelmän tason 1, joka on nyt ehdokasvalinnan suositustilassa, muotoja voidaan soveltaa vain kelluvia elementtejä varten. Esimerkki on helpoin tapa aloittaa.

.shape { float: left; width: 150px; height: 150px; margin: 20px; shape-outside: circle(50%); }

Yllä olevassa esimerkissä lisätään tämä luokka kuvaan. Me float kuvan vasemmalle, anna sille leveys, korkeus ja marginaali ja käytä sitten ominaisuuden muotoa ulkopuolelta käyrän ympyrän ympärille.

Katso esimerkki

Ennen kuin menet edelleen, käytä Chromen päätä http://betravis.github.io/shape-tools/ ja vedä Näytä muotoja -valintamerkki kirjanmerkkipalkkiisi.

Jos siirryt sitten esimerkkisivulle ja napsautat kirjanmerkkiä, näet ympyrän muodon piirteen:

Perusmuodot

Yksinkertaisessa esimerkissämme käytetty muoto-ulkopuolinen ominaisuus voi ottaa useita arvoja. Ensimmäisiä mahdollisuuksia kutsutaan spesifikaation "perusmuotoiksi". Nämä perusmuodot ovat toimintoja:

upotus ()
ympyrä()
ellipsi()
monikulmio()

upotus ()

Inset () -toiminto on muotoilemalla suorakaiteen muotoisia elementtejä, jotka float tekee meille ja useimmissa tapauksissa on riittävä. Saattaa olla aikoja, jolloin lisäohjaus tulee hyödylliseksi.

Inset () -toimintoa voidaan ohjata neljällä asemointisignaalilla, jotka siirtyvät sisäänpäin elementin reunoista sekä suorakaiteen muotoisen raja-alueen, jota edeltää avainsana "pyöreä".

upotus (ylhäällä oikealla alhaalla vasemmalla pyöreällä raja-säteellä);

esimerkiksi:

inset(10px 20px 10px 20px round 50%);

Sisäosan argumentit noudattavat samaa lyhennettä kuin marginaali, joten jos haluat 20-pikselin kokoisen elementin ympärille, jota voit käyttää:

inset(10px round 50%);

Esimerkkinäni olen käyttänyt kuvaa, jonka alla on paljon valkoista tilaa. Jos vain kelluva kuva, minulla on suuri aukko alla. Käyttämällä upotusarvoa voin upottaa muodon pohjan, jolloin tekstin virtaus lähemmäs sitä.

.shape { float: left; width: 200px; height: 200px; shape-outside: inset(0 0 70px 0 round 10px); }

Katso esimerkki , ja näet muotoa Näytä muotoa -valikosta.

ympyrä()

Tapasimme ympyrän perusmuodon tämän artikkelin alussa. Ympyrä () muoto-arvo on kuvattu kokonaisuudessaan eritelmässä seuraavasti:

circle(r at cx cy);

Arvo r on ympyrän säde, 50% on puolet elementin leveydestä. Muut kaksi arvoa ovat x- ja y-koordinaatit ympyrän keskukselle, mikä mahdollistaa olennaisesti ympyrän työntämisen.

Esimerkkinäni käytin:

circle(50%);

Voisin myös kuvata tätä seuraavasti:

circle(50% at 50% 50%);

Githubin esimerkkisivullani Minulla on kuvake, sillä on läpinäkyvä tausta ja esimerkit ovat selkeämpiä. Olen antanut kuvan harmaaksi taustaväri, pehmuste, raja ja marginaali:

.shape { float: left; width: 150px; height: 150px; margin: 20px; padding: 20px; background-color: #cccccc; border: 10px solid #999999; }

Se on asetettu kellumaan vasemmalle, ja jos emme sovellu mitään muotoja tähän kuvaan, se näyttää kuvakaappaus alla.

Voin luoda yksinkertaisen ympyrän muodon:

.circle { shape-outside: circle(50%); }

Jos käytän muodon sisällä olevaa ympyräarvoa ja tällä kertaa vaihdan koordinaatit. Ympyrä työntyy ylös ja vasemmalle.

.circle-coords { shape-outside: circle(50% at 30% 30%); }

Voit käyttää koordinaattien tai avainsanojen absoluuttisia tai suhteellisia arvoja kuten paikannustekstikuvien kanssa.

Tässä vaiheessa kannattaa tarkastella viitekehysten käsitettä. Voimme käyttää neljä mahdollista viitekehysaluetta:

content-box
padding-box
border-box
margin-box

Ympyrän oletusarvoinen viitekehys on marginaalikenttä.

shape-outside: circle(50%) margin-box;

On sama kuin kirjoittaminen:

shape-outside: circle(50%);

Kuten olette odottaneet, että marginaalikenttä on rajoitettu elementin marginaalin raja-rajan reunalla, padding-laatikko pehmuste ja sisältö-box rajoittaa todellinen sisältö.

Lukea Tämä artikkeli Täydellinen selitys siitä, miten viitekehykset toimivat CSS-muodoissa.

Jos tarkastelemme esimerkkisivua Näytä muotoa -valikosta, näet selvästi, miten tämä toimii.

Viimeinen asia, jonka näytän ympyrällä, on, miten leikata sisältö noudattaa muotoilua, jonka olet luonut. Kun lisäsin näkyvän pehmustuksen ja reunukset elementteihini, teksti näyttää päällekkäin. Voimme itse leikata muodon sisällön käyttämällä leike-polkuominaisuutta CSS Masking Level 1 -spesifikaatiosta. Se edellyttää tällä hetkellä etuliitettä (katso [Voinko käyttää] [7]).

.circle-clip { shape-outside: circle(50%) margin-box; -webkit-clip-path: circle(50%) ; clip-path: circle(50%) ; }

Kuten yllä olevasta kuvakaappauksesta näet, elementtimme on nyt leikattu seuraamaan käyrää. Tämä toimii hyvin kuvien kohdalla, joten voit leikata ne niin, että teksti näyttää kulkevan käyrissä.

ellipsi()

Monia muotoja voi olla kaareva ympärillä käyttämällä ellipsin arvoa, vaikka ne eivät olisikaan ellipsiä.

Ellipsin käyttäminen on hyvin samanlaista kuin ympyrä, paitsi että yhden säteilyarvon sijasta sinun on määritettävä x- ja y-säde erikseen.

shape-outside(rx ry at cx cy);

Sädearvot voivat olla absoluuttisia tai suhteellisia yksiköitä ja myös avainsanoja lähimpänä ja kauimpana . Nämä avainsanat ovat myös käyttökelpoisia ympyrän säteenä, vaikka ne ovat käytännössä hyödyllisiä.

Minun esimerkkini, jolla ei ole mitään muotoa, on yksinkertaisesti kelluva.

.shape { float: left; width: 200px; height: 200px; margin: 20px; }

Voin käyttää säteen avainsanoja:

.ellipse-keywords { shape-outside: ellipse(closest-side farthest-side at 50% 50%); }

Mikä luo ympyrän tällä elementillä, koska kuvan todelliset mittasuhteet ovat neliöitä.

Eliipin pakottamiseksi käytän absoluuttisia pituusyksiköitä.

.ellipse-values { shape-outside: ellipse(90px 150px at 50% 50%); }

Siirrä ellipsin päälle muutan koordinaatit:

.ellipse-center { shape-outside: ellipse(closest-side farthest-side at 70% 80%); }

monikulmio()

Jos tarvitset todella hienosäätöä muotoiluasi, monikulmioarvo auttaa. Voit määrittää niin monta koordinaattia kuin sinun on muotoilussa - vähintään kolmella.

Kukin koordinaattiparin erotetaan pilkulla.

.shape-polygon { shape-outside: polygon(0 20px, 160px 40px, 180px 70px, 180px 120px, 120px 200px, 60px 210px, 0 220px); }

Näyttömuodot-kirjanmerkin avulla näet muodon.

Muodot kuvasta

Toinen tapa muodon muodostamisessa on antaa kuvan muodon ulkopuolelle. Kuvan on oltava alfa-kanava. (Lisätietoja siitä, miten voit tallentaa kuvat, jos käytät Photoshopia Adobe Web Platform -blogi .)

Voit käyttää jo sivullasi olevaa kuvaa tai siirtää kuvaa muualta.

Huomaa: Käytettävän kuvan on oltava CORS Compatible. Ensimmäistä kertaa, kun soitin tämän kanssa, en ymmärrä, miksi muoto ei toiminut, kun testasin paikallisesti. Lue lisää täältä .

Minun esimerkkisivu sisältää kolme eri tekniikan käyttöä. Ensimmäisessä esimerkissä minulla on kuva omalla sivulla ja siirrän sen myös URL-muotoon, jolla luodaan muoto.

.shape-image { shape-outside: url('noun_109069.png'); shape-image-threshold: 0.5; }

Muoto-kuva-kynnys määrittää läpikuultavuuden kynnyksen, jota meidän tulisi käyttää, 0: stä, joka on täysin läpinäkyvä, joka on täysin läpinäkyvä.

Kuten näette, tekstimme on aivan kuvan vastainen.

Toisessa esimerkissä käytän eri kuvaketta ja asetan myös muoto-margin- ominaisuuden. Tämä luo marginaalin, joka on kaareva elementin polun ympärillä.

.shape-image-margin { shape-outside: url('noun_109207_cc.png'); shape-image-threshold: 0.5; shape-margin: 20px; }

Sinun ei tarvitse luoda sivulle perustuvaa muotoa. Tässä viimeisessä esimerkissä olen luonut Photoshopissa olevan kuvan, joka näyttää tältä.

Aion käyttää sitä ja luoda muodon joihinkin tuotettuihin sisältöihin tekstin muokkaamiseksi lävistäjäviivalla.

.content:before { content: ""; float: left; width: 200px; height: 200px; shape-outside: url('alpha.png'); shape-image-threshold: 0.5; }

Tämä tarkoittaa, että voit luoda peittokuvan ja käyttää sitä riippumatta siitä, mikä on sivullasi.

Muodot viitekehyksestä

Voit myös antaa arvolle muodon ulkopuolisen ominaisuuden, joka on viitekehys, jota keskustelimme aikaisemmin tarkastellessamme ympyrä () -arvoa.

Esimerkiksi:

.circle-margin-box { shape-outside: margin-box; }

Tämä on hyödyllistä, jos olet käyttänyt reunusradia lisätäksesi pyöristetyn reunan elementtiin ja haluat vain sisällön kaarevan reunan ympärille. Kuten tässä esimerkissä.

Selaintuki

Yksi mukavista asioista CSS-muotoista on se, että koska niitä on sovellettava kellukkeeseen, niitä voidaan helposti käyttää sivustosi progressiivisena lisälaitteena.

Selaimet, jotka eivät tue muotoja, näyttävät float-arvon, kuten odotit, neliön ruutuun elementin ympärillä. Selaimet, jotka tukevat muotoja, ovat määrittämäsi muodon. Uuden sivuston näet hyvä esimerkki tästä Web Ahead podcast. Podcast-sivuilla CSS-muotoja käytetään käden kääntämiseen vieraiden ympäröivän kuvan ympärillä.

Näet, miten tämä näyttää Chromella vasemmalla. Firefox (oikealla) ei vielä tue muotoja, joten saamme neliöruudun kuvan ympäri.

Firefox-käyttäjä ei tiedä, että ne olivat kadonneet tuosta pienestä kosketuksesta, eikä se vahingoita sivuston kokemusta, jotta se ei olisi mahdollista - se on vain erittäin mukava selainten tukemisessa.

Näet täydelliset, ajantasaiset selaintitukiin liittyvät tiedot Voinko käyttää verkkosivusto. Tallennuksen aikana Safari vaatii CSS-muodot -ominaisuuksien -webkit-etuliitteen. Esimerkkeinäni ovat Lea Verou's Prefix ilmaiseksi script.

Muodot Taso 1 ehdokkaan suosituksen tilassa toivottavasti näemme sen kaikissa moderneissa selaimissa pian. Ei ole mitään syytä olla aloittamatta sitä, kun haluat lisätä viimeistelyn muotoiluasi. Varmista, että kokeilet selaimessa ilman tukea, varsinkin jos kuuntelet tekstiä kuvien kohdalla, joissa tuen puute saattaa tehdä sisällöstä vaikea lukea.

Jos haluat kokeilla ja muokata Muotoja tukemattomissa selaimissa, Adobe Web Platform -tiimi on luonut polyfillin, joka on käytettävissä GitHub .

Resurssit ja jatkokäsittely

Tässä artikkelissa olen selvittänyt tärkeimmät asiat, jotka sinun on ehkä tiedettävä, jotta voit aloittaa CSS-muodot nykyisissä sivustoissasi. Lisätietoja, myös tiedot taso 2 -määrittelyssä olevista tiedoista, tarkastellaan seuraavia resursseja.

Icons from Noun Project . Fox-kuvaketta on Laura Olivares, Sohva-kuvake esittäjä (t): Pixel.

edistynyt css css muotoja