CSS3 adalah benar-benar mulai mengumpulkan momentum dengan banyak perintah yang digariskan dalam draft kerja CSS3 didukung oleh Firefox, Safari dan Google Chrome. Kami pikir kami akan mengumpulkan beberapa favorit kami. Sebelum kita mulai membutuhkan sintaks perintah CSS3 browser tertentu bagi mereka untuk bekerja.

Untuk Mozilla Firefox kita perlu menggunakan awalan-moz-, misalnya:

-Moz-border-radius:

Dan untuk Safari WebKit-prefix-, misalnya:

-Webkit-border-radius:

1. Perbatasan radius

Perbatasan CSS3 perintah jari-jari menciptakan sudut melengkung pada elemen. Alih-alih menggunakan 4 atau lebih gambar untuk membuat sudut-sudut melengkung menggunakan perintah berikut:

/ * Untuk Mozilla Firefox * /
-Moz-border-radius: 20px;

/ * Untuk Safari & Google Chrome * /
-Webkit-border-radius: 20px;
}

2. Kotak bayangan

Sebuah bayangan dapat diterapkan untuk unsur-unsur menggunakan perintah CSS3 kotak bayangan. Para bayangan kotak menerima tiga nilai numerik ditambah warna untuk menerapkan efek ini. Angka-angka ini:

1. Jarak horisontal offset bayangan - Sebuah nilai positif berarti bayangan akan melemparkan ke kanan dan nilai negatif ke kiri
2. Jarak offset vertikal bayangan - Sebuah nilai positif berarti akan membuang bayangan di bawah ini dan nilai negatif atas
3. Bagaimana Anda ingin kabur bayangan

Dengan penambahan nilai warna bayangan selesai:

/ * Untuk Mozilla Firefox * /
-Moz-box-shadow: 5px 5px 5px # b6ebf7;

/ * Untuk Safari & Google Chrome * /
-Webkit-kotak-shadow: 5px 5px 5x # b6ebf7;

3. Transparansi atau RGBA

Transparansi selalu rumit. Browser yang berbeda secara historis telah menerapkan transparansi dengan menggunakan perintah yang berbeda. Melanjutkan ini inkonsistensi cross-browser kita memiliki penambahan properti background RGBA baru CSS3, namun pada prinsipnya perintah ini lebih logis. Perintah terdiri dari 4 nilai-nilai - yang pertama, kedua dan ketiga adalah merah, hijau & biru nilai-nilai (0-255) masing-masing diikuti dengan alpha channel atau transparansi (0-1).

Untuk perintah RGBA prefiks browser tertentu (-moz-,-WebKit-) tidak diperlukan:

# Box3 {
background-color: RGBA (110, 142, 185, .5);
}

Perintah menambahkan warna latar belakang latar belakang biru-abu-abu bagus di 0,5 atau opacity 50% di browser yang memahami properti CSS3 RGBA.

Sayangnya Internet Explorer juga akan mencoba untuk membuat warna latar belakang perintah tapi tidak mengerti RGBA. Untuk memastikan bahwa warna latar belakang juga di set di IE IE hack-hanya diperlukan. Pada contoh berikut ini: terakhir-anak selektor pseudo-mana Internet Explorer tidak mengerti adalah digunakan untuk mengecualikan itu.

tubuh: terakhir-anak # box3 {
/ * Kecualikan semua browser IE menggunakan: terakhir-anak * /
background-color: RGBA (110, 142, 185, .5) penting;!
}

4. Kolom

Kemampuan untuk menambahkan kolom telah ditambahkan ke CSS3. Daripada elemen mengambang dalam wadah kita dapat mengatur jumlah kolom, lebar dan aturan:

/ * Untuk Mozilla Firefox * /
-Moz-kolom-count: 2;
-Moz-kolom-kesenjangan: 20px;
-Moz-kolom-aturan: 1px # 6e8eb9 padat;

/ * Untuk Safari & Google Chrome * /
-Webkit-kolom-count: 2;
-Webkit-kolom-kesenjangan: 20px;
-Webkit-kolom-aturan: 1px # 6e8eb9 padat;
}

5. Beberapa gambar latar belakang

Latar Belakang citra selalu terbatas ketika datang ke CSS karena fakta Anda hanya dapat menerapkan salah satu gambar latar belakang per elemen. Hal ini tidak terjadi dengan CSS3 yang memungkinkan beberapa gambar per elemen dengan hanya koma memisahkan mereka.

Untuk menempatkan gambar pada kedua sisi kiri dan kanan dari elemen Anda dapat menggunakan perintah berikut, dengan gaya sedikit:

padding: 0 20px;
}

Perintah ini akan diberikan oleh salah-Internet Explorer sebagai tidak menerima 2 gambar latar belakang pada elemen tunggal. Sebuah mengecualikan semua IE hack diperlukan.

# Box5 blockquote {
/ * Untuk semua browser, hanya sebuah kutipan yang terbuka * /
background: url (/ i / quotel.gif) 0 0 no-repeat;
padding: 0 20px;
}

tubuh: terakhir-anak # box5 blockquote {
/ * Kecualikan semua browser IE menggunakan: terakhir-anak * /
/ * Kemudian dua gambar * /
background: url (/ i / quotel.gif) no-repeat 0 0, url (/ i / quoter.gif) no-repeat 100% 0;
}

6. Latar Belakang gradien

Gradien latar belakang CSS3 sangat fleksibel dan dapat digunakan untuk membuat pola yang kompleks. Pada paling sederhana gradien linier CSS memungkinkan gradien untuk diterapkan ke elemen dari atas ke bawah dan kiri ke kanan.

Ini contoh gradien CSS3 di Mozilla Firefox menerapkan gradien biru muda di bagian bawah kotak untuk hanya 20% dari tinggi kotak '

Safari menggunakan pendekatan yang kurang intuitif, tetapi lebih fleksibel menggunakan nilai berhenti warna. Sebuah contoh dari kode Safari spesifik berikut (perhatikan linear termasuk dalam kurung bukan luar):

# Box8 {
latar belakang:-webkit-gradien (linier, kiri bawah, kiri atas, warna-stop (0, # b6ebf7), warna-stop (0,20, # fff));
}

7. Rotasi

CSS3 juga memungkinkan rotasi elemen menggunakan perintah transform, dengan properti memutar menerima derajat sebagai parameter.

<code> # box9 {
-Moz-transform: memutar (2deg);
-Webkit-transform: memutar (2deg);
} </ Code>

8. Garis

Outilines termasuk dalam spesifikasi CSS3 dan memungkinkan kedua perbatasan dan garis besar untuk diterapkan pada elemen tunggal.

Properti garis identik dengan perintah perbatasan. Properti diimbangi tambahan namun memungkinkan perbatasan yang akan bergerak lebih jauh di dalam atau di luar elemen.

Filed under: Css oleh admin