Iesācēja ceļvedis CSS3

Šis raksts ir daļa no mūsu "HTML5 / CSS3 konsultāciju sērija" - veltīts, lai palīdzētu jums kļūt par labāku dizaineru un / vai izstrādātāju. Noklikšķiniet šeit lai redzētu vairāk rakstu no vienas sērijas.

Kopš 2005. gada paziņojuma daudzu dizaineru un izstrādātāju uzmanība ir bijusi vērojama un uzraudzīta, ja tiek izstrādāts 3. līmenis vai labāk pazīstams kā CSS3. Visi no mums satraukti, lai iegūtu mūsu rokās jaunās CSS3 iezīmes - teksta ēnas, robežas ar attēliem, necaurredzamību, vairākus fonus utt..

Šobrīd ne visi CSS3 selektori vēl nav pilnībā atbalstīti. Bet tas nenozīmē, ka mēs nevaram jautri izmēģināt jaunas CSS3 lietas. Šis ieraksts ir veltīts visiem dizaineriem un izstrādātājiem, kuri jau ir iepazinušies ar CSS 2.1 un vēlas, lai jūsu CSS3.0 jūsu rokas tiktu netīrītas.

Tas ir noderīgu CSS3 lasījumu, paraugu kodu, padomu, konsultāciju, apkrāptu lapu un citu apkopojums. Jūtieties brīvi, lai tos izmantotu savos projektos, tikai pārliecinieties, vai tas ir saderīgs ar nesaderīgām pārlūkprogrammām.

Darba sākšana ar CSS3

Ievads CSS3

CSS un CSS3 oficiālais ievads (ceļvedis). Šis dokuments sniedz jums vispārēju priekšstatu par CSS3 attīstību.

CSS3: ņemiet vērā nākamo līmeni

CSS3 priekšrocības ar CSS3 īpašību un selektoru skaidrojumiem un piemēriem.

Vairāki triki ar CSS3

Webmonkey sniedz jums vairākus pamata trikus CSS3, ieskaitot noapaļotas robežas, robežas, pilienveida ēnas, attēlu trikus un citus.

Intervija: Seši jautājumi ar Eric Meyer par CSS3

Six Revision ļaudis intervēja Eric Meyer ar vērtīgiem ieskatiem un atbildēm par CSS3.

CSS3: progresīva uzlabošana

Kā jūs varat izmantot graciozās (vai progresīvās) uzlabošanas metodes, lai izmantotu CSS3 funkcijas pārlūkos, kas tos atbalsta, vienlaikus nodrošinot, ka jūsu kods joprojām nodrošinās apmierinošu lietotāja pieredzi vecākām pārlūkprogrammām, kas vēl neatbalsta šīs funkcijas.

CSS3: fons un robežas

Noapaļotas robežas (robežu rādiuss)

Rokasgrāmata, lai izveidotu noapaļotu robežu ar CSS3 robežu rādiuss īpašums.

Noapaļotas robežas ar attēlu (attēlu attēli)

Kā izmantot attēlus ar robežām robežu attēls īpašums.

CSS3 robežas, foni un kastes

Detalizēts paskaidrojums ar jaunu CSS3 rekvizītu piemēriem, piemēram: fona klips, fona izcelsme, fona pielikums, kastes ēna, kastes dekorēšana-pārtraukums, robežu rādiuss un robežu attēls.

CSS3: Teksts

Spiediena efekts

Izveidojiet vienkāršu spiediena efektu ar CSS3.

Seši teksta efekti, izmantojot teksta ēnu

Teksta efekti ietver: vintage / retro, neona, ieliktnis, anaglijs, uguns un galda spēle.

Skaista tipogrāfija

Kā veikt pamata iezīmēšanu un pārveidot to par pievilcīgu un skaistu tipogrāfisku dizainu, izmantojot tīru CSS3.

Teksta rotācija

Izmanto attēla sprite un CSS apkaisa, lai iegūtu lietas, kas atrodas pareizi.

Kontūras teksts

Kā pievienot tekstu vai insultu savam tekstam, izmantojot CSS3 teksta takts īpašums.

Teksta maskēšanas efekts

Interaktīvs teksta maskēšanas efekts, izmantojot teksta ēna CSS īpašums.

Saites nudging (animācija) ar CSS3

Ditch Javascript un radiet nudge efektu pilnībā ar CSS3.

CSS atlases stils

Mainīt teksta atlases stilu ar CSS3.

CSS3: Izvēlne

Vairāku kolonnu saturs

Izmantojot CSS3, lai izveidotu kolonnu kopu savā tīmekļa vietnē, nenorādot atsevišķus slāņus un (vai) rindas katrai slejai.

Sexy Tooltips ar Just CSS

Kā izmantot attīstīto CSS standartu var uzlabot dažus jaukus pārlūkprogrammas padomus.

Vairāk rīku padomu:

Pure CSS3 rīku padoms
Rīku padomi ar CSS3.

Nolaižamā izvēlne

Kā izveidot Apple.com līdzīgu daudzlīmeņu nolaižamo izvēlni, izmantojot robežu rādiuss, kastes ēna, un teksta ēna.

CSS3 tikai sakopta teritorija

Noklikšķiniet uz cilnes, paslēpt visus paneļus, rādīt vienu, kas atbilst cilnei, kas noklikšķinājusi uz visiem - ar CSS.

3D lentes ar CSS3

Izveidojiet jaukas izskata 3D lentes ar tikai CSS3.

CSS3: Drop shadow

Drop ēnu attēlu

Parādiet vairākas metodes un dažas no iespējamām parādībām ēnu nokrišanai, neizmantojot attēlus.

Glow cilnes ar Box Shadow

Kā izveidot intuitīvas un skaistas cilnes CSS3 bez attēla.

CSS3: pogas

Tutorial: Pretty pogas

Kā izveidot skaistas pāri pārlūkprogrammas prasībām atbilstošas CSS3 pogas, kas degradē graciozi.

Runas burbuļi

Dažādas runas burbulis efekta formas, kas izveidotas ar CSS 2.1 un uzlabotas ar CSS3.

Github līdzīgi pogas

Pogas, kas parāda, kas ir iespējams, izmantojot CSS3, vienlaikus saglabājot visvienkāršāko iespējamo atzīmi.

Vērpšanas, izbalēšanas ikonas ar CSS3 un MooTools

Kā izmantot CSS3 un MooTools, lai izveidotu dymaniskus, rotējošus elementus.

Attēla pārklājums

CSS3 robežu attēla īpašuma praktiska pielietošana.

Vairāk

CSS3 + Mootools. Eksperimentu piemērs motoolos. Tas pievieno CSS3 īpašības MooTools pamatstruktūras darbam.
Sprāgstošs logotips ar CSS3 un MooTools vai jQuery. Veikt statisku attēlu un padariet to par animētu, eksplodējošu ietekmi uz peli.
HTML 5 un CSS 3. HTML 5 un CSS 3 strauji iegūst popularitāti..
Vērpšanas stari ar CSS3 animācijām un JavaScript piemēru. Vienkāršs un smalks staru vērpšanas efekts attēla aizmugurē.
CSS3 Polaroid Photo Gallery. Kā veidot vēsa izskata Polaroid fotogrāfiju kaudzi ar tīru CSS stilu.
HTML 5 un CSS 3: metodes, ko drīz izmantosiet. Pārskats par blogu veidošanu no HTML5 un CSS3.