Panduan Permulaan untuk CSS3

Artikel ini adalah sebahagian daripada kami "Siri Tutorial HTML5 / CSS3" - khusus untuk membantu menjadikan anda pereka dan / atau pemaju yang lebih baik. Tekan di sini untuk melihat lebih banyak artikel dari siri yang sama.

Sejak pengumuman pada tahun 2005, perkembangan tahap 3 Lembaran Gaya Cascading atau lebih dikenali sebagai CSS3 telah ditonton dan dipantau oleh banyak pereka dan pemaju. Kami semua teruja untuk mendapatkan tangan kami pada ciri-ciri baru CSS3 - bayang-bayang teks, bersempadan dengan imej, kelegapan, pelbagai latar belakang, dan lain-lain, hanya untuk menamakan beberapa.

Sehingga hari ini, tidak semua pemilih CSS3 disokong sepenuhnya. Tetapi itu tidak bermakna kita tidak boleh menguji perkara CSS3 yang baru. Siaran ini didedikasikan untuk semua pereka dan pemaju yang sudah biasa dengan CSS 2.1 dan ingin mendapatkan tangan anda kotor pada CSS3.0.

Ia adalah penyusunan cetakan CSS3 berguna, kod sampel, petua, tutorial, cheat-sheet dan banyak lagi. Jangan ragu untuk menggunakannya dalam projek anda, hanya pastikan ia jatuh anggun pada pelayar yang tidak serasi.

Bermula dengan CSS3

Pengenalan kepada CSS3

Pengenalan rasmi (pelan arah) kepada CSS dan CSS3. Dokumen ini memberi anda gambaran keseluruhan mengenai perkembangan CSS3.

CSS3: Reka bentuk ke peringkat seterusnya

Kelebihan CSS3, dengan penjelasan dan contoh sifat dan pemilih CSS3.

Beberapa helah dengan CSS3

Webmonkey membawa anda melalui beberapa helah asas dalam CSS3, termasuk sempadan bulat, sempadan, jatuh bayangan, helah imej dan banyak lagi.

Temubual: Enam soalan dengan Eric Meyer di CSS3

Orang-orang di Six Revision mewawancarai Eric Meyer dengan pandangan dan jawapan yang berharga di CSS3.

CSS3: Peningkatan Progresif

Bagaimana anda boleh menggunakan teknik peningkatan anggun (atau, progresif) untuk menggunakan ciri CSS3 dalam pelayar yang menyokongnya, sambil memastikan bahawa kod anda masih akan memberikan pengalaman pengguna yang memuaskan di pelayar lama yang belum menyokong ciri-ciri tersebut.

CSS3: Latar Belakang dan Sempadan

Sempadan bulat (jejari sempadan)

Panduan untuk mewujudkan sempadan bulat dengan CSS3 jejari sempadan harta.

Sempadan bulat dengan imej (imej sempadan)

Cara menggunakan imej di sempadan dengan imej sempadan harta.

Sempadan CSS3, latar belakang dan kotak

Penjelasan terperinci dengan contoh sifat CSS3 baharu seperti: klip latar belakang, asal-asal, lampiran-lampiran, kotak-bayang, box-decoration-break, jejari sempadan dan imej sempadan.

CSS3: Teks

Kesan Letterpress

Buat kesan huruf mudah dengan CSS3.

Enam kesan teks menggunakan bayangan teks

Kesan teks termasuk: vintage / retro, neon, inset, anaglyphic, api dan permainan papan.

Tipografi cantik

Cara mengambil markup asas dan mengubahnya menjadi reka bentuk tipografi yang menarik dan indah melalui CSS3 tulen.

Putaran Teks

Menggunakan sprite imej dan taburan CSS untuk mendapatkan kedudukan yang betul.

Garis Besar Teks

Bagaimana untuk menambah garis besar, atau strok, ke teks anda menggunakan CSS3 teks-lejang harta.

Kesan pelekat teks

Kesan pelekat teks interaktif menggunakan bayang-bayang teks Harta CSS.

Nudging pautan (animasi) dengan CSS3

Ditch Javascript dan buat kesan nudge sepenuhnya dengan CSS3.

Styling Selection CSS

Ubah gaya pemilihan teks dengan CSS3.

CSS3: Menu

Kandungan berbilang lajur

Menggunakan CSS3 untuk membuat satu set lajur di laman web anda tanpa perlu menetapkan lapisan individu dan (atau) perenggan untuk setiap lajur.

Petua Sexy dengan CSS Hanya

Cara menggunakan standard CSS yang berkembang dapat meningkatkan beberapa petua lintas silang yang indah.

Lebih banyak petua:

Petua alat CSS3 tulen
Petua dengan CSS3.

Menu jatuh turun

Bagaimana untuk membuat menu jatuh turun pelbagai peringkat Apple.com menggunakan jejari sempadan, kotak-bayang, dan bayang-bayang teks.

Kawasan Tapak CSS3-Hanya

Klik pada tab, sembunyikan semua panel, tunjukkan yang sepadan dengan tab yang hanya diklik - semuanya dengan CSS.

Pita 3D dengan CSS3

Cipta reben 3D yang bagus dengan hanya CSS3.

CSS3: Drop shadow

Jatuhkan bayangan dalam imej

Mempamerkan beberapa teknik dan beberapa penampilan yang mungkin untuk menjatuhkan bayang tanpa menggunakan imej.

Tab Glow dengan Shadow Box

Cara membuat tab intuitif dan cantik dalam CSS3 tanpa imej.

CSS3: Butang

Tutorial: Butang cantik

Bagaimana untuk membuat butang CSS3 yang mematuhi pelayar yang indah yang merosot dengan anggun.

Ucapan Bubbles

Pelbagai bentuk kesan gelembung pertuturan yang dibuat dengan CSS 2.1 dan dipertingkatkan dengan CSS3.

Butang Github sama

Pengumpulan butang yang menunjukkan apa yang mungkin menggunakan CSS3 sambil mengekalkan penanda mungkin yang paling mudah.

Spinning, Ikon Pudar dengan CSS3 dan MooTools

Bagaimana untuk menggunakan CSS3 dan MooTools untuk mencipta unsur-unsur yang berputar dan dymanik.

Hamparan imej

Penggunaan praktikal sifat imej sempadan CSS3.

Lebih banyak

CSS3 + Mootools. Contoh percubaan dalam mootools. Ini menambah sifat CSS3 ke dalam kerangka teras MooTools.
Logo meletup dengan CSS3 dan MooTools atau jQuery. Mengambil imej statik dan menjadikannya animasi, kesan meletup pada tetikus.
Kuasa HTML 5 & CSS 3. HTML 5 dan CSS 3 semakin popular, Tekan Perishable di sini untuk menjelaskan bagaimana dan mengapa.
Sinaran Berputar dengan Animasi CSS3 & Contoh JavaScript. Efek spinning sinar yang sederhana dan halus di belakang imej.
Galeri Foto Polaroid CSS3. Bagaimana untuk membina susunan gambar Polaroid yang sejuk dengan gaya CSS tulen.
HTML 5 dan CSS 3: Teknik-teknik yang Anda akan Segera Menggunakan. Pelancaran untuk membina sebuah blog dari bawah dengan HTML5 dan CSS3.