CSS3 | Cascading Style Sheet 3

CSS3 adalah anak baru dalam keluarga Cascading Style Sheet ( CSS ). Ia menawarkan kemungkinan baru yang menarik untuk menciptakan dampak dengan desain Anda, memungkinkan Anda untuk menggunakan cascading style sheet lebih beragam untuk berbagai kesempatan dan dan masih banyak lagi. Dalam artikel ini akan ditunjukkan beberapa fitur yang berbeda dengan menggunakan CSS3 yang dapat bekerja dalam beberapa browser terkemuka (yaitu Mozilla Firefox, Google Chrome, Apple Safari, Opera), dan bagaimana CSS3 akan tetap berjalan baik di browser yang tidak mendukung (yaitu Internet Explorer). Dengan menggunakan ekstensi browser tertentu, banyak dari styles CSS3 yang ditunjukan sekarang dapat digunakan pada saat ini!

Pendahuluan

Untuk menggunakan kebanyakan properti CSS3 hari ini, kita harus menggunakan ekstensi khusus vendor yang dibarengi dengan properti aslinya. Alasannya adalah bahwa sampai sekarang, hanya sebagian browser yang baru diimplementasikan properti CSS3. Sayangnya, beberapa browser tidak dijadikan rekomendasi oleh W3C pada akhirnya, jadi penting untuk menargetkan browser yang memiliki properti khusus untuk membedakan mereka dari browser yang memiliki properti standar.

Kelemahan terhadap pendekatan ini, tentu saja, sebuah style sheet yang berantakan dan desain yang tidak konsisten di seluruh Web browser. Lagi pula, kita tidak ingin memicu para hacker pada browser dalam properti style sheet kita. Yang terkenal sudah pasti Internet Explorer, serta tag-tag yang bekerja di banyak style sheet dan menjadi legendaris di tahun 1990-an, mereka masih membuat banyak website yang ada menjadi tidak konsisten atau bahkan tidak terbaca. Dan kita tidak ingin menempatkan diri dalam situasi yang sama sekarang.

Namun, situs web tidak harus sama persis sama di semua browser. Dan menggunakan browser yang memiliki properti khusus untuk mencapai efek tertentu dalam browser tertentu kadang-kadang masuk akal.

Ekstensi CSS3 yang paling umum yang digunakan pada browser adalah  browser berbasis WebKit (misalnya, Apple Safari), yang dimulai dengan -WebKit-, dan browser berbasis Gecko (misalnya, Mozilla Firefox), yang dimulai dengan -moz-. Konqueror (-Khtml-), Opera (-o-) dan Internet Explorer (-ms-) memiliki ekstensi milik mereka sendiri.

Sebagai desainer profesional, kita harus ingat bahwa dengan menggunakan properti khusus dari CSS3 akan membuat style sheet kita tidak valid. Sehingga menempatkan mereka dalam versi final dari sebuah style sheet jarang terdengar sebagai ide untuk sebuah desain. Namun dalam beberapa kasus, seperti ketika bereksperimen atau belajar, setidaknya kita bisa mempertimbangkan kategori mereka dalam style sheet CSS bersama-sama dengan properti standar.

Fitur Pada CSS3

Drop Shadows

Efek drop shadow terdapat beberapa point. Pertama adalah hanya warna bayangan. Ini akan mendapatkan 4 point, dan dua yang pertama adalah x (horizontal) offset dan y (vertikal) offset. Point berikutnya adalah jumlah blur yang ditambahkan ke bayangan. point yang keempat dan terakhir adalah jumlah penyebaran blur. kotak bayangan juga akan menerima lampiran kata kunci yang akan membuat lampiran bayangan.

box-shadow: #333 3px 3px 4px;
-moz-box-shadow: #333 3px 3px 4px;
-webkit-box-shadow: #333 3px 3px 4px;

Gradients / Gradasi Warna

Gradien dapat cukup membingungkan pada awalnya, terutama ketika membandingkan perbedaan antara -moz- dan -webkit- . Dengan -moz- pertama anda harus menentukan arah gradien, kemudian menentukan warna awal dan akhir. Dengan -webkit- gradien mengambil kode lebih sedikit. Pertama Anda menentukan type dari gradien. Dua point berikutnya untuk menentukan arah. Akhirnya, dua point terakhir untuk menentukan warna awal dan akhir dari gradien.

-moz-linear-gradient(-90deg,#1aa6de,#022147);
-webkit-gradient(linear, left top, left bottom, from(#1aa6de), to(#022147));

RGBA

Metode warna RGBA sebenarnya lebih mudah dari yang terlihat pada awalnya. Dibutuhkan empat point, dan dalam rangka mereka adalah: jumlah warna merah, jumlah warna hijau, jumlah biru, dan tingkat opacity. Biasanya warna menggunakan kode hex ​​( # ), Anda mengatur warna RGB dalam modus, sedangkan tingkat opacity dapat memberikan warna tampak transparan. Pada opacity nilai diatur antara 0 dan 1 , dengan 0 sepenuhnya buram dan 1 menjadi warna yang didefinisikan sebenarnya.

background-color: rgba(0, 54, 105, .5);

HSL

Seiring dengan RGBA, CSS3 dapat membuat model warna HSL tersedia bagi kita. Hal ini bisa memberi kita persenjataan menyeluruh pada warna dan nada. Dalam model warna, HSL singkatan untuk Hue, Saturation, dan Lightness. Hue adalah gelar pada roda warna, sedangkan Saturasi dan Lightness adalah nilai persentase warna.

background-color: hsl(209,41.2%, 20.6%);

Border Color

Dengan style ini, Anda harus menetapkan border-top , border-right , border-bottom , dan border-left secara terpisah untuk mendapatkan sebuah efek.

border: 8px solid #000;
-moz-border-bottom-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-top-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-left-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-right-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;

Text Selection Color

Dengan ::selection elemen pseudo-, Anda dapat mengubah warna dan background ketika pengguna menyoroti elemen teks.

::selection {
background: #3C0; /* Safari */
color: #90C;
}
::-moz-selection {
background: #3C0; /* Firefox */
color: #90C;
}

Transform

Dengan style transform, Anda dapat membuat elemen muncul untuk “tumbuh” saat melayang. Dengan nilai di atas 1 ditambahkan pada scale , elemen akan meningkat dalam ukuran. Di sisi lain, nilai di bawah 1 akan menyebabkan elemen untuk mengurangi ukuran. Seiring dengan adanya scale, membuatnya menjadi banyak cara yang berbeda dalam menggunakan style ini. Kunjungi halaman pengembang Firefox untuk melihat apa lagi yang dapat Anda gunakan.

-moz-transform: scale(1.15);
-webkit-transform: scale(1.15);

Multi Column Layout

Dengan style multi-kolom layout baru, kita dapat memberikan teks kita seperti melihat sebuah “koran”. Ini sangat sederhana untuk diimplamentasikan dibandingkan dengan cara normal yang dilakukan melalui CSS. Di bawah ini ditentukan berapa banyak kolom yang saya inginkan, apa jenis aturan saya ingin memisahkan mereka, dan seberapa besar kesenjangan yang saya ingin antara kolom

-moz-column-count:3;
-moz-column-rule: solid 1px black;
-moz-column-gap: 20px;

Ringkasan

Dengan CSS3 memberi kita begitu banyak kekuasaan yang lebih sebagai web designer dan pengembang, serta membuat banyak aspek jauh lebih sederhana. Sekarang, kita hanya bisa menunggu agar semua browser dapat mendukung CSS3. Tentu saja beberapa fitur yang diperkenalkan pada artikel ini hanya sedikit saja, dan jika anda ingin mengetahui lebih banyak tentang fitur-fitur, tips dan trik, informasi lebih lanjut tentang CSS3 anda bisa mendapatkannya disini : CSS3.info