Det er mye du kan gjøre med bare CSS og en nettleser. Store utviklere elsker å presse konvolutten og vise hvor mye som er mulig.
Selv om eksperimentelle prosjekter ikke alltid er nyttige på produksjonssteder, er de utrolig inspirerende og lærerikt.
Vi har organisert en håndfull CSS-prosjekter som viser den sanne kraften til CSS. Disse er alle vert på CodePen, slik at du kan til og med studere og klone kildekoden for å se hvordan de fungerer.
Dette Sass lasteside bruker animerte gradienter og resizable elementer for å skape en repeterende lasteffekt.
De fleste bør gjenkjenne denne laste animasjonen fra Facebook, som bruker en mindre versjon av denne vertikale barlasteren. Men de fleste nettlastere bruker animerte GIF-filer, siden bildene er mer kompatible med alle nettlesere.
Denne CSS3-lastebaren viser at med litt kreativ tenkning kan du gjenoppbygge nesten hvilken som helst animasjonsstil du vil ha.
Se pennen Laster inn barer av MaxStalker ( @MaxStalker ) på CodePen .
Her er et av de mest komplekse CSS-prosjektene jeg kunne finne på nettet. Denne dynamikken solsystem design av Malik Dellidj kjører på ren CSS uten noen bilder .
Hver planet er gjengitt i CSS inkludert rotasjonshastighetene. Dette prosjektet er ment å være en nøyaktig modell av solsystemet, og den har til og med en realistisk interstellar bakgrunn for oppstart.
Jeg kan ikke forestille meg hvor lenge dette tok bare for å gjøre planeten ikoner, enn si få animasjonshastighetene til høyre. Men hvor det er en vilje, er det en måte.
Se pennen Solsystem animasjon - Ren CSS av Malik Dellidj ( @kowlor ) på CodePen .
Jeg trodde aldri at jeg skulle se dagen da klassisk Windows-minesveiper kunne spilles bruker ren CSS . Likevel takk til utvikleren Bali Balo den dagen har kommet.
Merk dette virker ikke akkurat så godt som den tradisjonelle Minesweeper fordi den ikke holder score riktig. Men det sporer tid nøyaktig og det bruker ikke et slikk av JavaScript.
På en eller annen måte ser grensesnittet overraskende nær det originale Minesweeper-grensesnittet, og det hele går på CSS. Selv om det kanskje ikke er en perfekt kopi, er det nær nok til å rulle meg inn i å spille noen runder.
Se pennen Ren CSS minesweeper av Bali Balo ( @bali_balo ) på CodePen .
På overflaten denne bryteren kan se ganske enkelt ut. Den går gjennom en avkrysningsboksinngang og overfører data til baksiden, selv om det ikke er den imponerende delen.
Denne vekselen har noen funksjoner som gjør den til en av de beste frontend på / av brytere:
På en eller annen måte vil denne på / av-bryteren få tak i hver brukerklikk og bruker den hendelsen for å animere dag / natt-bytteområdet til visning. Solen og månenikonet designene er også pent stylert vurderer de kjører på bare CSS.
Se pennen Ren CSS "dag og natt" bytte av Benjamin Réthoré ( @bnthor ) på CodePen .
Tradisjonell musesporing er arbeidet med JavaScript som rapporterer brukerens X / Y-koordinater på siden.
Teknisk trenger du fremdeles JavaScript for å samle disse koordinatene og gjøre noe nyttig med dem. Men denne brikken viser at du kan designe en ren CSS-musesporingsfunksjon som følger brukerens hver bevegelse.
Kan egentlig ikke tenke på en praktisk bruk for dette, men det kan være gøy på et pranksted.
Se pennen Eksperimentell ren CSS musesporing av momcilo popov @Momciloo ) på CodePen .
Vi har alle sett vektorikoner og illustrasjoner designet for nettet . Men hva med fullsides vektorillustrasjoner designet med rå CSS og SVG-kode?
Dette fornøyelsespark design er et eksperimentelt prosjekt som bare fungerer i SVG-støttede nettlesere. Men i de moderne nettleserne gjør det feilfritt, og hvert element har en veldig realistisk plassering på siden.
Animasjonene er absolutt imponerende, men det er nøyaktigheten til SVG-elementene som også tar min oppmerksomhet. Om noen år finner vi kanskje slike illustrasjoner på nettet som bare kjører uten kodefiler.
Se pennen Flat design fornøyelsespark svg av Lina (animasjon drevet av CSS) av Vladimir Gashenko ( @gxash ) på CodePen .
Utforming av en gjentatt CSS-animasjon som Möbius strip-konseptet er ganske tøft. Men legg til noen 3D-elementer og varierende gradienter? Nå har du en virkelig utfordring.
Denne brikken er ganske imponerende vurderer hvor glatt det ser ut og hvor lite kode er brukt (kun 90 linjer med CSS). Med Haml trenger du bare 6 linjer med kode for å lage hele konseptet også.
Jeg innrømmer at dette ikke ville være super nyttig på en ekte nettside, men det er et testament til hvor mye du kan gjøre med et par dusin linjer med HTML og CSS.
Se pennen Möbius 6hedroner (ren CSS) av Ana Tudor ( @thebabydino ) på CodePen .
Etter at du har brukt denne webappen i noen sekunder, kan du føle deg trygg på at den kjører på JavaScript. Den dynamiske oppførselen som 3D-rotasjon og terrengplassering er alle tegn på en søt JS webapp.
Men dette kartskaperen brukergrensesnitt av Vincent Durand er faktisk 100% ren CSS. Pilene for rotasjon, selve rotasjonseffekten, og alle klikk-til-plass-funksjonene kjører på CSS.
Det er verdt å nevne hvordan dette hele konseptet gjengis ved hjelp av 3D-kuber også. Blokkene fungerer selv som 3D-elementer, og du kan rotere kubene bare ved å svinge.
Uten tvil en av de sprøste brukerene til CSS jeg har sett på lenge.
Se pennen Full CSS Map Creator av Vincent Durand ( @onediv ) på CodePen .
Dette prosjektet er litt mindre interaktiv, men likevel like fantastisk. Utvikler Peter Schmiz gjenskapte alle de viktigste iOS 7 appikoner bruker ren HTML og CSS.
Ingen av disse ikonene bruker noen SVG eller bildefiler. Hvert element i hvert ikon er hardkodet til HTML med et span / div-element, og deretter utformet med CSS. Den galeste delen er hvor nøyaktig disse er!
Hele settet inneholder 22 ikoner, og de er alle ganske flotte. Jeg er mest imponert over oppmerksomheten på detaljer for ikoner som Maps og Weather. Bare mer bevis på at med nok tid og tålmodighet kan du ganske mye designe noe i CSS.
Se pennen iOS 7 ikoner med rent CSS av Peter Schmiz ( @peterschmiz ) på CodePen .
Å skape Slack loading animasjonen med CSS3 er definitivt imponerende. Men denne brikken gjenskaper Slack Loader med bare et enkelt element på siden. Det er det jeg kaller engasjement.
Den totale CSS-tellingen for denne brikken er litt over 100 linjer, som inkluderer Slack-logo-farger og animasjonseffekter.
Jeg kan ikke si om denne ideen ville fungere for andre merkede lastingsikoner, men jeg er absolutt imponert over denne.
Se pennen Enkelt element Slack loader av CrocoDillon ( @CrocoDillon ) på CodePen .
Du finner dusinvis av tilpassede 3D-bardesigner i CodePen alle med sine egne animasjoner. Men disse 3D-barene av Rafael González skiller seg ut for alle de andre moderne CSS-bardiagrammer.
Hvert av disse kartene Kjør på flexbox for containere, så de vil automatisk størrelse, avhengig av hvor mange barer du legger til og hvor stor beholderen er. Pluss hvert linjediagram animerer når det glir inn i visning, som alle styres gjennom ren CSS.
Og siden hver stangs størrelse kjører i em, kan du justere hver enkelt stang til å skalere naturligvis basert på fontstørrelsen på nettleseren. Et fint eksempel som viser at det moderne CSS er mye mer fleksibelt enn noensinne.
Se pennen Rene CSS-barer av Rafael González ( @rgg ) på CodePen .