Vzhledem k tomu, že rozložení stránek je stále obtížnější, vývojáři potřebují přístup k více měřením měření pro ztělesnění. Kromě obvyklého zájmu, EM a REM a pixelů existují novější jednotky měření VW a VH, jak VMIN, tak VMAX související s nimi, které poskytují silnější způsoby vytváření adaptivní designkteré mohou často pomoci opustit používání přechodových bodů @Media.
Jdeme za zájem
Tradiční měřicí jednotky CSS vytvářejí následující problémy v návrhu webu:
- Jednotka procenta měření ne vždy funguje podle očekávání. Vývojáři si musí zapamatovat externí vklady, nastavení rozměrů prvků. Neměli byste používat měřítko procenta měření pro nastavení výšky prvku těla. Záznam písmo velikosti: 50% Určuje velikost textu rovnou polovině své standardní velikosti a nestanoví závislost mezi velikostí textu a velikostí jeho prvku obsahujícího.
- Je téměř nemožné vytvořit číslice perfektního formuláře pro různé velikosti okna prohlížeče. Je velmi obtížné zajistit, aby prvek je dokonale čtvercový a zároveň adaptivní.
Jednotky měření VW a VH převážně vyřeší všechny tyto problémy.
Podporující ideální proporce
Pomocí jednotek měření VW a VH je velmi snadné vytvářet perfektní čísla na webových stránkách. Tyto jednotky mohou být použity pro nastavení rozměrů téměř všech cSS vlastnosti. Proto, pokud potřebujete vytvořit prvek, který s libovolným oknem prohlížeče trvá 20% jeho šířky a zůstane čtverec, musíte zadat stejné hodnoty vlastností šířky a výšky pomocí měřicí jednotky VW:
Div.twentysquare (pozadí: # 999 ; šířka: 20vw; Výška: 20vw; )
Podívejte se na ukázku tohoto příkladu níže, přejděte na odkaz a zkuste změnit velikost zobrazovací jednotky a zobrazte změnu velikosti obrázků.
Pomocí stejné metody můžete snadno vytvořit obdélník, jehož výška je dvakrát stejně jako jeho šířka s libovolnou velikost okna prohlížeče:
Div.networect (šířka: 20vw; výška: 40vw;)
Nastavit banner Perfektní poměr velikosti je velmi jednoduchý s následujícím kódem CSS:
Div.goldenrect (šířka: 100VW; výška: 61 .8vw; pozadí: červená;)
Pro optimální škálování textu v adaptivním bloku, zapojit do všech objemu, který je k němu, stačí nastavit velikost písma v měřicích jednotkách VW.
Překlad - Djurka.
Od autora: Obdélník uvnitř obdélníků: To je, jak byly naši webové stránky vždy postaveny. Snažili jsme se osvobodit od těchto omezení po dlouhou dobu pomocí CSS k vytvoření geometrických čísel, ale tyto údaje nikdy neovlivnily obsah, který je uvnitř zdobených prvků, nebo na tom, jak jsou jiné prvky umístěny na stránce relativně zdobené.
Nová specifikace CSS pro čísla změní aktuální pozici věcí. Předloženo společností Adobe v polovině roku 2012, jehož cílem je poskytnout web designéry schopnost změnit proud obsahu uvnitř a kolem relativně složitých čísel - něco, co jsme nemohli dosáhnout dříve, dokonce používat JavaScript.
Například věnujte pozornost tomu, jak text proudí kulaté obrázky v následujícím provedení. Bez čísel by text měl obdélníkový tvar - vyhození rafinovaného recepce, který vyvolává design na další úroveň.
Všimněte si, jak text má zaoblený tvar podél okrajů desky v tomto příkladu. Použití obrázků CSS můžeme vytvořit podobný design a webovou stránku.
Podívejme se podrobně, jak čísla fungují a jak je můžete začít používat.
Podpora prohlížeče
Údaje CSS jsou stále podporovány pouze v Webkit Nightly a Chrom Canary, ale jejich modul úrovně 1 dosáhl stavu doporučení kandidáta, takže vlastnosti a syntaxe definované ve specifikaci jsou poměrně stabilní. Bude to trvat trochu času, než zbytek prohlížečů začne udržovat. Tato úroveň se soustředí na tyto vlastnosti obrázků, které mění proud obsahu kolem obrázku. Zejména se zaměřuje na vlastnost Shape-Merze a spojené s ním.
V kombinaci s jinými nedávnými schopnostmi, jako jsou ořezávání a překrytá maska, CSS filtry a shovívavosti a slučování, CSS postavy nám umožní vytvořit složitější vynikající design, aniž by se museli uchýlit k grafickým editorům, jako je například Photoshop a InDesign.
Budoucí hodnoty CSS Údaje budou také věnovat pozornost návrhu obsahu uvnitř obrázků. Například, dnes, stačí jednoduše vytvořit rhombicku na CSS: Stačí otočit prvek na 45 stupňů, a pak obrátit obsah uvnitř opačný směrTakže se nachází na stránce horizontálně. Ale obsah uvnitř kosočtverce nebude mít příslušnou formu, a vždy zůstane obdélníkový. V době, kdy je implementována vlastnost tvaru, můžeme vytvořit obsah příliš kosočtverec, vytváření značek, podobně jako obrázek níže.
Brzy CSS postavy také umožní text uvnitř jako tyto diamanty namísto ořezávání nebo použití přetečení, samotný text byl umístěn vzhledem k okrajům kontejneru.
Chcete-li použít čísla CSS dnes v Chrome Canary, musíte povolit zaškrtávací políčko, který umožňuje přístupné experimentální funkce.
Vytváření obrázku CSS.
Obrázek můžete aplikovat na prvek pomocí vlastností tvarů. Předpokládáte číslo obrázku v kvalitě hodnoty. Funkce Obrázek je součástí kódu, kde projdete parametry, které definují obrázek, který chcete použít na položku.
Obrázky lze vytvořit pomocí jedné z následujících funkcí:
Každá postava je určena množinou bodů. Některé funkce označují body jako parametry; Ostatní - Přijměte parametry ofsetu, ale nakonec nakonec vyvodí čísla na prvku jako sada bodů. Parametry analyzujeme pro každou z těchto funkcí na příkladech.
Obrázek lze také určit z obrazu odstraněním alfa kanálu. Když je obraz přenášen do vlastnosti Shape, prohlížeč získává obrázek z obrazu na základě hodnoty prahové hodnoty obrazu. Obrázek je určena pixely, jejichž hodnota alfa je nad stanovenou prahovou hodnotu. Obrázek musí mít kompatibilitu cors. Pokud důvod uvedený z nějakého důvodu není k dispozici (například neexistuje), pak nebude použita žádná hodnota.
Následující obrázky jsou popsány výše uvedené funkce jako hodnoty:
tvar - mimo: způsobí, že obsah otočí tvar (venku)
tvar-uvnitř: Obsah má tvar obrázku zevnitř
Můžete použít vlastnost Shape-Merze v kombinaci s tvarem tvaru, aby se přidala externí odsazení kolem obrázku, která bude přesunout obsah z obrázku, ponechat prostor mezi nimi. Také, jak a tvar-venku přijímá vlastnost Shape-Margin, tvar-vnitřek přijímá vlastnost s tvarovou polstrování, která přidává vnitřní odsazení.
Použití vlastností obrázku nebo funkce, deklarování prvku tvaru, můžete udělat pouze s jedním řádkem CSS kódem:
Prvek (tvar-venku: kruh (); / * obsah bude obsahovat kruh nastavený na prvek * /)
Prvek (tvar-venku: URL (cesta / do / obraz-with-shape.png););)
Prvek (tvar - venku: URL (cesta / do / obrázek - s - tvar. PNG););) |
Ale ... Pokud použijete tento řádek CSS kód na položku, obrázek nebude na něj použita, pokud nejsou splněny následující podmínky:
Prvek musí být plovoucí. Budoucí úrovně CSS údajů nám umožní identifikovat čísla pro ne-plovoucí prvky, ale žádná taková možnost.
Prvek musí být specifikován. Výška a šířka určená prvkem bude použita k vytvoření souřadnicového systému.
Jak jste viděli ve výše uvedených funkcích, čísla jsou určena množinou bodů. Protože body mají souřadnice, prohlížeč vyžaduje souřadnicový systém vědět, kde každý bod by měl být umístěn na prvku. Příklad by tedy fungoval výše, pokud by měl následující:
Prvek (float: vlevo; výška: 10em; šířka: 15m; tvar-venku: kruh ();)
Prvek (float: vlevo; výška: 10em; šířka: 15em; tvar - venku: kruh ();) |
Úkol některých velikostí však není ovlivněn jeho schopností (budeme o tom mluvit později). Vzhledem k tomu, že každý obrázek je definován jako sada bodů umístěných pomocí dvojice souřadnic, změna v souřadnicích bodu ovlivní vytvořený obrázek. Další obrázek uvádí například šestiúhelník, který lze vytvořit pomocí funkce Polygon (). Obrázek se skládá ze šesti bodů. Změna horizontální souřadnice oranžového bodu změní konečnou hodnotu a bude také ovlivnit umístění obsahu uvnitř / vně libovolnou položku, ke kterému je obrázek aplikován.
Pokud se prvek plave a je rovna pravému okraji, je na to aplikováno obrázek, obsah vlevo změní jeho umístění, když se změní jeden z oranžových bodů uvnitř funkce Polygon ().
Referenční blok Obrázek
Údaje CSS jsou definovány a vytvořeny v rámci referenčního bloku (referenční krabici), kde je zkratka. Kromě výšky a šířky prvku jsou součástí blokového modelu bloku prvku - okraj boxu, poloxem pro polštářku a hraniční box, jsou také adresáře pro určení obrázku prvku.
Ve výchozím nastavení se externí návratová jednotka (okrajová pole) používá jako reference, tedy, pokud je prvek, ke kterému použijete obrázek, již má externí odsazení zdola, obrázek skončí na okraji externího návratu a ne hranice. Pokud chcete použít některé další hodnoty modelu bloku, můžete je zadat s funkcí obrázku, který předáte vlastnost obrázku:
tvar-venku: kruh (250px při 50% 50%) polstrování;
tvar - venku: kruh (250px při 50% 50%) Polstrování - box; |
Klíčové slovo polstrování v tomto pravidle určuje aplikaci obrázku a omezení ve formě polštáře (oblasti vnitřní arogance). Funkce Kruh () určuje kruh, jeho velikost a umístění vzhledem k položce.
Definice údajů pomocí funkcí
Začneme se skutečností, že se budeme zabývat informačním textem kruhového obrazu uživatelského avataru, jako pro uživatelský profil nebo odvolání.
Použití tvarů CSS, text kolem uživatelského snímku je zjednodušen namísto uložení obdélníkového tvaru..
Budeme používat funkci Circle (), aby se aplikoval kulatý tvar do profilu obrazu pomocí následujícího znaku:
Lorem Ipsum Dolor Sit Amet, kondereturu adipisicing elit. Harum Itaque nam banditis Ediet enim Eligendi quae adipisci?
Předpokládá se, Blanditiis Voluptas Tempore Porro Quibusdam Beatae Deleniti quod Asperiores Sapiente Dolorem Chyba! Quo Nam Quasi Soluta Reprehenderit Laudantium Optio IPSAM Ducimus následný eniam fuga Quibusdam Mollitia Nesciunt Modi.
< img src = "//api.randomuser.me/0.3.2/portraits/men/7.jpg"alt \u003d "(! LANG: obrázek profilu" / > !}< p > Lorem Ipsum Dolor Sit Amet, kondereturu adipisicing elit. Harum Itaque nam banditis Ediet enim Eligendi quae adipisci?< / p > < p > Předpokládá se, Blanditiis Voluptas Tempore Porro Quibusdam Beatae Deleniti quod Asperiores Sapiente Dolorem Chyba! Quo Nam Quasi Soluta Reprehenderit Laudantium Optio IPSAM Ducimus následný eniam fuga Quibusdam Mollitia Nesciunt Modi.< / p > |
Můžete se zeptat: "Proč nemůžeme použít okruh hranice pro zaokrouhlení obrázků?" Odpověď: Vlastnost okruhu okrajů neovlivňuje umístění obsahu uvnitř a mimo položku, ke kterému se použije. Ovlivňuje pouze hranice prvku nebo pozadí. Pozadí je řezáno na zaoblené rohy, vše. Obsah uvnitř prvku zůstane obdélníkový a obsah mimo prvek bude také chovat, jako by prvek zůstal obdélníkový.
Chystáme se používat majetek okruhu okruhu, abyste mohli udělat kulatý obraz - zde je to, co děláme, abychom mohli zaokrouhlit obrázky nebo jiné položky na stránce:
iMG (float: vlevo; šířka: 150px; výška: 150px; hranice - poloměr: 50%; marže - vpravo: 15px;) |
Bez čísel CSS, text vidí obrázek jako čtverec a spojuje čtvercovou postavu, a ne kulaté.
V prohlížeči, který nepodporuje tvary CSS, bude obsah kolem kulatého obrazu umístěn, jako by to není kulatý. Tak to bude vypadat ve starých prohlížečích. Chcete-li změnit zefektivnění obsahu kolem konkrétního obrázku, použijte vlastnosti obrázku.
iMG (float: vlevo; šířka: 150px; výška: 150px; okruh hranice: 50%; tvar-venku: kružnice (); tvar-marže: 15px;)
iMG (float: vlevo; šířka: 150px; výška: 150px; okraj - poloměr: 50%; tvar - venku: kružnice (); tvar - marže: 15px;) |
S pomocí tohoto kódu bude text schopen "vidět" kolo ", který se použije na obrázek a bude obsahovat, jak je uvedeno na první obrazovce. (Můžete se podívat na výsledek.) V prohlížečích, které nepodporují obrázky, bude vypadat ve druhém obrázku.
Můžete použít funkci kruhu () čistá forma Nebo přenášet parametry. Zde je jeho oficiální syntaxe:
kruh () \u003d kruh ([
Otazníky ukazují, že tyto parametry jsou volitelné a mohou být vynechány. Parametry, které vynecháte, budou mít výchozí hodnoty. Při použití kruhu () jako je, namísto přímé indikace pozice ve výchozím nastavení bude středem kruhu ve středu položky, ke kterému ji použijete.
Poloměr kruhu můžete nastavit pomocí libovolných délek (px, EM, PT atd.) Můžete také nastavit poloměr pomocí parametrů pomocí nejbližšího nebo nejvzdálenějšího strany, ale nejblíže-strana je výchozí hodnota, která Znamená to, že prohlížeč převezme vzdálenost poloměru od středu prvku na nejbližší stranu, nejvzdálenější strana používá vzdálenost od středu ke vzdálené straně.
tvar-venku: kruh (nejvzdálenější na 25% 25%); / * Určuje kruh, jehož poloměr je roven polovině nejdelší strany umístěné v bodě s 25% 25% v souřadném systému * / tvar-uvnitř: kružnice (250px při 500px 300px); / * Určuje kruh, jehož střed je umístěn v 500px vodorovně a 300px vertikálně s poloměrem 250px * /
Funkce ELLIPSE () funguje stejně jako kruh (), se stejnou sadou hodnot, kromě toho, že místo parametru poloměru trvá dva: jeden poloměr podél osy, druhý - na ose-y.
elipsa () \u003d elipsa ([
Funkce INSET () není přímo příbuzná kružnici nebo elipsu, slouží k vytvoření obdélníkových tvarů uvnitř prvku. Vzhledem k tomu, že položky jsou obdélníkové, není nutné vytvořit obdélníky. Místo toho může vložka () pomoci vytvářet obdélníky se zaoblenými rohy, takže obsah protéká zaoblenými rohy.
Funkce INSET () přebírá od jedné do čtyř parametrů posunu, což určuje posunutí vzhledem k okrajům referenční jednotky, která určuje umístění obdélníku uvnitř prvku. Zaoblené rohy jsou indikovány přesně stejným způsobem jako poloměr hranice, s použitím jedné ze čtyř hodnot, v kombinaci s klíčovým slovem.
vložka () \u003d vložka (offset (1,4)?)
vložka () \u003d vložka (offset (1, 4) [kolo< border - radius > ] ? ) |
Následující kód vytvoří obdélník se zaoblenými rohy na plovoucím prvku.
Prvek (float: vlevo; šířka: 250px; výška: 150px; tvar-venku: vložka (0px kulatá 100px) ohraničení;)
Prvek (float: vlevo; šířka: 250px; výška: 150px; tvar - venku: vložka (0px kulatá 100px) hranice - box;) |
Druhý znak čísel je polygon (), který definuje složitější nejednoznačné údaje s použitím libovolného počtu bodů. Funkce má sadu souřadnic páry, kde každý pár určuje polohu bodu.
V následujícím příkladu je plovoucí obraz umístěn na pravém okraji, zabírá celou výšku obrazovky a pomocí zobrazení okna zobrazení. Chceme text na levé horolezecké přesýpací hodiny uvnitř obrázku, a používáme funkci polygonu () pro určení nestandardního obrázku pro obraz.
CSS Kód pro výše uvedený obrázek je následující:
iMG %, 45% 40%);)
img. Doprava (float: vpravo; výška: 100vh; šířka: calc (100VH + 100VH / 4); tvar - venku: mnohoúhelníková (40% 0, 100% 0, 100% 100%, 100%, 40%, 40%, 40%, 40%, 40%, 45% 60%, 45% 40%);) |
Můžete nastavit souřadnice bodů, které určují obrázek v jednotkách délky nebo procenta, jako já. Tento kód poskytne nezbytný výsledek, ale jak vidíte, funkce obrázku neovlivní zbývající části obrazu mimo zadaný obrázek. Faktem je, že použití funkce obrázku na prvek - ať už je to obraz nebo kontejner nebo něco jiného - neovlivní nic jiného než oblast zefektivnění obsahu. Pozadí, hranice a všechno ostatní zůstane nezměněno.
Chcete-li vizuálně odeslat vytvořený mnohoúhelník, musíme "trimovat" části obrazu mimo postavu. To nám pomůže vlastnost Clip-Path na specifikaci maskovacího modulu CSS.
Vlastnost Clip-Path má stejné funkce tvaru a význam jako vlastnost obrázku. Pokud dáváme stejné polygonální číslo, které jsme použili pro vlastnost Shape-Merze, vlastnost Clip-Path, bude to součást obrazu mimo obrázek.
iMG %, 45% 40%); / * Ořezávání obrázků na obrysu obrázku * / clip-cestě: mnohoúhelník (40% 0, 100% 0, 100% 100%, 40% 100%, 45% 60%, 45% % 40%);)
img. Doprava (float: vpravo; výška: 100vh; šířka: calc (100VH + 100VH / 4); tvar - venku: mnohoúhelníková (40% 0, 100% 0, 100% 100%, 100%, 40%, 40%, 40%, 40%, 40%, 45% 60%, 45% 40%); / * Ořezávání obrázků na obrysu obrázku * /cLIP - Cesta: mnohoúhelník (40% 0, 100% 0, 100% 100%, 40% 100%, 45% 60%, 45% 40%); ) |
Výsledek vypadá takto:
Vlastnost Clip-Path je stále podporována spolu s předponami, tj. Bude pracovat v Chrome s přidáním předpony -webkit. Můžete se podívat na demo.
Vlastnost Clip-Path je nádherné satelity pro postavu obrázku, protože pomáhá vizuálně prezentovat vytvořené tvary a části plodin mimo postavu, takže budete velmi často používat k jejich použití dohromady.
Funkce polygon () také přijímá volitelné klíčové slovo K vyplnění, které mohou být nonzero nebo serodd. Definuje, jak se protínající oblasti uvnitř polygonu budou chovat. Podrobnosti naleznete v vlastnost SVG Fill-Pravidlo.
Definování obrázku pomocí obrázku
Chcete-li nastavit obrázek pomocí snímku, musí být v obraze přítomen alfa kanál, ze kterého prohlížeč bude extrahovat obraz.
Obrázek je určena pixely, jejichž alfa hodnota je vyšší než určitá prahová hodnota. Výchozí hodnota prahové hodnoty je OK (zcela transparentní), nebo ji můžete zadat přímo pomocí vlastnosti threshold tvaru. Jakýkoliv neprůhledný pixel tak může být použit jako součást obrázku definovaného obrazem.
Údaje o budoucí úrovni CSS mohou umožnit přepnutí na použití dat jasu obrazu namísto alfa kanálu. Pokud k tomu dojde, bude prahová hodnota tvaru prodloužena tak, aby zahrnovala prahovou hodnotu nebo pro jas nebo pro alfa kanál, v závislosti na stavu spínače.
Pro určení prvku číslo používáme následující obrázek a nutíme text, který jej bude obsahovat:
Samozřejmě, pokud jste aplikovali pozadí prvku, pozadím bude muset omezit mimo zadaný obrázek. Vlastnost mask-image (s odpovídajícími předpony) z maskových modulů může v tomto pomoci, protože vlastnost Clip-Path Path nepřijímá hodnotu alfa kanálu jako hodnotu. Výsledek vypadá takto:
Pokud vytvoříte složité obrázky, můžete být vhodné nastavit obrázek pomocí obrázku. To umožní použití alfa obrazového kanálu v aplikaci Photoshop, místo nastavení bodů ručně.
Budete také vhodné použít obraz namísto funkce obrázku, když máte spoustu plovoucích prvků nebo weolate výjimky uvnitř prvku - protože tento moment Neexistuje možnost deklarovat několik čísel na jeden prvek. Pokud však obraz obsahuje několik oblastí, prohlížeč tyto oblasti odstraní a používá je.
CSS postavy v reagujícím provedení
CAN CSS postavy přijdou na citlivý design? Současná specifikace pro tvar-venku obsahuje tento moment, protože umožňuje nastavit velikost prvku nebo v procentech nebo v jednotkách délky, a body definující obrázek (parametry funkce obrázku) lze také zadat jako procento. To znamená, že prvek s daným tvarem venku může být plně citlivý, stejně jako jakýkoliv plovoucí prvek s rozměry uvedenými v procentech.
Vlastnost tvarově uvnitř není dosud reagující, ale je to proto, že byl posunut na modul úrovně 2. Mnohé z jeho současných omezení půjde na další úrovni.
Nástroje pro vytváření obrázků
Vytvoření komplexních údajů využívajících funkce může být časově náročný úkol, zejména pokud vytvoříte obrázek s množstvím bodů a souřadnic pomocí polygonu (). Naštěstí tým webové platformy Adobe pracuje na výrobě interaktivních nástrojů, aby byl tento proces mnohem jednodušší. Medvěd Travis vytvořil sbírku nástrojů pro vytváření údajů, které nám umožňuje vizuálně vytvářet polygonální obrázky. Nástroj generuje funkci obrázku. To může být užitečné, ale má své omezení, pokud jdete vytvořit postavu založenou na konkrétním obrázku, protože nástroj neposkytuje takovou příležitost.
Pokročilejší a interaktivní nástroj byl vyvinut pomocí webové platformy Adobe. Nástroj byl nedávno vydán jako rozšíření pro volný editor závorek. To vám umožní vizualizovat a upravovat tvary přímo v prohlížeči a má možnost online náhledu, který aktualizuje hodnoty tvaru ve stylu tabulky, když je změníte na stránce. Dává okamžitý vizuální zpětná vazba Vaše změny, které vám umožní zjistit, jak obrázky interagují s jinými prvky na stránce.
Úprava polygonálního obrázku přímo v prohlížeči pomocí režimu náhledu v závorkách. Položka obrazovky z Razvan Caliman.
Tento nástroj se stane nepostradatelným, protože usnadňuje vytváření, editaci a odebrání obrázků. Razvan Caliman, který vysvětluje, jak volat editor tvaru v závorkách a začít jej používat.
Budoucnost: výjimky CSS
CSS specifikace obrázků byla specifikací věnovaná CSS postavám a výjimkám, ale byla rozdělena. Zatímco CSS Obrázek specifikuje vlastnosti tvaru tvaru a tvaru, výjimky CSS definují vlastnosti, které způsobují obsah, který by obsahoval, například s absolutním umístěním. Umožňují posílit celou postavu s obsahem z různých stran, jak je znázorněno na obrázku níže.
V budoucnu budou výjimky CSS umožňují obsahovat takový obrázek jako řez, jak je znázorněno na přelomu časopisu. Měď může být také kulatý a text se také dotkne..
Nová úroveň čísel
Prvním krokem je aktuální specifikace CSS. Brzy nám nové příležitosti dávají více kontrol. Je nutné vytvořit a posílit obsah, takže bude pro nás snazší obrátit rozvržení v živém designu s pomocí několika řádků kódu. K dnešnímu dni jsou editace specifikace zaměřeny na dokončení tvaru - venku a můžete vidět podporu čísel CSS velké množství Prohlížeče do konce roku 2014.
Čísla můžete dnes používat jako součást postupné strategie vylepšení, s vědomím, že mají přijatelnou výměnu v nepodporovacích prohlížečích. Nedávno jsem je začal aplikovat na mých webových stránkách a náhrada vypadá docela přijatelná. Pro složitější design můžete použít skript pro ověření podpory prohlížeče a poskytnout jakoukoliv náhradu, pokud neexistuje žádná podpora. Můžete také použít testy modernizr pomocí tohoto skriptu, aby zkontroloval, zda je vlastnost Shape-Merze udržována, nebo si stáhnout vlastní montáž, která obsahuje tento test.
Obrázky CSS nám umožňují vytvořit další most mezi tiskem a designem webu. Příklady v tomto článku jsou jednoduché, ale měly by vám dát základ pro vytvoření návrhu srovnatelným s časopisem nebo plakátem, aniž by se obával, zda jej můžete znovu vytvořit na obrazovce. Takže, že jste studoval - od nebe na obdélníkových značek k animaci čísel - nyní doba experimentů.
Vlad Merzehevich.
Na stránkách jsou trojúhelníky aplikovány vůbec a zavřeny jako součást návrhových prvků, například slouží jako ukazatel na nějaký objekt, směřují pozornost čtenáře na správné místo. Také trojúhelníky provádějí dekorativní funkce, dělat bloky, kde jsou používány, elegantní a moderní. Na Obr. 1 ukazuje příklad použití trojúhelníku v designu.
Obr. 1. trojúhelníky ve webovém designu
Přímo udělat trojúhelník cSS Tools. Je nemožné, takže dvě metody umožňují přidat do hranic a transformace.
Pomocí hranic.
Přestože hranice vytvořené přes hraniční vlastnictví nejsou přímo související s trojúhelníky, je to hranice, která bude pro tuto nejčastěji využívána. Pokud nastavíte nulovou šířku a výšku prvku, stejně jako instalace dostatečně tlustého okraje, uvidíme soubor čtyř trojúhelníků (obr. 2). Pro přehlednost jsou hranice na všech stranách nastavují různé barvy.
Obr. 2. Přidání hranic do položky
Opuštění pouze požadované hranice a zbytek tím, že děláme transparentní, dostaneme trojúhelník požadované barvy (obr. 3).
Obr. 3. Prvek s transparentními hranicemi
Příklad 1 ukazuje přidání trojúhelníku do bloku přes pseudo-element :: Eplicent.
Příklad 1. Blok s trojúhelníkem
Pro absolutně umístěné prvky není nutná nulová šířka a výška.
Vzhledem k kombinaci hranic můžete získat čtyři další typy trojúhelníků, které v kombinaci s již zmínil, nám dává osm možností. Jejich vzhled a požadovaný kód je zobrazen v tabulce. jeden.
| Pohled | Styl |
|---|---|
| hranice: 20px tuhý průhledný; Hranice-top: 20px pevná zelená; | |
| hranice: 20px tuhý průhledný; Hraniční vpravo: 20px Solid Green; | |
| hranice: 20px tuhý průhledný; Border dno: 20px pevná zelená; | |
| hranice: 20px tuhý průhledný; Hraniční vlevo: 20px pevná zelená; | |
| hranice: 20px tuhý průhledný; Hranice-top: 20px pevná zelená; Hraniční vpravo: 20px Solid Green; | |
| hranice: 20px tuhý průhledný; Hraniční vpravo: 20px Solid Green; Border dno: 20px pevná zelená; | |
| hranice: 20px tuhý průhledný; Border dno: 20px pevná zelená; Hraniční vlevo: 20px pevná zelená; | |
| hranice: 20px tuhý průhledný; Hraniční vlevo: 20px pevná zelená; Hranice-top: 20px pevná zelená; |
Z tabulky je vidět, že neviditelné hranice zabírají místo, zvažte to, když jsou položky umístění. Styl, také je nutné přidat nulovou šířku a výšku nebo použít vlastnost pozice, jak bylo provedeno v příkladu 1.
Trojúhelník může být proveden jinou formou, pokud nastavíte jinou tloušťku hranic. Takže kód pro vytvoření bloku zobrazeného na Obr. 4 je uveden v příkladu 2.
Obr. 4. Akutní trojúhelník.
Příklad 2. Sharp Trojúhelník
S ohraničením získáme pevné barevné trojúhelníky, vytvořit rám znázorněný na Obr. 5 musí jít na chytit a ukládat jeden prvek na druhém s trochou posunutí. Pseudo-prvky nám znovu pomůže: před a: po (příklad 3).
Obr. 5. Rám s rohem
Příklad 3. Překryté trojúhelníky
Vzhledem k tomu, že aplikujeme jeden jediný prvek nahoře další, je tato metoda vhodná pouze pro monotónní výplň a není vhodný pro gradienty nebo obrázky na pozadí.
Použití transformace
S pomocí transformace můžeme otočit čtvercový prvek o 45 ° a dostat z něj rhombus. To není trojúhelník jako takový, takže musíme nechat vyčnívající část k nám a zbytek skrýt po jiném prvku (příklad 4).
Příklad 3. Transformace
Výsledek tohoto příkladu je znázorněn na Obr. 6.
Obr. 6. trojúhelník se stínem
Online CSS3 generátor pro vytvoření strmých grafických efektů a získání jejich CSS kódu. Můžete samostatně změnit styly pro různé stavy, jako jsou: vznášející se: Aktivní, atd. Vaše ruce dostanou rozhraní pro vytváření komplexních stínů, přechodů, 3D efektů, efekty s textem a mnoho dalšího. Projekt má vlastní galerijní efekty, ze kterých můžete začít svůj vývoj. Výrazný rys projektu je, že můžete získat styly samostatný prvekNapříklad pro stín nebo gradient.
Když poprvé zadáte stránky, nám nabízíme vytvořit prázdné pro vstupní pole, tlačítka, blok nebo vybrat hotový vzor z galerie projektu. Začněme s něčím jednoduchým, například z galerie geometrických čísel. Vyberte si z galerie podepsat Yin-Yang a klepněte na tlačítko "Získat kód" v pravém horním rohu:
Budou zobrazeny hotové CSS pro současný vývoj, stejně jako příklad HTML Kód. Projektová galerie má ještě více než 20 polotovarů pro různé postavy CSS a samozřejmě můžete vytvořit vlastní.
Krok podle sekce galerie vidíme tlačítka, textová pole, Účinky přímo pro text, výše uvedené údaje a sady gradientů. Hrajeme s účinky textu:
místo - Wow to 3D!
Mělo by si všimnout, že generované CSS je překvapivě velmi čisté a čitelné, což je velmi potěšeno. Podívejme se na nějaký roztomilý tlačítko:
tlačítko Cool Místo.
Další funkce zahrnují uložení stavu v prohlížeči LocalStorage. Pokud jste omylem zavřeli kartu, pak při příštím naleznete na webu všechny změny zůstanou s vámi.
Při použití non-standardní fonty s Google fonty. Uživatelé je automaticky přidá jako příklad HTML. V mém případě, pro text a tlačítka to vypadá takto:
Závěrečné CSS je poměrně objemné, takže to přinesu jen na konci článku:
Yin Yang (
Plavat vlevo;
šířka: 96px;
Výška: 48px;
Pozice: Relativní;
Hranice: 2px Solid # F81;
Hraniční dno šířka: 50px;
-Webkit-hraniční poloměr: 100%;
Okruh pohraničí: 100%;
Barva: RGBA (0,0,1);
-O-text-přetečení: klip;
Text-přetečení: klip;
-WebKit-transformace: rotatez (-45deg) scalex (1) Scaley (1) ScaleZ (1);
Transformace: Rotatez (-45deg) Scalex (1) Scaley (1) ScaleZ (1);
Transformovaný původ: 50% 50% 0;
Yin-yang :: před (
šířka: 12px;
Výška: 12px;
Pozice: absolutní;
Obsah: "";
Top: 50%;
vlevo: 0;
Hranice: 18px Solid # F81;
-Webkit-hraniční poloměr: 100%;
Okruh pohraničí: 100%;
Písmo: normální normální normální 100% / normální arial, helvetica, sans-serif;
Barva: RGBA (0,0,1);
-O-text-přetečení: klip;
Text-přetečení: klip;
Pozadí: RGBA (255 255,255,1);
Textový stín: žádný;
-WebKit-transformace-původ: 50% 50% 0;
Transformovaný původ: 50% 50% 0;
}
Yin-Yang :: Po (
šířka: 12px;
Výška: 12px;
Pozice: absolutní;
Obsah: "";
Top: 50%;
Vlevo: 50%;
Hranice: 18px pevný RGBA (255,255,25,1);
-Webkit-hraniční poloměr: 100%;
Okruh pohraničí: 100%;
Písmo: normální normální normální 100% / normální arial, helvetica, sans-serif;
Barva: RGBA (0,0,1);
-O-text-přetečení: klip;
Text-přetečení: klip;
Pozadí: # f81;
Textový stín: žádný;
-WebKit-transformace: Scalex (1) Scaley (1) ScaleZ (1);
Transformace: Scalex (1) Scaley (1) ScaleZ (1);
-WebKit-transformace-původ: 50% 50% 0;
Transformovaný původ: 50% 50% 0;
}
Užijte si-CSS-3DTEXT (
Kurzor: ukazatel;
Hranice: žádný;
Písmo: normální normální normální normální 72px / normální "Passero One", Helvetica, Sans-Serif;
Barva: RGBA (255 255,255,1);
Text-ALIGN: CENTER;
-O-text-přetečení: klip;
Text-přetečení: klip;
Text-Shadow: 0 1px 0 RGB (204.2044444), 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 1px RGBA (0) 0.0,0,0980392), 0 0 5px RGBA (0,0,0,0,0,0980392), 0 1px 3PX RGBA (0,0,0,0,0.298039), 0 3px 5px RGBA (0,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-přechod: Všechny 300ms Cubic-Bezier (0,42, 0, 0,58, 1);
-Moz-přechod: Všechny 300ms Cubic-Bezier (0,42, 0, 0,58, 1);
-O-přechod: Všechny 300ms Cubic-Bezier (0,42, 0, 0,58, 1);
Přechod: Všechny 300ms Cubic-Bezier (0,42, 0, 0,58, 1);
-WebKit-transformace: Scalex (1) Scaley (1) ScaleZ (1);
Transformace: Scalex (1) Scaley (1) ScaleZ (1);
-WebKit-transformace-původ: 50% 50% 0;
Transformovaný původ: 50% 50% 0;
}
Užijte si-CSS-3DTEXT: Hover (
Barva: RGBA (169,214,169,1);
Text-Shadow: 0 1px 0 RGBA (255,255,25,1), 0 2px 0 RGBA (255,255,25,1,1), 0 3px 0 RGBA (255,255,25,1,1), 0 4px 0 RGBA (255,255,25) , 1,1,25,2,25,22,255,255, 1), 0 6px 1px RGBA (0,0,0,0,0,0980392), 0 0 5px RGBA (0,0,0,0,0,0980392), 0 1px 3PX RGBA (0,0,0,0,0,0,98039), 0 3px 5px RGBA (0,0,0,0,0,0,2), 0 -5px 10px RGBA (0,0,0,0,0.247059), 0 -7px 10PX RGBA (0,0,0,0,0,0,2), 0 -15px 20px RGBA (0,0, 0.0.14902);
-WebKit-přechod: Všechny 200 ms Cubic-Bezier (0,42, 0, 0,58, 1) 10ms;
-Moz-přechod: Všechny 200 ms Cubic-Bezier (0,42, 0, 0,58, 1) 10ms;
-O-přechod: Všechny 200 ms Cubic-Bezier (0,42, 0, 0,58, 1) 10ms;
Přechod: Všechny 200 ms Cubic-Bezier (0,42, 0, 0,58, 1) 10ms;
}
Tlačítko zpětné vazby (
Displej: inline-blok;
Plavat vlevo;
Pozice: Relativní;
Kurzor: ukazatel;
marže: 0 2% 0 0;
Polstrování: 12px 22px;
Přetečení: skryté;
Hranice: žádný;
Písmo: Normální normální Bold 1.6em / normální "Synkopate", Helvetica, Sans-Serif;
Barva: # ECF0F1;
-O-text-přetečení: klip;
Text-přetečení: klip;
-Webkit-
Pozadí-původ: polstrování;
Background-Clip: Border Box;
Velikost na pozadí: Auto Auto;
-Webkit-box-Shadow: 0 10px 0 0 RGBA (178,49,49,1);
Box-Shadow: 0 10px 0 0 RGBA (178,49,49,1);
Text-Shadow: 0 0 0 RGB (196,80,78), 1PX 1PX 0 RGB (196,80,78), 2px 2px 0 RGB (196,80,78), 3px 3px 0 RGB (196,80,78 ), 4PX 4PX 0 RGB (196,80,78), 5PX 5px 0 RGB (196,80,78), 6px 6px 0 RGB (196,80,78), 7px 7px 0 RGB (196,80,78), 8PX 8PX 0 RGB (196,80,78), 9px 9px 0 RGB (196,80,78), 10px 10px 0 RGB (196,80,78), 11px 11px 0 RGB (196,80,78), 12px 12px 0 RGB (196,80,78), 13px 13px 0 RGB (196,80,78), 14px 14px 0 RGB (196,80,78), 15px 15px 0 RGB (196,80,78), 16px 16px 0 RGB (196,80,78), 17px 17px 0 RGB (196,80,78), 18px 18px 0 RGB (196,80,78), 19px 19px 0 RGB (196,80,78), 20px 20px 0 RGB (196) 80,78), 21px 21px 0 RGB (196,80,78), 22px 22px 0 RGB (196,80,78), 23px 23px 0 RGB (196,80,78), 24px 24px 0 RGB (196.80, 78) , 25px 25px 0 RGB (196,80,78), 26px 26px 0 RGB (196,80,78), 27px 27px 0 RGB (196,80,78), 28px 28px 0 RGB (196,80,78), 29px 29PX 0 RGB (196.80.78), 30px 30px 0 RGB (196,80,78), 31px 31px 0 RGB (196,80,78), 32PX 32px 0 RGB (196,80,78), 33px 33px 0 RGB (196,80,78), 33px 33px 0 RGB ( 196,80,78), 34px 34px 0 RGB (196,80,78 ), 35px 35px 0 RGB (196,80,78), 36px 36px 0 RGB (196,80,78), 37px 37px 0 RGB (196,80,78), 38px 38px 0 RGB (196,80,78), 39px 39px 0 RGB (196,80,78), 40px 40px 0 RGB (196,80,78), 41px 41px 0 RGB (196,80,78), 42px 42px 0 RGB (196,80,78), 43px 43px 0 RGB (196,80,78), 44px 44px 0 RGB (196,80,78), 45px 45px 0 RGB (196,80,78), 46px 46px 0 RGB (196,80,78), 47px 47px 0 RGB (196.80.78), 48px 48px 0 RGB (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,78,43137), 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,780392), 12px 12px 0 RGBA (196.80,78,760784), 13px 13px 0 RGBA (196,80,78,0,0,0,0, 0,0,741,80,78,0,0,0,064,1176), 14px 14px 0 RGBA (196.80,78,721569), 15px 15px 0 RGBA (196.80,78,0,701961), 16px 16px 0 RGBA ( 196,80,78.0. .682353), 17PX 17PX 0 RGBA (196,80,78,0,065824), 18px 18px 0 RGBA (196,80,78,0,0639216), 19px 19px 0 RGBA (196,80,78,0619608 ), 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,78,0784), 23px 23px 0 RGBA (196.80,78,0,0,541176), 24px 24px 0 RGBA (196.80,78,0,521569), 25px 25px 0 RGBA (196.80,78,0498039), 26px 26px 0 RGBA (196.80,78,0478431), 27px 27px 0 RGBA (196, 80,78.0.458824), 28px 28px 0 RGBA (196.80,78,0,939216), 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,0360784), 33px 33px 0 RGBA (196,80, 78,0.341176), 34px 34px 0 RGBA (196,80,78,0317647), 35px 35px 0 RGBA (196.80,78,0,98039), 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,0080392), 42px 42px 0 RGBA (196,80,78,0.156863), 43px 43px 0 RGBA (196.80,78,0,7255), 44px 44px 0 RGBA (196,80,78 , 017647), 45PX 45px 0 RGBA (196.80,78,0,980392), 46px 46px 0 RGBA (196.80,78,0784314), 47px 47px 0 RGBA (196.80, 78 0788235), 48px 48px 0 RGBA (196.80,78 , 0,792157), 50px 50px 0 RGBA (196,80,78,0);
-WebKit-transformace: Scalex (1) Scaley (1) ScaleZ (1);
Transformace: Scalex (1) Scaley (1) ScaleZ (1);
-WebKit-transformace-původ: 50% 50% 0;
Transformovaný původ: 50% 50% 0;
}
Tlačítko zpětné vazby: Hover (
Text-ALIGN: CENTER;
Pozadí: -webkit-lineární gradient (-90deg, # CE6161 0, # EF6664 100%);
Pozadí: -Moz-lineární gradient (180deg, # CE6161 0, # EF6664 100%);
Pozadí: lineární gradient (180deg, # CE6161 0, # EF6664 100%);
Pozice na pozadí: 50% 50%;
Pozadí-původ: polstrování;
-Webkit-background-clip: hraniční box;
Background-Clip: Border Box;
-Webkit-background-velikost: auto auto;
Velikost na pozadí: Auto Auto;
}
Tlačítko zpětné vazby: Aktivní (
Top: 5px;
Pozadí: -Webkit-lineární gradient (-90deg, # FF8583 0, # FF5350 100%);
Pozadí: -Moz-lineární gradient (180deg, # ff8583 0, # ff5350 100%);
Pozadí: lineární gradient (180deg, # ff8583 0, # ff5350 100%);
Pozice na pozadí: 50% 50%;
-Webkit-background-původ: polstrování;
Pozadí-původ: polstrování;
-Webkit-background-clip: hraniční box;
Background-Clip: Border Box;
-Webkit-background-velikost: auto auto;
Velikost na pozadí: Auto Auto;
-WebKit-box-Shadow: 0 5px 0 0 RGBA (178,49,49,1);
Box-Shadow: 0 5px 0 0 RGBA (178,49,49,1);
