50 + mahtavia CSS3-tekniikoita parempia muotoja varten
CSS3 on vauhdittunut, vaikka standardia ei ole edes viimeistelty.
Siellä on satoja oppitunteja opettamaan suunnittelijoita käyttämään sitä, mutta valitettavasti monet heistä kattavat saman kentän.
Ja jotkut oppitunnit opettavat suunnittelijoita tekemään asioita, joita he eivät ehkä usko tarpeellisiksi, vaikka tekniikoita yleensä voidaan mukauttaa sopivaksi projektin mukaan.
Alla on yli viisikymmentä mahtavaa CSS3-opetusta. Monet ovat ehdottomasti CSS- ja HTML-pohjaisia, toiset taas sisältävät JavaScriptin.
Jos sinulla on suosikkitekniikka tai opetusohjelma, jota ei ole mainittu alla, jaa se kommentteihin!
Käyttämällä CSS3: ta kuvaamattomaan kuvaukseen
CSS3: ssa on useita uusia menetelmiä, jotka mahdollistavat useiden erittäin monimutkaisten grafiikan luomisen puhtaalla CSS: llä ja ilman kuvia. Tässä on kourallinen parhaita esimerkkejä siellä.
Pure CSS iPhone -kuvake
Seos rajoja, muunnoksia ja kaltevuuksia, jotka tekevät animoitua kuvaa iPhonesta.
Opera Browser -logon luominen CSS3: ssa
Puhdas kuva Opera-logosta, joka on tehty CSS3-tekniikoilla.
Aurinkokuntaamme CSS3: lla
Aurinko-järjestelmän liukas näköinen esitys animaatioefekteillä ..
Analoginen kellovaikutus
Luo viileä analoginen kello käyttäen vain CSS3: ta ja jqueryä.
Varjo kokeiluja
Tämä opetusohjelma näyttää, miten CSS-varjoja voidaan luoda erilaisten tehosteiden, kuten kuun pimeän sivun, varjostetun jaksollisen pöydän ja jopa psykedeelisen "rakkaus-juoman" luomiseksi.
Polaroid Style -kuvien luominen vain CSS: llä
Tämä opetusohjelma käyttää sekä CSS2- että CSS3-tehosteita Polaroid-tyylin lisäämiseen yksinkertaiseen luetteloon.
CSS3-teksti, layout ja väritehosteet
CSS3: ta voi käyttää monien erilaisten fanien animaatioiden ja grafiikan käyttöön, mutta se sopii myös ulkoasulta, tekstiä ja värituotteita, joita saatat aikaisemmin käyttää Photoshopissa.
Utilitzing CSS3-sarakkeet
Koodaaminen puhdas monipatsainen CSS3-moduuli.
Yleinen CSS3-toteutus
Yleiskatsaus CSS3: n eduista.
Styling Linkit CSS3: n kanssa
Neljä erilaista tapaa muotoilla erilaisia linkkejä CSS3: n kanssa
CSS3 pystysuora harmonikka
Vyöhykkeet ja siirtymät tekevät tästä harmonisointivalikosta, joka hajoaa vanhojen selainten tilatulle luettelolle.
Super Awesome CSS3 -painikkeet
Värilliset, gradienttipainikkeet pudotusvalolla, jotka toimivat vaaleilla tai tummilla taustoilla eivätkä vaadi kuvia!
Photoshopin tyylipainikkeet CSS3: lla
Yhteenveto CSS3-painikkeiden luomisesta ilman kuvia ja Photoshopia.
Css Gradient Text Effect
Ohjeet ainutlaatuisen tekstivaikutelman tekemiseen soveltamalla tekstuurikarttaa tekstiin. Voit käyttää kaltevuuksia tai kuvioita todella tekstipopin tekemiseen.
Joitakin CSS3 JavaScript-tehosteiden vaihtoehtoja
7 tapaa korvata yleisesti käytössä olevat JavaScript-tehosteet CSS3: n avulla, jotta sivustosi on valmis tulevaisuuteen.
Kohokuvioitu CSS3-tekstitoiminto
Kohokuvioidun tekstitoiminnon luominen ilman Photoshop-selaimen hakkereita.
Ymmärrä CSS3-värin arvot
Kaikki CSS3: n uusista värivaihtoehdoista.
Rich Efektien luominen CSS3: lla
CSS-siirtymiä ja muunnoksia voidaan yhdistää erilaisten vaikutusten tekemiseksi.
CSS3-Bokeh-efektin tekeminen
Kyky käyttää kulmia ja läpinäkyvyyttä CSS3: n kanssa tekee tästä klassisesta vaikutuksesta mahdollisen.
CSS3-sarakkeet
Hyvä videoesittely tutkittavaksi CSS3-sarakkeiden käyttämisestä ulkoasulle.
Fancy Lists CSS3: lla
Cool luettelomerkki tyyliin käyttämällä CSS3 tehdä hienoja valintaruutuja.
Hyvin liukas Imagless Infoboxes CSS3: lla
CSS3: n mahdollistavat tekniikat tekevät näistä laatikoista todella pop.
Puhekuplat
Raja-säde ja pseudo-elementtien muunnos tekevät nämä muodot mahdolliseksi.
Flash-tyyliset kuvansiirtoefektit
Älykäs tapa käyttää CSS-animaatiovaikutusta.
Tumblrin päivitysnäytön uudistaminen CSS3: lla
CSS3-suunnitteluvaikutus, joka heikkenee hyvin vanhemmilla selaimilla.
Suppea CSS3-tyyppikuvaksi, jonka olette uskova, valmistettiin Photoshopissa
Tämä 13 minuutin videotyökalu näyttää, miten voit luoda kauniin, hienovaraisen 3D-typografisen vaikutelman kokonaan CSS3: lla.
Tekstin kierto CSS: llä
Tässä on hieman vanhempi tekniikka, joka kertoo, kuinka luodaan selaimella yhteensopiva teksti, joka pyöritetään pystyakselin suuntaamiseksi.
Luo kirjoitusvaikutus CSS-tekstin varjolla
Tämä Line25-opetusohjelma näyttää, miten voit käyttää teksti-varjojen avulla kohopainatyyliä verkkosivustollasi.
Mahtava CSS3-valokuvagalleria jQueryn kanssa
Tämä koodi luo Polaroid-tyylisen kuvagallerin, jossa on vedä ja pudota jakamisvaihtoehto.
Mahtavia peitteitä
Tämä Zurbin opetusohjelma näyttää, kuinka voit luoda kuvien päällekkäisyyksiä käyttämällä CSS3-raja-ominaisuuksia, joita voidaan käyttää näyttämään lisätietoa kuvasta, kun niitä liikutetaan.
Mahtavia Inline-lomakekirjoja
Tämä opetusohjelma näyttää, miten voit luoda sisäisiä lomaketikettejä, jotka eivät katoa, kun kävijät aloittavat kirjoittamisen.
CSS3 3D -efektit
Animoitu CSS3-kuutio
Ainutlaatuinen 3D-animoitu kuutio, jossa käytetään 3D-muunnoksia CSS: n tyylillä. Kuvaa voidaan kääntää nuolinäppäimillä näyttämään tiedot kummassakin kasvossa.
CSS3 3D nauhat
Anna syvyydesi suunnittelulle käyttämällä näitä helppoja CSS3-CD-nauhoja.
Animoitu 3D-juliste
Elokuvan julisteiden näyttäminen kuvatuilla CSS3: n hämmästyttävällä 3D-näkökulmalla.
3D CSS3 Coke Can
Vierityspalkin vetäminen tekee tästä virtuaalisesta Cokesta rullan edestakaisin.
CSS-varjot
Luo luovasti varjoja irrottamalla ne elementistä.
CSS3-animaatio
Twitterin Fail Whale -elokuvan animoitu esitys CSS3: lla
Erittäin tyylikäs CSS3-käyttäjä, joka yllättäen huonontuu jonkin verran vanhemmissa selaimissa.
Parallax Starfield taustaa
Tähdet liikkuvat vasemmalta oikealle sisällön taakse tämän klassisen avaruusmatkan avulla.
Sisällysluettelon näyttäminen ja piilottaminen CSS3: lla
Laajentaminen ja sopiminen lokerot ja valikkopuita ilman javascriptiä.
Floating Follow -välilehti CSS3: lla
Laita navigointi- tai yhteystietokuvakkeet helpoksi tämän hyödyllisen menetelmän avulla.
CSS3 Drop-in Modal Windows
Pari yhteistä modaalipaneelia, jotka on tuotettu käyttämällä CSS3-tehosteita ja muunnoksia.
Spinnerit käyttävät vain CSS3: ta
Kuormausanimaatioiden luominen vain CSS3: lla ja ilman animoituja gifejä!
Sosiaalisten kuvakkeiden näyttäminen CSS3: n avulla
Viileä haalistumisen vaikutus sosiaalisten kuvakkeiden näyttämiseen puhtaalla CSS3: lla.
CSS3-sarjakuva-animaatio
Luodaan koko flash-tyylinen animaatio käyttämällä vain CSS3: ta ja jqueryä.
Animoitu maisema CSS3: n avulla
Vuoria ja pilviä ja vettä kaikki animoitu CSS3: lla.
Nice Animated Scrolling Image Captions
CSS3-siirtymien avulla voit tehdä hämmästyttäviä asioita tekstikuvien avulla. Tässä on yksi esimerkki.
Elastinen pienoiskuvavalikko
Sarja kuvia, jotka laajenevat ja vetäytyvät, kun niitä leijuu päälle.
Stacked, dynaamiset index-kortit
Erinomainen animaatioefekti, jota voitaisiin soveltaa useisiin malleihin.
Värikäs kello CSS: n ja jQueryn kanssa
Tämä opetusohjelma näyttää, kuinka luoda todella mahtava värikäs kellon CSS: n ja jQueryn avulla, joka koostuu kolmesta erillisestä lastaustyyppisestä piireistä, jotka näyttävät tunteja, minuutteja ja sekuntia.
Pure CSS3 At-Walkerissa
Tämä on vaikuttava esimerkki, joka käyttää CSS3: ta (ei JavaScriptia, ei Flashia) animoitujen At-At Walkerin luomiseksi Star Warsista. Ainoa haittapuoli on se, että se on tällä hetkellä nähtävissä vain Webkit-selaimissa (Safari ja Chrome).
Luo jQuery Content Slider Pure CSS: n avulla
Opi luomaan puhtaasti CSS jQuery -tyylinen liukusäädin tällä opetusohjelmalla.
CSS3-pudotusvalikko
Tämä WebDesignerWallin opetusohjelma näyttää, miten luodaan selaimella yhteensopiva CSS3-pudotusvalikko, joka toimii myös selaimissa, jotka eivät tue CSS3: ta (vaikka rajoitettu muotoilu).
Kirjoitettu yksinomaan WDD: lle Cameron Chapman .
Jos tiedät muista korkealaatuisista CSS3-opetusohjelmista, joita ei ole mainittu edellä ja haluat jakaa, tee se kommentteihin!