Monday, 20 July 2015

Apa yang Baru pada CSS3

Seiring dengan perubahan yang telah dibawa oleh HTML5, kita juga mempunyai spesifikasi baru CSS3. CSS3 adalah inkarnasi ketiga dari CSS, yang memperluas CSS untuk memungkinkan kita membangun antarmuka yang lebih kaya dan lebih dalam. Sebelum Anda melompat untuk menggunakan desain responsif. Ini sangat penting bahwa Anda memiliki pemahaman bahwa apa yang dapat Anda capai menggunakan CSS3 karena akan membentuk dasar dari banyak pekerjaan yang akan Anda lakukan di dalam media queries.

Browser Vendor Prefixes
Sebelum Anda memulai melihat contoh dari CSS3, Anda membutuhkan memahami sedikit tentang prefixes browser CSS.

Sebagai spesifikasi CSS3 masih dalam draft, vendor browser sering menerapkan fitur baru di belakang prefixes vendor-specific. Ini berarti bahwa mereka mampu menerapkan fitur dimana spesifikasi tidak disepakati sepenuhnya oleh semua browser. Setiap vendor memiliki prefix sendiri. dan prefix untuk sebagian besar vendor yang populer adalah :
  1. -moz- Firefox and browsers using Mozilla’s Gecko engine
  2. -webkit- Safari, Chrome, and WebKit
  3. -o- Opera
  4. -ms- Internet Explorer 
Seperti yang akan Anda lihat dalam beberapa contoh, tidak semua browser memerlukan prefixed version dari properti CSS3, sebagai properti telah siap dikembangkan untuk cukup lama untuk tidak membutuhkan browser prefixes dan beberapa vendor browser tidak pernah menerapkan prefixed version.

Dimana prefixed version dari sebuah properti CSS telah diterapkan, sering diterapkan sangat mirip. Namun, ada beberapa properti dimana prefixed properti CSS berbeda dari satu sama lain. Contoh dari ini adalah properti linear-gradient yang mana implementasi berbeda-beda dari masing-masing prefixes browser.

Hal ini penting untuk diperhatikan bahwa Google bermigrasi ke Blink  Engine yang baru mereka telah bercabang dari WebKit, mereka bergerak jauh dari dari menambahkan fitur baru dibawah prefixes browser. Berikut kutipan mereka di balik alasan ini :

"Secara historis, browser mengandalkan pada vendor prefixes (misalnya, -webkit-feature) untuk fitur to ship experimental untuk developer. Pendekatan ini dapat berbahaya untuk kompatibilitas karena konten web datang dengan mengandalkan nama-nama vendor prefixed ini" - Blink Information page.

Ini berarti untuk para developer adalah kita tidak akan dapat segera menggunakan beberapa fitur experimental CSS3 yang baru ketika mereka membuatnya sebagai browser karena mereka tidak akan diaktifkan untuk pengguna situs kita. Ini tidak mencegah kita dari memungkinkan fitur percobaan di browser kita sendiri dan mencoba mereka keluar karena mereka dapat diaktifkan di Chrome about: flags.

Sebuah daftar lengkap properties vendor prefixed CSS dapat ditemukan di http://peter.sh/experiments/vendor-prefixed-css-property-overview/.

CSS3 Examples
Untuk benar-benar dapat menjelajahi apa yang dapat Anda lakukan dengan CSS3, mari lihat beberapa elemen  umum dan membahas bagaimana kita harus styled sebelumnya dan bagaimana CSS3 memungkinkan kita untuk membuat styling mudah.

Buttons
Situs web menggunakan tombol untuk berbagai macam tujuan, sebagai contoh  umum yaitu memanggil actions, tombol submit form, dan tombol action. Secara Historis, styling tombol dapat cukup rumit karena Anda perlu menggunakan gambar untuk hal seperti memberi gradient, font, dan shadow. Ketika kita memiliki tombol yang berbeda ukuran, kita kemudian akan membutuhkan menge-set gambar yang berbeda. Dengan CSS3 Anda akan dapat mencapai semua ini dengan cara sederhana dengan menulis kode. Tidak hanya ini sederhana, ini juga berarti Anda dapat mengubah skala tombol Anda untuk berbeda ukuran tanpa mendefinisikan ulang style tombol umum.

<!DOCTYPE html>
<html>
<head>
<title>Button example</title>
<style>
.button {
display: inline-block;
border: 1px solid #1f84ef;
padding: 0px 50px;
line-height: 50px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;

background: #6db3f2; /* Old browsers */
background: -moz-linear-gradient(top, #6db3f2 0%, #54a3ee 50%, #3690f0 51%, #1e69de 100%);
/* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#6db3f2),
color-stop(50%,#54a3ee), color-stop(51%,#3690f0), color-stop(100%,#1e69de)); /*
Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #6db3f2 0%,#54a3ee 50%,#3690f0 51%,#1e69de 100%);
/* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #6db3f2 0%,#54a3ee 50%,#3690f0 51%,#1e69de 100%);
/* Opera 11.10+ */
background: -ms-linear-gradient(top, #6db3f2 0%,#54a3ee 50%,#3690f0 51%,#1e69de 100%);
/* IE10+ */
background: linear-gradient(to bottom, #6db3f2 0%,#54a3ee 50%,#3690f0 51%,#1e69de 100%);
/* W3C */
text-transform: uppercase;
font-family: Impact, "Arial Black", sans serif;
color: #fffffe !important;
font-size: 20px;
font-size: 1.42857rem;
text-decoration: none;
-webkit-font-smoothing: antialiased;
text-shadow: 1px 0px 2px #1f84ef;
filter: dropshadow(color=#1f84ef, offx=1, offy=0);
}
.button:hover, .button:active, .button:focus {
text-decoration: none;
background: #54a7f0; /* Old browsers */
background: -moz-linear-gradient(top, #54a7f0 0%, #3c97ec 50%, #1f84ef 51%, #1c5fcc 100%);
/* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#54a7f0),
color-stop(50%,#3c97ec), color-stop(51%,#1f84ef), color-stop(100%,#1c5fcc)); /*
Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #54a7f0 0%,#3c97ec 50%,#1f84ef 51%,#1c5fcc 100%);
/* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #54a7f0 0%,#3c97ec 50%,#1f84ef 51%,#1c5fcc 100%);
/* Opera 11.10+ */
background: -ms-linear-gradient(top, #54a7f0 0%,#3c97ec 50%,#1f84ef 51%,#1c5fcc 100%);
/* IE10+ */
background: linear-gradient(to bottom, #54a7f0 0%,#3c97ec 50%,#1f84ef 51%,#1c5fcc 100%);
/* W3C */
}
</style>
</head>
<body>
<a href="#" class="button">Call to action</a>
</body>
</html>


Kode di atas akan membuat tombol di browser, seperti yang ditampilkan berikut :
Hasil Tombol CSS
RGBA
Dalam CSS, warna umumnya telah didefinisikan sebagai heksadesimal atau RGB (red, green blue). Jika kita ingin  latar belakang tembus, kita akan perlu menggunakan 1×1px 24-bit .png; Namun dengan CSS3, kita sekarang dapat melakukan ini dengan RGBA colors. RGBA color adalah RGB color dengan alpha transparency diterapkan untuk itu. Keuntungan dari ini adalah bahwa Anda tidak perlu lagi membutuhkan menyertakan sebuah gambar. Untuk mendemonstrasikan RGBA mari kita menempatkan beberapa teks di atas gambar acak dengan background tembus.

<!DOCTYPE html>
<html>
<head>
<title>RGBA example</title>
<style>
.rgba-container, .rgba{
width: 220px;
height: 220px;
position: relative;
}
.rgba{
background: rgba(255,255,255,0.5);
position: absolute;
top: 0px;
left: 0px;
margin: 0px;
line-height: 220px;
text-align: center;
}
</style>
</head>

<body>
<div class="rgba-container">
<img src="http://lorempixel.com/220/220/" alt="random image" />
<p class="rgba">Hello World</p>
</div>
</body>
</html>


Seperti yang dapat Anda lihat dalam daftar ini, Anda telah mengatur background rgba(255,255,255,0.5), yang mana 50 persen opacity warna putih. Sesuai nilai per RGB, tiga nilai pertama Anda, merah, hijau, dan biru, nilai keempat adalah opacity dari warna sebagai angka desimal.

Hasil teks dengan gambar tembus
Multiple Columns
Di masa lalu, Jika Anda ingin membuat teks multiple columns, itu sangat sulit. Anda juga memiliki pilihan untuk menghitung di backend  berapa banyak kata-kata yang muncul di setiap kolom menggunakan JavaScript untuk mengatur kolom. CSS3 memungkinkan penambahan multiple columns, berarti Anda dapat menentukan kolom dalam  style sheet Anda daripada secara pemrograman.

<!DOCTYPE html>
<html>
<head>
<title>Multiple col example</title>
<style>
p{

-moz-column-count: 2;
-moz-column-gap: 10px;
-webkit-column-count: 2;
-webkit-column-gap: 10px;
column-count: 2;
column-gap: 10px;
}
</style>
</head>
<body>
<p>Sed posuere consectetur est at lobortis. Fusce dapibus, tellus ac cursus commodo, tortor
mauris condimentum nibh, ut fermentum massa justo sit amet risus. Donec id elit non mi porta gravida
at eget metus. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p>
</body>
</html>


Dalam contoh ini Anda telah mengatur jumlah kolom untuk menjadi 2, sehingga konten ditampilkan sebagai 2 kolom. Anda juga menentukan column-gap sebagai 10px yang memisahkan kedua kolom. Seperti yang akan Anda perhatikan, Anda juga memasukkan prefixed versions dari properti CSS3 untuk browser yang meminta prefixed versions.

Hasil dua kolom
Gradient Panels
Sebagai bagian dari desain Anda mungkin ingin sebuah  radial gradient, jadi daripada menggunakan gambar, Anda dapat menggunakan CSS3  untuk mencapai ini. Keuntungan dari situs responsif ini adalah hal ini akan menyesuaikan skala dari lebar block.

Hasil dari gradient

No comments:

Post a Comment