Početna » Web dizajn » Vodič za početnike za CSS3

    Vodič za početnike za CSS3

    Ovaj članak je dio našeg "Serija vodiča za HTML5 / CSS3" - posvećeni pomoći da postanete bolji dizajner i / ili programer. Kliknite ovdje da biste vidjeli više članaka iz iste serije.

    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.