Saturday, 11 July 2015

Bagaimana CSS3 dapat memecahkan masalah desain sehari-hari?

Mari kita pertimbangan desain rintangan yang umum kita hadapi untuk membuat desain sudut bulat pada elemen layar, mungkin untuk membuat menu tab atau sudut elemen header misalnya. Menggunakan CSS 2.1 ini dapat dicapai dengan menggunakan sebuah teknik sliding doors (http://www.alistapart.com/articles/slidingdoors/), dimana salah satu gambar background diletakkan di belakang yang lain. HTML sederhana dapat terlihat seperti ini :

<a href="#"><span>Box Title</span></a>

Kita menambahkan background bulat untuk elemen <a> dengan membuat dua gambar. Yang pertama,
disebut headerLeft.png, akan menjadi lebar 15 piksel dan tinggi 40 piksel dan yang kedua, yang disebut headerRight.png dalam contoh ini, akan kita buat lebih lebar untuk mengantisipasi header (disini 280 pixel). Masing-masing akan menjadi salah satu setengah dari "sliding door". Sebagai salah satu elemen (teks dalam tag <span>), background mengisi  ruang yang membuat sudut bulat. Berikut adalah bagaimana CSS dalam contoh ini terlihat:

 a {
display: block;
height: 40px;
float: left;
font-size: 1.2em;
padding-right: 0.8em;
background: url(images/headerRight.png) no-repeat scroll top right;

}
a span {
background: url(images/headerLeft.png) no-repeat;
display: block;
line-height: 40px;
padding-left: 0.8em;
}


Screenshot berikut menunjukkan bagaimana tampilannya di Google Chrome (V16):

Cara diatas memang memecahkan masalah tapi memerlukan markup tambahan (secara semantik elemen <span> tidak mempunyai nilai) dan dua permintaan tambahan HTTP (untuk gambar) ke server untuk menciptakan efek pada layar. Sekarang, kita bisa menggabungkan dua gambar menjadi satu untuk membuat lebih baik dan kemudian menggunakan background-position: Properti CSS di geser tapi dengan bandwith ekonomis yang disediakan, itu masih merupakan solusi yang fleksibel. Apa yang terjadi jika klien menginginkan sudut yang memiliki radius lebih rapat? Atau warna yang berbeda? Maka kita perlu membuat kembali gambar yang kita inginkan. Sayangnya, sampai CSS3 ini telah menjadi sebuah situasi realita buat kita, sebagai frontend designer dan developer saat ini kita dapat melihat masa depan dengan CSS3, dan mari kita revisi HTML di atas menjadi lebih hanya: 

 <a href="#">Box Title</a>

Dan, untuk memulai dengan CSS dapat menjadi sebagai berikut :

a {
float: left;
height: 40px;
line-height: 40px;
padding-left: 0.8em;
padding-right: 0.8em;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
background-image: url(images/headerTiny.png);
background-repeat: repeat-x;
}


Screenshot berikut menunjukkan bagaimana versi CSS3 memperlihatkan tombol di browser yang sama (Chrome V16): 


 Dalam contoh ini, dua gambar sebelumnya telah diganti dengan 1 pixel gambar tunggal yang diulang sepanjang sumbu x. Meskipun lebar gambar hanya 1 piksel, tinggi 40 piksel, mudah-mudahan lebih tinggi dari konten yang dimasukkan. Bila menggunakan background sebagai gambar, selalu penting untuk ketinggian "overshoot", untuk mengantisipasi konten meluap, yang sayangnya membuat gambar lebih besar dan kebutuhan bandwith yang lebih besar. Bagaimanapun juga tidak seperti solusi imagebased, CSS3 dapat menangani ini dengan border-radius dan properti terkait. Klien ingin sudut menjadi bulat kecil, katakanlah 12 piksel? Tidak masalah, hanya perlu mengubah border-radius 12px dan pekerjaan Anda selesai. Properti sudut bulat CSS3 cepat, fleksibel, dan didukung oleh Safari (v3 +), Firefox (v1 +), Opera (v10.5 +), Chrome (v3 +), dan Internet Explorer 9. Microsoft sangat bersemangat tentang dukungan IE 9 tentang fitur, bahkan mereka telah merancang sebuah halaman interaktif menunjukkan berbagai efek yang dapat dicapai dengan properti border-radius. Lihat demonstrasi ini di URL berikut:

http://ie.microsoft.com/testdrive/html5/borderradius/default.html

CSS3 dapat mengambil hal-hal lebih lanjut dengan menghilangkan kebutuhan untuk gambar latar belakang gradient dengan memproduksi efek browser. Properti ini tidak serta didukung tetapi dengan garis linear-gradient (kuning, biru) , background dari setiap elemen dapat menikmati gradient yang dihasilkan CSS3.

Gradient dapat ditentukan dalam warna yang solid, nilai-nilai HEX tradisional (misalnya, #BFBFBF) atau menggunakan salah satu mode warna CSS3 (lebih lanjut tentang akan dibahas dalam artikel selanjutnya, CSS3: Selectors, Tipografi, dan Color Mode). Jika Anda senang untuk menggunakan browser lama untuk melihat background gradient CSS akan memberikan sesuatu seperti tumpukan warna yang solid dalam hal browser tidak mampu menangani gradient. 

background-color: #42c264;
background-image: -webkit-linear-gradient(#4fec50, #42c264);
background-image: -moz-linear-gradient(#4fec50, #42c264);
background-image: -o-linear-gradient(#4fec50, #42c264);
background-image: -ms-linear-gradient(#4fec50, #42c264);
background-image: -chrome-linear-gradient(#4fec50, #42c264);
background-image: linear-gradient(#4fec50, #42c264);


Properti  linear-gradient menginstruksikan browser untuk memulai dengan nilai warna pertama (dalam contoh ini #4fec50) dan pindah ke nilai warna kedua (#42c264).

Anda akan melihat bahwa dalam kode CSS, properti background-image linear-gradient telah diulang dalam sejumlah prefiks: misalnya, -webkit-. Hal ini memungkinkan vendor browser yang berbeda (misalnya, -moz- untuk Mozilla Firefox, -ms- untuk Microsoft Internet Explorer, dan sebagainya) untuk bereksperimen dengan penerapan mereka sendiri dari properti CSS3 yang baru. 

No comments:

Post a Comment