Panduan Pemula untuk CSS3
Sejak pengumuman pada tahun 2005, pengembangan Cascading Style Sheet level 3 atau lebih dikenal dengan CSS3 telah diawasi dan dipantau secara ketat oleh banyak desainer dan pengembang. Kita semua bersemangat untuk mendapatkan fitur-fitur baru dari CSS3 - bayangan teks, perbatasan dengan gambar, opacity, berbagai latar belakang, dll, hanya untuk beberapa nama.
Sampai hari ini, tidak semua penyeleksi CSS3 didukung sepenuhnya. Tapi itu tidak berarti kita tidak bisa bersenang-senang menguji hal-hal CSS3 baru. Posting ini didedikasikan untuk semua desainer dan pengembang yang sudah terbiasa dengan CSS 2.1 dan ingin membuat tangan Anda kotor pada CSS3.0.
Ini adalah kompilasi bacaan CSS3 yang berguna, kode sampel, kiat, tutorial, lembar contekan dan banyak lagi. Jangan ragu untuk menggunakannya dalam proyek Anda, pastikan itu jatuh dengan anggun di browser yang tidak kompatibel.
Memulai dengan CSS3
Pengantar CSS3
Pengantar (roadmap) resmi untuk CSS dan CSS3. Dokumen ini memberi Anda gambaran keseluruhan tentang pengembangan CSS3.
CSS3: Bawa desain ke level selanjutnya
Keuntungan CSS3, dengan penjelasan dan contoh properti dan penyeleksi CSS3.
Beberapa trik dengan CSS3
Webmonkey membawa Anda melalui beberapa trik dasar di CSS3, termasuk batas bulat, batas, bayangan drop, trik gambar dan banyak lagi.
Wawancara: Enam pertanyaan dengan Eric Meyer di CSS3
Orang-orang di Six Revision mewawancarai Eric Meyer dengan wawasan dan jawaban yang berharga tentang CSS3.
CSS3: Peningkatan Progresif
Bagaimana Anda dapat menggunakan teknik peningkatan yang anggun (atau progresif) untuk memanfaatkan fitur CSS3 di browser yang mendukungnya, sambil memastikan bahwa kode Anda masih akan memberikan pengalaman pengguna yang memuaskan di browser lama yang belum mendukung fitur-fitur itu..
CSS3: Latar Belakang dan Batas
Perbatasan bulat (batas-jari-jari)
Panduan untuk membuat batas bulat dengan CSS3 batas-jari-jari milik.
Perbatasan bulat dengan gambar (gambar perbatasan)
Cara menggunakan gambar dalam batas gambar batas milik.
Batas, latar belakang, dan kotak CSS3
Penjelasan detail dengan contoh properti CSS3 baru seperti: latar belakang-klip, latar belakang-asal, background-attachment, bayangan kotak, kotak-hiasan-istirahat, batas-jari-jari dan gambar batas.
CSS3: Teks
Efek Letterpress
Buat efek letterpress sederhana dengan CSS3.
Enam efek teks menggunakan bayangan teks
Efek teks termasuk: vintage / retro, neon, inset, anaglyphic, fire and board game.
Tipografi yang indah
Cara mengambil markup dasar dan mengubahnya menjadi desain tipografi yang menarik dan indah melalui CSS3 murni.
Rotasi teks
Menggunakan sprite gambar dan taburan CSS untuk memperbaiki berbagai hal.
Teks Garis Besar
Cara menambahkan garis besar, atau goresan, ke teks Anda menggunakan CSS3 teks-stroke milik.
Efek masking teks
Efek masking teks interaktif menggunakan bayangan teks Properti CSS.
Menghubungkan dorongan (animasi) dengan CSS3
Parit Javascript dan buat efek nudge seluruhnya dengan CSS3.
Styling Pemilihan CSS
Ubah gaya pemilihan teks dengan CSS3.
CSS3: Menu
Konten multi-kolom
Menggunakan CSS3 untuk membuat satu set kolom di situs web Anda tanpa harus menetapkan lapisan individual dan (atau) paragraf untuk setiap kolom.
Sexy Tooltips dengan Just CSS
Cara menggunakan standar CSS yang berkembang dapat meningkatkan beberapa tooltips lintas-browser yang indah.
Tip alat lainnya:
- Tip alat CSS3 murni
- Tooltips dengan CSS3.
Menu drop down
Cara membuat menu dropdown multi-level Apple.com sama batas-jari-jari, bayangan kotak, dan bayangan teks.
Area Tab-Hanya CSS3
Klik pada tab, sembunyikan semua panel, tunjukkan yang sesuai dengan tab yang baru saja diklik - semuanya dengan CSS.
Pita 3D dengan CSS3
Buat pita 3D yang terlihat bagus hanya dengan CSS3.
CSS3: Drop shadow
Jatuhkan bayangan dalam gambar
Perlihatkan beberapa teknik dan beberapa kemungkinan penampilan untuk menjatuhkan bayangan tanpa menggunakan gambar.
Glow Tabs dengan Box Shadow
Cara membuat tab yang intuitif dan indah di CSS3 tanpa gambar.
CSS3: Tombol
Tutorial: Tombol cantik
Cara membuat tombol CSS3 compliant lintas browser yang indah yang terdegradasi dengan anggun.
Gelembung Pidato
Berbagai bentuk efek gelembung ucapan dibuat dengan CSS 2.1 dan ditingkatkan dengan CSS3.
Github tombol yang sama
Kumpulan tombol yang menunjukkan apa yang mungkin menggunakan CSS3 sambil juga mempertahankan markup sesederhana mungkin.
Memutar, Memudar Ikon dengan CSS3 dan Mootools
Cara menggunakan CSS3 dan Mootools untuk membuat elemen berputar, berputar.
Hamparan gambar
Aplikasi praktis properti perbatasan-gambar CSS3.
Lebih
- CSS3 + Mootool. Contoh percobaan dalam mootool. Ini menambahkan properti CSS3 ke dalam pekerjaan bingkai MooTools inti.
- Meledak Logo dengan CSS3 dan MooTools atau jQuery. Ambil gambar statis dan jadikan efek animasi yang meledak pada mouse.
- Kekuatan HTML 5 & CSS 3. HTML 5 dan CSS 3 dengan cepat mendapatkan popularitas, Perishable Press ada di sini untuk menjelaskan bagaimana dan mengapa.
- Sinar Berputar dengan Animasi CSS3 & Contoh JavaScript. Efek pemintalan sinar yang sederhana dan halus di bagian belakang gambar.
- Galeri Foto Polaroid CSS3. Cara membuat tumpukan foto Polaroid yang tampak keren dengan gaya CSS murni.
- HTML 5 dan CSS 3: Teknik yang Akan Segera Anda Gunakan. Panduan membangun blog dari awal dengan HTML5 dan CSS3.
Lembar Informasi & Referensi
CSS3 Cheat Sheet (PDF)
Cheatsheet yang dapat dicetak dengan daftar lengkap semua properti, tipe pemilih dan memungkinkan nilai dalam spesifikasi CSS3 saat ini dari W3C.
Dukungan CSS di Opera 9.5
Daftar lengkap pemilih CSS yang didukung di Opera 0.5.
Font yang Tersedia untuk Penyisipan @ font-face
Daftar font yang komprehensif saat ini dilisensikan untuk @ font-face menanamkan.
Selektor CSS 3 - Dijelaskan
Panduan dan referensi untuk pemilih CSS3 dan polanya.
Generator Aturan CSS3 lintas-browser
Aturan CSS3 Anda bisa menyalin dan menempel ke stylesheet Anda sendiri.
CSS3 Klik Bagan
Dapatkan gaya CSS3 seperti ukuran kotak, radius batas, bayangan teks, dan lainnya dalam satu klik.
Konten CSS & Kompatibilitas Peramban
Daftar lengkap tabel pemilih CSS dan CSS3 dengan deklarasi untuk pemeriksaan kompatibilitas browser.
