Je tu spousta práce s CSS a webovým prohlížečem. Velcí vývojáři rádi přitlačují obálku a ukazují, kolik je možné.

Zatímco experimentální projekty nejsou vždy použitelné na výrobních místech, jsou neuvěřitelně inspirativní a vzdělávací.

Zorganizovali jsme několik projektů CSS, které představují skutečnou sílu CSS. Ty jsou všechny hostované na CodePen, takže můžete dokonce studovat a klonovat zdrojový kód, abyste zjistili, jak fungují.

1. Zakládání gradientů

Tento Sass načítání stránky používá animované přechody a prvky pro změnu velikosti pro vytvoření opakujícího se zatěžovacího efektu.

Většina lidí by měla rozpoznat tuto animaci načítání z Facebooku, která používá menší verzi tohoto vertikálního zavaděče. Ale většina webových nakládačů používá animované GIF, protože obrázky jsou více kompatibilní se všemi prohlížeči.

Tato lišta pro načtení CSS3 dokazuje, že s nějakým kreativním myšlením můžete přestavět téměř jakýkoli animovaný styl, který chcete.

Viz pero Nakládací lišty od MaxStalker ( @MaxStalker ) na CodePen .

2. Animace solárního systému

Zde je jeden z nejsložitějších projektů CSS, které mohu najít online. Tato dynamika návrh solární soustavy Malik Dellidj pracuje na čistém CSS bez obrázků .

Každá planeta je vykreslena v CSS včetně otáček. Tento projekt má být přesným modelem sluneční soustavy a má dokonce i realistické mezihvězdné pozadí pro zavádění.

Nedovedu si představit, jak dlouho to trvalo jen proto, aby byly ikony na planetě, natož aby se animace dostala správně. Ale kde je vůle, existuje cesta.

Viz pero Animace ze sluneční soustavy - Pure CSS od Malik Dellidj ( @kowlor ) na CodePen .

3. Pure CSS Minesweeper

Nikdy jsem si nemyslel, že uvidím ten den, kdy by se dala hrát klasická Windows minesweeper pomocí čistého CSS . Ale díky vývojáři Bali Balovi toho dne přišel.

Všimněte si, že to nefunguje přesně stejně jako tradiční minolovka, protože nezachovává skóre správně. Ale to sleduje čas přesně a nepoužívá lízání JavaScript.

Nějak dokonce i rozhraní vypadá překvapivě blízko původní uživatelské rozhraní Minesweeper a všechno běží na CSS. Zatímco to možná není perfektní replika, je to dost blízko, aby mě převlékl do několika kol.

Viz pero Čistý minolovník CSS od Bali Balo ( @ bali_balo ) na CodePen .

4. Denní a noční přepínání

Na povrchu tento přepínací přepínač může vypadat jednoduše. Prochází vstupním políčkem a předává data na backend, i když to není opravdu působivá část.

Tento přepínač má několik funkcí, které z něj činí jeden z nejlepších přepínačů zapnutí / vypnutí frontend:

  • Přepínací ikona se mění ze slunce na měsíc
  • Hvězdy a mraky se pohybují při přepínání
  • Je navržen s 100% čistým CSS

Nějak tento přepínač zapnutí / vypnutí zachycuje každého uživatele kliknutím a používá tuto událost k oživení přepínače den / noc pro zobrazení. Ikony slunce a měsíce jsou také hezky stylizované, protože běží pouze na CSS.

Viz pero Pure Css "den a noc" přepínání Benjamin Réthoré ( @ bnthor ) na CodePen .

5. Sledování myši CSS

Tradiční sledování myší je práce JavaScriptu, která na stránce zobrazuje souřadnice X / Y uživatele.

Technicky ještě potřebujete JavaScript, abyste získali tyto souřadnice a udělali s nimi něco užitečného. Ale tento úryvek ukazuje, že můžete navrhnout čistou funkci sledování myší CSS, která bude následovat po každém pohybu uživatele.

Nemůže opravdu přemýšlet o praktickém použití, ale mohlo by to být zábava na žertovně.

Viz pero Experimentální čistě sledování CSS myší Momcilo Popov ( @Momciloo ) na CodePen .

6. Bytový zábavní park

Všichni jsme viděli vektorové ikony a ilustrace určený pro web . Ale co plnohodnotné vektorové ilustrace navržené se syrovým kódem CSS a SVG?

Tento design zábavního parku je experimentální projekt, který funguje pouze v prohlížečích podporovaných SVG. Přesto v moderních prohlížečích se to bezchybně provádí a každý prvek má velmi realistické umístění na stránce.

Animace jsou určitě působivé, ale je to přesnost prvků SVG, které mě také zaujaly. Za pár let můžeme najít takovéto ilustrace na webu běžícím pouze v kódu bez obrázků.

Viz pero Bytový design zábavní park svg od Lina (animace poháněné CSS) Vladimir Gashenko ( @ gxash ) na CodePen .

7. Möbius v 3D

Navrhování opakující se animace CSS jako koncepce pásu Möbius je docela těžké. Ale přidejte některé prvky 3D a měnící se přechody? Teď máte opravdovou výzvu.

Tento úryvek je docela působivý vzhledem k tomu, jak vypadá hladce a jak málo se používá kód (pouze 90 řádků CSS). S Hamlem potřebujete pouze 6 řádků kódu, abyste vytvořili celý koncept.

Přiznám se, že to nebude super užitečné na skutečném webu, ale je to svědectvím toho, kolik můžete udělat s několika tucty řádků HTML a CSS.

Viz pero Möbius 6 hektarů (čistý CSS) Ana Tudor ( @thebabydino ) na CodePen .

8. Vlastní Map Creator

Po použití této webové aplikace na několik sekund si můžete být jisti, že běží v jazyce JavaScript. Dynamické chování, jako je 3D rotace a umístění terénu, jsou známkami sladké JS webapp.

Ale toto uživatelské rozhraní pro tvorbu map Vincent Durand je ve skutečnosti 100% čistý CSS. Šipky pro rotaci, samotný rotační efekt a všechny funkce click-to-place běží na CSS.

Za zmínku stojí, jak je tento koncept vykreslen pomocí 3D kostek. Samotné bloky fungují jako 3D prvky a můžete otáčet kostkami jen tak, že se vznášejí.

Není pochyb o jednom z nejžhavějších použití pro CSS, které jsem viděl už dávno.

Viz pero Plná tvorba mapy CSS Vincent Durand ( @onediv ) na CodePen .

9. Pure CSS iOS 7 ikony

Tento projekt je trochu méně interaktivní, ale stále stejně úchvatný. Vývojář Peter Schmiz znovu vytvořil všechny hlavní ikony aplikace iOS 7 pomocí čistého kódu HTML a CSS.

Žádná z těchto ikon nepoužívá žádné SVG nebo obrazové soubory. Každý prvek v každé ikoně je pevně kódován do HTML s prvkem span / div a následně stylizován pomocí CSS. Nejbláznivější je, jak přesné jsou!

Celá sada obsahuje 22 ikon a všechny jsou docela na místě. Nejvíce mě zajímá pozornost věnovaná detailům ikon, jako jsou Mapy a počasí. Jediný důkaz, že s dostatečným časem a trpělivostí můžete v CSS navrhnout cokoli.

Viz pero IOS 7 ikony s čistým CSS Peter Schmiz ( @peterschmiz ) na CodePen .

10. Jednostupňový mínusový nakladač

Re-vytváření animace Slack loading s CSS3 je rozhodně působivé. Ale tento úryvek obnoví mýtný nakladač pouze jedním prvkem na stránce. To je to, co nazývám oddaností.

Celkový počet CSS pro tento úryvek je jen přes 100 řádků, které zahrnují barvy logo Slack a animační efekty.

Nemohu říct, jestli by tento nápad fungoval i pro jiné značkové ikony načítání, ale určitě mě to zaujalo.

Viz pero Jeden prvek slack loader od CrocoDillon ( @CrocoDillon ) na CodePen .

11. Animované grafy 3D barů

V CodePen najdete desítky vlastních návrhů 3D barů s vlastními animacemi. Ale tyto 3D bary Rafael González vyniká všemi ostatními moderními sloupcovými grafy CSS.

Každá z těchto map spustit na flexbox pro kontejnery, takže budou automaticky rozměrovány v závislosti na počtu přidaných tyčí a objemu kontejneru. Každá sloupcová grafika se animuje, když se posouvá do pohledu, z nichž všechny jsou ovládány čistým CSS.

A protože každá velikost pruhu běží v em je můžete upravit každý jednotlivý pruh přirozené měřítko na základě velikosti písma prohlížeče. Šikovný příklad, který dokazuje, že moderní CSS je mnohem flexibilnější než kdykoli předtím.

Viz pero Pure CSS Bary Rafael González ( @rgg ) na CodePen .