Apa yang berbeda dari CSS3 dengan CSS versi sebelumnya ? Banyak sekali perbedaannya, Dengan menggunakan CSS3 anda bukan hanya sekedar melakukan formating tampilan website, Namun anda juga bisa membuat animasi yang sering diterapkan oleh jQuery. Contohnya seperti Polaroid, Crop Images, Accordion, & masih banyak lainnya. Berikut ini saya akan menuliskan beberapa fitur terbaru CSS3 yang akan membuat anda terkagum-kagum.
Fitur-Fitur CSS3
- Properti Border
- Border Color
- Border Image
- Border Radius
- Box Shadow
- Properti Background
- Background Origin
- Background Clip
- Background Size
- Multiple Background
- Properti Color
- HSL Color
- HSLA Color
- RGBA Color
- Opacity
- Properti Text
- Text Effects
- Text Shadow
- Text Overflow
- Wordwrap
- Properti User Interface
- User Interface
- Box Sizing
- Outline
- Resize
- Properti Navigation
- Nav Top
- Nav Bottom
- Nav Left
- Properti Selector
- Attribute Selector
- Properti Lainnya
- Basic Box Model
- Overflow X
- Overflow Y
- Generated Content
- Content
- Other Modules
- Media Queries
- Multi Column Layout
- Web Font
- Speech
Walaupun CSS3 ini sangat menakjubkan, namun belum semua web browser support CSS3 karena CSS3 masih merupakan teknologi terbaru. Tenang, secara bertahap semua browser akan mendukungnya karena sudah menjadi standard. Untuk saat ini web browser yang support diantaranya adalah Mozilla Firefox, Safari, Opera, Google Chrome & Internet Explorer 9 meski belum support secara keseluruhan fitur CSS3.
CSS kepanjangan dari “Cascading Style Sheets” yang merupakan format atau style untuk tampilan website. CSS dapat dibuat dalam halaman bersama perintah HTML dengan menyisipkan tag
<style>(CSS Internal / Inline) atau dibuat dengan file tersendiri yang berektensi .css.
Keuntungan Penggunaan CSS
Dengan menggunakan CSS, kamu akan lebih mudah untuk mengatur style elemen dalam halaman web Anda. Sebagai contoh, misalnya untuk mengatur style elemen heading, Anda menginginkan jenis font nya adalah Arial, 20 pixel dan berwarna merah. Dengan CSS, Anda cukup menuliskan properti dari elemen heading tersebut sekali saja, dan Anda akan memperoleh hasil yang diinginkan. Bandingkan apabila tidak menggunakan CSS, Anda akan mengatur style pada setiap elemen heading yang ada. Tentu saja hal ini akan sangat merepotkan. Perhatikan contoh berikut ini :
<!doctype html >
<html>
<head>
<title>CSS Guide</title>
<style type="text/css">
h1 {
color: red;
font-family: "arial";
}
</style>
</head>
<body>
<h1>Ini adalah heading 1</h1>
<p>Ini adalah paragraf. Ini adalah paragraf. Ini adalah paragraf. Ini adalah paragraf. Ini adalah paragraf. Ini adalah paragraf.
Ini adalah paragraf. Ini adalah paragraf. </p>
<h1>Ini adalah heading 1</h1>
<p>Ini adalah paragraf. Ini adalah paragraf. Ini adalah paragraf. Ini adalah paragraf. Ini adalah paragraf. Ini adalah paragraf.
Ini adalah paragraf. Ini adalah paragraf. </p>
</body>
</html>
Struktur Style
Style pada CSS memiliki struktur sebagai berikut
Selector digunakan untuk menentukan pada elemen apa style tersebut diterapkan. Selector dapat berupa nama id elemen atau nama class. Bagian deklarasi menerangkan style yang akan dibuat. Bagian ini terdiri dari properti dan value. Properti dapat diisi dengan jenis warna, ukuran, perataan margin dll, sedangkan value diisi dengan nilai dari propertinya, misalnya red untuk warna dll. Setiap akhir penulisan properti dan value harus diakhiri dengan tanda titik koma (semicolon). Tanda ini juga digunakan sebagai pemisah antar satu properti dengan properti lain.
Apabila Anda lupa memberikan tanda titik koma, maka style tersebut tidak akan dijalankan oleh browser. Mungkin Anda bertanya, bagaimana jika kita akan membuat style untuk beberapa elemen yang berbeda namun stylenya sama? Misalkan kita akan membuat style untuk elemen h1, h2, h3 namunmemiliki style yang sama. Berikut ini adalah sintaksnya:
h1, h2, h3 { properti1 : value1;
properti2 : value2;
properti3 : value3;
.
.
}
Selector
Dalam CSS, terdapat cascade yang merupakan metode untuk mengatur style supaya tidak terjadi konflik. Untuk lebih jelasnya perhatikan contoh berikut ini.
<!doctype html >
<html>
<head>
<title>CSS Guide</title>
<style type="text/css">
P {
color: red;
}
p em {
color: green;
}
</style>
</head>
<body>
<h1>Ini adalah heading 1</h1>
<p>Ini adalah paragraf. Ini adalah paragraf. Ini adalah paragraf. Ini adalah paragraf. Ini adalah paragraf. Ini adalah paragraf.
Ini adalah paragraf. Ini adalah paragraf. <em>Ini adalah huruf dicetak miring</em>. Ini adalah paragraf. Ini adalah paragraf.
Ini adalah paragraf. Ini adalah paragraf. </p>
<h1><em>Ini adalah heading 1</em></h1>
<p>Ini adalah paragraf. Ini adalah paragraf. Ini adalah paragraf. Ini adalah paragraf. Ini adalah paragraf. Ini adalah paragraf.
Ini adalah paragraf. Ini adalah paragraf. <em>Ini adalah huruf dicetak miring</em>. Ini adalah paragraf. Ini adalah paragraf.
Ini adalah paragraf. Ini adalah paragraf. </p>
</body>
</html>
Pada code di atas terdapat style untuk mengatur tampilan elemen paragraf (<p>) dan untuk emphasize atau <em> (cetak miring seperti halnya italic).
VALUE
Terdapat beberapa jenis value yang dapat berikan pada properti style, antara lain berupa
predefined value, bilangan, prosentase, url, dan juga warna.
Predefined Value
Predefined value merupakan nilai yang sudah terdefinisikan oleh (X)HTML. Nilai ini dapat dipilih
dari beberapa alternatif pilihan yang ada. Contoh penggunaan predefined value ini adalah pada style
berikut
h1 {
font-style : italic;
}
Style di atas digunakan untuk membuat text miring pada elemen heading 1. Dalam hal ini value
‘italic’ merupakan predefined value. Untuk properti font-style terdapat pilihan value yang telah
didefinisikan oleh (X)HTML yaitu italic, normal, dan oblique. Perhatikan bahwa predefined value ditulis tanpa diapit tanda petik.
Bilangan
Suatu value dapat pula berupa bilangan tertentu (tanpa satuan apapun). Berikut ini contohnya:
p {
line-height : 2;
}
Maksud style di atas adalah mengatur jarak antar baris paragraf menjadi 2 kali dari ukuran fontnya.
Panjang, Besar dan Prosentase
Untuk menyatakan panjang, besar dan prosentase, value harus diberikan satuan seperti px
(pixel), in (inch), cm (centimeter), mm (milimeter), pt (points) dan pc (picas). Berikut ini beberapa
contohnya :
h1 {
font-size : 20px; /* membuat ukuran font 20 pixel */
}
hr {
width : 20%; /* membuat garis horizontal dengan panjang 20% terhadap lebar jendela browser /*
}
URL
Sebuah value juga dapat berupa URL. Berikut ini contohnya
body {
background : url(img/image.jpg);
}
Style di atas untuk memberi background image pada body yang diambil dari folder img dengan nama file image.jpg.
Membuat Text Indent
Pada bagian awal paragraf biasanya terdapat text indent atau teks yang agak menjorok ke dalam
paragraf dalam jarak tertentu. Berikut ini adalah properti yang digunakan untuk mengaturnya:
text-indent : jarak;
Contoh:
<!doctype html>
<html>
<head>
<title>CSS Guide</title>
<style type="text/css">
p {
text-indent : 40px;
}
</style>
</head>
<body>
<h1>Ini Judul Heading</h1>
<p>Ini adalah paragraf 1. Ini adalah paragraf 1. Ini adalah paragraf 1. Ini adalah paragraf 1.
Ini adalah paragraf 1. Ini adalah paragraf 1. Ini adalah paragraf 1. Ini adalah paragraf 1
Ini adalah paragraf 1. Ini adalah paragraf 1. </p>
<p>Ini adalah paragraf 2. Ini adalah paragraf 2. Ini adalah paragraf 2. Ini adalah paragraf 2.
Ini adalah paragraf 2. Ini adalah paragraf 2. Ini adalah paragraf 2. Ini adalah paragraf 2.
Ini adalah paragraf 2. Ini adalah paragraf 2. Ini adalah paragraf 2.
</p>
</body>
</html>
Membuat Drop Cap
Ingin mempercantik tampilan paragraf dengan menambahkan drop cap pada huruf pertamanya? Berikut ini contoh penulisan style untuk membuat hal tersebut.
<!doctype html >
<html>
<head>
<title>CSS Guide</title>
<style type="text/css">
p.styleku:first-letter {
float: left;
font-family: "Lucida Grande";
font-size: 80px;
}
p {
text-align : justify;
}
</style>
</head>
<body>
<h1 id="heading1">Ini Judul Heading 1</h1>
<p class="styleku">
Bagian ini adalah paragraf. Bagian ini adalah paragraf. Bagian ini adalah paragraf.
Bagian ini adalah paragraf. Bagian ini adalah paragraf. Bagian ini adalah paragraf.
Bagian ini adalah paragraf. Bagian ini adalah paragraf. Bagian ini adalah paragraf.
Bagian ini adalah paragraf. Bagian ini adalah paragraf. Bagian ini adalah paragraf.
Bagian ini adalah paragraf. </p>
</body>
</html>
Mengubah Warna Background Text
Apabila Anda ingin mengubah warna background text, maka berikut ini adalah propertinya:
background : warna;
cara penulisan value dari warna sama dengan color, yaitu dapat berupa nama eksplisit warna yang
diinginkan maupun kode hexadesimalnya.
Contoh:
<!doctype html >
<html>
<head>
<title>CSS Guide</title>
<style type="text/css">
body {
background : green;
}
p.styled {
font-family: "Palatino Linotype";
font-size: 20px;
color: #FF0000;
background: #FFFFFF; /* warna putih */
}
p {
color: orange;
font-weight: bold;
background: #000000; /* warna hitam */
}
</style>
</head>
<body>
<p class="styled">Ini adalah paragraf 1. Ini adalah paragraf 1. Ini adalah paragraf 1. Ini adalah paragraf 1. Ini adalah paragraf
1. Ini adalah paragraf 1. Ini adalah paragraf 1. Ini adalah paragraf 1. Ini adalah paragraf 1. Ini adalah paragraf 1. </p>
<p>Ini adalah paragraf 2. Ini adalah paragraf 2. Ini adalah paragraf 2. Ini adalah paragraf 2. Ini adalah paragraf 2. Ini adalah
paragraf 2. Ini adalah paragraf 2. Ini adalah paragraf 2. Ini adalah paragraf 2. Ini adalah paragraf 2. Ini adalah paragraf 2.
</p>
</body>
</html>
Pada contoh di atas, bagian body diberi warna background (seluruh halaman), namun perkecualian
untuk bagian paragraf. Paragraf pertama diberi warna background putih sedangkan paragraf kedua
diberi warna hitam.
Style Untuk Font Family
Font family digunakan untuk menentukan jenis huruf/font pada suatu tampilan teks. Berikut ini
adalah nama properti dan penulisan valuenya:
font-family: name;
dengan name adalah jenis font yang Anda inginkan. Contoh:
p {
font-family: arial;
}
Anda juga dapat memberikan jenis font lebih dari satu yang dipisahkan dengan koma.
Contoh:
p {
font-family : "arial black", arial, "Times New Roman";
}
Maksud dari style di atas adalah bahwa jenis font arial black akan diprioritaskan untuk
digunakan. Namun apabila font tersebut tidak disupport oleh browser maka yang digunakan arial, begitu seterusnya. Sebagai catatan, untuk jenis font yang terdiri dari lebih satu kata harus diapit dengan tanda petik ganda (double quotes).
Mengatur Ukuran Font
Pengaturan ukuran font dapat dilakukan dengan style yang menggunakan properti
font-size : size;
dengan size diisi angka yang menyatakan ukuran disertai satuannya.
Contoh:
<!doctype html>
<html>
<head>
<title>CSS Guide</title>
<style type="text/css">
p.styled {
font-size: 20px; /* membuat font berukuran 15 pixel */
}
</style>
</head>
<body>
<p class="styled">Ini adalah paragraf 1. Ini adalah paragraf 1. Ini adalah paragraf 1. Ini adalah paragraf 1. Ini adalah paragraf 1. Ini adalah paragraf 1. Ini adalah paragraf 1. Ini adalah paragraf 1. Ini adalah paragraf 1. Ini adalah paragraf 1. Ini adalah paragraf 1. Ini adalah paragraf 1. Ini adalah paragraf 1. Ini adalah paragraf 1. Ini adalah paragraf 1. </p>
<p>Ini adalah paragraf 2. Ini adalah paragraf 2. Ini adalah paragraf 2. Ini adalah paragraf 2. Ini adalah paragraf 2. Ini adalah paragraf 2. Ini adalah paragraf 2. Ini adalah paragraf 2. Ini adalah paragraf 2. Ini adalah paragraf 2. Ini adalah paragraf 2. Ini adalah paragraf 2. Ini adalah paragraf 2. Ini adalah paragraf 2. Ini adalah paragraf 2. </p>
</body>
</html>
Pada contoh di atas, paragraf pertama berukuran 20 pixel sedangkan paragraf kedua berukuran normal
(default). Sebagai catatan, teks berukuran 16px secara default.
Berikut adalah contoh file CSS3 sederhana yang mengaplikasikan style-style diatas:
Dan ini merupakan tampilan hasilnya di web browser :
Demikian artikel yang bisa saya share untuk teman-teman. Semoga bermanfaat dan selamat mencoba!
[Ira Fitri Auliana / 1306470792]
Sumber :
- http://ibbi.ac.id/ibbiacid/bahan/penggunaan-css-dalam-perancangan-web.pdf
- http://id.wikipedia.org/wiki/CSS_3
- http://www.syakirurohman.net/2013/08/mengenal-apa-itu-css-dan-bagaimana-menggunakannya.html
Tidak ada komentar:
Posting Komentar