Det finns mycket du kan göra med bara CSS och en webbläsare. Bra utvecklare älskar att trycka på kuvertet och visa hur mycket som är möjligt.
Medan experimentella projekt inte alltid är användbara på produktionsplatser, är de otroligt inspirerande och pedagogiska.
Vi har organiserat en handfull CSS-projekt som visar upp CSSs verkliga kraft. Dessa är alla värd på CodePen så att du även kan studera och klona källkoden för att se hur de fungerar.
Detta Sass-laddningssida använder animerade gradienter och resizable element för att skapa en upprepad laddningseffekt.
De flesta bör känna igen den här laddningsanimationen från Facebook, som använder en mindre version av denna vertikala barlastare. Men de flesta webblastare använder animerade GIF-filer, eftersom bilderna är mer kompatibla med alla webbläsare.
Denna CSS3 laddningsbar visar att med lite kreativt tänkande kan man bygga upp nästan vilken animationsstil du vill ha.
Se pennan Laddar staplar av MaxStalker ( @MaxStalker ) på CodePen .
Här är ett av de mest komplexa CSS-projekt som jag kunde hitta online. Denna dynamik solsystem design av Malik Dellidj körs på ren CSS utan några bilder .
Varje planet är gjord i CSS inklusive rotationshastigheten. Detta projekt är tänkt att vara en exakt modell av solsystemet och det innehåller även en realistisk interstellär bakgrund för att starta.
Jag kan inte föreställa mig hur länge det bara tog för att göra planeten ikoner, än mindre få animationshastigheterna rätt. Men där det finns en vilja finns det ett sätt.
Se pennan Solsystemanimering - Ren CSS av Malik Dellidj ( @kowlor ) på CodePen .
Jag trodde aldrig att jag skulle se dagen då klassisk Windows-minesweeper kunde spelas använder ren CSS . Men tack vare utvecklaren Bali Balo har den dagen kommit.
Observera att detta inte fungerar exakt lika bra som den traditionella Minesweeper, eftersom den inte håller poängen korrekt. Men det spårar tid noggrant och det använder inte en slick av JavaScript.
På något sätt ser gränssnittet överraskande nära det ursprungliga Minesweeper-gränssnittet och det går alla på CSS. Även om det kanske inte är en perfekt replika är det tillräckligt nära för att jag ska spela några rundor.
Se pennan Ren CSS minesweeper av Bali Balo ( @bali_balo ) på CodePen .
På ytan denna växelströmbrytare kan se ganska enkelt ut. Det går genom en checkbox-ingång och skickar data till backenden, men det är inte riktigt den imponerande delen.
Denna växel har några funktioner som gör den till en av de bästa fronten på / av-omkopplarna:
På något sätt kan den här på / av-omkopplaren fånga varje användarklick och använder den händelsen för att animera dag / natt-växlingsområdet i vyn. Solen och månen ikon designen är också snygg stiliserat med tanke på att de körs på annat än CSS.
Se pennan Ren CSS "dag och natt" växla av Benjamin Réthoré ( @bnthor ) på CodePen .
Traditionell musspårning är JavaScript-arbetet som rapporterar användarens X / Y-koordinater på sidan.
Tekniskt behöver du fortfarande JavaScript för att samla in dessa koordinater och göra något användbart med dem. Men det här snippet visar att du kan utforma en ren CSS musspårningsfunktion som följer användarens alla rörelser.
Kan inte riktigt tänka på en praktisk användning för det här, men det kan vara kul på en prankplats.
Se pennan Experimentell ren CSS musspårning av Momcilo Popov ( @Momciloo ) på CodePen .
Vi har alla sett vektorikoner och illustrationer utformad för webben . Men hur är det med fullsides vektorillustrationer utformade med rå CSS och SVG-kod?
Detta nöjesparksdesign är ett experimentellt projekt som bara fungerar i SVG-stödda webbläsare. Men i de moderna webbläsarna gör det felfritt och varje element har en mycket realistisk placering på sidan.
Animationerna är verkligen imponerande men det är noggrannheten hos SVG-elementen som också tar min uppmärksamhet. På några år kan vi hitta sådana slags illustrationer på webben som bara körs i kod utan några bildfiler.
Se pennan Plattforms nöjespark svg av Lina (animering drivs av CSS) av Vladimir Gashenko ( @gxash ) på CodePen .
Designa en upprepad CSS-animation som Möbius-stripkonceptet är ganska tufft. Men lägg till några 3D-element och varierande gradienter? Nu har du en riktig utmaning.
Denna kod är ganska imponerande med tanke på hur smidig det ser ut och hur lite kod används (endast 90 rader av CSS). Med Haml behöver du bara 6 rader med kod för att skapa hela konceptet också.
Jag ska erkänna att detta inte skulle vara super användbart på en riktig webbplats, men det är ett testamente för hur mycket du kan göra med några dussin rader av HTML och CSS.
Se pennan Möbius 6hedroner (ren CSS) av Ana Tudor ( @thebabydino ) på CodePen .
Efter att ha använt denna webbapp i några sekunder kan du känna dig säker på att den körs på JavaScript. De dynamiska beteenden som 3D-rotation och terrängplacering är alla tecken på en söt JS-webapp.
Men denna karta skapare användargränssnittet av Vincent Durand är faktiskt 100% ren CSS. Pilarna för rotation, själva rotationseffekten och alla klick-till-plats-funktioner körs på CSS.
Det är värt att nämna hur hela konceptet görs med hjälp av 3D-kuber också. Blocken själva fungerar som 3D-element och du kan rotera kuberna bara genom att sväva.
Det är utan tvekan en av de skrämmaste användningarna för CSS jag har sett på länge.
Se pennan Full CSS Map skapare av Vincent Durand ( @onediv ) på CodePen .
Projektet är lite mindre interaktivt men ändå lika häftigt. Utvecklare Peter Schmiz återskapade alla de viktigaste iOS 7-appikoner använder ren HTML och CSS.
Ingen av dessa ikoner använder någon SVG eller bildfiler. Varje element i varje ikon är hårdkodad till HTML med ett spännings / div-element, sedan utformat med hjälp av CSS. Den skrämmaste delen är hur exakt dessa är!
Den kompletta uppsättningen innehåller 22 ikoner och de är alla ganska fläckiga. Jag är mest imponerad av detaljerna för ikoner som kartor och väder. Bara mer bevis på att du med tillräckligt mycket tid och tålamod kan utforma någonting i CSS.
Se pennan IOS 7-ikoner med ren CSS av Peter Schmiz ( @peterschmiz ) på CodePen .
Återskapande av Slack loading animationen med CSS3 är definitivt imponerande. Men det här snippet återskapar Slack Loader med bara ett enda element på sidan. Det är vad jag kallar hängivenhet.
Den totala CSS-räkningen för det här koden är drygt 100 linjer som inkluderar Slack-logotypens färger och animeringseffekterna.
Jag kan inte säga om den här tanken skulle fungera för andra märkesladdade ikoner men jag är verkligen imponerad av den här.
Se pennan Enkelt element Slack Loader av CrocoDillon ( @CrocoDillon ) på CodePen .
Du hittar dussintals anpassade 3D-bardesigner i CodePen alla med egna animeringar. Men dessa 3D-barer av Rafael González utmärker sig för alla andra moderna CSS-stapeldiagram.
Var och en av dessa diagram springa på flexbox för behållare så de kommer automatiskt storlek beroende på hur många barer du lägger till och hur stor behållaren är. Plus varje stapeldiagram animerar när det glider in i vyn, som alla styrs via ren CSS.
Och eftersom varje stapels storlek körs i em kan du justera varje enskild stapel för att skala naturligt baserat på storleken på webbläsarens teckensnitt. Ett snyggt exempel som visar att den moderna CSS är mycket mer flexibel än någonsin tidigare.
Se pennan Rena CSS-barer av Rafael González ( @rgg ) på CodePen .