Der er meget, du kan gøre med bare CSS og en webbrowser. Store udviklere elsker at skubbe konvolutten og vise, hvor meget der er muligt.
Selvom eksperimentelle projekter ikke altid er nyttige på produktionssteder, er de utroligt inspirerende og uddannelsesmæssige.
Vi har organiseret en håndfuld CSS-projekter, der fremhæver CSS's sande magt. Disse er alle hostet på CodePen, så du kan endda studere og klone kildekoden for at se, hvordan de virker.
Det her Sass indlæser side bruger animerede gradienter og resizable elementer for at skabe en gentagende belastningseffekt.
De fleste mennesker bør genkende denne indlæsnings animation fra Facebook, der bruger en mindre version af denne lodrette stanglader. Men de fleste weblæssere bruger animerede GIF'er, da billederne er mere kompatible med alle browsere.
Denne CSS3 loading bar beviser at med en vis kreativ tænkning kan man genopbygge næsten enhver animationsstil, du vil have.
Se pennen Indlæser søjler af MaxStalker ( @MaxStalker ) på CodePen .
Her er et af de mest komplekse CSS-projekter, jeg kunne finde online. Dette dynamiske solsystem design af Malik Dellidj kører på ren CSS uden nogen billeder .
Hver planet er gengivet i CSS inklusive rotationshastighederne. Dette projekt er beregnet til at være en nøjagtig model af solsystemet, og den indeholder endda en realistisk interstellær baggrund til opstart.
Jeg kan ikke forestille mig, hvor længe dette tog bare for at gøre planeten ikoner, endsige få animationshastighederne rigtigt. Men hvor der er en vilje, er der en vej.
Se pennen Solar System animation - Pure CSS af malik dellidj ( @kowlor ) på CodePen .
Jeg troede aldrig, jeg ville se dagen da klassisk Windows minesweeper kunne spilles bruger ren CSS . Men takket være udvikleren Bali Balo er den dag kommet.
Bemærk dette virker ikke lige så godt som den traditionelle minesvinder, fordi den ikke holder score korrekt. Men det sporer tid præcist, og det bruger ikke et slikk af JavaScript.
På en eller anden måde ser interfacet overraskende tæt på den oprindelige Minesweeper UI, og det hele kører på CSS. Selvom det måske ikke er en perfekt replika, er det tæt nok til at få mig til at spille nogle runder.
Se pennen Ren CSS minesweeper af Bali Balo ( @bali_balo ) på CodePen .
På overfladen denne skifte switch kan se ret simpelt ud. Det løber gennem en afkrydsningsfelt indgang og sender data til backend, selvom det ikke er den imponerende del.
Denne skifte har et par funktioner, der gør det til en af de bedste frontend-tænd / sluk-switche:
På en eller anden måde henter denne tænd / sluk-knap hver enkelt brugers klik og bruger den begivenhed til at animere dag / nat-skifteområdet til visning. Sol og måne ikon design er også pænt stiliseret i betragtning af at de løber på andet end CSS.
Se pennen Ren CSS "dag og nat" skifte af Benjamin Réthoré ( @bnthor ) på CodePen .
Traditionel musesporing er JavaScript-arbejdet, der rapporterer brugerens X / Y-koordinater på siden.
Teknisk har du stadig brug for JavaScript for at samle disse koordinater og gøre noget nyttigt med dem. Men dette uddrag viser, at du kan designe en ren CSS-musekursfunktion, der følger brugerens hver bevægelse.
Kan ikke rigtig tænke på en praktisk brug for dette, men det kunne være sjovt på et pranksted.
Se pennen Eksperimentel ren CSS musesporing af momcilo popov @Momciloo ) på CodePen .
Vi har alle set vektorikoner og illustrationer designet til internettet . Men hvad med full-page vektorillustrationer designet med rå CSS og SVG-kode?
Det her forlystelsespark design er et eksperimentelt projekt, der kun virker i SVG-understøttede browsere. Men i disse moderne browsere gør det fejlfrit, og hvert element har en meget realistisk placering på siden.
Animationerne er helt sikkert imponerende, men det er nøjagtigheden af SVG-elementerne, der også tager min opmærksomhed. Om nogle år kan vi finde disse slags illustrationer på nettet, der kun kører i kode uden nogen billedfiler.
Se pennen Pladsformet forlystelsespark svg af Lina (animation drevet af CSS) af Vladimir Gashenko ( @gxash ) på CodePen .
Designe en gentagende CSS animation som Möbius strip konceptet er ret hårdt. Men tilføj nogle 3D-elementer og varierende gradienter? Nu har du en reel udfordring.
Denne uddrag er ganske imponerende i betragtning af, hvor glat det ser ud og hvor lille kode bruges (kun 90 linjer af CSS). Med Haml behøver du kun 6 linjer kode for at skabe hele konceptet.
Jeg indrømmer, at dette ikke ville være super nyttigt på en rigtig hjemmeside, men det er et testamente for, hvor meget du kan gøre med et par dusin linjer af HTML og CSS.
Se pennen Möbius 6hedroner (ren CSS) af Ana Tudor ( @thebabydino ) på CodePen .
Efter at have brugt denne webapp i et par sekunder kan du være sikker på, at den kører på JavaScript. Den dynamiske adfærd som 3D rotation og terræn placering er alle tegn på en sød JS webapp.
Men dette kort skaber brugergrænseflade af Vincent Durand er faktisk 100% ren CSS. Pilene til rotation, selve rotationseffekten og alle klik-til-sted-funktionerne kører på CSS.
Det er værd at nævne, hvordan hele dette koncept gøres ved hjælp af 3D-kuber også. Blokerne arbejder selv som 3D-elementer, og du kan rotere kuberne bare ved at svinge.
Uden tvivl en af de skøreste anvendelser til CSS jeg har set i lang tid.
Se pennen Fuld CSS Map Creator af Vincent Durand ( @onediv ) på CodePen .
Dette projekt er lidt mindre interaktivt, men stadig lige så betagende. Udvikler Peter Schmiz genskabte alle de vigtigste iOS 7-appikoner ved hjælp af ren HTML og CSS.
Ingen af disse ikoner bruger nogen SVG'er eller billedfiler. Hvert element i hvert ikon er hårdt kodet til HTML med et span / div element, og derefter stylet ved hjælp af CSS. Den skøreste del er, hvor præcis det er!
Det komplette sæt indeholder 22 ikoner, og de er alle smukke. Jeg er mest imponeret over opmærksomheden på detaljer for ikoner som Maps og Weather. Bare mere bevis på, at du med nok tid og tålmodighed kan temmelig meget designe noget i CSS.
Se pennen iOS 7 ikoner med ren CSS af Peter Schmiz ( @peterschmiz ) på CodePen .
Genskabelse af Slack loading animation med CSS3 er absolut imponerende. Men dette uddrag genskaber Slack Loader med blot et enkelt element på siden. Det er det, jeg kalder dedikation.
Den samlede CSS-tæller for dette uddrag er lige over 100 linjer, der omfatter Slack-logo farverne og animationseffekterne.
Jeg kan ikke sige, om denne ide ville fungere for andre branded loading ikoner, men jeg er bestemt imponeret over denne.
Se pennen Enkelt element Slack loader af CrocoDillon ( @CrocoDillon ) på CodePen .
Du finder dusinvis af brugerdefinerede 3D-bardesigner i CodePen alle med deres egne animationer. Men disse 3D barer af Rafael González skiller sig ud for alle de andre moderne CSS-bargrafer.
Hvert af disse diagrammer løbe på flexbox for containere, så de vil automatisk størrelse afhængigt af hvor mange barer du tilføjer og hvor stor beholderen er. Plus hvert stregdiagram animerer, når det glider i visning, som alle styres gennem ren CSS.
Og da hver stangs størrelse kører i em, kan du justere hver enkelt stang til skala naturligt baseret på browserens skrifttypestørrelser. Et godt eksempel viser, at den moderne CSS er meget mere fleksibel end nogensinde før.
Se pennen Rene CSS-barer af Rafael González ( @rgg ) på CodePen .