Vodič za početnike za CSS3
Još od objave 2005. godine, razvoj dizajnerskog stupnja 3 ili više poznat kao CSS3 pažljivo su promatrani i praćeni od strane mnogih dizajnera i programera. Svi smo uzbuđeni što ćemo se snaći na novim značajkama CSS3 - tekstualne sjene, granice sa slikama, neprozirnost, višestruke pozadine itd..
Od danas, nisu svi selektori CSS3 u potpunosti podržani. Ali to ne znači da se ne možemo zabaviti testiranjem novih CSS3 stvari. Ovaj je post posvećen svim dizajnerima i programerima koji su već upoznati s CSS 2.1 i žele uprljati ruke na CSS3.0.
To je kompilacija korisnih CSS3 čitanja, primjera kodova, savjeta, tutoriala, varalica-lista i još mnogo toga. Slobodno ih koristite u svojim projektima, samo se pobrinite da se graciozno spusti na nekompatibilne preglednike.
Početak rada s CSS3
Uvod u CSS3
Službeni uvod u CSS i CSS3. Ovaj dokument daje vam cjelovitu ideju o razvoju CSS3.
CSS3: Dizajnirajte sljedeći nivo
Prednosti CSS3, s objašnjenjima i primjerima CSS3 svojstava i selektora.
Nekoliko trikova s CSS3
Webmonkey vas dovodi kroz nekoliko osnovnih trikova u CSS3, uključujući zaobljene granice, granice, sjene, slikovne trikove i drugo.
Intervju: Šest pitanja s Ericom Meyerom na CSS3
Ljudi u Six Revision intervjuirali su Eric Meyer s vrijednim uvidima i odgovorima na CSS3.
CSS3: Progresivno poboljšanje
Kako upotrebljavati graciozne (ili, progresivne) tehnike poboljšanja kako biste iskoristili značajke CSS3 u preglednicima koji ih podržavaju, osiguravajući pritom da vaš kod i dalje pruža zadovoljavajuće korisničko iskustvo u starijim preglednicima koji još ne podržavaju te značajke.
CSS3: Pozadina i granice
Zaobljene granice (Granica-radius)
Vodič za stvaranje zaobljene granice s CSS3 granica-radijus
svojstvo.
Zaobljene granice sa slikom (pograničnim slike)
Kako koristiti slike u granicama Granica slika
svojstvo.
CSS3 granice, pozadine i okviri
Detaljno objašnjenje s primjerima novih svojstava CSS3 kao što su: pozadine-isječak
, Pozadina-podrijetla
, Pozadina-pričvršćivanje
, kutija-sjena
, kutija-dekoracija-break
, granica-radijus
i Granica slika
.
CSS3: Tekst
Učinak s tiskanim slovima
Stvorite jednostavan efekt s CSS3.
Šest tekstualnih efekata pomoću teksta shadow
Tekstualni efekti uključuju: vintage / retro, neon, inset, anaglifičnu, vatrenu i društvenu igru.
Lijepa tipografija
Kako uzeti osnovnu oznaku i pretvoriti je u atraktivan i lijep tipografski dizajn preko čistog CSS3.
Rotacija teksta
Koristi slikovni sprite i posipati CSS da bi se stvari ispravno smjestile.
Tekst teksta
Kako dodati tekst ili crtati vašem tekstu pomoću CSS3 text-stroke
svojstvo.
Efekt maskiranja teksta
Interaktivni efekt maskiranja teksta pomoću text-shadow
CSS svojstvo.
Podizanje veze (animacija) s CSS3
Isključite Javascript i stvorite efekt potpune potpore pomoću CSS3.
CSS stiliziranje odabira
Promjena stylinga odabira teksta pomoću CSS3.
CSS3: Izbornik
Sadržaj više stupaca
Koristeći CSS3 za izradu skupa stupaca na vašoj web-lokaciji bez dodjeljivanja pojedinačnih slojeva i (ili) stavaka za svaki stupac.
Sexy Tooltips sa samo CSS
Kako koristiti napredni CSS standard može poboljšati neke lijepe opise alata.
Više opisa alata:
- Čisti CSS3 opis alata
- Opisi alata s CSS3.
Padajući izbornik
Kako stvoriti Apple.com podjednako više razina padajućeg izbornika pomoću granica-radijus
, kutija-sjena
, i text-shadow
.
Područje s karticama samo za CSS3
Kliknite na karticu, sakrijte sve ploče, pokažite onu koja odgovara kartici koja je upravo kliknula - sve s CSS-om.
3D vrpce s CSS3
Stvorite lijepe 3D trake sa samo CSS3.
CSS3: Ispustite sjenu
Ispustite sjenu na slici
Izložite nekoliko tehnika i neke od mogućih pojava za ispuštanje sjena bez korištenja slika.
Glow Tabovi s Box Shadow
Kako stvoriti intuitivne i lijepe kartice u CSS3 bez slike.
CSS3: Gumbi
Vodič: Lijepi gumbi
Kako stvoriti prekrasne CSS3 gumbe kompatibilne s više preglednika koji se degradiraju elegantno.
Govorni mjehurići
Različiti oblici efekta mjehurića govora stvoreni s CSS 2.1 i poboljšani s CSS3.
Github slične tipke
Zbirka tipki koje prikazuju što je moguće pomoću CSS3 uz istovremeno održavanje najjednostavnijih mogućih oznaka.
Spinning, Fading Ikone s CSS3 i MooTools
Kako koristiti CSS3 i MooTools za izradu dinamičkih, rotirajućih elemenata.
Prekrivanje slike
Praktična primjena svojstva granične slike CSS3.
Više
- CSS3 + Mootools. Primjer eksperimentiranja u mootools. To dodaje CSS3 svojstva u jezgru rada MooTools okvira.
- Exploding Logo s CSS3 i MooTools ili jQuery. Uzmite statičnu sliku i učinite je animiranim, eksplodirajućim učinkom miša.
- Snaga HTML 5 i CSS 3. HTML 5 i CSS 3 brzo dobivaju na popularnosti, Perishable Press je ovdje da objasni kako i zašto.
- Spinning Rays sa CSS3 animacijama i JavaScript primjerom. Jednostavan i suptilan efekt vrtnje na stražnjoj strani slike.
- CSS3 Polaroid foto galerija. Kako izgraditi cool izgled Polaroid fotografija s čistim CSS stilom.
- HTML 5 i CSS 3: Tehnike koje ćete uskoro koristiti. Proces izrade bloga iz HTML5 i CSS3.
Šifre i reference
CSS3 varati list (PDF)
Šifru za ispis s kompletnim popisom svih svojstava, tipova selektora i dopuštajući vrijednosti u trenutnoj specifikaciji CSS3 iz W3C.
CSS podrška u Opera 9.5
Potpun popis podržanih CSS selektora u Opera 0.5.
Fontovi dostupni za @ font-face Embedding
Sveobuhvatan popis fontova za koje je trenutačno licenciran 'Font-lica
ugradnja.
CSS 3 selektori - objašnjeno
Vodič i upućivanje na CSS3 selektore i njegove obrasce.
Cross-browser CSS3 Generator Pravila
CSS3 pravila možete kopirati i zalijepiti na vlastiti stilski list.
CSS3 Kliknite Grafikon
Nabavite CSS3 stilove kao što su dimenzioniranje okvira, radijus obruba, sjena teksta i još mnogo toga unutar klika.
CSS sadržaj i kompatibilnost preglednika
Potpuni popis tablica selektora za CSS i CSS3 s deklaracijom za provjeru kompatibilnosti preglednika.