Pokud jste si někdy přáli, mohli byste replikovat účinky tradičního
koláž maker.
ve vašem
Rozložení webových stránek
, To je pro vás tutoriál.
Tutoriál webového designu se bude dívat na tři vlastnosti CSS:
maska obrazu
,
clip-cesta
a
tvar-venku
. I když jste je použili, nebojte se. Ukážu příklady, které vám pomohou vytvářet efekty, které jste pravděpodobně neviděli na mnoha webových stránkách.
Hledáte jiný typ tutoriálu? Vidět
Jak udělat fotografii koláž ve Photoshopu
.
A pro praktické průvodce, viz náš výběr vrcholu
Webové stránky Builder.
a
web hosting
servis.
18 Top CSS Animace Příklady
Moje největší inspirace z hlediska využití uvedených vlastností je tradiční koláže. Zajímalo by mě, zda je možné je vytvořit ve webovém prohlížeči bez použití jakýchkoliv grafických editorů nebo softwaru. S magií CSS, je to naprosto proveditelné! Další bonus tvorby s kódem je má škálovatelné, animované a interaktivní. Než začnete, ujistěte se, že máte následující:
Budete potřebovat:
Vaše oblíbené webové prohlížeče a vývojáře nástrojů - doporučuji používat Google Chrome, protože podporuje všechny funkce, které používám v tomto tutoriálu
Editor kódu
Aktiva, jako jsou obrázky nebo soubory SVG - můžete si stáhnout ty, které používáme v tomto tutoriálu
tady
Masky obrazy, které překrývají text
CSS masky umožňují vytvářet speciální efekty - jako umožnit nastavení webu, aby selektivně se zobrazí a zmizí, protože uživatel se posouvá nahoru a dolů (kontrastovat tento obrázek na jeden výše)
Maskování je první funkcí, kterou bych vám rád ukázal. Pomáhá vybudovat více kreativních tvarů a rozvržení na webu tím, že vypráví váš prohlížeč, které by měly být viditelné prvky aktiv. Maskování lze provést třemi různými způsoby: pomocí rastrového obrazu (který je ve formátu PNG s transparentními díly); CSS gradienty; nebo prvky SVG. Všimněte si, že na rozdíl od typického rastrového obrazu může být SVG zmenšen nebo transformován bez významné ztráty kvality.
Co se obzvláště líbí o maskování, je jeho schopnost aplikovat stejné vlastnosti jako pro
Pozadí
- Můžeme definovat polohu, velikost a opakování masky, například pomocí:
Mask-opakování: ne-opakování
a
Maska-velikost: kryt
.
Díky maskování CSS můžeme vytvořit sofistikovanější efekty na webu. Jeden z nich naleznete v našem příkladu, kde části obrazu pokrývají nějaký text; Když uživatel posouvá nahoru a dolů stránky některé části textu jsou zobrazeny / skryté. To vyvolává dojem, že název stránky se nachází za horami. Chcete-li tento efekt vytvořit, některé triky jsou zapotřebí a chytré aplikace CSS masek nám pomůže dosáhnout toho.
Vytvořme záhlaví s vybraným obrázkem na pozadí a dvěma záhlavími uvnitř. Jeden z nich bude primární (první úroveň nadpisu).
Ořezové cesty vám umožní snížit obraz rostliny v tomto příkladu
Podívejme se na další příklad a dozvědět se více o CSS oříznutí. Stručně řečeno, oříznutí definuje, která oblast obrazu by měla být viditelná. Oříznutí je podobné sekání kusů papíru. Hranice tvaru se nazývá Clip Cesta: Cokoliv mimo cestu bude skryta, zatímco cokoliv uvnitř cesty bude viditelné. S cestou klipu můžete odebrat pozadí z obrázku namísto použití těžkých souborů PNG. Pro to musíme již připravit tvar pro výřez.
Cílem tohoto cvičení je klimat závod z obrazu, odstranění pozadí. Můžeme kopírovat SVG kód z našeho souboru a vložit jej do dokumentu HTML. Celková dráha musí být umístěna uvnitř
& lt; defs & gt; & lt; / defs & gt;
tagy.
Později můžeme snadno odkazovat na cestu definovanou v kódu SVG přidáním
Url
funkce.
.plant {
Výška: 700px;
Image na pozadí: URL (../ Obrázky / Plant.jpg);
Velikost na pozadí: kryt;
Pozice: Relativní;
Pozadí-opakování: ne-opakování;
-WebKit-Clip-Cesta: URL ("# Clip-závod");
Clip-Cesta: URL ("# Clip-závod");}
Myslet mimo krabici
Můžeš použít
tvar-uvnitř
a
tvar-venku
vytvořit všechny druhy tvarů
Kdo řekl, že textové kontejnery musí být vždy obdélníkové? Obsah může být vyříznut do všech druhů různých tvarů
tvar-venku
a
tvar-uvnitř
Vlastnosti, které umožňují zabalit obsah kolem vlastních cest v CSS.
Jak to funguje? Jednoduše platí
tvar-venku
na daný plovoucí obraz nebo kontejner. Je důležité poznamenat, že
plovák
Vlastnost a rozměry prvku - buď výška nebo šířka - musí být definovány jinak, jinak nefunguje. Můžete použít
URL ()
funkce, která umožňuje
tvar-venku
Vlastnost pro definování tvaru prvku založený na cestě ze souboru SVG.
.a-dopis {
Obrázek na pozadí: URL ('../ Obrázky / Gold-bg.jpg');
Velikost na pozadí: 1000px;
-WebKit-maska obrazu: URL ('../ Obrázky / A-písmeno2.Svg');
-WebKit-maska-kompozitní: zdrojový;
-WebKit-maska-opakování: ne-opakování;
-Webkit-maska-velikost: 300px;
šířka: 100%;
Výška: 60VH;
Pozice: Relativní;
top: 0px;
Připojení na pozadí: pevné;
plavat vlevo;
Displej: inline-blok;
šířka: 310px;
Tvar-marže: 23px;
tvar-venku: url ('../ obraz / maska.svg');
}
. \ T
tvar-venku
Nemovitost nemění nic o jiném prvku než jeho plovák. To znamená, že jakékoli hranice a snímky na pozadí se nebudou přizpůsobit tvaru vytvořenému na prvku. To je důvod, proč musíme také aplikovat
maska obrazu
Nemovitost - vyříznout pozadí prvku odpovídal definovaném tvaru.
Jedna důležitá věc, kterou je třeba poznamenat, je to
tvar-venku
Funkce funguje pouze s soubory s podporou cors. Cors stojí pro sdílení zdrojů kříž původu.
V tomto konkrétním případě je nejlepším způsobem, jak zobrazit, je použít localhost, jinak nebude fungovat, pokud jej otevřete ve svém prohlížeči.
Konečný výsledek vypadá neuvěřitelně - a přidává značný zájem na webovou stránku
Při experimentování, prosím, na paměti, že ne všechny zmíněné funkce jsou podporovány všemi prohlížeči, takže stojí za to kontrolovat
tady
. Nejnovější příklad nefunguje ve Firefoxu, Operu a tj. Doufejme, že bude brzy k dispozici pro všechny prohlížeče. A pokud máte spoustu dokumentů pro váš projekt, uchovávejte je bezpečně
cloudové úložiště
.
Portrétní fotografie je vyrovnávací akt - je třeba mít na paměti tolik věcí. Komunikace s vaším tématem a ujistěte se, že se cítí v pohodě. A z technického hlediska, znepoko..
Pravděpodobně jste slyšeli, že byste měli používat relativní jednotky pro velikost písma. To je dobré pravidlo pro přístupný web design; Pokud uživatel změní výchozí velikos..
Zátiší není každý šálek čaje - trvá určitou sadu
Malířské techniky
- Ale pro mě je to vždy oblíbené. Mám rád kompletní kontrolu nad barvami a stylem nastav..
Jeden z mých lektorů mi jednou řekl, že kdyby byl uzamčen ve vězení po zbytek svého života, s ničím jiným než perem a papírem, nepsal něco, na rozdíl od možná 'sbohem' těsn..
