Pradedančiųjų vadovas CSS3

Šis straipsnis yra dalis mūsų „HTML5 / CSS3 vadovų serija“ - skirta padėti jums tapti geresniu dizaineriu ir (arba) kūrėju. Paspauskite čia pamatyti daugiau tos pačios serijos straipsnių.

Nuo 2005 m. Paskelbimo, daugelio dizainerių ir kūrėjų atidžiai stebimas ir stebimas 3 lygio „Cascading Style Sheet“ arba geriau žinomas kaip „CSS3“ kūrimas. Visi mes džiaugiamės, kad galėtume įveikti naujas CSS3 savybes - teksto šešėlius, sienas su vaizdais, neskaidrumą, kelis fonus ir pan..

Šiuo metu ne visi CSS3 selektoriai yra visiškai palaikomi. Bet tai nereiškia, kad negalime išbandyti naujų CSS3 dalykų. Šis pranešimas skirtas visiems dizaineriams ir kūrėjams, kurie jau yra susipažinę su CSS 2.1 ir nori, kad CSS3.0 jūsų rankose būtų purvinas.

Tai naudingų CSS3 skaitymų, pavyzdžių kodų, patarimų, vadovėlių, „cheat“ lapų ir kt. Rinkinys. Nesivaržykite juos naudoti savo projektuose, tiesiog įsitikinkite, kad jis patenka į nesuderinamas naršykles.

Darbo pradžia su CSS3

Įvadas į CSS3

CSS ir CSS3 oficiali įvadas (planas). Šiame dokumente pateikiama bendra CSS3 kūrimo idėja.

CSS3: projektuokite į kitą lygį

CSS3 privalumai su CSS3 savybių ir selektorių paaiškinimais ir pavyzdžiais.

Keletas triukų su CSS3

„Webmonkey“ atneša jums keletą pagrindinių CSS3 gudrybių, įskaitant suapvalintas sienas, sienas, šešėlių šešėlius, vaizdo gudrybes ir kt..

Interviu: šeši klausimai su Eric Meyer dėl CSS3

„Six Revision“ žmonės apklausė Ericą Meyerį su vertingais įžvalgomis ir atsakymais į CSS3.

CSS3: progresyvus tobulinimas

Kaip galite naudoti grakštus (ar pažangius) patobulinimo metodus, kad būtų galima naudoti CSS3 funkcijas naršyklėse, kurios jas palaiko, tuo pačiu užtikrindami, kad jūsų kodas vis tiek suteiks patenkinamą naudotojo patirtį senesnėse naršyklėse, kurios dar nepalaiko šių funkcijų.

CSS3: fonas ir sienos

Suapvalintos sienos (pasienio spindulys)

Gidas suapvalinta siena su CSS3 pasienio spindulys nuosavybė.

Suapvalintos sienos su vaizdu (pasienio vaizdai)

Kaip naudoti vaizdus, esančius pasienyje sienos vaizdas nuosavybė.

CSS3 sienos, fonai ir dėžės

Išsamus paaiškinimas su naujų CSS3 savybių pavyzdžiais, pavyzdžiui: fono klipas, fono kilmė, fono priedas, langelis-šešėlis, dėžutės apdaila-pertrauka, pasienio spindulys ir sienos vaizdas.

CSS3: Tekstas

Spaudos efektas

Sukurkite paprastą didelio slėgio efektą su CSS3.

Šeši teksto efektai naudojant teksto šešėlį

Teksto efektai apima: derliaus / retro, neono, įdėklo, anaglijų, gaisro ir stalo žaidimus.

Graži tipografija

Kaip imtis pagrindinio žymėjimo ir paversti jį patraukliu ir gražiu tipografiniu dizainu per gryną CSS3.

Teksto sukimas

Naudoja vaizdo sprite ir CSS pabarstyti, kad padėtumėte teisingai.

Kontūro tekstas

Kaip pridėti tekstą ar stroke, naudodami CSS3 teksto smūgis nuosavybė.

Teksto maskavimo efektas

Interaktyvus teksto maskavimo efektas naudojant teksto šešėlis CSS nuosavybė.

Nuorodos (animacija) susiejimas su CSS3

„Ditch“ „Javascript“ ir sukurkite nudge efektą visiškai su CSS3.

CSS atrankos stilius

Pakeiskite teksto pasirinkimo stilių su CSS3.

CSS3: Meniu

Kelių stulpelių turinys

Naudodamiesi CSS3, norėdami sukurti savo stulpelių rinkinį, nepriskirdami atskirų sluoksnių ir (arba) dalių kiekvienai stulpai.

Sexy Tooltips su „Just CSS“

Kaip naudotis besikeičiančiu CSS standartu, galima pagerinti kai kuriuos puikius naršyklės įrankių patarimus.

Daugiau įrankių patarimų:

Grynas CSS3 įrankinis
Įrankių patarimai su CSS3.

Išskleidžiamasis meniu

Kaip sukurti „Apple.com“ daugiapakopį išskleidžiamąjį meniu naudojant pasienio spindulys, langelis-šešėlis, ir teksto šešėlis.

CSS3-Tik Tabbed Area

Spustelėkite skirtuką, paslėpkite visus skydus, parodykite skirtuką, atitinkantį skirtuką tiesiog spustelėję - visi su CSS.

3D juostelės su CSS3

Sukurkite gražią 3D juostą su tik CSS3.

CSS3

Nuleiskite šešėlį vaizde

Parodykite kelis metodus ir kai kuriuos galimus pasirodymus, kaip nuleisti šešėlius nenaudojant vaizdų.

„Glow Tabs“ su „Box Shadow“

Kaip sukurti intuityvius ir gražius skirtukus CSS3 be vaizdo.

CSS3: mygtukai

Pamoka: gana mygtukai

Kaip sukurti gražius kryžminės naršyklės reikalavimus atitinkančius CSS3 mygtukus, kurie blogėja.

Pokalbio burbulai

Įvairios kalbos burbulo efekto formos, sukurtos naudojant CSS 2.1 ir sustiprintos su CSS3.

Github panašūs mygtukai

Mygtukų, rodančių, kas įmanoma naudojant CSS3, rinkinys, tuo pačiu išlaikant paprasčiausią galimą žymėjimą.

Verpimo, blukimo piktogramos su CSS3 ir MooTools

Kaip naudoti „CSS3“ ir „MooTools“ kurti dymaninius, besisukančius elementus.

Vaizdo perdanga

Praktinis CSS3 sienos įvaizdžio nuosavybės taikymas.

Daugiau

CSS3 + Mootools. Eksperimentavimo pavyzdys „motorools“. Tai prideda CSS3 savybes į pagrindinį „MooTools“ rėmo darbą.
Sprogstamasis logotipas su CSS3 ir MooTools arba jQuery. Paimkite statinį vaizdą ir padarykite jį animuotu, sprogiuoju efektu pele.
HTML 5 ir CSS 3. „HTML 5“ ir „CSS 3“ populiarumas sparčiai populiarėja..
Verpimo spinduliai su CSS3 animacija ir „JavaScript“ pavyzdžiu. Paprastas ir subtilus spindulinis sukimosi efektas atvaizdo gale.
CSS3 „Polaroid“ nuotraukų galerija. Kaip sukurti kietą „Polaroid“ nuotraukų krūvą su grynu CSS modeliu.
HTML 5 ir CSS 3: būdai, kuriuos netrukus naudosite. Žvilgsnis į dienoraščio kūrimą iš HTML5 ir CSS3.