Það er mikið sem þú getur gert með bara CSS og vafra. Frábærir verktaki elska að ýta umslaginu og sýna hversu mikið það er mögulegt.
Þó að tilraunaverkefni eru ekki alltaf gagnlegar á vinnustöðum, eru þau ótrúlega hvetjandi og fræðandi.
Við höfum skipulagt handfylli af CSS verkefnum sem sýna sannan kraft CSS. Þetta eru allir farfuglaheimili á CodePen svo þú getur jafnvel skoðað og klónið kóðann til að sjá hvernig þeir virka.
Þetta Sass hleðsla síðu notar hreyfimyndir og resizable þætti til að búa til endurtaka hleðsluáhrif.
Flestir ættu að viðurkenna þessa hleðsluhugmynd frá Facebook sem notar minni útgáfu af þessum lóðréttum barloader. En flestir vefskoðarar nota hreyfimyndir þar sem myndirnar eru í samræmi við allar vélar.
Þessi CSS3 hleðsla bar sannar að með einhverjum skapandi hugsun að geta endurbyggt næstum hvaða fjör stíl sem þú vilt.
Sjá pennann Loading bars eftir MaxStalker ( @MaxStalker ) á CodePen .
Hér er eitt flóknasta CSS verkefnið sem ég gæti fundið á netinu. Þetta dynamic sólkerfis hönnun eftir Malik Dellidj keyrir á hreinu CSS án nokkurra mynda .
Sérhver plánetur er veittur í CSS þ.mt snúningshraða. Þetta verkefni er ætlað að vera nákvæm líkan af sólkerfinu og það lögun jafnvel raunhæft interstellar bakgrunn til að ræsa.
Ég get ekki ímyndað mér hversu lengi þetta tók bara til að gera plánetuna tákn, hvað þá að fá hreyfimyndina rétt. En þar sem það er vilji er leið.
Sjá pennann Sólkerfi fjör - Hreint CSS eftir Malik Dellidj ( @kowlor ) á CodePen .
Ég hélt aldrei að ég myndi sjá daginn þegar klassískt Windows minesweeper gæti verið spilað nota hreint CSS . En þökk sé verktaki Bali Balo þessi dagur er kominn.
Athugaðu þetta virkar ekki nákvæmlega eins og hefðbundin Minesweeper því það heldur ekki fram á réttan hátt. En það fylgir tíma nákvæmlega og það notar ekki sleik JavaScript.
Einhvern veginn lítur viðmótið ótrúlega nálægt upprunalegu Minesweeper UI og það keyrir allt á CSS. Þó að það sé ekki fullkomið eftirmynd, þá er það nógu nálægt því að leika mig í nokkrar umferðir.
Sjá pennann Pure CSS minesweeper eftir Bali Balo ( @bali_balo ) á CodePen .
Á yfirborðinu þetta skipta skipta kann að líta frekar einfalt út. Það liggur í gegnum gátreitinn og sendir gögn inn á bakhliðina, en það er ekki raunverulega áhrifamikill hluti.
Þessi skipti hefur nokkrar aðgerðir sem gera það einn af bestu framhliðinni á /
Einhvern veginn er þetta á / af rofi afla allra notenda smella og notar þennan atburð til að hreyfa dag / nótt skipta svæðið í skoðun. Sól og tungl táknið hönnun eru einnig fallega stílhrein miðað við að þeir keyra á ekkert nema CSS.
Sjá pennann Hreint Css "dag og nótt" skipta eftir Benjamin Réthoré ( @bnthor ) á CodePen .
Hefðbundin músarakstur er verk JavaScript sem skýrir notandans X / Y hnit á síðunni.
Tæknilega þarftu samt JavaScript til að safna þessum hnitum og gera eitthvað gagnlegt við þá. En þetta stykki sýnir að þú getur hannað hreint CSS músarsporunaraðgerð sem fylgir hverri hreyfingu notandans.
Get ekki raunverulega hugsað um hagnýtan notkun fyrir þetta en það gæti verið gaman á stríðssvæði.
Sjá pennann Tilraunir hreint CSS músar mælingar eftir Momcilo Popov @Momciloo ) á CodePen .
Við höfum öll séð vektoratákn og myndir hannað fyrir vefinn . En hvað um myndir með fullri síðu vektor sem er hannaður með hrár CSS og SVG kóða?
Þetta skemmtigarður hönnun er tilraunaverkefni sem aðeins virkar í SVG-studdum vafra. Samt í þessum nútíma vafra gerir það gallalaus og hvert frumefni hefur mjög raunhæft staðsetningu á síðunni.
Fjörin eru vissulega áhrifamikill en það er nákvæmni SVG þættanna sem einnig ná athygli minni. Á nokkrum árum gætum við fundið þessar tegundir af myndum á vefnum sem keyrir eingöngu í kóða án myndskrár.
Sjá pennann Íbúðabyggð skemmtigarður svg eftir Lina (fjör knúin af CSS) eftir Vladimir Gashenko ( @gxash ) á CodePen .
Hönnun endurtaka CSS fjör eins Möbius ræmur hugtakið er nokkuð erfitt. En bæta við í sumum 3D þætti og mismunandi stigum? Nú hefur þú alvöru áskorun.
Þessi útskrift er alveg áhrifamikill með hliðsjón af því hversu lítið það lítur út og hversu lítið kóða er notað (aðeins 90 línur af CSS). Með Haml þarftu aðeins 6 línur af kóða til að búa til allt hugtakið líka.
Ég viðurkenni að þetta væri ekki mjög gagnlegt á alvöru vefsíðu en það er vitnisburður um hversu mikið þú getur gert með nokkrum tugum línum HTML og CSS.
Sjá pennann Möbius 6hedrons (hreint CSS) eftir Ana Tudor ( @thebabydino ) á CodePen .
Eftir að þú hefur notað þetta webapp í nokkrar sekúndur getur þú fundið það sjálft að það keyrir á JavaScript. The dynamic hegðun eins og 3D snúningur og landslag staðsetningu eru öll merki um sætur JS webapp.
En þetta kortafyrirtæki HÍ eftir Vincent Durand er í raun 100% hreint CSS. Örvarnar til snúnings, snúningsáhrifin sjálfir og öll smelltu til að setja upp eiginleika keyra á CSS.
Það er þess virði að minnast á hvernig þetta allt hugtak er veitt með því að nota 3D teningur líka. Stöðin sjálfir vinna sem 3D þættir og þú getur snúið teningunum bara með sveima.
Eflaust er einn af the craziest notar fyrir CSS ég hef séð í langan tíma.
Sjá pennann Fullur CSS Map Creator eftir Vincent Durand ( @onediv ) á CodePen .
Þetta verkefni er svolítið minna gagnvirkt en samt alveg eins stórkostlegt. Hönnuður Peter Schmiz endurskapaði alla helstu IOS 7 forritatákn nota hreint HTML og CSS.
Ekkert af þessum táknum notar SVG eða myndskrár. Sérhver þáttur í hverju tákni er harður dulmáli í HTML með span / div frumefni og síðan stíll með CSS. The craziest hluti er hversu nákvæm þetta eru!
Fullt sett inniheldur 22 tákn og þau eru öll falleg blettur á. Ég er mjög hrifinn af smáatriðum fyrir smáatriði eins og Kort og Veður. Bara meira sönnun þess að með nægum tíma og þolinmæði geturðu nokkurn veginn hannað neitt í CSS.
Sjá pennann IOS 7 tákn með hreinu CSS eftir Peter Schmiz @peterschmiz ) á CodePen .
Endurbyggja slaka hleðslu fjör með CSS3 er örugglega áhrifamikill. En þetta stykki endurskapar Slack Loader með aðeins einum þáttum á síðunni. Það er það sem ég kalla vígslu.
Heildarfjöldi CSS telja fyrir þetta útfærslu er rúmlega 100 línur sem innihalda slaka lógó liti og fjör áhrif.
Ég get ekki sagt hvort þessi hugmynd myndi virka fyrir aðra vörumerki hleðslu tákn en ég er vissulega hrifinn af þessu.
Sjá pennann Einstaklingur þáttur Slack loader eftir CrocoDillon ( @CrocoDillon ) á CodePen .
Þú munt finna heilmikið af sérsniðnum 3D bar hönnun í CodePen allt með eigin hreyfimyndir þeirra. En þessar 3D bars eftir Rafael González standa frammi fyrir öllum öðrum nútíma CSS-barritum.
Hver af þessum töflum hlaupa á flexbox fyrir ílát svo þau verða sjálfkrafa eftir því hversu margar stafir þú bætir við og hversu stór ílátið er. Auk þess er hvert strikamynd hreyfimyndir þegar það glærur í sýn, sem öll er stjórnað með hreinu CSS.
Og þar sem stærð hvers stíls rennur í em er hægt að stilla hvert stök í mælikvarða náttúrulega byggt á leturstærðum vafrans. Nifty dæmi sanna að nútíma CSS er allt miklu sveigjanlegri en nokkru sinni fyrr.
Sjá pennann Pure CSS Bars eftir Rafael González ( @rgg ) á CodePen .