Er is veel dat u kunt doen met alleen CSS en een webbrowser. Geweldige ontwikkelaars houden ervan om de envelop te duwen en te laten zien hoeveel er mogelijk is.

Hoewel experimentele projecten niet altijd nuttig zijn op productiesites, zijn ze ongelooflijk inspirerend en educatief.

We hebben een handvol CSS-projecten georganiseerd die de ware kracht van CSS laten zien. Deze worden allemaal gehost op CodePen zodat je de broncode zelfs kunt bestuderen en klonen om te zien hoe ze werken.

1. Laadbalken met verloop

Deze Sass-laadpagina maakt gebruik van geanimeerde verlopen en wijzigbare elementen om een ​​herhalend laadeffect te creëren.

De meeste mensen zouden deze laadanimatie van Facebook moeten herkennen, die een kleinere versie van deze verticale balklader gebruikt. Maar de meeste webladers gebruiken geanimeerde GIF's omdat afbeeldingen beter voldoen aan alle browsers.

Deze CSS3-laadbalk bewijst dat je met wat creatief denken bijna elke gewenste animatiestijl kunt herbouwen.

Zie de pen Staven laden door MaxStalker ( @MaxStalker ) aan CodePen .

2. Animatie van het zonnestelsel

Dit is een van de meest complexe CSS-projecten die ik online kon vinden. Deze dynamiek zonnestelsel ontwerp door Malik Dellidj draait op pure CSS zonder afbeeldingen .

Elke planeet wordt weergegeven in CSS inclusief de rotatiesnelheden. Dit project is bedoeld als een nauwkeurig model van het zonnestelsel en het heeft zelfs een realistische interstellaire achtergrond om op te starten.

Ik kan me niet voorstellen hoe lang dit duurde om de planeeticonen te maken, laat staan ​​om de animatiesnelheden goed te krijgen. Maar waar een wil is, is een weg.

Zie de pen Zonnestelselanimatie - Pure CSS door Malik Dellidj ( @kowlor ) aan CodePen .

3. Pure CSS Mijnenveger

Ik had nooit gedacht dat ik de dag zou zien wanneer klassieke Windows mijnenveger zou kunnen worden gespeeld met pure CSS . Maar dankzij ontwikkelaar Bali Balo is die dag aangebroken.

Merk op dat dit niet precies zo goed werkt als de traditionele Mijnenveger omdat het de score niet goed bijhoudt. Maar het houdt de tijd nauwkeurig bij en er wordt geen JavaScript gebruikt.

Op de een of andere manier lijkt zelfs de interface verrassend dicht bij de originele Mijnenveger UI en het draait allemaal op CSS. Hoewel het misschien geen perfecte replica is, is het wel dichtbij genoeg om me een aantal rondes te laten spelen.

Zie de pen Pure CSS mijnenveger door Bali Balo ( @bali_balo ) aan CodePen .

4. Dag en nacht schakelt om

Op het oppervlak deze tuimelschakelaar kan er vrij eenvoudig uitzien. Het loopt door een checkbox-invoer en geeft gegevens door aan de back-end, hoewel dat niet echt het indrukwekkende deel is.

Deze schakelaar heeft een paar functies die het een van de beste front-end aan / uit-schakelaars maken:

  • Het wisselpictogram verandert van een zon in een maan
  • Sterren en wolken zweven in tijdens het schakelen
  • Het is ontworpen met 100% pure CSS

Op de een of andere manier vangt deze aan / uit-schakelaar elke klik van een gebruiker op en gebruikt die gebeurtenis om het dag- / nachtschakelgebied in beeld te brengen. De icoonontwerpen van de zon en de maan zijn ook mooi gestileerd, omdat ze op niets anders dan CSS draaien.

Zie de pen Pure Css "dag en nacht" schakelaar door Benjamin Réthoré ( @bnthor ) aan CodePen .

5. CSS-muis volgen

Traditionele muistracering is het werk van JavaScript dat de X / Y-coördinaten van de gebruiker op de pagina rapporteert.

Technisch gezien heb je nog steeds JavaScript nodig om deze coördinaten te verzamelen en iets nuttigs met ze te doen. Maar dit fragment laat zien dat je een pure CSS-muistraceringsfunctie kunt ontwerpen die elke beweging van de gebruiker volgt.

Kan hier niet echt praktisch gebruik van bedenken, maar het kan leuk zijn op een grap.

Zie de pen Experimentele pure CSS-muistracering door Momcilo Popov ( @Momciloo ) aan CodePen .

6. Plat Pretpark

We hebben allemaal vector iconen en illustraties gezien ontworpen voor het web . Maar hoe zit het met vectorillustraties op volledige pagina's die zijn ontworpen met onbewerkte CSS- en SVG-code?

Deze pretpark ontwerp is een experimenteel project dat alleen werkt in door SVG ondersteunde browsers. Maar in die moderne browsers wordt het foutloos weergegeven en heeft elk element een zeer realistische plaatsing op de pagina.

De animaties zijn zeker indrukwekkend, maar het is de nauwkeurigheid van de SVG-elementen die ook mijn aandacht trekken. Over een paar jaar zullen we dit soort illustraties op het web mogelijk alleen in code vinden zonder afbeeldingsbestanden.

Zie de pen Platte ontwerp pretpark svg door Lina (animatie aangedreven door CSS) door Vladimir Gashenko ( @gxash ) aan CodePen .

7. Möbius in 3D

Het ontwerpen van een herhalende CSS-animatie zoals het Möbius stripconcept is best moeilijk. Maar voeg wat 3D-elementen en verschillende gradiënten toe? Nu heb je een echte uitdaging.

Dit fragment is behoorlijk indrukwekkend gezien hoe soepel het eruit ziet en hoe weinig code wordt gebruikt (slechts 90 regels CSS). Met Haml hebt u slechts 6 regels code nodig om ook het hele concept te maken.

Ik geef toe dat dit niet super handig zou zijn op een echte website, maar het is een bewijs van hoeveel je kunt doen met een paar dozijn regels HTML en CSS.

Zie de pen Möbius 6hedrons (pure CSS) door Ana Tudor ( @thebabydino ) aan CodePen .

8. Custom Map Creator

Nadat u deze webapp een paar seconden hebt gebruikt, kunt u er zeker van zijn dat deze op JavaScript werkt. Het dynamische gedrag zoals 3D-rotatie en terreinplaatsing zijn allemaal tekenen van een lieve JS-webapp.

Maar deze kaartmaker UI door Vincent Durand is eigenlijk 100% pure CSS. De pijlen voor rotatie, het rotatie-effect zelf en alle click-to-place-functies worden uitgevoerd op CSS.

Het is de moeite waard om te vermelden hoe dit hele concept wordt weergegeven met behulp van 3D-kubussen. De blokken zelf werken als 3D-elementen en je kunt de blokken draaien door ze gewoon te laten zweven.

Zonder twijfel een van de gekste toepassingen voor CSS die ik in lange tijd heb gezien.

Zie de pen Volledige CSS-kaartmaker door Vincent Durand ( @onediv ) aan CodePen .

9. Zuivere CSS iOS 7-pictogrammen

Dit project is iets minder interactief, maar nog steeds net zo adembenemend. Ontwikkelaar Peter Schmiz nam de hoofdtabel opnieuw op iOS 7 app-pictogrammen pure HTML en CSS gebruiken.

Geen van deze pictogrammen gebruikt SVG's of afbeeldingsbestanden. Elk element in elk pictogram is hard gecodeerd in HTML met een span / div-element en vervolgens gestileerd met behulp van CSS. Het gekste is hoe accuraat deze zijn!

De volledige set bevat 22 pictogrammen en ze zijn allemaal erg goed. Ik ben het meest onder de indruk van de aandacht voor detail voor pictogrammen zoals Kaarten en Weer. Gewoon meer bewijs dat je met voldoende tijd en geduld vrijwel alles in CSS kunt ontwerpen.

Zie de pen iOS 7-pictogrammen met pure CSS door Peter Schmiz ( @peterschmiz ) aan CodePen .

10. Slack Loader met één element

Het opnieuw maken van de Slack-laadanimatie met CSS3 is absoluut indrukwekkend. Maar dit fragment recreëert de Slack-lader met slechts één element op de pagina. Dat is wat ik toewijding noem.

Het totale CSS-aantal voor dit fragment is iets meer dan 100 regels, inclusief de Slack-logokleuren en de animatie-effecten.

Ik kan niet zeggen of dit idee zou werken voor andere beladen pictogrammen, maar ik ben zeker onder de indruk van deze.

Zie de pen Slack-lader met één element door CrocoDillon ( @CrocoDillon ) aan CodePen .

11. Geanimeerde 3D-staafdiagrammen

Je vindt tientallen aangepaste 3D-barontwerpen in CodePen allemaal met hun eigen animaties. Maar deze 3D-balken door Rafael González opvallen voor alle andere moderne CSS-staafdiagrammen.

Elk van deze grafieken uitvoeren op flexbox voor containers, zodat ze automatisch worden aangepast, afhankelijk van het aantal balken dat u toevoegt en hoe groot de container is. Bovendien wordt elk staafdiagram geanimeerd wanneer het in beeld wordt geschoven, en dat alles wordt beheerd via pure CSS.

En aangezien de grootte van elke staaf in em's wordt uitgevoerd, kunt u elke afzonderlijke balk aanpassen om op natuurlijke wijze te schalen op basis van de lettergroottes van de browser. Een handig voorbeeld dat bewijst dat moderne CSS een stuk flexibeler is dan ooit tevoren.

Zie de pen Pure CSS-bars door Rafael González ( @rgg ) aan CodePen .