8

Modul HTML Scripting – Desain Visual dan Tata Letak dengan CSS 3

------------------------------------------------------------------Modul

8

HTML Scripting – Desain Visual dan Tata Letak dengan CSS 3 Tujuan :   

Memahami dan dapat menggunakan konsep CSS3 Memahami dan dapat mengetahui kelebihan maupun kekurangan CSS 3 Menerapkan CSS 3 dengan fitur lainnya

8.1 CSS 3 CSS3 adalah standar untuk CSS yang paling baru, banyak batasan website design yang dahulu tidak bisa ditangani oleh CSS sekarang bisa dilakukan dengan CSS3. CSS3 sepenuhnya kompatibel dan pelengkap dari CSS lama, sehingga browser akan selalu mendukung CSS lama dan Anda tidak harus mengubah desain yang sudah ada. CSS3 sebetulnya masih dalam pengembangan dan revisi W3C, walaupun begitu banyak property-property CSS3 yang sudah di implementasikan di berbagai Browser modern, seperti firefox, safari, dan sebagainya kecuali Internet Explorer CSS3 dibagi kedalam beberapa modul, beberapa modul CSS3 yang sangat penting untuk menghilangkan batasan desain diantaranya:    

Selectors Box Model Backgrounds and Borders Text Effects

   

2D/3D Transformations Animations Multiple Column Layout User Interface

8.1.1

CSS3 Borders Dengan menggunakan CSS3, kita dapat membuat garis tepi dengan ujung yang bulat, menambahkan bayangan pada kotak dan menggunakan gambar sebagai garis tepi tanpa menggunakan program desain seperti Photoshop. Dalam bab ini kita akan belajar tentang properti dari garis tepi :   

Border-radius Box-shadow Border-image

Maksud gambar di atas adalah semua browser sudah mendukung border-radius begitu juga box shadow kecuali Safari harus menggunakan prefix –webkit- pada codenya. IE tidak mendukung border-image. Tag tambahan untuk tiap browser yaitu: Internet Explorer: tidak ada tambahan Mozilla Firefox : -mozGoogle Chrome: -webkitSafari: -webkitOpera: -o-

8

Modul HTML Scripting – Desain Visual dan Tata Letak dengan CSS 3

------------------------------------------------------------------CSS3 Rounded Corners CSS rounded corner merupakan suatu kelebihan dalam CSS 3 untuk memudahkan user dalam hal pengaturan tampilan. Terkadang untuk membuat garis tepi yang melengkung, dibutuhkan tools grafis tambahan untuk membuatnya. Namun dalam CSS 3, hal tersebut tidak diperlukan. Berikut contoh penerapan rounded corners: 8.1.2

<style type="text/css"> div { border:2px solid #a1a1a1; padding:10px 40px; background:#dddddd; width:100px; border-radius:25px; -moz-border-radius:25px; /* Firefox 3.6 and earlier */ }

Outputannya: 8.1.3

CSS3 Box Shadow Box Shadow digunakan untuk memunculkan efek bayangan pada kotak div yang dibuat. Penerapannya ialah <style type="text/css"> div { width:100px; height:50px; background-color:yellow; -moz-box-shadow: 10px 10px 5px #888888; /* Firefox 3.6 and earlier */ -webkit-box-shadow: 10px 10px 5px #888888; /* Safari */ box-shadow: 10px 10px 5px #888888; }

8

Modul HTML Scripting – Desain Visual dan Tata Letak dengan CSS 3

------------------------------------------------------------------Outputannya:

8.1.4

CSS3 Border Image Untuk membuat garis tepi dengan image, tanpa CSS 3 membutuhkan beberapa image untuk menampilkannya, sedangkan dengan adanya CSS 3, akan lebih dimudahkan karena detail border hanya perlu di definisikan apa adanya dan dapat diedit sesuai selera. Sintaks border image ialah <style type="text/css"> div { border-width:15px; width:250px; padding:10px 20px; } #round { -moz-border-image:url(border.png) 30 30 round; /* Firefox */ -webkit-border-image:url(border.png) 30 30 round; /* Safari and Chrome */ -o-border-image:url(border.png) 30 30 round; /* Opera */ border-image:url(border.png) 30 30 round; } #stretch { -moz-border-image:url(border.png) 30 30 stretch; /* Firefox */ -webkit-border-image:url(border.png) 30 30 stretch; /* Safari and Chrome */ -o-border-image:url(border.png) 30 30 stretch; /* Opera */ border-image:url(border.png) 30 30 stretch; }

Here is the image used:

8

Modul HTML Scripting – Desain Visual dan Tata Letak dengan CSS 3

------------------------------------------------------------------Outputannya:

8.1.5

CSS3 Backgrounds Penerapan CSS 3 pada background memudahkan kita untuk melakukan pengeditan terhadap background untuk suatu tampilan. Konfigurasi background dalam CSS 3 antara lain:  background-size  background-origin

8.1.5.1 CSS3 The background-size Untuk menentukan ukuran yang pas dari suatu gambar untuk dijadikan sebagai background, tidak selalu membutuhkan gambar sesuai ukuran aslinya, namun dapat sesuaikan ukuran gambar tersebut. CSS 3 dapat melakukan hal tersebut dengan cukup mudah, yaitu : <style type="text/css"> body { background:url(img_flwr.gif); background-size:80px 60px; -moz-background-size:80px 60px; /* Firefox 3.6 */ background-repeat:no-repeat; padding-top:40px; }

Original image:

8

Modul HTML Scripting – Desain Visual dan Tata Letak dengan CSS 3

------------------------------------------------------------------Outputnya :

8.1.5.2 CSS3 The background-origin Background origin merupakan layanan dalam CSS 3 dalam memberikan background sesuai dengan penempatannya. Dapat dilihat pada modul sebelumnya, pada bagian CSS untuk margin dan padding, terdapat keterangan mengenai box model, digambarkan suatu kotak memiliki atribut tersendiri. Background origin menyesuaikan dengan bentuk tersebut. Dapat dilihat dalam contoh <style type="text/css"> div{ border:1px solid black; padding:35px; background-image:url('smiley.gif'); background-repeat:no-repeat; background-position:left; } #div1{ background-origin:border-box; } #div2{ background-origin:content-box; }

background-origin:border-box:

background-origin:content-box:

8

Modul HTML Scripting – Desain Visual dan Tata Letak dengan CSS 3

------------------------------------------------------------------Outputnya:

CSS3 dapat menggunakan beberapa background untuk satu elemen. Dapat dilihat dalam contoh, terdapat dua background dalam satu tampilan. FItur ini terbilang baru dikarenakan CSS versi sebelumnya belum mendukung fitur seperti ini. <style type="text/css"> body{ background-image:url(img_flwr.gif),url(img_tree.gif); }

Outputnya

8

Modul HTML Scripting – Desain Visual dan Tata Letak dengan CSS 3

------------------------------------------------------------------CSS3 Text Effects Dalam membuat efek terhadap suatu teks, tanpa CSS 3, hal itu tidak mungkin terjadi tanpa bantuan image. Namun CSS 3 bisa melakukan hal tersebut, cukup dengan sintaks yang singkat, tulisan akan berubah semuai kemauan kita. Dalam text effect, terdapat dua konfigurasi, yaitu :  text-shadow  word-wrap 8.1.6

8.1.6.1 CSS3 Text Shadow Text shadow digunakan untuk memberikan efek bayangan terhadap teks yang ingin dibuat. Contohnya ialah: <style type="text/css"> h1 { text-shadow: 5px 5px 5px #ffff00; }

Text-shadow effect!

Outputannya:

8.1.6.2 CSS3 Word Wrapping Word Wrap merupakan fitur dalam CSS 3 untuk melakukan penyesuaian terhadap lebar yang ditentukan. Berikut contoh penerapan word wrap : <style type="text/css"> p.test { width:11em; border:1px solid #000000; word-wrap:break-word; }

8

Modul HTML Scripting – Desain Visual dan Tata Letak dengan CSS 3

------------------------------------------------------------------

paragraf ini sangaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaat panjang banget lho sebenarnya

Outputnya :

Selain itu di CSS3 juga kita dapat menambahkan effect transisi, membuat multiple kolom untuk lay out teks seperti di koran dan beberapa fitur UI baru lainnya seperti resize, serta dapat membuat aplikasi. JURNAL: 1. Buatlah sebuah animasi dengan CSS 3, misalkan ada sebuah kotak ukuran bebas, kotak tersebut bisa bergerak dari kanan ke kiri dalam delay waktu tertentu? (clue: explore tentang CSS 3 animasi) 2. Modifikasilah tampilan web yang pernah dibuat dengan menggunakan CSS 3 agar lebih interaktif !