Keďže je rozloženie stránky zložitejšie, vývojári potrebujú prístup k ďalším jednotkám, aby mohli oživiť návrhy. Okrem bežných percent, em a rem a pixelov existujú aj novšie merné jednotky vw a vh a súvisiace vmin a vmax, ktoré poskytujú výkonnejšie spôsoby vytvárania responzívny dizajnčo vám často môže pomôcť vyhnúť sa použitiu prechodových bodov @media.
Prekročenie používania záujmov
Tradičné jednotky CSS predstavujú pri webovom dizajne tieto výzvy:
- Merná jednotka v percentách nefunguje vždy podľa očakávania. Pri dimenzovaní prvkov musia vývojári pamätať na vypchávky. Na nastavenie výšky telesného prvku nepoužívajte mernú jednotku, percento. Položka font-size: 50% nastaví veľkosť textu na polovicu jeho štandardnej veľkosti, namiesto vytvárania vzťahu medzi veľkosťou textu a veľkosťou prvku, ktorý obsahuje.
- Je takmer nemožné vytvoriť dokonalé tvary pre rôzne veľkosti okna prehliadača. Je veľmi ťažké zaistiť, aby bol prvok dokonale štvorcový a reagoval súčasne.
Jednotky vw a vh všetky tieto problémy do značnej miery riešia.
Zachovanie ideálnych proporcií
S jednotkami vw a vh je veľmi jednoduché vytvárať dokonalé tvary na webových stránkach. Tieto jednotky je možné použiť na nastavenie hodnôt rozmerov takmer pre všetky Vlastnosti CSS... Ak teda potrebujete vytvoriť prvok, ktorý pri akejkoľvek veľkosti okna prehliadača zaberá 20% svojej šírky a zároveň zostáva štvorcový, musíte nastaviť rovnaké hodnoty vlastnosti šírky a výšky pomocou jednotky vw:
Div.twentysquare (pozadie: # 999 ; šírka: 20vw; výška: 20vw; )
Pozrite sa na ukážku tohto príkladu nižšie, kliknite na odkaz a skúste zmeniť veľkosť zobrazovacieho poľa, aby ste videli zmenu veľkosti tvarov.
Rovnakou metódou môžete ľahko vytvoriť obdĺžnik, ktorý je dvojnásobkom šírky pre ľubovoľnú veľkosť okna prehliadača:
Div.onetworect (šírka: 20vw; výška: 40vw;)
Nastavenie dokonalého pomeru strán pre váš banner je jednoduché pomocou nasledujúcich CSS:
Div.zlatý (šírka: 100vw; výška: 61,8vw; pozadie: červená;)
Na optimálne prispôsobenie textu v adaptívnom bloku, ktorý zaberá celý objem, ktorý je mu poskytnutý, s prerušením riadkov, stačí nastaviť veľkosť písma v jednotkách vw.
Preklad - Povinnosť
Od autora: Obdĺžnik v obdĺžnikoch: Takto boli naše webové stránky vždy stavané. Dlho sme sa pokúšali vymaniť sa z týchto obmedzení pomocou CSS na vytváranie geometrických tvarov, ale tieto tvary nikdy neovplyvnili obsah vo vnútri štylizovaných prvkov ani to, ako sú ostatné prvky na stránke umiestnené vzhľadom na štýl.
Nová špecifikácia CSS pre tvary mení súčasný stav vecí. Spoločnosť Adobe ju predstavila v polovici roku 2012 a jej 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 nedokázali, dokonca ani s jazykom JavaScript.
Všimnite si napríklad, ako sa text zalamuje okolo kruhových obrázkov v nasledujúcom návrhu. Bez tvarov by bol text obdĺžnikový - vyhodenie sofistikovaného triku, ktorý posúva dizajn na ďalšiu úroveň.
Všimnite si, ako text v tomto prípade nadobúda zaoblený tvar okolo okrajov dosky. Pomocou tvarov CSS môžeme vytvoriť podobný dizajn pre webovú stránku..
Pozrime sa podrobnejšie na to, ako tvary fungujú a ako ich môžete začať používať.
Podpora prehliadača
Tvary CSS sú v súčasnosti podporované iba v serveroch 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é. Netrvá dlho a začnú ich podporovať aj ostatné prehliadače. Táto vrstva sa zameriava na vlastnosti tvarov, ktoré menia tok obsahu okolo tvaru. Zameriava sa predovšetkým na vlastnosť vonkajšieho tvaru a súvisiace vlastnosti.
V kombinácii s ďalšími najnovšími funkciami, ako sú orezanie a maska, filtre CSS a Collage & Merge, vám CSS Shapes umožní vytvárať sofistikovanejšie a sofistikovanejšie návrhy bez toho, aby ste sa museli uchýliť k grafickým editorom, ako sú Photoshop a InDesign.
Budúce úrovne tvarov CSS sa zamerajú aj na úpravu obsahu v rámci tvarov. Napríklad dnes je dosť ľahké vytvoriť kosoštvorcový tvar v CSS: stačí prevrátiť prvok o 45 stupňov a potom prevrátiť obsah v ňom. obrátený smer aby sa zmestili horizontálne na stránku. Obsah vo vnútri kosoštvorca však nebude mať príslušný tvar a vždy zostane obdĺžnikový. V čase, keď bude implementovaná vlastnosť shape-inside, budeme schopní urobiť obsah tiež kosoštvorcovým a vytvoríme značky podobné obrázku nižšie.
Tvary CSS čoskoro umožnia štylizovať text dovnútra ako tieto diamanty, takže namiesto vystrihovania alebo použitia pretečenia bude samotný text umiestnený relatívne k okrajom kontajnera..
Ak chcete dnes používať tvary CSS v Chrome Canary, musíte povoliť experimentálne začiarkavacie políčko.
Vytváranie tvarov CSS
Tvar môžete na prvok použiť pomocou vlastností Tvary. Funkciu shape odovzdávate ako hodnotu do vlastnosti shape. Funkcia tvaru je miesto, kde odovzdávate parametre, ktoré definujú tvar, ktorý chcete použiť na prvok.
Tvary je možné vytvárať pomocou jednej z nasledujúcich funkcií:
Každý tvar je definovaný sadou bodov. Niektoré funkcie berú body ako parametre; iní akceptujú ofsetové parametre, ale všetky nakoniec nakreslia tvary na prvok ako množinu bodov. Parametre pre každú z týchto funkcií budeme analyzovať pomocou príkladov.
Tvar je možné tiež určiť z obrázku pomocou extrakcie alfa. Keď je obrázok odovzdaný do vlastnosti shape, prehliadač extrahuje tvar z obrázku na základe prahovej hodnoty shape-image. Tvar je definovaný pixelmi, ktorých hodnota alfa je vyššia ako zadaná prahová hodnota. Obrázok musí byť v súlade s normou CORS. Ak zadaný údaj z nejakého dôvodu nie je k dispozícii (napríklad neexistuje), nebude použitý žiadny tvar.
Nasledujúce tvary berú vyššie uvedené funkcie ako hodnoty:
shape-outside: Núti obsah obopnúť tvar (zvonku)
tvar-vnútro: obsah nadobúda tvar tvaru zvnútra
Vlastnosť tvar-zvonka v spojení s okrajom tvaru môžete použiť na pridanie vonkajšieho polstrovania okolo tvaru, ktoré presunie obsah mimo tvar a ponechá medzi nimi medzeru. Rovnako ako tvar-vonku dostane vlastnosť tvar-okraj, tvar-vnútro dostane vlastnosť vypchávania tvarom, ktorá pridá odsadenie.
Pomocou vlastností alebo funkcií tvaru je možné deklaráciu prvku tvaru vykonať iba v jednom riadku CSS:
Prvok (vonkajší tvar: circle (); / * obsah sa zalomí okolo kruhu priradeného k prvku * /)
Element (shape-outside: url (path / to / image-with-shape.png);)
Prvok (tvar - zvonka: adresa URL (cesta / k / obrázku - s - tvar. Png);) |
Ale ... Ak použijete tento riadok CSS na prvok, tvar sa naň nepoužije, pokiaľ nie sú splnené nasledujúce podmienky:
Prvok musí byť plávajúci. Budúce úrovne tvarov CSS nám umožnia definovať tvary pre neplávajúce prvky, ale to zatiaľ nie je možné.
Prvok musí byť dimenzovaný. Výška a šírka daná prvku sa použije na vytvorenie súradnicového systému.
Ako ste videli vo vyššie uvedených funkciách, tvary sú definované sadou bodov. Pretože body majú súradnice, prehliadač potrebuje súradnicový systém, aby presne vedel, kde by mal byť každý bod na prvku umiestnený. Vyššie uvedený príklad by teda fungoval, keby mal nasledujúce:
Element (plavák: vľavo; výška: 10em; šírka: 15em; vonkajší tvar: kruh ();)
Element (plavák: vľavo; výška: 10em; šírka: 15em; tvar - zvonka: kruh ();) |
Udelenie prvku určitej veľkosti však neovplyvní jeho odozvu (o tom si povieme neskôr). Pretože je každý tvar definovaný ako množina bodov umiestnených pomocou dvojice súradníc, zmena súradníc bodu bude mať priamy vplyv na vytvorený tvar. Nasledujúci obrázok napríklad ukazuje šesťuholník, ktorý je možné vytvoriť pomocou funkcie polygón (). Figúrka pozostáva zo šiestich bodov. Zmena horizontálnych súradníc oranžového bodu zmení konečný tvar a ovplyvní aj umiestnenie obsahu vo vnútri / mimo akéhokoľvek prvku, na ktorý je tvar aplikovaný.
Ak je prvok plávajúci a zarovnaný doprava a je naň použitý tvar, obsah vľavo zmení polohu, keď sa zmení jedna zo súradníc oranžového bodu vo funkcii polygónu ().
Referenčný blok tvarov
Tvary CSS sú definované a vytvorené v referenčnom poli, kde je tvar nakreslený. Referencie na definovanie tvaru prvku sú okrem výšky a šírky prvku aj základné časti modelu poľa prvku - okrajové pole, obsahové pole, výplňové pole a ohraničenie.
Štandardne sa ako referencia používa okrajový rámček, takže ak prvok, na ktorý tvar aplikujete, už má dolný okraj, tvar skončí na okraji okraja, nie na okraji. Ak chcete použiť niektoré ďalšie hodnoty boxových modelov, môžete ich zadať spolu s tvarovou funkciou, ktorú odovzdáte do vlastnosti shape:
tvar-vonkajšok: kruh (250 pixelov na 50% 50%) výplňový box;
tvar - zvonka: kruh (250 pixelov pri 50% 50%) výplň - krabica; |
Kľúčové slovo padding-box v tomto pravidle definuje použitie tvaru a obmedzenia výplňového poľa. Funkcia circle () určuje kruh, jeho veľkosť a polohu vzhľadom na prvok.
Definovanie tvarov pomocou funkcií
Na začiatku obalíme informačný text okolo avatara kruhového používateľa, podobne ako používateľský profil alebo recenziu.
Použitím tvarov CSS sa text okolo obrázku používateľa obtáča okolo tvaru, namiesto zachovania obdĺžnikového tvaru..
Na použitie kruhového tvaru na profilový obrázok použijeme funkciu circle () pomocou nasledujúceho označenia:
Lorem ipsum dolor sit amet, consectetur adipisicing ellit. Mohlo by to znamenať blanditiis eveniet enim eligendi quae adipisci?
Assumenda blanditiis voluptas tempore porro quibusdam beatae deleniti quod asperiores sapiente dolorem error! Väčšina otázok, ktoré by mohli postihnúť jednu z nasledujúcich možností, môžu mať za následok jednu z nasledujúcich foriem.
< img src = "//api.randomuser.me/0.3.2/portraits/men/7.jpg" alt = "(! LANG: profilový obrázok" / > !}< p >Lorem ipsum dolor sit amet, consectetur adipisicing ellit. Mohlo by to znamenať blanditiis eveniet enim eligendi quae adipisci?< / p > < p >Assumenda blanditiis voluptas tempore porro quibusdam beatae deleniti quod asperiores sapiente dolorem error! Väčšina otázok, ktoré by mohli postihnúť jednu z nasledujúcich možností, môžu mať za následok jednu z nasledujúcich foriem.< / p > |
Môžete sa opýtať: „Prečo nemôžeme na zaoblenie obrázku použiť polomer hranice?“ Odpoveď: Vlastnosť border-radius nemá žiadny vplyv na umiestnenie obsahu vo vnútri a mimo prvku, na ktorý je aplikovaný. Ovplyvňuje iba ohraničenie alebo pozadie prvku. V zaoblených rohoch je pozadie orezané, to je všetko. Obsah vo vnútri prvku zostane obdĺžnikový a obsah mimo prvok sa bude správať, ako keby prvok zostal obdĺžnikový.
Na zaoblenie obrázku použijeme vlastnosť border -radius - to je to, čo robíme na zaokrúhľovanie obrázkov alebo iných prvkov na stránke:
obrázok (plavák: vľavo; šírka: 150 pixelov; výška: 150 pixelov; okraj - polomer: 50%; okraj - vpravo: 15 pixelov;) |
Bez tvarov CSS text vníma obrázok ako štvorcový a namiesto okrúhleho tvaru sa zalomí do štvorcového tvaru.
V prehliadači, ktorý nepodporuje tvary CSS, sa obsah okolo kruhového obrázku bude javiť, ako keby nebol kruhový. Takto to bude vyzerať v starších prehliadačoch. Ak chcete zmeniť tok obsahu okolo konkrétneho tvaru, použite vlastnosti tvaru.
obrázok (plavák: vľavo; šírka: 150 pixelov; výška: 150 pixelov; polomer ohraničenia: 50%; vonkajší tvar: kruh (); okraj tvaru: 15 pixelov;)
obr. (plavák: vľavo; šírka: 150 pixelov; výška: 150 pixelov; okraj - polomer: 50%; tvar - zvonka: kruh (); tvar - okraj: 15 pixelov;) |
S týmto kódom bude text schopný „vidieť“ kruhový tvar aplikovaný na obrázok a obklopiť ho, ako je znázornené na prvom obrázku. (Môžete sa pozrieť na výsledok.) V prehliadačoch, ktoré nepodporujú tvary, bude vyzerať ako druhý obrázok.
Funkciu circle () môžete použiť v čistá forma alebo mu odovzdajte parametre. Jeho oficiálna syntax je:
kruh () = kruh ([
Otázniky naznačujú, že tieto parametre sú voliteľné a je ich možné vynechať. Parametre, ktoré preskočíte, získajú svoje predvolené hodnoty. Keď použijete circle () tak, ako je, namiesto priameho určenia polohy, v predvolenom nastavení bude 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 tiež nastaviť pomocou parametrov s použitím najbližšej alebo najvzdialenejšej strany, ale najbližšia strana je predvolená hodnota. To znamená, že prehliadač bude brať ako polomer vzdialenosť od stredu prvku k najbližšej strane, najvzdialenejšia strana použije vzdialenosť od stredu k vzdialenejšej strane.
vonkajší tvar: kruh (najvzdialenejšia strana s 25% 25%); / * definuje kruh, ktorého polomer je polovicou najdlhšej strany a nachádza sa na 25% 25% v súradnicovom systéme prvku * / tvar-vnútro: kruh (250 pixelov pri 500 pixeloch 300 pixelov); / * definuje kruh, ktorého stred je horizontálne 500 pixelov a vertikálne 300 pixlov, s polomerom 250 pixelov * /
Funkcia elipse () funguje rovnako ako circle (), s rovnakou sadou hodnôt, okrem toho, že namiesto parametra radius sú potrebné dve: jedna je os x a druhá os y.
elipsa () = elipsa ([
Funkcia inset () nesúvisí priamo s kruhom alebo elipsou, používa sa na vytváranie obdĺžnikových tvarov v rámci prvku. Pretože prvky sú už obdĺžnikové, nepotrebujeme ich na vytváranie obdĺžnikov. Namiesto toho nám inset () môže pomôcť pri vytváraní zaoblených obdĺžnikov, aby obsah prúdil okolo zaoblených rohov.
Funkcia inset () má jeden až štyri parametre ofsetu, ktoré určujú posun voči okrajom referenčného bloku, ktorý lokalizuje obdĺžnik v prvku. Zaoblené rohy sú označené rovnakým spôsobom ako polomer okraja pomocou jednej zo štyroch hodnôt v spojení s kľúčovým slovom zaokrúhlenia.
inset () = inset (offset (1,4)?)
inset () = inset (offset (1, 4) [okr< border - radius > ] ? ) |
Nasledujúci kód vytvorí zaoblený obdĺžnik na plávajúcom prvku.
Prvok (plavák: vľavo; šírka: 250 pixlov; výška: 150 pixelov; vonkajší tvar: vložený (0 pixelov, okrúhly 100 pixelov) ohraničenie;)
Prvok (plavák: vľavo; šírka: 250 pixlov; výška: 150 pixelov; tvar - zvonka: vložka (0 pixelov zaokrúhlená na 100 pixlov) ohraničenie - rámček;) |
Konečnou funkciou Shape je polygón (), ktorý definuje zložitejšie nejednoznačné tvary pomocou ľubovoľného počtu bodov. Funkcia preberá súbor dvojíc 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 text vľavo pretekal okolo presýpacích hodín vo vnútri obrázku a pomocou funkcie polygón () definujeme vlastný tvar obrázku.
CSS pre obrázok vyššie vyzerá takto:
obr. vpravo (float: vpravo; výška: 100vh; šírka: výpočet (100vh + 100vh / 4); vonkajší tvar: mnohouholník (40% 0, 100% 0, 100% 100%, 40% 100%, 45% 60) %, 45%40%);)
obr. vpravo (float: right; height: 100vh; width: calc (100vh + 100vh / 4); shape - outside: polygon (40% 0, 100% 0, 100% 100%, 40% 100%, 45% 60%, 45% 40%);) |
Súradnice bodov, ktoré definujú tvar, môžete zadať v jednotkách dĺžky alebo percenta, ako napríklad ja. Tento kód poskytne požadovaný výsledok, ale ako vidíte, funkcia tvaru neovplyvňuje zvyšok obrázka mimo daného tvaru. Ide o to, že použitie funkcie tvaru na prvok - či už je to obrázok alebo kontajner alebo niečo iné - neovplyvní nič iné ako oblasť zalamovania obsahu. Pozadie, hranice a všetko ostatné zostane rovnaké.
Aby sme vizuálne reprezentovali vytvorený mnohouholník, musíme „orezať“ časti obrázku mimo tvar. Pomôže nám s tým vlastnosť clip-path zo špecifikácie CSS Masking Module.
Vlastnosť cesty klipu má rovnaké tvarové funkcie a hodnoty ako vlastnosť tvaru. Ak do vlastnosti klip-cesta prenesieme rovnaký mnohouholníkový tvar, ktorý sme použili pre vlastnosť tvar-vonku, časť obrázku sa orezá mimo tvar.
obr. vpravo (float: vpravo; výška: 100vh; šírka: výpočet (100vh + 100vh / 4); vonkajší tvar: mnohouholník (40% 0, 100% 0, 100% 100%, 40% 100%, 45% 60) %, 45% 40%); / * orezanie obrázku pozdĺž obrysu tvaru * / cesta klipu: mnohouholník (40% 0, 100% 0, 100% 100%, 40% 100%, 45% 60%, 45% 40%);)
obr. vpravo (float: right; height: 100vh; width: calc (100vh + 100vh / 4); shape - outside: polygon (40% 0, 100% 0, 100% 100%, 40% 100%, 45% 60%, 45% 40%); / * orezanie obrázku pozdĺž obrysu obrázku * / cesta klipu: mnohouholník (40% 0, 100% 0, 100% 100%, 40% 100%, 45% 60%, 45% 40%); ) |
Výsledok vyzerá takto:
Vlastnosť clip-path je stále podporovaná spolu s predponami, t.j. bude fungovať v prehliadači Chrome s pridanou predponou -webkit-. Môžete sa pozrieť na demo.
Vlastnosť klip-cesta je skvelým spoločníkom vlastnosti tvar, pretože vám pomáha vizuálne reprezentovať tvary, ktoré vytvárate, a pripnúť časti mimo tvar, takže ich pravdepodobne budete spolu používať veľmi často.
Funkcia polygónu () akceptuje aj voliteľné kľúčové slovo na vypchávky, ktoré môžu byť nenulové alebo dokonca rovnomerné. Určuje, ako sa budú správať priesečníky v polygóne. Podrobnosti nájdete vo vlastnosti pravidla výplne SVG.
Definovanie tvaru pomocou obrázku
Ak chcete definovať tvar pomocou obrázka, obrázok musí mať alfa kanál, z ktorého prehliadač obrázok stiahne.
Tvar je definovaný pixelmi, ktorých hodnota alfa je nad určitou hranicou. Predvolená prahová hodnota je o.o (úplne transparentná), alebo ju môžete nastaviť priamo pomocou vlastnosti shape-image-threshold. Akýkoľvek nepriehľadný pixel je teda možné použiť ako súčasť tvaru definovaného obrázkom.
Budúca vrstva CSS tvarov môže umožniť prepnutie na používanie údajov jasu obrazu namiesto alfa kanála. Ak k tomu dôjde, prahová hodnota obrazca a obrázku sa rozšíri tak, aby zahŕňala prahovú hodnotu pre luma alebo alfa, v závislosti od stavu prepínača.
Nasledujúci obrázok použijeme na definovanie tvaru prvku a rozprúdenie textu okolo neho:
Ak ste na prvok použili pozadie, pozadie bude samozrejme potrebné orezať mimo daný tvar. Pomôcť vám k tomu môže vlastnosť masky-obrázku (s príslušnými predponami) z modulu masiek, pretože vlastnosť cesty klipu neakceptuje hodnotu alfa kanála. Výsledok vyzerá takto:
Ak vytvárate zložité tvary, môže byť vhodné definovať tvar pomocou obrázku. To vám umožní použiť alfa kanál obrázku vo Photoshope namiesto ručného určovania bodov.
Tiež sa vám bude zdať vhodné používať obrázok namiesto tvarovej funkcie, keď máte veľa plavákov alebo ak máte výnimky vnútri prvku - pretože tento moment 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.
Tvary CSS v responzívnom dizajne
Môžu tvary CSS fungovať pre responzívne návrhy? Aktuálna špecifikácia pre vonkajší tvar obsahuje tento bod, pretože umožňuje veľkosť prvku v percentách alebo v jednotkách dĺžky a body definujúce tvar (parametre funkcie tvaru) je možné zadať aj v percentách. To znamená, že prvok s daným vonkajším tvarom môže reagovať úplne rovnako ako každý plávajúci prvok s percentuálnou veľkosťou.
Vlastnosť shape-inside ešte nereaguje, ale je to kvôli tomu, že bola presunutá do modulu úrovne 2. Mnoho z jeho súčasných obmedzení zmizne na ďalšej úrovni.
Nástroje na tvarovanie
Vytváranie zložitých tvarov pomocou funkcií môže byť únavné, najmä ak vytvárate tvar s mnohými bodmi a súradnicami pomocou mnohouholníka (). Našťastie tím Adobe Web Platform pracuje na vytváraní interaktívnych nástrojov, ktoré tento proces výrazne uľahčia. Bear Travis vytvoril zbierku nástrojov Shape Tools, 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á to svoje obmedzenia, ak chcete vytvoriť tvar na základe konkrétneho obrázku, pretože nástroj takúto možnosť neposkytuje.
Pokročilejší a interaktívnejší nástroj vyvinul tím webovej platformy Adobe. Tento nástroj bol nedávno vydaný ako rozšírenie bezplatného editora zátvoriek. Umožňuje vám vykresľovať a upravovať tvary priamo v prehliadači a má online náhľad, ktorý aktualizuje hodnoty tvarov v hárku štýlov, keď ich zmeníte na stránke. Poskytuje okamžitý vizuál spätnú väzbu vaše zmeny, čo vám umožní vidieť, ako tvary interagujú s inými prvkami na stránke.
Úprava mnohouholníkového tvaru priamo v prehliadači pomocou režimu ukážky zátvoriek. Záznam obrazovky od Razvana Calimana.
Tento nástroj sa stane nepostrádateľným, pretože uľahčuje vytváranie, úpravu a ladenie tvarov. Razvan Caliman, ktorý vysvetľuje, ako vyvolať editor tvarov v zátvorkách a začať ho používať.
Budúcnosť: Výnimky CSS
Špecifikácia tvarov CSS bola špecifikáciou pre tvary a výnimky CSS, ale bola rozdelená. Zatiaľ čo tvar CSS definuje vlastnosti tvar vnútri a tvar zvonku, výnimky CSS definujú vlastnosti, ktoré spôsobia, že sa obsah obalí okolo neplavených prvkov, ako sú napríklad tie, ktoré sú úplne umiestnené. Umožňujú, aby sa obsah omotal okolo celého tvaru z rôznych strán, ako je to znázornené na obrázku nižšie.
Výnimky CSS v budúcnosti umožnia obsahu prúdiť okolo tvaru, ako je vložka, ako je uvedené v rozšírení časopisu. Strih môže byť aj okrúhly a text okolo neho bude prúdiť rovnako..
Nová úroveň figúr
Aktuálna špecifikácia tvarov CSS je len prvým krokom. Nové funkcie nám čoskoro poskytnú väčšiu kontrolu nad tvorbou a plynulým obsahom, takže bude pre nás jednoduchšie premeniť rozloženia na živé vzory pomocou niekoľkých riadkov kódu. Od dnešného dňa sa špeciálni redaktori zameriavajú na dokončenie vonkajšieho tvaru a môžete vidieť podporu pre tvary CSS. veľké množstvo prehliadačov do konca roku 2014.
Tvary môžete dnes používať ako súčasť stratégie progresívneho vylepšovania s vedomím, že v nepodporovaných prehliadačoch majú prijateľnú náhradu. Nedávno som ich začal používať na svojich stránkach a náhrada vyzerá celkom prijateľne. Pre viac komplexný dizajn, môžete pomocou skriptu skontrolovať podporu prehliadača a v prípade neexistencie podpory poskytnúť akúkoľvek náhradu. S týmto skriptom môžete tiež použiť testy Modernizru na kontrolu, či je podporovaný tvar-vonkajší, alebo načítať vlastnú zostavu, ktorá obsahuje tento test.
Tvary CSS nám umožňujú vytvoriť ďalší most medzi tlačou a webovým dizajnom. Príklady v tomto článku sú jednoduché, ale mali by vám poskytnúť základ pre vytvorenie tak komplexného návrhu, ako je časopis alebo plagát, bez obáv, či ho môžete znova vytvoriť na obrazovke. Čokoľvek sa naučíte - od ne obdĺžnikových rozložení po animujúce tvary - teraz je čas experimentovať.
Vlad Merzhevich
Na webových stránkach sa trojuholníky neustále používajú ako súčasť návrhu prvkov, napríklad slúžia ako ukazovateľ na nejaký predmet a upriamujú pozornosť čitateľa na správne miesto. Trojuholníky slúžia aj ako dekoratívne funkcie, vďaka čomu sú bloky, kde sú aplikované, elegantnejšie a modernejšie. Na obr. 1 ukazuje príklad použitia trojuholníka v dizajne.
Ryža. 1. Trojuholníky vo webdizajne
Vytvorte priamo trojuholník pomocou CSS nemožné, preto sú k dispozícii dve metódy na jeho pridanie - cez border a transform.
Použitie okraja
Aj keď hranice vytvorené pomocou vlastnosti border priamo nesúvisia s trojuholníkmi, najčastejšie sa na to používa hranica. Ak nastavíme šírku a výšku prvku na nulu, a tiež nastavíme dostatočne hrubý okraj, uvidíme množinu štyroch trojuholníkov (obr. 2). Kvôli prehľadnosti sú okraje na všetkých stranách nastavené v rôznych farbách.
Ryža. 2. Pridanie okraja k prvku
Ak ponecháme iba požadovaný okraj a zvyšok urobíme priehľadným, dostaneme trojuholník požadovanej farby (obr. 3).
Ryža. 3. Prvok s priehľadnými okrajmi
Príklad 1 ukazuje pridanie trojuholníka do bloku pomocou pseudoprvku :: after.
Príklad 1. Blok s trojuholníkom
Pri absolútne umiestnených prvkoch nemusíte uvádzať nulovú šírku a výšku.
Skombinovaním okrajov môžete získať ďalšie štyri druhy trojuholníkov, čo nám v kombinácii s už spomínanými dáva osem možností. Ich typ a požadovaný kód sú uvedené v tabuľke. 1.
| vyhliadka | Štýl |
|---|---|
| orámovanie: 20 px pevná transparentná; horný okraj: 20 pixlov plná zelená; | |
| orámovanie: 20 px pevná transparentná; pravý okraj: 20 pixelov, neprerušovaná zelená; | |
| orámovanie: 20 px pevná transparentná; spodný okraj: 20 pixlov plná zelená; | |
| orámovanie: 20 px pevná transparentná; ľavý okraj: 20 pixlov plná zelená; | |
| orámovanie: 20 px pevná transparentná; horný okraj: 20 pixlov plná zelená; pravý okraj: 20 pixelov neprerušovane zelene; | |
| orámovanie: 20 px pevná transparentná; pravý okraj: 20 pixelov, neprerušovaná zelená; spodný okraj: 20 pixlov plná zelená; | |
| orámovanie: 20 px pevná transparentná; spodný okraj: 20 pixlov plná zelená; ľavý okraj: 20 pixlov plná zelená; | |
| orámovanie: 20 px pevná transparentná; ľavý okraj: 20 pixlov plná zelená; horný okraj: 20 pixlov plná zelená; |
Z tabuľky vidíte, že neviditeľné okraje zaberajú miesto, vezmite to do úvahy pri umiestňovaní prvkov. Štýl musí byť vyplnený nulovou šírkou a výškou alebo použiť vlastnosť polohy, ako v príklade 1.
Trojuholník iného tvaru môžete vytvoriť, ak nastavíte inú hrúbku okrajov. Takže kód na vytvorenie bloku znázorneného na obr. 4 je znázornený na príklade 2.
Ryža. 4. Akútny trojuholník
Príklad 2. Akútny trojuholník
Pomocou okraja získame plné farebné trojuholníky, aby sme vytvorili okraj znázornený na obr. 5 musíte ísť na trik a dať jeden prvok na druhý s miernym posunom. Tu nám opäť pomôžu pseudoelementy: before a: after (príklad 3).
Ryža. 5. Rám s rohom
Príklad 3. Prekrývajúce sa trojuholníky
Vzhľadom na to, že jeden prvok plnej farby prekrývame nad druhým, je táto metóda vhodná iba pre jednofarebné výplne a nie je vhodná pre prechody alebo obrázky na pozadí.
Použitie transformácie
Pomocou transformácie môžeme štvorcový prvok otočiť o 45 ° a získať z neho kosoštvorec. Toto ešte nie je trojuholník ako taký, takže vyčnievajúcu časť, ktorú potrebujeme, necháme na očiach a zvyšok skryjeme za iný prvok (príklad 4).
Príklad 3. Transformácia
Výsledok tohto príkladu je znázornený na obr. 6.
Ryža. 6. Trojuholník s tieňom
Online generátor CSS3 na vytváranie skvelých grafických efektov a získavanie ich kódu CSS. Štýly môžete samostatne meniť pre rôzne stavy, ako napríklad: vznášanie sa ,: aktívny atď. Rozhranie na vytváranie komplexných tieňov, prechodov, 3D efektov, textových efektov a mnohých ďalších sa vám dostane do rúk. Projekt má svoju vlastnú galériu efektov, z ktorej môžete začať svoj vývoj. Charakteristickou črtou projektu je, že môžete získať štýly pre individuálny prvok, napríklad pre tieň alebo gradient.
Pri prvej návšteve webu odporúčame vytvoriť šablónu pre vstupné pole, tlačidlo, blok alebo vybrať hotovú šablónu z galérie projektov. Začnime niečím jednoduchým, ako je galéria geometrických tvarov. Vyberte znak Yin-Yang z galérie a kliknite na „Získať kód“ v pravom hornom rohu:
Ukážeme vám hotové CSS pre aktuálny vývoj a tiež HTML príklad kód. V galérii projektov je k dispozícii viac ako 20 ďalších predvolieb pre rôzne tvary CSS a samozrejme si môžete vytvoriť aj svoje vlastné.
Keď sme sa prehrabali v častiach galérie, vidíme tlačidlá, textové polia, efekty priamo pre text, spomínané tvary a množiny prechodov. Poďme sa hrať s textovými efektmi:
stránka - wow, to je 3D!
Musím priznať, že vygenerovaný CSS je prekvapivo veľmi čistý a čitateľný, čo je skvelé. Pozrime sa na pekné tlačidlo:
skvelá webová stránka s tlačidlami
Medzi ďalšie funkcie patrí uloženie vášho stavu do lokálneho úložiska prehliadača. Ak ste kartu omylom zavreli, potom pri ďalšej návšteve webu všetky vaše zmeny zostanú vám.
Pri použití neštandardných písem s príponou Písma Google EnjoyCSS ich automaticky pridá do ukážky HTML. V mojom prípade to pre text a tlačidlá vyzerá takto:
Konečný CSS je dosť objemný, preto ho uvádzam iba na konci článku:
Yin Yang (
plavák: vľavo;
šírka: 96px;
výška: 48px;
poloha: relatívna;
orámovanie: 2 pixely plné # f81;
šírka dolného okraja: 50 pixlov;
-webkit-border-radius: 100%;
polomer hranice: 100%;
farba: rgba (0,0,0,1);
-o-pretečenie textu: klip;
pretečenie textu: klip;
-webkit-transformácia: rotáciaZ (-45deg) stupnicaX (1) mierkaY (1) mierkaZ (1);
transformácia: rotáciaZ (-45deg) stupnicaX (1) mierkaY (1) mierkaZ (1);
transformačný pôvod: 50% 50% 0;
Jin-jang :: predtým (
šírka: 12px;
výška: 12px;
poloha: absolútna;
obsah: "";
horná časť: 50%;
vľavo: 0;
orámovanie: 18 pixelov plné # f81;
-webkit-border-radius: 100%;
polomer hranice: 100%;
písmo: normálne normálne normálne 100% / normálne Arial, Helvetica, bezpatkové;
farba: rgba (0,0,0,1);
-o-pretečenie textu: klip;
pretečenie textu: klip;
pozadie: rgba (255,255,255,1);
text-tieň: žiadny;
-webkit-transform-pôvod: 50% 50% 0;
transformačný pôvod: 50% 50% 0;
}
Jin-jang :: po (
šírka: 12px;
výška: 12px;
poloha: absolútna;
obsah: "";
horná časť: 50%;
vľavo: 50%;
orámovanie: 18px plná rgba (255,255,255,1);
-webkit-border-radius: 100%;
polomer hranice: 100%;
písmo: normálne normálne normálne 100% / normálne Arial, Helvetica, bezpatkové;
farba: rgba (0,0,0,1);
-o-pretečenie textu: klip;
pretečenie textu: klip;
pozadie: # f81;
text-tieň: žiadny;
-webkit-transformácia: scaleX (1) scaleY (1) scaleZ (1);
transformácia: scaleX (1) scaleY (1) scaleZ (1);
-webkit-transform-pôvod: 50% 50% 0;
transformačný pôvod: 50% 50% 0;
}
Enjoy-css-3dtext (
kurzor: ukazovateľ;
ohraničenie: žiadne;
font: normal normal normal 72px / normal "Passero One", Helvetica, sans-serif;
farba: rgba (255,255,255,1);
zarovnanie textu: stred;
-o-pretečenie textu: klip;
pretečenie textu: klip;
textový tieň: 0 1px 0 rgb (204,204,204), 0 2px 0 rgb (201,201,201), 0 3px 0 rgb (187,187,187), 0 4px 0 rgb (185,185,185), 0 5px 0 rgb (170,170,170), 0 6px 1p , 0,0,0,0980392), 0 0 5px rgba (0,0,0,0,0.0980392), 0 1px 3px rgba (0,0,0,0,298039), 0 3px 5px rgba (0,0,0,0,2), 0 5px 10px rgba (0,0,0,0,247059), 0 10px 10px rgba (0,0,0,0,2), 0 20px 20px rgba (0,0,0,0,14902);
-webkit-transition: všetkých 300ms kubických bezier (0,42, 0, 0,58, 1);
-moz-prechod: všetkých 300 ms kubických bezier (0,42, 0, 0,58, 1);
-o-prechod: všetkých 300 ms kubických bezier (0,42, 0, 0,58, 1);
prechod: všetkých 300 ms kubických bezier (0,42, 0, 0,58, 1);
-webkit-transformácia: scaleX (1) scaleY (1) scaleZ (1);
transformácia: scaleX (1) scaleY (1) scaleZ (1);
-webkit-transform-pôvod: 50% 50% 0;
transformačný pôvod: 50% 50% 0;
}
Enjoy-css-3dtext: hover (
farba: rgba (169,214,169,1);
textový tieň: 0 1px 0 rgba (255,255,255,1), 0 2px 0 rgba (255,255,255,1), 0 3px 0 rgba (255,255,255,1), 0 4px 0 rgba (255,255,255,1), 0 5px 0 rgba (255,25 , 1), 0 6px 1px rgba (0,0,0,0,0980392), 0 0 5px rgba (0,0,0,0,0980392), 0 1px 3px rgba (0,0,0,0,298039), 0 3px 5px rgba (0,0,0,0,2), 0 -5px 10px rgba (0,0,0,0,2447059), 0 -7px 10px rgba (0,0,0,0,2), 0 -15px 20px rgba (0,0, 0,0,14902);
-webkit-transition: všetkých 200ms kubicko-bezierových (0,42, 0, 0,58, 1) 10ms;
-moz-prechod: všetkých 200ms kubicko-bezierových (0,42, 0, 0,58, 1) 10ms;
-o-prechod: všetkých 200 ms kubických bezier (0,42, 0, 0,58, 1) 10 ms;
prechod: všetkých 200 ms kubických bezier (0,42, 0, 0,58, 1) 10 ms;
}
Tlačidlo spätnej väzby (
displej: radový blok;
plavák: vľavo;
poloha: relatívna;
kurzor: ukazovateľ;
marža: 0 2% 0 0;
čalúnenie: 12px 22px;
pretečenie: skryté;
ohraničenie: žiadne;
písmo: normálne normálne tučné 1.6em / normálne "Synkopate", Helvetica, bezpatkové;
farba: # ecf0f1;
-o-pretečenie textu: klip;
pretečenie textu: klip;
-webkit-
pôvod na pozadí: padding-box;
klip na pozadí: border-box;
veľkosť pozadia: auto auto;
-webkit-box-tieň: 0 10px 0 0 rgba (178,49,49,1);
box-shadow: 0 10px 0 0 rgba (178,49,49,1);
textový tieň: 0 0 0 rgb (196,80,78), 1px 1px 0 rbb (196,80,78), 2px 2px 0 rgb (196,80,78), 3px 3px 0 rgb (196,80,78 ), 4px 4px 0 rbb (196,80,78), 5px 5px 0 rbb (196,80,78), 6px 6px 0 rbb (196,80,78), 7px 7px 0 rgb (196,80,78), 8px 8px 0 rbb (196,80,78), 9px 9px 0 rbb (196,80,78), 10px 10px 0 rbb (196,80,78), 11px 11px 0 rbb (196,80,78), 12px 12px 0 rgb (196,80,78), 13px 13px 0 rbb (196,80,78), 14px 14px 0 rbb (196,80,78), 15px 15px 0 rbb (196,80,78), 16px 16px 0 rbb (196,80,78), 17px 17px 0 rbb (196,80,78), 18px 18px 0 rbb (196,80,78), 19px 19px 0 rgb (196,80,78), 20px 20px 0 rgb (196 , 80,78), 21px 21px 0 rbb (196,80,78), 22px 22px 0 rbb (196,80,78), 23px 23px 0 rgb (196,80,78), 24px 24px 0 rbb (196,80 , 78), 25px 25px 0 rbb (196,80,78), 26px 26px 0 rbb (196,80,78), 27px 27px 0 rgb (196,80,78), 28px 28px 0 rbb (196,80,78 ), 29px 29px 0 rbb (196,80,78), 30px 30px 0 rbb (196,80,78), 31px 31px 0 rbb (196,80,78), 32px 32px 0 rbb (196,80,78), 33px 33px 0 rbb (196,80,78), 34px 34px 0 rbb (196,80,78 ), 35px 35px 0 rbb (196,80,78), 36px 36px 0 rbb (196,80,78), 37px 37px 0 rbb (196,80,78), 38px 38px 0 rgb (196,80,78), 39px 39px 0 rbb (196,80,78), 40px 40px 0 rbb (196,80,78), 41px 41px 0 rbb (196,80,78), 42px 42px 0 rbb (196,80,78), 43px 43px 0 rgb (196,80,78), 44px 44px 0 rbb (196,80,78), 45px 45px 0 rbb (196,80,78), 46px 46px 0 rbb (196,80,78), 47px 47px 0 rbb (196,80,78), 48px 48px 0 rbb (196,80,78), 1px 1px 0 rgba (196,80,78,0,980392), 2px 2px 0 rgba (196,80,78,0,960784), 3px 3px 0 rgba (196,80,78,0,941176), 4px 4px 0 rgba (196,80,78,0,921569), 5px 5px 0 rgba (196,80,78,0,901961), 6px 6px 0 rgba (196,80,78 , 0,882353), 7px 7px 0 rgba (196,80,78,0,862745), 8px 8px 0 rgba (196,80,78,0,843137), 9px 9px 0 rgba (196,80,78,0,819608), 10px 10px 0 rgba (196,80,78,0,8), 11px 11px 0 rgba (196,80,78,0,780392), 12px 12px 0 rgba (196,80,78,0,760784), 13px 13px 0 rgba (196,80,78,0,741176 ), 14px 14px 0 rgba (196,80,78,0,721569), 15px 15px 0 rgba (196,80,78,0,701961), 16px 16px 0 rgba (196,80,78,0 0,682353), 17px 17px 0 rgba (196,80,78,0,658824), 18px 18px 0 rgba (196,80,78,0,639216), 19px 19px 0 rgba (196,80,78,0,619608), 20px 20px 0 rgba (196,80,78,0,6), 21px 21px 0 rgba (196,80,78,0,580392), 22px 22px 0 rgba (196,80,78,0,560784), 23px 23px 0 rgba (196,80,78,0,541176 ), 24px 24px 0 rgba (196,80,78,0,521569), 25px 25px 0 rgba (196,80,78,0,498039), 26px 26px 0 rgba (196,80,78,0,478431), 27px 27px 0 rgba (196 , 80,78,0,458824), 28px 28px 0 rgba (196,80,78,0,439216), 29px 29px 0 rgba (196,80,78,0. 419608), 30px 30px 0 rgba (196,80,78,0,4), 31px 31px 0 rgba (196,80,78,0,380392), 32px 32px 0 rgba (196,80,78,0,360784), 33px 33px 0 rgba ( 196,80,78,0,341176), 34px 34px 0 rgba (196,80,78,0,317647), 35px 35px 0 rgba (196,80,78,0,298039), 36px 36px 0 rgba (196,80,78,0,278431) , 37px 37px 0 rgba (196,80,78,0,258824), 38px 38px 0 rgba (196,80,78,0.239216), 39px 39px 0 rgba (196,80,78,0.219608), 40px 40px 0 rgba (196, 80,78,0,2), 41px 41px 0 rgba (196,80,78,0,180392), 42px 42px 0 rgba (196,80,78,0,156863), 43px 43px 0 rgba (196,80,78,0,137255), 44px 44px 0 rgba (196,80,78,0,117647), 45px 45px 0 rgba (196,80,78,0,0980392), 46px 46px 0 rgba (196,80,78,0,0784314), 47px 47px 0 rgba (196,80, 78,0,0588235), 48px 48px 0 rgba (196,80,78,0,0392157), 50px 50px 0 rgba (196,80,78,0);
-webkit-transformácia: scaleX (1) scaleY (1) scaleZ (1);
transformácia: scaleX (1) scaleY (1) scaleZ (1);
-webkit-transform-pôvod: 50% 50% 0;
transformačný pôvod: 50% 50% 0;
}
Tlačidlo spätnej väzby: vznášať sa (
zarovnanie textu: stred;
pozadie: -webkit-lineárny gradient (-90deg, # ce6161 0, # ef6664 100%);
pozadie: -moz-lineárny gradient (180 °, # ce6161 0, # ef6664 100%);
pozadie: lineárny gradient (180 °, # ce6161 0, # ef6664 100%);
poloha pozadia: 50% 50%;
pôvod na pozadí: padding-box;
-webkit-background-clip: border-box;
klip na pozadí: border-box;
-webkit-background-size: auto auto;
veľkosť pozadia: auto auto;
}
Tlačidlo spätnej väzby: aktívne (
horná časť: 5 pixelov;
pozadie: -webkit-lineárny gradient (-90deg, # ff8583 0, # ff5350 100%);
pozadie: -moz-lineárny gradient (180 °, # ff8583 0, # ff5350 100%);
pozadie: lineárny gradient (180 °, # ff8583 0, # ff5350 100%);
poloha pozadia: 50% 50%;
-webkit-background-origin: padding-box;
pôvod na pozadí: padding-box;
-webkit-background-clip: border-box;
klip na pozadí: border-box;
-webkit-background-size: auto auto;
veľkosť pozadia: auto auto;
-webkit-box-tieň: 0 5px 0 0 rgba (178,49,49,1);
box-shadow: 0 5px 0 0 rgba (178,49,49,1);
