Aloittelijan opas CSS3 lle
Monet suunnittelijat ja kehittäjät ovat seuranneet ja seuranneet vuoden 2005 julkistamisen jälkeen Cascading Style Sheet -tason kehitystä tai sitä paremmin tunnettua nimellä CSS3. Kaikki meistä innostuvat saamaan käsiimme CSS3: n uusiin ominaisuuksiin - tekstin varjoihin, kuvien reunuksiin, opasiteettiin, monen taustan jne..
Nykyään kaikki CSS3: n valitsimet eivät ole vielä täysin tuettuja. Mutta se ei tarkoita, ettemme voi kokeilla uusia CSS3-tavaroita. Tämä viesti on omistettu kaikille suunnittelijoille ja kehittäjille, jotka tuntevat jo CSS 2.1: n ja haluavat saada kätesi likaisiksi CSS3.0: ssa.
Se on kokoelma hyödyllisiä CSS3-lukuja, näytekoodeja, vinkkejä, opetusohjelmia, huijausarkkeja ja paljon muuta. Voit vapaasti käyttää niitä projekteissasi, vain varmista, että se on kauniisti yhteensopimattomilla selaimilla.
CSS3: n käytön aloittaminen
Johdatus CSS3: een
CSS: n ja CSS3: n virallinen etenemissuunnitelma. Tämä asiakirja antaa yleiskuvan CSS3: n kehittämisestä.
CSS3: Suunnittele seuraava taso
CSS3: n edut, selitykset ja esimerkit CSS3-ominaisuuksista ja valikoimista.
Useita temppuja CSS3: n kanssa
Webmonkey tuo sinulle useita perusviittejä CSS3: ssa, mukaan lukien pyöristetyt reunat, reunukset, varjostukset, kuvan temput ja muut.
Haastattelu: Kuusi kysymystä Eric Meyerin kanssa CSS3: sta
Six Revisionin kansalaiset haastattelivat Eric Meyeriä arvokkailla näkemyksillä ja vastauksilla CSS3: lle.
CSS3: Progressive Enhancement
Miten voit käyttää graceful (tai progressiivisia) parannustekniikoita CSS3-ominaisuuksien käyttämiseksi niitä tukevissa selaimissa, samalla kun varmistat, että koodi tarjoaa edelleen tyydyttävän käyttäjäkokemuksen vanhemmissa selaimissa, jotka eivät vielä tue näitä ominaisuuksia.
CSS3: Taustaa ja rajoja
Pyöristetyt reunat (Raja-säde)
Opas pyöristetyn reunan luomiseen CSS3: n kanssa border-säde omaisuus.
Pyöristetyt reunat kuvan kanssa (Border-kuvia)
Miten rajattuja kuvia käytetään border-kuva omaisuus.
CSS3: n rajat, taustat ja laatikot
Yksityiskohtainen selitys esimerkkien kanssa uusista CSS3-ominaisuuksista, kuten: tausta-clip, tausta-alkuperää, tausta-kiinnitys, box-varjo, box-koristelu-break, border-säde ja border-kuva.
CSS3: Teksti
Korostusvaikutus
Luo yksinkertainen kohopainovaikutus CSS3: lla.
Kuusi tekstitehosteita tekstin varjolla
Tekstitehosteita ovat: vintage / retro, neon, inset, anaglyphic, palo- ja lautapeli.
Kaunis typografia
Miten otetaan käyttöön perusmerkintä ja muunnetaan se houkuttelevaksi ja kauniiksi typografiseksi malliksi puhtaalla CSS3: lla.
Tekstin kierto
Käyttää kuvaa sprite ja ripottele CSS saada asiat oikealle.
Outline-teksti
Miten lisätä ääriviivat tai aivohalvaus tekstiin CSS3: n avulla text-tahtinen omaisuus.
Tekstin peittovaikutus
Interaktiivinen tekstin peittoefekti käyttäen text-shadow CSS-ominaisuus.
Liitä nudging (animaatio) CSS3: n kanssa
Ditch Javascript ja luo nudge vaikutus kokonaan CSS3.
CSS-valintamuotoilu
Muuta tekstin valintatapaa CSS3: lla.
CSS3: Valikko
Useiden sarakkeiden sisältö
CSS3: n avulla voit luoda verkkosivustosi sarakkeita ilman erillisten kerrosten ja (tai) kohtien määrittämistä kullekin sarakkeelle.
Seksikäs työkalutyypit, joissa on Just CSS
Kehittyvän CSS-standardin käyttö voi parantaa hienoja selaimen välisiä työkaluvihjeitä.
Lisää työkaluvihjeitä:
- Puhdas CSS3-työkaluvihje
- CSS3: n työkaluvihjeet.
Pudotusvalikosta
Apple.comin monitasoisen avattavan valikon luominen käyttämällä border-säde, box-varjo, ja text-shadow.
CSS3-ainoa kerätty alue
Napsauta välilehteä, piilota kaikki paneelit, näytä vain välilehti vastaava napsauttamalla - kaikki CSS: llä.
3D-nauhat CSS3: lla
Luo mukavia näköisiä 3D-nauhoja, joissa on vain CSS3.
CSS3: Drop shadow
Pudota varjo kuvassa
Näytä useita tekniikoita ja joitakin mahdollisia esiintymisiä varjojen pudottamiseksi käyttämättä kuvia.
Glow-välilehdet, joissa on Box Shadow
Miten luoda intuitiivisia ja kauniita välilehtiä CSS3: ssa ilman kuvaa.
CSS3: Painikkeet
Opetusohjelma: Kauniita painikkeita
Miten luodaan kauniita, selaimeltaan yhteensopivia CSS3-painikkeita, jotka hajoavat sulavasti.
Puhekuplat
CSS 2.1: n avulla luodut ja CSS3: lla parannetut erilaiset puhekuplien vaikutukset.
Githubin samankaltaiset painikkeet
Kokoelma painikkeita, jotka osoittavat, mikä on mahdollista CSS3: n avulla, samalla kun säilytetään mahdollisimman yksinkertainen merkintä.
Spinning, Fading Icons CSS3: lla ja MooToolsilla
CSS3: n ja MooToolsin käyttäminen dymanisten, pyörivien elementtien luomiseen.
Kuvan peitto
CSS3-raja-kuvan ominaisuuden käytännön soveltaminen.
Lisää
- CSS3 + Mootools. Esimerkki kokeilusta moottooleissa. Tämä lisää CSS3-ominaisuudet MooToolsin ydinkehykseen.
- Räjähtävä logo, jossa on CSS3 ja MooTools tai jQuery. Ota staattinen kuva ja tee siitä animoitu, räjähtävä vaikutus hiireen.
- HTML 5: n ja CSS: n 3. teho. HTML 5 ja CSS 3 ovat nopeasti saamassa suosiotaan, Perishable Press on täällä selittämään, miten ja miksi.
- Spinning-säteet CSS3-animaatioiden ja JavaScript-esimerkin avulla. Yksinkertainen ja hienovarainen kehräysvaikutus kuvan takana.
- CSS3 Polaroid Photo Gallery. Miten rakentaa viileä näköinen pino Polaroid-kuvia, joissa on puhdas CSS-muotoilu.
- HTML 5 ja CSS 3: Tekniikat, joita pian käytät. Kävely läpi blogin rakentamisen HTML5: n ja CSS3: n avulla.
Cheatsheets & References
CSS3 Cheat Sheet (PDF)
Tulostettava cheatsheet, jossa on täydellinen luettelo kaikista ominaisuuksista, valintatyypit ja W3C: n nykyisen CSS3-määrityksen arvot.
CSS-tuki Opera 9.5: ssa
Täydellinen luettelo tuetuista CSS-valinnoista Opera 0.5: ssä.
Fontit, jotka ovat käytettävissä @ font-face-upottamiseen
Kattava luettelo fonteista, jotka on tällä hetkellä lisensoitu @ Font-face embedding.
CSS 3 -valitsijat - selitetty
Opas ja viittaus CSS3-valintalaitteisiin ja niiden malleihin.
CSS3-sääntöjen generaattori
CSS3-säännöt, joita voit kopioida ja liittää omaan tyylisivuosi.
CSS3 Napsauta kaaviota
Saat CSS3-tyylit, kuten laatikon koon, rajan säteen, tekstin varjon ja paljon muuta napsautuksen sisällä.
CSS-sisällön ja selaimen yhteensopivuus
Täydellinen luettelo sekä CSS: n että CSS3: n valintataulukoista selaimen yhteensopivuuden tarkistukseen.
