Voit tehdä paljon vain CSS: llä ja verkkoselaimella. Suuri kehittäjät rakastavat työntää kirjekuorta ja näyttää kuinka paljon on mahdollista.
Vaikka kokeelliset hankkeet eivät ole aina hyödyllisiä tuotantoalueilla, ne ovat uskomattoman inspiroivia ja koulutettuja.
Olemme organisoineet kourallisen CSS-projekteja, jotka esittelevät CSS: n todellisen voiman. Nämä kaikki on CodePen-palvelin, joten voit jopa tutkia ja kloonata lähdekoodin nähdäksesi, miten ne toimivat.
Tämä Sassin lataussivu käyttää animoituja kaltevuuksia ja muokattavia elementtejä toistuvan latausvaikutuksen luomiseksi.
Useimmat ihmiset tunnistavat tämän latausanimaation Facebookista, joka käyttää pienempää versiota tästä pystypalkin lataajasta. Useimmat web-kuormaajat käyttävät animoituja GIF-kuvia, koska kuvat ovat yhteensopivia kaikkien selainten kanssa.
Tämä CSS3-latauspalkki osoittaa, että luovan ajattelun avulla voi rakentaa lähes haluamasi animaatiotyypin.
Katso kynä Palkkien lataaminen MaxStalker ( @MaxStalker ) päällä CodePen .
Tässä on yksi monimutkaisimmista CSS-projekteista, joita voisin löytää verkossa. Tämä dynaaminen aurinkokunnan suunnittelu Malik Dellidj toimii puhtaalla CSS: llä ilman kuvia .
Jokaisella planeetalla tehdään CSS mukaan lukien pyörimisnopeudet. Tämän projektin on tarkoitus olla aurinkokunnan tarkka malli ja siinä on jopa realistinen tähtienvälinen tausta käynnistämiseen.
En voi kuvitella, kuinka kauan tämä tapahtui pelkästään planeettakuvakkeiden tekemiseksi, puhumattakaan animaation nopeudesta. Mutta missä on tahto, on tapa.
Katso kynä Aurinkokunnan animaatio - Pure CSS esittäjä (t): Malik Dellidj ( @kowlor ) päällä CodePen .
En koskaan ajatellut näkisin päivää, jolloin klassista Windows miinakenttiä voitaisiin pelata käyttäen puhdasta CSS: ää . Kuitenkin kehittäjän Bali Balon ansiosta tuo päivä on tullut.
Huomaa tämä ei toimi täsmälleen samalla tavoin kuin perinteinen Minesweeper koska se ei pidä pisteet oikein. Mutta se jäljittää aikaa tarkasti ja se ei käytä lick of JavaScript.
Jonkin verran käyttöliittymä näyttää yllättävän lähellä alkuperäistä Minesweeper-käyttöliittymää ja kaikki toimii CSS: ssä. Vaikka se ei ehkä ole täydellinen kopio, se on riittävän lähellä rullata minua pelaamaan muutamia kierroksia.
Katso kynä Pure CSS miinanraivaaja Bali Balo ( @bali_balo ) päällä CodePen .
Pinnalla tämä vaihtokytkin voi näyttää melko yksinkertaiselta. Se kulkee valintaruudun syöttöön ja siirtää tietoja taustapuolelle, vaikka se ei olekaan vaikuttava osa.
Tässä valitsimessa on muutamia ominaisuuksia, jotka tekevät siitä yhden parhaista käyttöliittymän päälle / pois päältä:
Jotenkin tämä päälle / pois-kytkin saa jokaisen käyttäjän klikkauksen ja käyttää tätä tapahtumaa animoimaan päivän / yön vaihtokentän näkymään. Aurinko- ja kuunkuvakkeet ovat myös hienosti tyyliteltyjä, koska ne toimivat vain CSS: ssä.
Katso kynä Pure Css "päivä ja yö" vaihtaa esittäjä (t): Benjamin Réthoré ( @bnthor ) päällä CodePen .
Perinteinen hiiren seuranta on JavaScript-työ, joka ilmoittaa käyttäjän X / Y-koordinaatit sivulla.
Teknisesti JavaScript tarvitsee vielä kerätä nämä koordinaatit ja tehdä mitään hyödyllistä heidän kanssaan. Mutta tämä katkelma osoittaa, että voit suunnitella puhtaan CSS-hiiren seurantaominaisuuden, joka seuraa käyttäjän kaikkia liikkeitä.
Ei voi oikeastaan ajatella käytännöllistä käyttöä, mutta se voisi olla hauskaa pokeria sivustolla.
Katso kynä Kokeellinen puhdas CSS-hiiren seuranta esittäjä (t): Momcilo Popov ( @Momciloo ) päällä CodePen .
Olemme kaikki nähneet vektorikuvakkeita ja kuvituksia suunniteltu verkkoon . Mutta entä koko sivun vektorikuvitukset, jotka on suunniteltu raaka-CSS- ja SVG-koodeilla?
Tämä huvipuiston suunnittelu on kokeellinen projekti, joka toimii vain SVG-tuetuissa selaimissa. Silti näissä moderneissa selaimissa se tekee virheetöntä ja jokaisella elementillä on hyvin realistinen sijoittelu sivulle.
Animaatiot ovat varmasti vaikuttavia, mutta SVG-elementtien tarkkuus myös tarttuu huomiomme. Muutamassa vuodessa saatamme löytää tämäntyyppiset kuvitukset, jotka toimivat pelkästään koodissa ilman minkäänlaisia kuvatiedostoja.
Katso kynä Flat design huvipuisto svg by Lina (animaatio powered by CSS) esittäjä (t): Vladimir Gashenko ( @gxash ) päällä CodePen .
Suunnittele toistuva CSS-animaatio kuten Möbius-nauhatekniikka on melko kovaa. Mutta lisää joitakin 3D-elementtejä ja vaihtelevia kaltevuuksia? Nyt sinulla on todellinen haaste.
Tämä katkelma on varsin vaikuttava, kun otetaan huomioon, kuinka sujuvaa se näyttää ja kuinka vähän koodia käytetään (vain 90 riviä CSS: ää). Hamlin kanssa tarvitaan vain 6 riviä koodia, jotta myös koko konsepti voidaan luoda.
Myönnän, että tämä ei olisi erittäin hyödyllinen todellinen verkkosivusto, mutta se on osoitus siitä, kuinka paljon voit tehdä muutaman kymmenen riviä HTML ja CSS.
Katso kynä Möbius 6hedrons (puhdas CSS) esittäjä (t): Ana Tudor ( @thebabydino ) päällä CodePen .
Kun olet käyttänyt tätä verkkosappi muutaman sekunnin ajan, saatat olla varma siitä, että se toimii JavaScriptin avulla. Dynaamiset käyttäytymiset, kuten 3D-kierto ja maastokohtaus, ovat merkkejä makeasta JS-verkkosovelluksesta.
Mutta tämän kartan luojan käyttöliittymä Vincent Durand on oikeastaan 100% puhdas CSS. Pyörimisnuolet, itse pyörimisvaikutus ja kaikki klikkauspaikan ominaisuudet toimivat CSS: ssä.
On syytä mainita, kuinka tämä koko konsepti on tehty 3D-kuutioilla. Lohkot toimivat 3D-elementteinä ja voit kiertää kuutiota vain leijuvalla.
Epäilemättä on yksi kauheimmista CSS: n käytöstä, jonka olen nähnyt pitkään aikaan.
Katso kynä Täysi CSS-kartan luoja esittäjä (t): Vincent Durand ( @onediv ) päällä CodePen .
Tämä projekti on hieman vähemmän vuorovaikutteinen, mutta silti aivan yhtä henkeäsalpaava. Kehittäjä Peter Schmiz loi kaikki tärkeimmät iOS 7-sovelluksen kuvakkeet käyttäen puhdasta HTML ja CSS.
Mikään näistä kuvakkeista ei käytä mitään SVG- tai kuvatiedostoja. Jokaisen kuvakkeen jokainen elementti on koodattu HTML: ksi span / div-elementillä, sitten tyylillä CSS: llä. Huonoin osa on, kuinka tarkkoja nämä ovat!
Koko sarja sisältää 22 kuvaketta ja ne ovat kaikki melko paikalla. Olen eniten vaikuttanut huomiota yksityiskohtaisiin kuvakkeisiin, kuten Kartat ja Sää. Vain enemmän todisteita siitä, että tarpeeksi aikaa ja kärsivällisyyttä voit melko paljon suunnitella CSS: ssä.
Katso kynä iOS 7 -kuvakkeet puhtaalla CSS: llä esittäjä (t): Peter Schmiz ( @peterschmiz ) päällä CodePen .
Löytävän latauksen animaation luominen uudelleen CSS3: lla on varmasti vaikuttava. Mutta tämä katkelma luo löysä latauslaitteen vain yhdellä elementillä sivulla. Tätä kutsun omistautuksi.
Tämän koodin täydellinen CSS-määrä on hieman yli 100 riviä, joka sisältää Löysä-logo-värit ja animaation vaikutukset.
En voi sanoa, jos tämä ajatus toimisi muiden merkkituotteiden kuormituskuvakkeiden suhteen, mutta olen varmasti vaikuttunut tästä.
Katso kynä Yhden elementin löysäkuormaaja esittäjä (t): CrocoDillon ( @CrocoDillon ) päällä CodePen .
Löydät kymmeniä räätälöityjä 3D-palkin malleja CodePenissä omilla animaatioillaan. Mutta nämä 3D-palkit Rafael González erottuvat kaikista muista moderneista CSS-palkkikaavioista.
Jokainen näistä kaavioista ajaa flexboxilla kontit niin, että ne automaattisesti koko riippuvat siitä, kuinka monta palkkia lisäät ja kuinka suuri kontti on. Jokainen pylväskaavio animoi, kun se liukuu näkymään, ja kaikkia niitä ohjataan puhtaalla CSS: llä.
Ja koska jokaisen palkin koko on emin, voit säätää jokaisen palkin luonnollisesti selaimen fonttikoon perusteella. Erinomainen esimerkki siitä, että nykyaikainen CSS on paljon joustavampi kuin koskaan aiemmin.
Katso kynä Pure CSS-palkit esittäjä (t): Rafael González ( @rgg ) päällä CodePen .