Päivitys tuo CSS Path työkalun Firefox 62 versioon

Oletko koskaan ajatellut, kuinka saisit tekstin kiertämään erilaisten kuvien muotoja? Äskettäin julkaistu Firefox 62 tuo mukanaan joukon uudistuksia verkkosivujen kehittäjille tarkoitettuihin Developer Tools -työkaluihin. Keskeisin uudistus on Shape Path Editor. Sen avulla on mahdollista muokata muotoja, jotka on tehty CSS Shape -ominaisuuksien avulla.

CSS Shape -ominaisuudet määrittävät shape-outside, shape-image-threshold ja shape-margin -ominaisuuksia. Näiden ominaisuuksien tarkoituksena on saada tekstisisältö kiertämään ominaisuuksissa määriteltyjen muotojen ympäri. Uutta shape ominaisuuksissa on, että muotojen ei tarvitse olla nelikulmioita. Ne voivat olla vaikkapa ympyröitä, sydämiä tai muita muotoja, jotka poikkeavat verkkosivuilla tavallisesti käytetyistä nelikulmioista ja suunnikkaista.

Shape-outside CSS Shape -ominaisuuden avulla voidaan määritellä ikään kuin näkymätön ääriviiva kuvalle. Shape-margin puolestaan luo marginaalin vaikkapa jonkin kuvan ympärille. Näin muotoa ympäröivä teksti saadaan etäämmälle kuvan reunoista, jonka tuloksena tekstikappale saa huomattavasti ilmavamman sommitelman.

Kuvitellaan, että sinulla on vaikkapa jalkapalloa käsittelevä artikkeli, jonka yhteen tekstikappaleeseen haluat sijoittaa jalkapallon kuvan. Ensin kirjoitat tekstin, sitten lisäät kuvan jalkapallosta ja asemoit sen joko tekstin oikealle tai vasemmalle puolelle. Sen jälkeen lisäät CSS -muotokieleen kuvalle shape-outside -ominaisuuden (shape-outside: url(jalkapallo.png)). Tällöin shape-outside määrittää automaattisesti pyöreän reunan kuvan muotojen mukaisesti, jonka ympärille teksti asettuu.

Kuvan ympärille voi asettaa myös marginaalin käyttämällä shape-margin -ominaisuutta, joka asetetaan shape-outside -ominaisuuden jälkeen seuraavalle riville erilliseksi ominaisuudeksi (shape-margin: 10px;). Tällöin marginaali jalkapallon ympärillä kasvaa ja tekstin ja jalkapallon väliin jää enemmän tyhjää tilaa.

Kuvan muotojen lisäksi shape-outside -ominaisuus voidaan määritellä perusmuotojen, kuten ympyrän, ellipsin ja monikulmion avulla. Esimerkiksi jalkapallon kohdalla voitaisiin käyttää ympyrää (shape-outside: circle (50%);).

Uuden Firefoxin Shape Path Editor -työkalun avulla edellä mainittua shape-outside -ominaisuutta yhdistettynä ympyrän perusmuotoon on helppo muokata visuaalisesti ilman, että kehittäjän tarvitsee lähteä muokkaamaan suoraan CSS-tyylikieltä tekstipohjaisesti. Toki ominaisuuksien on oltava määrittelyinä, mutta kun ne ovat paikoillaan, Shape Path Editor -työkalun avulla ominaisuuksien arvoja voi määritellä hiiren avulla.

Shape Path Editorin saa esiin oikeaa hiirennappulaa kuvan (vaikkapa esimerkin jalkapallon päällä) ja valitsemalla “Inspector” tai “Tarkista” -valikosta. Mikäli shape-ominaisuudet on määritelty perusmuodon kanssa, voi shape-ominaisuutta muokata hiiren avulla.

Leave a Reply

Your email address will not be published. Required fields are marked *