Vytvorte perfektné responzívne tvary pomocou jednotky CSS vw. Online CSS3 generátor s jednoduchým GUI - EnjoyCSS CSS tvary

a potom naň aplikujte opačnú transformáciu točiť sa()
HTML

.obrázok(
šírka: 400px;
transformácia: rotácia (45 stupňov);
prepad: skrytý;
}
.obrázok > img (
maximálna šírka: 100 %;
transformácia: rotácia (-45 stupňov);
}
Ako však môžete vidieť na obrázku, požadovanú štylizáciu sa nám nepodarilo dosiahnuť hneď. Samozrejme, ak ste plánovali orezať obrázok do tvaru osemuholníka, môžete prácu nazvať hotovou a prejsť na niečo iné. Aby ste však obrázok orezali do tvaru diamantu, budete musieť viac pracovať.

Opačné rotácie () transformácie nestačia na dosiahnutie požadovaného efektu (div s názvom.obrázok je označený bodkovaným obrysom)
Hlavný problém spočíva v deklarácii maximálnej šírky: 100 %. 100% platí pre našu stranu kontajnera. Chceme však, aby sa šírka výsledného obrázku rovnala uhlopriečke originálu, nie jeho strane. Už ste uhádli, že opäť potrebujeme pomoc Pytagorovej vety (ak si potrebujete osviežiť pamäť, vysvetlenie nájdete v tajnosti). Ako hovorí veta, uhlopriečka štvorca sa rovná jeho strane vynásobenej .

Preto má zmysel nastaviť hodnotu maximálnej šírky 2 × 100 % ≈ 141,4213562 % alebo zaokrúhlene 142 %, pretože v žiadnom prípade nechceme, aby sa obrázok zmenšil (a ak sa ukáže, že je o niečo väčší, potom vsetko ok kedze to aj tak strihame).

V skutočnosti je ešte lepšie zväčšiť veľkosť obrázka pomocou transformácie scale(), a to z dvoch dôvodov: chceme, aby veľkosť obrázka zostala na 100 % v situáciách, keď transformácie CSS nie sú podporované;
Keď sa obrázok zväčší pomocou transformácie scale(), zmení sa mierka od stredu (pokiaľ nie je špecifikovaná iná hodnota pôvodu transformácie). Ak ju zväčšíte zmenou hodnoty vlastnosti width, zmení sa mierka od ľavého horného rohu a na jej posunutie budeme musieť použiť záporné hodnoty okraja. Keď dáme všetko dokopy, dostaneme tento konečný kód:
.obrázok(
šírka: 400px;
transformácia: rotácia (45 stupňov);
prepad: skrytý;
}
.obrázok > img (
maximálna šírka: 100 %;
transformácia: rotácia (-45 stupňov) mierka (1,42);
}
Ako môžete vidieť na obrázku, nakoniec nám to dáva požadovaný výsledok.

VYSKÚŠAJTE SAMI!
http://play.csssecrets.io/diamond-images

Riešenie orezovej cesty

Predchádzajúce riešenie funguje, ale je vo svojej podstate špinavým trikom. Vyžaduje si to ďalší prvok HTML, čo znamená, že ide o chaotické, mätúce a krehké riešenie: ak sa budeme musieť zaoberať neštvorcovými obrázkami, výsledok bude katastrofálny.

V skutočnosti existuje oveľa lepší spôsob, ako dosiahnuť požadovaný výsledok. Hlavnou myšlienkou je využitie nehnuteľnosti klip-cesta- ďalšia funkcia požičaná od SVG. Túto vlastnosť možno teraz použiť na obsah HTML (aspoň v podporných prehliadačoch) a v peknej a čitateľnej syntaxi, na rozdiel od ekvivalentu SVG, ktorý je známy tým, že ľudí privádza do šialenstva.

Má len jednu nevýhodu (v čase písania tejto kapitoly) – obmedzenú podporu prehliadačov. Toto riešenie sa však elegantne vracia k zjednodušenému vykresľovaniu (bez orezávania), takže je vhodným kandidátom na zváženie. Je pravdepodobné, že už poznáte orezové cesty vďaka aplikáciám na úpravu obrázkov, ako je Adobe Photoshop. Orezové cesty vám umožňujú orezať prvok do ľubovoľného tvaru. V tomto prípade použijeme tvar polygon().

Budeme definovať kosoštvorec, ale vo všeobecnosti vám tento tvar umožňuje definovať akýkoľvek mnohouholník postupnosťou bodov oddelených čiarkami. Môžete dokonca použiť percentá - celkové hodnoty sa vypočítajú vzhľadom na celkové rozmery prvku. Kód je veľmi jednoduchý:
cesta klipu: mnohouholník (50 % 0, 100 % 50 %, 50 % 100 %, 0 50 %);

Verte tomu alebo nie, to je všetko! Ale namiesto dvoch prvkov HTML a ôsmich riadkov neprehľadného kódu CSS sme dosiahli to, čo sme chceli, iba jedným jednoduchým riadkom. Ale úžasné schopnosti clip-path sa neobmedzujú len na toto. Táto vlastnosť dokonca podporuje animáciu – za predpokladu, že animujeme prechod medzi dvoma rovnakými tvarovými funkciami (v našom prípade polygón()) s rovnakým počtom bodov. Ak teda chceme plynulo zväčšiť celý obrázok pri prejdení myšou, môžeme to urobiť takto:
img (
klipová cesta: mnohouholník (50 % 0, 100 % 50 %,
50% 100%, 0 50%);
prechod: 1s klip-cesta;
}
img:hover (
clip-path: polygon(0 0, 100% 0,
100% 100%, 0 100%);
}
Táto metóda sa navyše dokonale prispôsobuje neštvorcovým obrázkom, Ach, tie radosti moderného CSS...
VYSKÚŠAJTE SAMI!

Od autora: Obdĺžnik v obdĺžnikoch: takto boli naše webové stránky vždy postavené. Dlho sme sa pokúšali oslobodiť od týchto obmedzení pomocou CSS na vytváranie geometrických tvarov, ale tieto tvary nikdy neovplyvnia obsah vnútri štylizovaných prvkov ani to, ako sú ostatné prvky na stránke rozmiestnené vo vzťahu k štylizovaným prvkom.

Nová špecifikácia CSS pre tvary mení status quo. Spoločnosť Adobe ho predstavila v polovici roku 2012 a jeho cieľom je poskytnúť webovým dizajnérom možnosť zmeniť tok obsahu v relatívne zložitých tvaroch a okolo nich – niečo, čo sme predtým nemohli dosiahnuť ani pomocou JavaScriptu.

Všimnite si napríklad, ako sa text obtáča okolo okrúhlych obrázkov v nasledujúcom dizajne. Bez tvarov by mal text obdĺžnikový tvar, čím by sa zahodila jemná technika, ktorá posúva dizajn na ďalšiu úroveň.

Všimnite si, ako v tomto príklade nadobudne text okolo okrajov platne zaoblený tvar. Pomocou CSS Shapes môžeme vytvoriť podobný dizajn pre webovú stránku.

Pozrime sa bližšie na to, ako Shapes fungujú a ako ich môžete začať používať.

Podpora prehliadača

Tvary CSS sú v súčasnosti podporované iba vo Webkit Nightly a Chrome Canary, ale ich modul úrovne 1 dosiahol stav odporúčania kandidáta, takže vlastnosti a syntax definované v špecifikácii sú pomerne stabilné. Nebude to dlho trvať a ostatné prehliadače ich začnú podporovať. Táto úroveň sa zameriava na tie vlastnosti tvarov, ktoré menia tok obsahu okolo tvaru. Predovšetkým sa sústreďuje na tvarovo-vonkajšie vlastnosti a súvisiace vlastnosti.

V kombinácii s ďalšími najnovšími funkciami, ako sú orezanie a maska, filtre CSS a koláž a zlúčenie, tvary CSS nám umožnia vytvárať zložitejšie a sofistikovanejšie návrhy bez toho, aby sme sa museli uchýliť k editorom obrázkov, ako sú Photoshop a InDesign.

Budúce úrovne tvarov CSS sa zamerajú aj na úpravu obsahu v rámci tvarov. Napríklad dnes je pomerne jednoduché vytvoriť kosoštvorcový tvar v CSS jednoduchým prevrátením prvku o 45 stupňov a následným prevrátením obsahu v ňom opačne tak, aby sedel na stránke vodorovne. Ale obsah vo vnútri diamantu nebude mať vhodný tvar a vždy zostane pravouhlý. V čase, keď sa implementuje vlastnosť shape-inside, môžeme vytvoriť aj obsah v tvare kosoštvorca, čím sa vytvorí označenie podobné obrázku nižšie.

Čoskoro vám tvary CSS tiež umožnia štýlovať text vo vnútri ako tieto kosoštvorce, takže namiesto orezania alebo použitia pretečenia bude samotný text umiestnený relatívne k okrajom kontajnera..

Ak chcete dnes používať tvary CSS v prehliadači Chrome Canary, musíte začiarknuť políčko, ktoré sprístupní experimentálne funkcie.

Vytváranie tvarov CSS

Pomocou vlastností Tvary môžete použiť tvar na prvok. Funkciu tvaru odovzdávate ako hodnotu vlastnosti tvaru. Funkcia tvaru je časť kódu, do ktorej odovzdávate parametre určujúce tvar, ktorý chcete použiť na prvok.

Tvary je možné vytvárať pomocou jednej z nasledujúcich funkcií:

Každý tvar je definovaný množinou bodov. Niektoré funkcie akceptujú body ako parametre; iní berú parametre odsadenia, ale všetci nakoniec nakreslia tvary na prvku ako množinu bodov. Prejdeme si parametre pre každú z týchto funkcií s príkladmi.

Údaj možno určiť aj zo snímky pomocou extrakcie alfa kanála. Keď je obrázok odovzdaný do vlastnosti shape, prehliadač extrahuje tvar z obrázka na základe hodnoty shape-image-threshold. Tvar je definovaný pixelmi, ktorých hodnota alfa je nad určeným prahom. Obrázok musí byť kompatibilný s CORS. Ak poskytnutý tvar nie je z nejakého dôvodu dostupný (napríklad neexistuje), nepoužije sa žiadny tvar.

Nasledujúce obrázky berú vyššie uvedené funkcie ako hodnoty:

tvar zvonku: spôsobí, že sa obsah zalomí okolo tvaru (zvonka)

shape-inside: obsah preberá tvar tvaru zvnútra

Vlastnosť shape-outside v kombinácii s shape-margin môžete použiť na pridanie vonkajšieho okraja okolo tvaru, ktorý odsunie obsah preč od tvaru, pričom medzi nimi zostane priestor. Tak ako tvar-vonku získa vlastnosť tvarového okraja, tvar-vnútri získa vlastnosť tvarového vycpávania, ktorá pridáva vystuženie.

Pomocou vlastností tvaru alebo funkcie je možné deklarovať prvok tvaru iba jedným riadkom kódu CSS:

Element ( shape-outside: circle(); /* obsah sa zalomí okolo kruhu daného prvku */ )

Prvok ( tvar-outside: url(cesta/k/obrázku-s-tvarom.png); )

Element ( tvar - mimo : url ( cesta / k / obrázku s tvarom . png ) ; )

Ale... Ak použijete tento riadok kódu CSS na prvok, tvar sa naň nepoužije, pokiaľ nie sú splnené nasledujúce podmienky:

Prvok musí byť plávajúci. Budúce úrovne CSS Shapes nám umožnia definovať tvary pre neplávajúce prvky, ale to zatiaľ nie je možné.

Prvok musí mať špecifikované rozmery. Výška a šírka daného prvku sa použije na vytvorenie súradnicového systému.

Ako ste videli vo funkciách vyššie, tvary sú definované množinou bodov. Pretože body majú súradnice, prehliadač potrebuje súradnicový systém, aby presne vedel, kde by mal byť každý bod umiestnený na prvku. Vyššie uvedený príklad by teda fungoval, ak by mal nasledovné:

Prvok ( plavák: vľavo; výška: 10 em; šírka: 15 em; vonkajší tvar: kruh (); )

Prvok ( plavák : vľavo ; výška : 10 em ; šírka : 15 em ; vonkajší tvar : kruh ( ) ; )

Nastavenie prvku na určitú veľkosť však neovplyvňuje jeho odozvu (o tom si povieme neskôr). Keďže každý tvar je definovaný ako množina bodov umiestnených pomocou dvojice súradníc, zmena súradníc bodu priamo ovplyvní vytvorený tvar. Napríklad nasledujúci obrázok zobrazuje šesťuholník, ktorý je možné vytvoriť pomocou funkcie polygon(). Obrázok pozostáva zo šiestich bodov. Zmena horizontálnej súradnice oranžovej bodky zmení konečný tvar a ovplyvní aj umiestnenie obsahu vo vnútri/mimo akéhokoľvek prvku, na ktorý sa tvar použije.

Ak je prvok plávajúci a zarovnaný doprava a má naň aplikovaný tvar, obsah naľavo od neho zmení svoju polohu, keď sa zmení jedna zo súradníc oranžového bodu vo funkcii polygon().

Referenčný blok tvarov

CSS tvary sú definované a vytvorené vo vnútri referenčného poľa, kde je tvar nakreslený. Okrem výšky a šírky prvku, komponenty modelu rámčeka prvkov – okrajový rámček, rámček obsahu, výplňový rámček a rámček ohraničenia – tiež poskytujú referencie na definovanie tvaru prvku.

V predvolenom nastavení sa pole okraja používa ako referencia, takže ak prvok, na ktorý aplikujete tvar, už má okraj v spodnej časti, tvar bude končiť na okraji okraja a nie na okraji. Ak chcete použiť iné hodnoty modelu boxu, môžete ich zadať spolu s funkciou shape, ktorú odovzdáte do vlastnosti shape:

tvar-vonok: kruh (250px pri 50% 50%) padding-box;

tvar - vonku : kruh ( 250px pri 50 % 50 % ) padding - box ;

Kľúčové slovo výplň-box v tomto pravidle definuje použitie tvaru a obmedzenia výplňového rámčeka (oblasť výplne). Funkcia circle() určuje kruh, jeho rozmery a umiestnenie vzhľadom na prvok.

Definovanie tvarov pomocou funkcií

Začneme ovinutím informačného textu okolo okrúhleho obrázka avatara používateľa, rovnako ako pri používateľskom profile alebo recenzii.

Pomocou tvarov CSS text okolo obrázka používateľa obteká tvar namiesto toho, aby zachovával obdĺžnikový tvar.

Na aplikáciu kruhového tvaru na profilový obrázok použijeme funkciu circle() pomocou nasledujúceho označenia:

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum itaque nam blanditiis eveniet enim eligendi quae adipisci?

Assumenda blanditiis voluptas tempore porro quibusdam beatae deleniti quod asperiores sapiente dolorem error! Quo nam quasi soluta reprehenderit laudantium optio ipsam ducimus consequatur enim fuga quibusdam mollitia nesciunt modi.

< img src = "//api.randomuser.me/0.3.2/portraits/men/7.jpg" alt = "obrázok profilu" / > !}< p >Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum itaque nam blanditiis eveniet enim eligendi quae adipisci?< / p > < p >Assumenda blanditiis voluptas tempore porro quibusdam beatae deleniti quod asperiores sapiente dolorem error! Quo nam quasi soluta reprehenderit laudantium optio ipsam ducimus consequatur enim fuga quibusdam mollitia nesciunt modi.< / p >

Môžete sa spýtať: "Prečo nemôžeme použiť border-radius na zaoblenie obrázku?" Odpoveď: Vlastnosť border-radius nemá žiadny vplyv na umiestnenie obsahu vo vnútri alebo mimo prvku, na ktorý je aplikovaná. Ovplyvňuje iba okraje alebo pozadie prvku. Pozadie je orezané v zaoblených rohoch, to je všetko. Obsah vo vnútri prvku zostane pravouhlý a obsah mimo prvku sa bude správať, ako keby prvok zostal pravouhlý.

Na zaokrúhlenie obrázka použijeme vlastnosť border-radius – takto zaokrúhlime obrázky alebo iné prvky na stránke:

img ( float : left ; width : 150px ; height : 150px ; border - polomer : 50 % ; margin - right : 15px ; )

Bez tvarov CSS text vidí obrázok ako štvorcový a obteká sa okolo štvorcového tvaru a nie okolo okrúhleho.

V prehliadači, ktorý nepodporuje tvary CSS, bude obsah okolo kruhového obrázka umiestnený tak, ako keby nebol okrúhly. Presne takto to bude vyzerať v starších prehliadačoch. Ak chcete zmeniť spôsob obtekania obsahu okolo konkrétneho tvaru, použite vlastnosti tvaru.

img ( float: left; width: 150px; height: 150px; border-radius: 50%; shape-outside: circle(); shape-margin: 15px; )

img ( float : left ; width : 150px ; height : 150px ; border - polomer : 50 % ; shape - outside : circle ( ) ; shape - margin : 15px ; )

S týmto kódom bude text schopný „vidieť“ kruhový tvar aplikovaný na obrázok a bude ho obtekať, ako je znázornené na prvej snímke obrazovky. (Môžete sa pozrieť na výsledok.) V prehliadačoch, ktoré nepodporujú tvary, to bude vyzerať ako druhý obrázok.

Môžete použiť funkciu circle() tak, ako je, alebo jej odovzdať parametre. Tu je jeho oficiálna syntax:

kruh() = kruh([ ]? ? [at< position > ] ? )

Otázniky označujú, že tieto parametre sú voliteľné a možno ich vynechať. Parametre, ktoré vynecháte, budú mať predvolené hodnoty. Keď použijete circle() tak, ako je, namiesto priameho určenia polohy bude predvolený stred kruhu v strede prvku, na ktorý ho aplikujete.

Polomer kruhu môžete nastaviť pomocou ľubovoľných jednotiek dĺžky (px, em, pt atď.) Polomer môžete nastaviť aj pomocou parametrov pomocou najbližšej strany alebo najvzdialenejšej strany, ale predvolená je najbližšia strana prehliadač použije vzdialenosť od stredu prvku k najbližšej strane ako polomer, najvzdialenejšia strana použije vzdialenosť od stredu k vzdialenejšej strane.

vonkajší tvar: kruh (najvzdialenejšia strana pri 25 % 25 %); /* definuje kruh, ktorého polomer je polovica najdlhšej strany, nachádza sa na súradniciach 25% 25% v súradnicovom systéme prvku */ shape-inside: circle(250px pri 500px 300px); /* definuje kruh, ktorého stred je 500px horizontálne a 300px vertikálne, s polomerom 250px */

Funkcia ellipse() funguje rovnako ako circle() s rovnakou množinou hodnôt, okrem toho, že namiesto parametra polomer má dva: jeden polomer na osi x a jeden na osi y.

elipsa() = elipsa([ (2)]? ? [at< position > ] ? )

Funkcia inset() priamo nesúvisí s kruhom alebo elipsou, používa sa na vytváranie pravouhlých tvarov vo vnútri prvku. Keďže prvky sú už obdĺžnikové, nepotrebujeme ho na vytvorenie obdĺžnikov. Namiesto toho nám inset() môže pomôcť vytvoriť zaoblené obdĺžniky, takže obsah obteká zaoblené rohy.

Funkcia inset() preberá jeden až štyri parametre posunu, ktoré určujú posun vo vzťahu k okrajom referenčného rámčeka, ktorý určuje umiestnenie obdĺžnika v rámci prvku. Zaoblené rohy sú špecifikované presne rovnakým spôsobom ako border-radius pomocou jednej zo štyroch hodnôt v kombinácii s kľúčovým slovom round.

inset() = inset(offset(1,4) ?)

inset() = inset(offset(1, 4)[okrúhle< border - radius > ] ? )

Nasledujúci kód vytvorí na plávajúcom prvku zaoblený obdĺžnik.

Element ( float: left; width: 250px; height: 150px; shape-outside: inset(0px round 100px) border-box; )

Element ( float : left ; width : 250px ; height : 150px ; shape - outside : inset (0px round 100px ) border-box ; )

Konečná funkcia Shapes je polygon(), ktorá definuje zložitejšie nejednoznačné tvary pomocou ľubovoľného počtu bodov. Funkcia akceptuje množinu párov súradníc, kde každý pár definuje polohu bodu.

V nasledujúcom príklade je plávajúci obrázok umiestnený na pravom okraji, pričom zaberá celú výšku obrazovky a používa jednotky výrezu. Chceme, aby sa text naľavo zalomil okolo presýpacích hodín vo vnútri obrázka a na definovanie vlastného tvaru pre obrázok použijeme funkciu polygon().

CSS kód pre obrázok vyššie vyzerá takto:

img.right ( plavák: vpravo; výška: 100vh; šírka: calc(100vh + 100vh/4); vonkajší tvar: polygón (40% 0, 100% 0, 100% 100%, 40% 100%, 45% 60 %, 45 % 40 %);

img. vpravo ( plavák : vpravo ; výška : 100vh ; šírka : calc (100vh + 100vh / 4 ); tvar - zvonka : mnohouholník (40 % 0 , 100 % 0 , 100 % 100 % , 40 % 100 % , 60 % 45 % 45 % 40 %);

Môžete zadať súradnice bodov, ktoré definujú postavu, v jednotkách dĺžky alebo v percentách, ako ja. Tento kód poskytne požadovaný výsledok, ale ako vidíte, funkcia shape neovplyvňuje zvyšné časti obrázka mimo daného tvaru. Ide o to, že aplikovanie funkcie tvaru na prvok – či už je to obrázok alebo kontajner alebo niečo iné – neovplyvní nič iné ako oblasť balenia obsahu. Pozadie, okraje a všetko ostatné zostane nezmenené.

Aby sme vizuálne znázornili vytvorený polygón, musíme „orezať“ časti obrázka mimo tvaru. Pomôže nám v tom vlastnosť clip-path zo špecifikácie CSS Masking Module.

Vlastnosť clip-path akceptuje rovnaké funkcie a hodnoty tvaru ako vlastnosť shape. Ak prenesieme rovnaký polygonálny tvar, aký sme použili pre vlastnosť shape-outside, do vlastnosti clip-path, orezá časť obrázka mimo tvaru.

img.right ( plavák: vpravo; výška: 100vh; šírka: calc(100vh + 100vh/4); vonkajší tvar: polygón (40% 0, 100% 0, 100% 100%, 40% 100%, 45% 60 %, 45 % 40 %) /* oreže obrázok pozdĺž obrysu obrázku */ cesta klipu: mnohouholník (40 % 0, 100 % 0, 100 % 100 %, 40 % 100 %, 45 % 60 %, 45 % 40 % )

img. vpravo ( plavák : vpravo ; výška : 100vh ; šírka : calc (100vh + 100vh / 4 ); tvar - zvonka : mnohouholník (40 % 0 , 100 % 0 , 100 % 100 % , 40 % 100 % , 60 % 45 % 45 % 40 %); /* orezanie obrázku pozdĺž obrysu postavy */ cesta klipu: mnohouholník (40 % 0, 100 % 0, 100 % 100 %, 40 % 100 %, 45 % 60 %, 45 % 40 %); )

Výsledok vyzerá takto:

Vlastnosť clip-path je v súčasnosti podporovaná spolu s predponami, t.j. bude fungovať v prehliadači Chrome s pridanou predponou –webkit-. Môžete sa pozrieť na demo.

Vlastnosť clip-path je skvelým spoločníkom vlastnosti shape, pretože vám pomáha vizualizovať tvary, ktoré ste vytvorili, a orezávať časti mimo tvaru, takže ich pravdepodobne budete často používať spolu.

Funkcia polygon() tiež akceptuje voliteľné kľúčové slovo výplň, ktoré môže byť nenulové alebo párne. Určuje, ako sa budú správať pretínajúce sa oblasti v rámci polygónu. Podrobnosti nájdete vo vlastnosti pravidla plnenia SVG.

Definovanie tvaru pomocou obrázka

Ak chcete definovať tvar pomocou obrázka, obrázok musí mať alfa kanál, z ktorého prehliadač extrahuje obrázok.

Tvar je definovaný pixelmi, ktorých hodnota alfa je nad určitým prahom. Predvolená prahová hodnota je o.o (úplne transparentná), alebo ju môžete nastaviť priamo pomocou vlastnosti shape-image-threshold. Ako súčasť tvaru definovaného obrázkom teda možno použiť akýkoľvek nepriehľadný pixel.

Budúca vrstva tvarov CSS môže umožniť prepnutie na používanie údajov o jase obrazu namiesto alfa kanála. Ak sa tak stane, prah tvaru-obrazu sa rozšíri tak, aby zahŕňal prah pre jas alebo alfa kanál v závislosti od stavu prepínača.

Na definovanie tvaru prvku a na zalomenie textu okolo neho použijeme nasledujúci obrázok:

); tvar - okraj : 15px ; prah tvaru - obrazu : 0,5 ; pozadie: #009966 url(cesta/k/obrázku-pozadia.jpg); maska-obrázok: url(list.png); )

Samozrejme, ak použijete pozadie na prvok, pozadie bude potrebné orezať mimo daného tvaru. V tomto môže pomôcť vlastnosť mask-image (s príslušnými predponami) z modulu Masky, pretože vlastnosť clip-path neberie ako hodnotu alfa kanál. Výsledok vyzerá takto:

Ak vytvárate zložité tvary, môže byť pre vás vhodné definovať tvar pomocou obrázka. To vám umožní použiť alfa kanál obrázka vo Photoshope namiesto toho, aby ste museli body nastavovať manuálne.

Tiež sa vám bude hodiť použiť obrázok namiesto funkcie tvaru, keď máte v rámci prvku veľa plávajúcich prvkov alebo oblastí výnimiek – pretože v súčasnosti neexistuje spôsob, ako deklarovať viacero tvarov pre jeden prvok. Ak však obrázok obsahuje viacero oblastí, prehliadač tieto oblasti extrahuje a použije ich.

CSS tvary v responzívnom dizajne

Môžu byť tvary CSS vhodné pre responzívny dizajn? Aktuálna špecifikácia pre tvar zvonku zahŕňa tento bod, pretože umožňuje veľkosť prvku v percentách alebo jednotkách dĺžky a body definujúce tvar (parametre funkcie tvaru) môžu byť špecifikované aj v percentách. To znamená, že prvok s daným vonkajším tvarom môže plne reagovať, rovnako ako akýkoľvek plávajúci prvok s percentuálne definovanou veľkosťou.

Vlastnosť shape-inside ešte nereaguje, ale je to preto, že bola presunutá do modulu úrovne 2. Mnohé z jeho súčasných obmedzení zmiznú v ďalšej úrovni.

Nástroje na vytváranie tvarov

Vytváranie zložitých tvarov pomocou funkcií môže byť časovo náročná úloha, najmä ak vytvárate tvar s mnohými bodmi a súradnicami pomocou funkcie polygon(). Našťastie tím webovej platformy Adobe pracuje na vytváraní interaktívnych nástrojov, ktoré tento proces značne zjednodušia. Bear Travis vytvoril kolekciu nástrojov na vytváranie tvarov, ktorá nám umožňuje vizuálne vytvárať polygonálne tvary. Nástroj generuje funkciu tvaru. To môže byť užitočné, ale má svoje obmedzenia, ak chcete vytvoriť tvar na základe konkrétneho obrázka, pretože nástroj takúto možnosť neposkytuje.

Tím webovej platformy Adobe vyvinul pokročilejší a interaktívnejší nástroj. Tento nástroj bol nedávno vydaný ako rozšírenie bezplatného editora zátvoriek. Umožňuje vykresľovať a upravovať tvary priamo v prehliadači a má možnosť online náhľadu, ktorá aktualizuje hodnoty tvarov v šablóne so štýlmi, keď ich meníte na stránke. To poskytuje okamžitú vizuálnu spätnú väzbu k vašim zmenám, čo vám umožní vidieť, ako tvary interagujú s inými prvkami na stránke.

Upravte polygonálny tvar priamo v prehliadači pomocou režimu ukážky v zátvorkách. Záznam obrazovky urobil Razvan Caliman.

Tento nástroj sa stane nepostrádateľným, pretože uľahčuje vytváranie, úpravu a ladenie obrázkov. Razvan Caliman, ktorý vysvetľuje, ako otvoriť editor Shapes v Brackets a začať ho používať.

Budúcnosť: Výnimky CSS

Špecifikácia tvarov CSS bola špecifikácia venovaná tvarom a výnimkám CSS, ale bola rozdelená. Zatiaľ čo CSS Shape definuje vlastnosti shape-inside a shape-outside, CSS Exceptions definujú vlastnosti, ktoré spôsobujú, že obsah sa obalí okolo neplávajúcich prvkov, ako sú tie, ktoré sú absolútne umiestnené. Umožňujú, aby obsah prúdil okolo celého tvaru z rôznych smerov, ako je znázornené na obrázku nižšie.

Výnimky CSS v budúcnosti umožnia, aby sa obsah obalil okolo tvaru ako vložka, ako je znázornené na šírke časopisu. Vložka môže byť aj okrúhla a text okolo nej bude obtekať rovnakým spôsobom.

Nová úroveň postáv

Aktuálna špecifikácia CSS Shapes je len prvým krokom. Čoskoro nám nové funkcie poskytnú väčšiu kontrolu nad tvorbou a tokom obsahu, čo nám uľahčí premenu makiet na živé dizajny pomocou niekoľkých riadkov kódu. Od dnešného dňa sa editory špecifikácií zameriavajú na dokončovanie tvarov zvonku a do konca roka 2014 môžete vidieť podporu tvarov CSS vo viacerých prehliadačoch.

Tvary dnes môžete použiť ako súčasť stratégie progresívneho vylepšovania, pretože viete, že majú prijateľnú náhradu v nepodporujúcich prehliadačoch. Nedávno som ich začal používať na svojej stránke a náhrada vyzerá celkom prijateľne. V prípade zložitejších návrhov môžete použiť skript na kontrolu podpory prehliadača a poskytnúť akúkoľvek náhradu, ak podpora neexistuje. S týmto skriptom môžete použiť aj testy Modernizr, aby ste skontrolovali, či je podporovaná vlastnosť shape-outside, alebo nahrajte svoju vlastnú zostavu, ktorá obsahuje tento test.

CSS Shapes nám umožňujú vytvoriť ďalší most medzi tlačou a webdizajnom. Príklady v tomto článku sú jednoduché, ale mali by vám poskytnúť základ na vytvorenie dizajnu, ktorý je taký zložitý ako časopis alebo plagát bez obáv, či ho dokážete znova vytvoriť na obrazovke. Čokoľvek sa učíte, od nepravouhlých rozložení po animáciu tvaru, teraz je čas experimentovať.

Ahojte všetci. Dnes sa dotkneme pomerne nezvyčajnej témy, a to budúcnosti webdizajnu, CSS tvarov.

Ako viete, teraz je veľmi módny, ale pozostáva hlavne z obdĺžnikov, ktoré zase výrazne obmedzujú obzory dizajnérov. A potom je tu prispôsobivosť.. Čo je z hľadiska kreativity veľmi obmedzujúce. Ale je tu jedno veľké plus - je ľahké zalomiť text okolo obdĺžnika, ale ako dosiahnuť, aby text plynul okolo okrúhlych alebo nerovných tvarov, je ťažšie. Pretože obrázky sa nedajú zaokrúhliť.

Práve v tomto prípade nám čísla bežia na pomoc. Populárna stránka W3C CSS zverejnila prvú dokumentáciu o tvaroch. Tu je tento príspevok v angličtine CSS Shapes Module Level 1. Tento modul bol vydaný nedávno 20. júna. Zatiaľ ide o beta verziu, ktorá obsahuje také tvary ako obdĺžnik, trojuholník, elipsa, kruh a mnohouholník.

Teraz sa na príklade pozrime bližšie na to, aká je výhoda tvarov CSS.

Najprv si vezmime niekoľko jednoduchých značiek HTML vďaka http://www.webdesignerdepot.com:

Toto je príklad textu