Sanksi Pelanggaran Pasal 72 Undang-undang Nomor 19 Tahun 2002 Tentang Hak Cipta 1. Barangsiapa dengan sengaja melanggar dan tanpa hak melakukan

Transkripsi

1

2 Sanksi Pelanggaran Pasal 72 Undang-undang Nomor 19 Tahun 2002 Tentang Hak Cipta 1. Barangsiapa dengan sengaja melanggar dan tanpa hak melakukan perbuatan sebagaimana dimaksud dalam Pasal 2 Ayat (1) atau Pasal 49 Ayat (1) dan Ayat (2) dipidana dengan pidana penjara masing-masing paling singkat 1 (satu) bulan dan/atau denda paling sedikit Rp ,00 (satu juta rupiah), atau pidana penjara paling lama 7 (tujuh) tahun dan/atau denda paling banyak Rp ,00 (lima miliar rupiah). 2. Barangsiapa dengan sengaja menyiarkan, memamerkan, mengedarkan, atau menjual kepada umum suatu ciptaan atau barang hasil pelanggaran hak cipta atau hak terkait sebagai dimaksud Ayat (1) dipidana dengan pidana penjara paling lama 5 (lima) tahun dan/atau denda paling banyak Rp ,00 (lima ratus juta rupiah).

3 Teknik Cepat Menguasai CSS 3 KOMANG WISWAKARMA

4 TEKNIK CEPAT MENGUASAI CSS 3 Perpustakaan Nasional : Katalog Dalam Terbitan (KDT) Penulis : Komang Wiswakarma TEKNIK CEPAT MENGUASAI CSS 3 - Cet. I. - Yogyakarta : Penerbit Lokomedia, hlm; 14 x 21 cm ISBN : Penerbit Lokomedia, Cetakan Pertama : Juni 2011 Editor : Lukmanul Hakim Cover : Subkhan Anshori Layout : Lukmanul Hakim Diterbitkan pertama kali oleh : Penerbit Lokomedia Jl. Jambon, Perum. Pesona Alam Hijau 2 Kav. B-4, Kricak Yogyakarta redaksi@bukulokomedia.com website : Copyright Lokomedia, 2011 Hak Cipta dilindungi oleh Undang-Undang Dilarang memperbanyak, mencetak ataupun menerbitkan sebagian maupun seluruh isi buku ini tanpa izin tertulis dari penerbit.

5 Kata Pengantar Pertama-tama penulis mengucapkan puji dan syukur ke hadapan Ida Sang Hyang Widhi Wasa, karena berkat anugrah-nya, penulis dapat menyelesaikan buku ini yang semoga dapat bermanfaat bagi semua pembaca. Buku ini tersusun atas dukungan dari berbagai pihak diantaranya orang tua tercinta dan orang-orang terdekat lainnya. Buku ini membahas perkembangan baru pada dunia web design yaitu CSS 3. CSS merupakan salah satu bahasa style web yang sekarang sedang populer dipakai pada berbagai aplikasi web. CSS dibuat untuk membuat style pada web lebih bervariasi dan mudah digunakan. Seiring dengan pertumbuhan bahasa HTML di internet, tampilan yang ditawarkan CSS pun makin bervariasi dan makin memudahkan para pengembang web untuk memperindah tampilan web mereka. CSS level 3 (CSS 3) sudah dalam pengembangan dari bulan Desember tahun CSS 3 membawa banyak fitur menarik yang dapat di implementasikan pada halaman web. Pada buku ini, kita akan mencoba untuk mempraktekkan penggunaan beberapa property baru yang dibawa oleh CSS 3. Akhir kata, penulis juga menyadari masih banyak terdapat kekurangankekurangan dalam buku ini. Untuk itu, Anda dapat mengirimkan kritik, saran atau pertanyaan ke alamat penulis wiswasite@gmail.com atau mengunjungi website penulis di Bekasi, Jawa Barat, Januari 2010 Komang Wiswakarma v

6 Halaman ini Sengaja Dikosongkan vi

7 Daftar Isi BAB 1. Mengenal CSS Apa itu CSS? Perkembangan CSS Software yang Dibutuhkan Fitur Baru CSS Memahami Sintaks Dasar CSS BAB 2. Menjelajah Fitur Baru CSS 3 (Basic Property) Property Border Property border-color Property border-image Property border-radius Property box-shadow Property Background Property background-clip Property background-size Property Multiple Background Property Color Warna HSL Warna HSLA Warna RGBA Property Text Property text-shadow Property text-overflow...36 vii

8 Property word-wrap Property User Interface Property box-sizing Property resize Property outline Property Selector Atribut Selector Property Lainnya Layout Multi Kolom Property transform Efek Cermin (reflection) Efek Hover Efek Sliding Efek Masking Kustomisasi Font...58 BAB 3. Tip dan Trik CSS Crop Gambar dengan Negative Margin Menu Drop Down Horizontal Tab Accordion Tab Dock Style Menu dengan CSS Image Slideshow Kumpulan Trik CSS 3 yang Menarik...86 BAB 4. Proyek CSS 3 (Template Blog) Halaman Home...96 viii

9 Penerapan Image Slideshow pada Header Penerapan Menu Dropdown Penerapan Accordion Tab Penerapan Tooltips Halaman Utama (index.html) Halaman About Us Halaman Gallery Photo Halaman Contact ix

10 Halaman ini Sengaja Dikosongkan

11 1 Mengenal CSS 3

12 Bab 1 Mengenal CSS Apa itu CSS? CSS merupakan salah satu bahasa style web yang sekarang sedang populer dipakai pada berbagai aplikasi web. CSS dibuat untuk membuat style pada web lebih bervariasi dan mudah digunakan. Seiring dengan pertumbuhan bahasa HTML di internet, tampilan yang ditawarkan CSS makin bervariasi dan makin memudahkan para pengembang web untuk memperindah tampilan web mereka. Salah satu pemegang peranan penting dalam teknologi yang digunakan pada web di internet adalah W3C. Pada mulanya, W3C mendapat sembilan buah proposal dari penggunaan style yang akan digunakan dalam web. Namun, pada akhirnya hanya dua proposal yang diterima untuk digunakan dalam web sebagai bahasa style yang akan digunakan, bahasa tersebut diantaranya, Cascading HTML Style Sheets (CHSS) dan Stream-based Style Sheet Proposal (SSP). CHSS merupakan cikal bakal bahasa CSS. CHSS diajukan oleh Håkon Wium Lie pada Oktober Bert Bos bekerja pada browser buatannya sendiri bernama Argo dan menggunakan bahasa style webnya sendiri yaitu SSP. Akhirnya Bert Bos dan Håkon Wium Lie bekerja sama untuk mengembangkan bahasa style CSS (Huruf H untuk HTML dihilangkan, karena style bahasa CSS dapat digunakan pada dokumen lain selain HTML). Lihat gambar Perkembangan CSS Bahasa style CSS sendiri mengalami perkembangan dari waktu ke waktu. Beberapa browser juga menyesuaikan dengan perkembangan tersebut. Meskipun CSS 1 sudah dikeluarkan oleh W3C pada tahun 1996 dan Microsoft Internet Explorer 3 yang masih menyediakan hanya beberapa kemampuan dukung terhadap CSS 1, namun CSS 1 tetap keluar pada tahun tersebut. 2 Teknik Cepat Menguasai CSS 3

13 Gambar 1.1 Håkon Wium Lie dan Bert Bos (Dua Orang Pengembang CSS) CSS tetap membutuhkan waktu tiga tahun untuk di-implementasikan secara lengkap pada web browser yang ada. Internet Explorer 5.0 yang disediakan untuk Macintosh pada tahun 2000 merupakan browser pertama yang menyediakan fitur dan dukungan terhadap CSS 1 secara lengkap. CSS 1 CSS pertama yang menjadi resmi dikeluarkan oleh W3C adalah CSS level 1 atau yang sering disebut CSS 1. CSS 1 ini dikeluarkan pada Desember tahun Kemampuan CSS 1 diantaranya: Properti font seperti typeface dan emphasis Warna dari text, background dan elemen lain Atribut text seperti word spacing, letter spacing dan text line Peletakan (Align) dari text, gambar tabel dan elemen lain Margin, border, padding Saat ini W3C sudah tidak melakukan mengembangkan CSS 1, sebagai gantinya, W3C akan mengembangkan CSS ke tahap berikutnya yaitu CSS 2. Bab 1. Mengenal CSS 3 3

14 CSS 2 CSS level 2 (CSS 2) dikembangkan oleh W3C dan dipublikasikan sebagai rekomendasi style baru pada Mei Beberapa kemampun baru dari CSS ditambahkan pada versi ini seperti posisi absolute, relative dan fixed, z-index, dukungan media types, bidirectional text, dan property font baru seperti shadow (bayangan). CSS 2.1 CSS 2 revision 1 memperbaiki error yang terjadi pada CSS 2, menghilangkan dukungan dan fitur yang kurang dan menambahkan extension pada browser. CSS 3 CSS level 3 sudah dalam pengembangan dari bulan Desember tahun CSS 3 membawa banyak fitur menarik yang dapat di-implementasikan pada halaman web. Pada buku ini kita akan mencoba untuk membuat beberapa property baru yang dibawa oleh CSS Software yang Dibutuhkan Sebelum kita memulai lebih jauh dalam design web menggunakan CSS 3, kita pelu meng-install beberapa software yang dibutuhkan untuk bisa menjalankan CSS 3, diantaranya: Safari 5 Mozilla Firefox 3.6 Notepad ++. Ketiga software diatas merupakan software yang bebas untuk digunakan. Ketiga software tersebut dapat Anda temukan di CD yang disertakan dalam buku ini, atau Anda dapat mendownload langsung Safari 5 pada website resminya di Lihat gambar 1.2. Kemudian, untuk men-download Mozilla Firefox 3.6, Anda dapat mengunjungi alamat Lihat gambar Teknik Cepat Menguasai CSS 3

15 Gambar 1.2 Halaman download Safari 5 Gambar 1.3 Halaman download Mozilla Firefox 3.6 Dan terakhir, Anda dapat mendownload Notepad++ secara gratis pada alamat resminya di Lihat gambar 1.4. Bab 1. Mengenal CSS 3 5

16 Gambar 1.4 Halaman download Notepad Silahkan install ketiga software di komputer Anda. Cara instalasinya seperti biasa, klik 2x file installernya, kemudian ikuti instruksi di layar. Mungkin ada diantara pembaca yang bertany mengapa kita menginstall dua jenis browser, yaitu Mozilla Firefox dan Safari 5? Karena, saat ini CSS 3 hanya dapat diaplikasikan pada browser dan versi tertentu saja. Dan kode CSS 3 untuk Mozilla Firefox dan Safari berbeda, misalkan pada Safari kita menggunakan prefix webkit pada setiap kode CSS 3, sedangkan pada Mozilla kita menggunakan prefix moz. Perbedaan tersebut dikarenakan pembuat browser yang berbeda dengan menggunakan mesin yang berbeda pula. Untuk menandai setiap browser yang berbeda, kode CSS 3 akan diikuti prefix (awalan) berupa inisial organisasi pembuatnya. Pada buku ini, kita hanya akan membahas penerapan CSS 3 pada browser terbaru dari Mozilla Firefox dan Safari. Berikut adalah prefix (ekstensi) dari beberapa organisasi pembuat browser: 6 Teknik Cepat Menguasai CSS 3

17 1.4 Fitur Baru CSS 3 Seperti yang kita ketahui, CSS 3 merupakan sebuah evolusi baru dari CSS 2. CSS 3 memberikan banyak kemudahan baru bagi para pengembang web dalam menciptakan berbagai aplikasi web. Berikut beberapa property baru dari CSS 3 yang dapat digunakan. 1. Property Border, yang diantaranya berisi: border-color border-image border-radius box-shadow 2. Property Background, yang diantaranya berisi, background-clip background-size multiple background 3. Property Color, yang diantaranya berisi, Warna HSL Warna HSLA Opacity Warna RGBA 4. Property Text Effect, yang diantaranya berisi, Text-shadow Text-overflow Word-wrap 5. Property User Interface, yang diantaranya berisi, Box-sizing Resize Outline Bab 1. Mengenal CSS 3 7

18 Nav-top, nav-right, nav-bottom, nav-left 6. Selector, yang diantaranya berisi, Atribut selector 7. Model Box Sederhana, yang diantaranya berisi, Overflow-x, overflow-y 8. Generated Content, yang diantaranya berisi, Content 9. Property Lain, yang diantaranya berisi, Media queries Multi-column layout Web font Speech Dalam buku ini, kita akan mencoba mengupas berbagai trik yang dapat digunakan untuk memudahkan berbagai cara dalam mendesain sebuah web dengan menggunakan property yang disediakan oleh CSS Memahami Sintaks Dasar CSS 3 Sebelum kita menjelajah fitur baru CSS 3, sebaiknya kita pahami dulu sintaks dasar dari CSS 3 yang bisa dilihat pada gambar 1.5. Penjelasan: Gambar 1.5 Sintaks dasar CSS 3 Pertama, kita perlu menentukan elemen HTML apa yang akan diberi style CSS, dalam kasus ini adalah h1. 8 Teknik Cepat Menguasai CSS 3

19 Kedua, tambahkan tanda kurung pembuka dan penutup kurawal { }. Ketiga, didalam kurung kurawal, letakkan property yang akan kita terapkan pada elemen h1, dalam kasus ini property color dengan value (nilai) #333 (abu-abu). Artinya, teks yang berada di tag <h1> akan berwarna abu-abu semua. Terakhir, berikan tanda titik koma (;) untuk mengakhiri perintah CSS. Kita juga bisa memberikan beberapa property sekaligus untuk satu elemen HTML, misalnya elemen body akan kita beri beberapa property sekaligus, maka sintaks CSS-nya bisa dilihat pada gambar 1.6. Gambar 1.6 Memberikan beberapa property sekaligus pada satu elemen HTML Seperti yang Anda lihat, maka aturan mempunyai property dan value. Hal ini memungkinkan Anda untuk memberikan beberapa property dan nilai sekaligus. Demikianlah penjelasan singkat dari sintaks dasar CSS 3, pada bab berikutnya akan kita terapkan pada beberapa kasus untuk mempertajam pemahaman Anda mengenai CSS. Bab 1. Mengenal CSS 3 9