Web Design Tips: Menggunakan CSS Reset

Pada tutorial css kali ini saya akan membahas Tips Desain Web. Sudah menjadi pengetahuan yang umum jika masing-masing browser Internet memiliki style bawaan tersendiri, sebagai contohnya margin default atau padding default pada Internet Explorer itu memiliki nilai ?yang berbeda dengan Mozilla Firefox ataupun Chrome, contoh yang lain, unordered list default milik Internet Explorer memiliki style berbeda dengan style pada firefox. Sehingga seorang web designer seringkali direpotkan oleh hal ini, biasanya seorang web designer menggunakan javascript untuk mendeteksi user menggunakan browser apa, kemudian jika user menggunakan browser internet maka?javascript mencocokkan stylenya dengan file berisi style khusus untuk internet explorer, begitu juga dengan mozilla firefox dan browser lain, file stylenya juga berbeda. Benar-benar merepotkan karena kita harus membuat style yang berbeda untuk browser yang berbeda. Tapi hasilnya sangat baik.
Penulis sendiri awalnya memang seperti itu, memang merepotkan. Tapi belakangan penggunaanCSS Reseter semakin populer digunakan, karena fungsinya sama baiknya dengan menggunakan file file yang berisi style yang berbeda menyesuaikan dengan browsernya. Dalam teknik pencocokan style, ketika user menggunakan internet explorer maka style yang digunakan pun biasanya dinamakan dengan ie.css, jika user menggunakan firefox maka style yang digunakan biasanya dinamakan dengan default.css, dan lain-lain sebagainya, dalam teknik css reset, kita cukup menggunakan satu buah file css saja, ?namun di tambahkan dengan barisan kode yang dapat mereset kondisi css, sehingga browser tidak memiliki nilai default dari style-style yang ada. Alias 0 (null).

Berikut adalah css reset yang biasa saya gunakan :

/* RESET */

html, body, div, span, applet, object, iframe,

h1, h2, h3, h4, h5, h6, p, blockquote, pre,

a, abbr, acronym, address, big, cite, code,

del, dfn, em, font, img, ins, kbd, q, s, samp,

small, strike, strong, sub, sup, tt, var,

b, u, i, center,

dl, dt, dd, ol, ul, li,

fieldset, form, label, legend,

table, caption, tbody, tfoot, thead, tr, th, td {

margin: 0;

padding: 0;

outline: 0;

font-size: 100%;

vertical-align: baseline;

background: transparent;

height: auto;

border-top-width: 0;

border-bottom-width: 0;

border-left-width: 0;

}

blockquote:before, blockquote:after,q:before, q:after {content: ”;content: none;}

blockquote, q {quotes: none;}

:focus {outline: 0;}

.clear {clear: both;display: block;height: 1px;overflow: hidden;margin: 0;padding: 0;}

ins {text-decoration: none;}

del {text-decoration: line-through;}

table {border-collapse: collapse;border-spacing: 0;}

ol, ul {list-style: none;}

body {background-color: white;background-position: center center;}

/* RESET */

Sebenarnya ada beberapa teknik reset yang digunakan, tapi penulis sendiri cenderung menggunakan css reset yang di atas. Anda tidak lagi direpotkan oleh perbedaan tampilan layout antara Internet Explorer dengan Mozilla Firefox atau yang lainnya. Sehingga hasilnya nanti tampilan css di firefox juga mirip dengan tampilan menggunakan browser internet yang lain. ?Selamat Mencoba.

Pengenalan CSS3

Satu atau dua tahun yang lalu mungkin anda pernah mendengar CSS versi 3 telah keluar, meskipun saat itu masih beta tapi ini menjadi kabar yang menggembirakan, karena CSS3 tidak akan dirilis jika tidak membawa banyak sekali fitur-fitur baru di dalamnya, namun saat itu baru sedikit browser internet yang mendukung CSS3 ini. Browser yang mensupport CSS baru Safari v.3, namun sekarang Firefox pada versi ke 3.6 sudah mendukung CSS3. Bagi anda yang mungkin belum mengetahui CSS, CSS digunakan dalam pembuatan layout yang tableless, artinya pembuatan layout tidak lagi menggunakan metode table, karena dampak dari penggunaan table yang paling terasa adalah beratnya layout yang dihasilkan karena begitu banyak kode-kode dari hasil penggunaan table. Tableless pun menjadi standarisasi bagi seorang SEO-er, karena sifatnya yang search engine friendly. Tidak hanya dalam pembuatan layout, CSS3 pun efektif digunakan dalam pembuatan style-style yang mempercantik sebuah website.

Baik, disini penulis akan jabarkan fitur apa saja yang baru dalam CSS3,  CSS3 memiliki fasilitas untuk shadow dari suatu div layout, fitur transparansi, gradien warna pada border, warna pada text yang diseleksi, fitur skala memperkecil atau memperbesar layout, kolom pada text, dan fitur gradien pada background.

Terdapat perbedaan penamaan style antara safari dan chrome dengan firefox, penulis akan jelaskan nanti.

Drop Shadow
Menggunakan drop shadow pada css 3, cukup tambahkan baris

-moz-box-shadow: #585858 3px 3px 4px;
moz ini digunakan untuk browser firefox

-webkit-box-shadow: #585858 3px 3px 4px;
dan webkit digunakan untuk browser chrome serta safari

contoh penggunaan drop shadow adalah seperti di bawah ini ?

RGBA (Transparency)
background-color: rgba(218, 227, 240, .3);
rgb 218,227,240 menghasilkan warna abu-abu namun lebih keputih, dan .3 ini menjelaskan penggunaan transparansi 30%.
contohnya adalah seperti ini ?

Multiple Border Color
-moz-border-bottom-colors: #0101DF #5858FA #8181F7 #A9A9F5 #CECEF6 #E0E0F8 #EFEFFB #fff;
moz-border memungkinkan satu div memiliki banyak border yang berlapis?
hasilnya adalah seperti ini

Select Text Color
p.selection::-moz-selection {
background: #2E9AFE; /* Firefox */
color: #fff;
}

-moz-selection terjadi ketika textnya di seleksi? anda bisa lihat hasilnya seperti ini, silahkan textnya anda blok dengan menggunakan mouse.

Scale

-moz-transform: scale(1.05);
moz-transform digunakan untuk firefox, dan scale(1.05) menghasilkan perbesaran 1,05 dari ukuran aslinya.
-webkit-transform: scale(1.05);
begitu juga dengan webkit-transform yang digunakan untuk browser safari dan chrome.

Text Column
-moz-column-count:3;
menjadikan text memiliki 3 kolom.

-moz-column-rule: solid 1px black;

dan memiliki garis tengah.

-moz-column-gap: 30px;
gap disini sama seperti padding, atau jarak antar text.

Gradient
background: -moz-linear-gradient(-45deg, #2E9AFE,#0404B4 );
penggunaan moz-linear-gradien dengan 45derajat mulai dari biru tua sampai biru muda, hasilnya adalah seperti ini :

Setelah berkenalan dengan CSS3, [enulis akan jelaskan bagaimana menggunakan CSS lebih lanjut dalam membuat style website maupun layout website, pada Tutorial CSS selanjutnya. Selamat Mencoba.

sumber:

http://www.css3.info