teknik cepat menguasai - tokolokomedia.com · gambar 1.4 halaman download notepad++ 5.8.3 silahkan...

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 1.000.000,00 (satu juta rupiah), atau pidana penjara paling lama 7 (tujuh) tahun dan/atau denda paling banyak Rp 5.000.000.000,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 500.000.000,00 (lima ratus juta rupiah).

Te k n i k C e p at M e n g u a s a i

CSS 3

www.bukulokomedia.com

KOMANG WISWAKARMA

TEKNIK CEPAT MENGUASAI CSS 3Perpustakaan Nasional : Katalog Dalam Terbitan (KDT)Penulis : Komang WiswakarmaTEKNIK CEPAT MENGUASAI CSS 3- Cet. I. - Yogyakarta : Penerbit Lokomedia, 2011 130 hlm; 14 x 21 cm ISBN : 978-979-1758-77-2

Penerbit Lokomedia, Cetakan Pertama : Juni 2011

Editor : Lukmanul HakimCover : Subkhan AnshoriLayout : Lukmanul Hakim

Diterbitkan pertama kali oleh :Penerbit LokomediaJl. Jambon, Perum. Pesona Alam Hijau 2 Kav. B-4, Kricak Yogyakarta 55242.

email : [email protected] : www.bukulokomedia.com

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.

v

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 2005.

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 kekurangan- kekurangan dalam buku ini. Untuk itu, Anda dapat mengirimkan kritik, saran atau pertanyaan ke alamat email penulis [email protected] atau mengunjungi website penulis di www.komangwiswakarma.com.

Bekasi, Jawa Barat, Januari 2010

Komang Wiswakarma

vi

Halaman ini Sengaja Dikosongkan


vii

Daftar Isi

BAB 1. Mengenal CSS 3 ...................................................................................1

1.1. Apa itu CSS? ................................................................................................2

1.2. Perkembangan CSS......................................................................................2

1.3. Software yang Dibutuhkan ..........................................................................4

1.4. Fitur Baru CSS 3 ..........................................................................................7

1.5. Memahami Sintaks Dasar CSS 3 ................................................................8

BAB 2. Menjelajah Fitur Baru CSS 3 (Basic Property) ..............................11

2.1. Property Border ..........................................................................................12

2.1.1. Property border-color .......................................................................22

2.1.2. Property border-image .....................................................................13

2.1.3. Property border-radius .....................................................................16

2.1.4. Property box-shadow .......................................................................18

2.2. Property Background .................................................................................21

2.2.1. Property background-clip ................................................................21

2.2.2. Property background-size ................................................................23

2.2.3. Property Multiple Background ........................................................25

2.3. Property Color ............................................................................................29

2.3.1. Warna HSL .......................................................................................29

2.3.2. Warna HSLA ....................................................................................30

2.3.3. Warna RGBA ...................................................................................33

2.4. Property Text ..............................................................................................35

2.4.1. Property text-shadow .......................................................................35

2.4.2. Property text-overflow .....................................................................36

viii

2.4.3. Property word-wrap .........................................................................37

2.5. Property User Interface ..............................................................................38

2.5.1. Property box-sizing ..........................................................................38

2.5.2. Property resize ..................................................................................41

2.5.3. Property outline ................................................................................42

2.6. Property Selector ........................................................................................43

2.6.1. Atribut Selector ................................................................................43

2.7. Property Lainnya ........................................................................................45

2.7.1. Layout Multi Kolom ........................................................................45

2.7.2. Property transform ...........................................................................47

2.7.3. Efek Cermin (reflection) ..................................................................50

2.7.4. Efek Hover .......................................................................................52

2.7.5. Efek Sliding ......................................................................................53

2.7.6. Efek Masking ...................................................................................55

2.7.7. Kustomisasi Font .............................................................................58

BAB 3. Tip dan Trik CSS 3 ............................................................................61

3.1. Crop Gambar dengan Negative Margin ....................................................62

3.2. Menu Drop Down ......................................................................................65

3.3. Horizontal Tab ............................................................................................69

3.4. Accordion Tab ............................................................................................75

3.5. Dock Style Menu dengan CSS 3 ...............................................................79

3.6. Image Slideshow ........................................................................................84

3.7. Kumpulan Trik CSS 3 yang Menarik ........................................................86

BAB 4. Proyek CSS 3 (Template Blog) .........................................................95

4.1. Halaman Home ..........................................................................................96

ix

4.1.1. Penerapan Image Slideshow pada Header ....................................106

4.1.2. Penerapan Menu Dropdown ..........................................................108

4.1.3. Penerapan Accordion Tab ..............................................................110

4.1.4. Penerapan Tooltips ......................................................................... 111

4.1.5. Halaman Utama (index.html) ........................................................112

4.2. Halaman About Us ...................................................................................122

4.3. Halaman Gallery Photo ............................................................................124

4.4. Halaman Contact ......................................................................................126

Halaman ini Sengaja Dikosongkan


1Mengenal CSS 3

2 Teknik Cepat Menguasai CSS 3

Bab 1

Mengenal CSS 3

1.1 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 1994.

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 1.1.

1.2 Perkembangan CSSBahasa 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.

3Bab 1. Mengenal CSS 3

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 1996. 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.


CSS 2

CSS level 2 (CSS 2) dikembangkan oleh W3C dan dipublikasikan sebagai rekomendasi style baru pada Mei 1998. 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 2005. 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 3.

1.3 Software yang DibutuhkanSebelum 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 http://www.apple.com/safari/download/. Lihat gambar 1.2.

Kemudian, untuk men-download Mozilla Firefox 3.6, Anda dapat mengunjungi alamat http://www.mozilla.com/en-US/. Lihat gambar 1.3.


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 http://notepad-plus-plus.org/release/5.8.3. Lihat gambar 1.4.


Gambar 1.4 Halaman download Notepad++ 5.8.3

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:


1.4 Fitur Baru CSS 3Seperti 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


• 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 3.

1.4 Memahami Sintaks Dasar CSS 3Sebelum kita menjelajah fitur baru CSS 3, sebaiknya kita pahami dulu sintaks dasar dari CSS 3 yang bisa dilihat pada gambar 1.5.

Gambar 1.5 Sintaks dasar CSS 3

Penjelasan:

• Pertama, kita perlu menentukan elemen HTML apa yang akan diberi style CSS, dalam kasus ini adalah h1.


• 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.

teknik cepat menguasai - tokolokomedia.com · gambar 1.4 halaman download notepad++ 5.8.3 silahkan...

Documents