CSS3 algaja juhend

See artikkel on osa meie "HTML5 / CSS3 juhendite seeria" - pühendatud selleks, et aidata teil paremini disainer ja / või arendaja. Kliki siia et näha sama seeria rohkem artikleid.

Alates 2005. aasta väljakuulutamisest on paljude disainerite ja arendajate poolt tähelepanelikult jälgitud ja jälgitud Cascading Style Sheet'i 3. taseme arendamist või paremini tuntud kui CSS3. Meil kõigil on hea meel, et saame kätte CSS3 uued funktsioonid - teksti varjud, kujutiste piirid, läbipaistmatus, mitu tausta jne..

Tänaseks ei ole kõik CSS3 valijad veel täielikult toetatud. Aga see ei tähenda, et me ei saa uut CSS3 kraami katsetada. See postitus on pühendatud kõigile disaineritele ja arendajatele, kes juba tuttavad CSS 2.1-ga ja soovivad oma käed CSS3.0-s määrduda.

See on kasulik CSS3 lugemine, näidiskoodid, näpunäited, õpetused, pettused ja palju muud. Võite vabalt kasutada neid oma projektides, veenduge, et see langeb kokkusobimatutele brauseritele.

Alustamine CSS3-ga

Sissejuhatus CSS3

CSSi ja CSS3 ametlik tutvustus (teekaart). See dokument annab teile üldise idee CSS3 arendamise kohta.

CSS3: võtke disain järgmisele tasandile

CSS3 eelised koos CSS3 omaduste ja selektorite selgitustega ja näidetega.

Mitmed nipid CSS3-ga

Webmonkey toob teid läbi mitmeid põhilisi trikke CSS3-s, kaasa arvatud ümardatud piirid, piirid, varjundid, pildi nipid ja muud.

Intervjuu: kuus küsimust Eric Meyeriga CSS3 kohta

Six Revision'i inimesed küsitlesid Eric Meyerit väärtuslike teadmiste ja vastustega CSS3 kohta.

CSS3: progressiivne täiustamine

Kuidas kasutada graatsilisi (või progressiivseid) täiustamismeetodeid, et kasutada neid toetavaid brausereid CSS3-funktsioone, tagades samas, et teie kood annab ikka veel rahuldava kasutuskogemuse vanemates brauserites, mis neid funktsioone veel ei toeta.

CSS3: Taust ja piirid

Ümardatud piirid (raadius)

Juhend CSS3-ga ümarate piiride loomiseks raadius vara.

Ümardatud piirid pildiga (piiripildid)

Kuidas kasutada pilte piiridega piiripilt vara.

CSS3 piirid, taustad ja kastid

Üksikasjalik selgitus uute CSS3 omaduste näidetega nagu: tausta-klipp, taustal, taust-manus, kast-vari, karp-kaunistus-murda, raadius ja piiripilt.

CSS3: tekst

Kõrvaklappide efekt

Looge CSS3 abil lihtsa kõrgsageduse efekt.

Kuus teksti efekti, kasutades teksti varju

Tekstefektideks on: vintage / retro, neoon, inset, anaglyphic, tulekahju ja lauamäng.

Ilus tüpograafia

Kuidas võtta põhilist märgistust ja muuta see atraktiivseks ja ilusaks tüpograafiliseks disainiks puhta CSS3 kaudu.

Teksti pööramine

Kasutab kujutise sprite ja puistata CSS, et asjad asetseksid õigesti.

Põhitekst

Kuidas lisada tekstile CSS3 abil tekst või stroke teksti-insult vara.

Teksti varjamise efekt

Interaktiivne teksti varjamine efekti abil teksti vari CSS-i omadus.

Linkimine (animatsioon) CSS3-ga

Ditch Javascript ja luua nudge mõju täielikult CSS3.

CSS valikukujundus

Muuda teksti valiku stiili CSS3-ga.

CSS3: Menüü

Mitme veeru sisu

Kasutades CSS3-d, et luua oma veebisaidil veergude kogum, ilma et peaksite määrama iga veeru jaoks eraldi kihid ja (või) lõiked.

Seksikas tööriistakirjad Just CSS-iga

Areneva CSS-i standardi kasutamine võib suurendada mõningaid arusaadavaid brauserivahendeid.

Rohkem tööriistu:

Pure CSS3 tööriista
CSS3-ga tööriistavõtmed.

Rippmenüü

Kuidas luua Apple.com-i samasugune mitmetasandiline rippmenüü, kasutades raadius, kast-vari, ja teksti vari.

Ainult CSS3-t hõlmav piirkond

Klõpsa vahekaardil, peida kõik paneelid, näidata lihtsalt vahekaardile klõpsatust - kõik koos CSS-iga.

3D-lindid CSS3-ga

Looge ainult CSS3-ga ilusad 3D-lindid.

CSS3: langev vari

Pildi varju langus

Näita mitmeid meetodeid ja mõningaid võimalikke varjundeid varjude kukutamiseks ilma pilte kasutamata.

Glow Tabs koos Box Shadow'ga

Kuidas luua intuitiivseid ja ilusaid kaarte CSS3-s ilma kujutisteta.

CSS3: nupud

Õpetus: Päris nupud

Kuidas luua ilusaid, brauseriga ühilduvaid CSS3 nuppe, mis lagunevad graatsiliselt.

Jutumullid

CSS 2.1 abil loodud ja CSS3-ga täiustatud kõnepubi efekti erinevad vormid.

Githubi sarnased nupud

Nuppude kogum, mis näitab, mis on võimalik CSS3 abil, säilitades samas ka lihtsaima märgistuse.

Ketrus, Fading ikoonid CSS3 ja MooTools

Kuidas kasutada CSS3 ja MooTools dünaamiliste, pöörlevate elementide loomiseks.

Pildi ülekate

CSS3 piiripiltide praktiline rakendamine.

Veel

CSS3 + Mootools. Näide katsetest mootoolides. See lisab CSS3 omadused MooToolsi põhiraami tööle.
Plahvatav logo CSS3 ja MooToolsi või jQueryga. Võtke staatiline pilt ja tehke see hiirega animeeritud ja plahvatavaks efektiks.
HTML 5 ja CSS 3. HTML 5 ja CSS 3 on kiiresti populaarseks muutumas, kiiresti riknev press on siin, et selgitada, kuidas ja miks.
Ketruskiired koos CSS3 animatsioonidega ja JavaScript-näitega. Lihtne ja peen ray ketrusefekt pildi taga.
CSS3 Polaroid fotogalerii. Kuidas ehitada lahedat polaroid fotot puhta CSS-stiiliga.
HTML 5 ja CSS 3: tehnikad, mida peate peagi kasutama. Läbimurre blogi loomise kohta HTML5 ja CSS3 abil.