50 + Úžasné techniky CSS3 pro lepší design
CSS3 získává sílu, a to i přesto, že standard nebyl dokončen.
Existují stovky výukových lekcí, které učí návrhářů, jak je používat, ale bohužel mnoho z nich pokrývá stejnou půdu.
A některé tutoriály učí projektanty dělat věci, které by nemusely považovat za užitečné, ačkoli techniky mohou být obvykle přizpůsobeny tak, aby dokonale vyhovovaly projektu.
Níže je více než padesát skvělých cvičení CSS3. Mnoho z nich je přísně založeno na CSS a HTML, zatímco jiné obsahují i JavaScript.
Pokud máte oblíbenou techniku nebo výuku, která není uvedena níže, sdílejte ji prosím v komentářích!
Použití CSS3 pro ilustraci bezobrázky
Různé nové metody v CSS3 umožňují vytvoření velmi složité grafiky pomocí čistého CSS a bez obrázků. Zde je několik nejlepších příkladů.
Pure iPhone CSS Ilustrace
Směs hranic, transformací a přechodů pro vytvoření animovaného obrazu iPhone.
Vytváření loga operačního prohlížeče v CSS3
Čisté zobrazení loga opery vykreslené pomocí technik CSS3.
Naše sluneční soustava s CSS3
Klidně vypadající ztvárnění sluneční soustavy s animačními efekty ..
Analogový efekt hodin
Vytvořte skvělé analogové hodiny pouze pomocí CSS3 a jquery.
Stínové experimenty
Tento tutoriál ukazuje, jak používat stíny CSS pro vytvoření různých efektů, včetně grafiky Temné strany měsíce, stínované periodické tabulky a dokonce i psychedelického "lektvaru lásky".
Vytváření snímků ve stylu Polaroid s Just CSS
Tento výukový program využívá jak efekty CSS2, tak CSS3 pro přidání stylu Polaroid do jednoduchého seznamu obrázků.
CSS3 Text, Layout a barevné efekty
CSS3 lze použít pro spoustu různých fantazijních animací a grafiky, ale je také skvělé pro rozložení, text a barevné efekty, které jste dříve využili pro Photoshop.
Utilitování sloupců CSS3
Kódování čistého vícepolonového modulu CSS3.
Obecné implementace CSS3
Přehled výhod CSS3.
Styling Odkazy s CSS3
Čtyři různé způsoby, jak stylovat různé typy odkazů s CSS3
CSS3 Vertical Accordion
Přechody a přechody dělají toto menu harmoniky, které se rozkládá na seřazený seznam starších prohlížečů.
Super úžasné tlačítka CSS3
Barevné, gradientní tlačítka se stínem, které pracují na světlém nebo tmavém pozadí a nevyžadují obrázky!
Tlačítka stylů aplikace Photoshop s CSS3
Porovnání vedle sebe, jak vytvářet tlačítka CSS3 bez obrázků a Photoshopu.
Css Gradient Text Effect
Pokyny pro vytvoření jedinečného textového efektu použitím textury na text. Pomocí gradientů nebo vzorků můžete skutečně vytvořit text.
Některé alternativy CSS3 k efektem jazyka JavaScript
7 způsobů, jak nahradit běžně používané efekty jazyka JavaScript pomocí CSS3, abyste svůj web připravili pro budoucnost.
Reliéfní textový efekt CSS3
Vytváření retušovaného textového efektu bez prohlížeče Photoshopu.
Porozumění barevným hodnotám CSS3
Vše o nových barvách dostupných s CSS3.
Vytváření bohatých efektů pomocí CSS3
CSS přechody a transformace mohou být kombinovány, aby vyvolaly různé efekty.
Vytváření efektu CSS3 Bokeh
Schopnost používat gradienty a průhlednost pomocí CSS3 umožňuje tento klasický efekt.
Sloupce CSS3
Dobrý video tutoriál o konceptu použití sloupců CSS3 pro rozložení.
Efektní seznamy s CSS3
Chladný seznam stylů s odrážkami pomocí CSS3, který vytváří elegantní zaškrtnutí.
Velmi hladké obrazové infoboxy s CSS3
Techniky, které CSS3 umožňují, dělají tyto krabice opravdu pop.
Bubliny řeči
Pseudo-elementy s poloměrem hranice a transformace umožňují tyto tvary.
Efekty přechodu obrazu ve stylu Flash
Chytrý způsob využití efektu animace CSS.
Obnova obrazovky aktualizace Tumblra pomocí CSS3
Návrhový efekt CSS3, který v případě starších prohlížečů dobře naruší.
Drobná CSS3 typografie, kterou jste přísahali, byla vytvořena ve Photoshopu
Tento 13-ti minutový výukový program vám ukáže, jak vytvořit CSS3 krásný, jemný 3D typografický efekt.
Rotace textu pomocí CSS
Zde je trochu starší technika, která ukazuje, jak vytvořit text kompatibilní s prohlížečem kompatibilní se svislou osou.
Vytvořte efekt Letterpress s CSS Text-Shadow
Tento výukový program Line25 vám ukáže, jak používat textové stíny pro vytvoření efektu ve stylu letterpress ve vašem webu.
Awesome CSS3 Galerie Lightbox s jQuery
Tento kód vytvoří galerii obrázků ve stylu Polaroid s možností sdílení drag-and-drop.
Úžasné překryvy
Tento tutoriál od Zurb ukazuje, jak vytvářet překryvy snímků pomocí vlastností okrajů CSS3, které pak mohou být použity k zobrazení dalších informací o snímku, když se pohybuje.
Awesome Inline Form Labels
Tento výukový program vám ukáže, jak vytvořit štítky s vloženými formuláři, které nezmizí, jakmile začnou psát návštěvníci.
CSS3 3D efekty
Animovaná CSS3 kostka
Unikátní 3D animovaná kostka s 3D transformacemi navrženými s CSS. Kubu je možné otočit pomocí kláves se šipkami pro zobrazení informací zobrazených na každé straně.
CSS3 3D stuhy
Dejte trochu hloubky vašemu designu pomocí těchto jednoduchých pásů CSS3 CD.
Animovaný 3D poster Scroller
Zobrazování filmových plakátů s titulky pomocí ohromujícího efektu 3D perspektivy v CSS3.
3D CSS3 Coke Can
Přetažením posuvníku se virtuální koks může pohybovat tam a zpět.
CSS Stíny
Vytvářejte stylové stíny tím, že je oddělíte od prvku.
Animace CSS3
Animovaný příběh velryb velryb Twitteru s CSS3
Velmi elegantní uživatel CSS3, který se poněkud překvapivě odráží ve starších prohlížečích.
Parallax Starfield pozadí
Hvězdy se pohybují zleva doprava za svým obsahem s tímto klasickým kosmickým vzhledu.
Zobrazení a skrytí obsahu pomocí CSS3
Rozšíření a uzavírání zásobníků a stromů menu bez javascriptu.
Plovoucí sledovat kartu s CSS3
Umístěte navigační ikony nebo ikony kontaktů snadno pomocí této užitečné metody.
CSS3 zaváděcí modální Windows
Několik běžných modálních oken generovaných pomocí efektů a transformací CSS3.
Spinery používají pouze CSS3
Vytváření načítání animací pouze pomocí CSS3 a bez animovaných gifů!
Zobrazení sociálních ikon pomocí CSS3
Chladný efekt vyblednutí pro zobrazování sociálních ikon pomocí čistého CSS3.
CSS3 Cartoon Animation
Vytvoření celé animace ve stylu blesku pomocí CSS3 a jquery.
Animovaná krajina pomocí CSS3
Hory a mraky a voda vše animované s CSS3.
Pěkné animované titulky s posunem obrazu
CSS3 Transitions umožňují dělat některé úžasné věci s popisky textu. Zde je jeden příklad.
Nabídka elastických miniatur
Série obrázků, které se roztahují a zatahují, když se přesunují.
Stacked, dynamické indexové karty
Fantastický animační efekt, který lze uplatnit u mnoha návrhů.
Barevné hodiny s CSS & jQuery
Tento tutoriál ukazuje, jak vytvořit skutečně úžasné barevné hodiny pomocí CSS a jQuery, které se skládají ze tří samostatných kruhů načítání, které zobrazují hodiny, minuty a sekundy.
Pure CSS3 At-At Walker
To je impozantní příklad, který používá CSS3 (bez JavaScript, bez Flash) k vytvoření animovaného At-At Walkera od Star Wars. Jedinou nevýhodou je, že je aktuálně viditelná pouze v prohlížečích Webkit (Safari a Chrome).
Vytvořte posuvník jQuery obsahu pomocí čistého CSS
Naučte se vytvořit tento čistý posuvník ve stylu jQuery ve stylu CSS.
Rozbalovací nabídka CSS3
Tento tutoriál od WebDesignerWall ukazuje, jak vytvořit rozbalovací nabídku CSS3 kompatibilní s prohlížečem, která funguje také v prohlížečích, které nepodporují CSS3 (i když s omezeným stylem).
Napsáno výhradně pro WDD Cameron Chapman .
Pokud víte o dalších vysoce kvalitních cvičeních CSS3, které nebyly zahrnuty výše a chcete je sdílet, učiňte to prosím v komentářích!