HTML Scripting Desain Visual dan Tata Letak dengan CSS 3

Transkripsi

1 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 2D/3D Transformations Box Model Backgrounds and Borders Text Effects Animations Multiple Column Layout User Interface 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 : -moz- Google Chrome: -webkit- Safari: -webkit- Opera: -o-

2 8.1.2 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: div border:2px solid #a1a1a1; padding:10px 40px; background:#dddddd; width:100px; border-radius:25px; -moz-border-radius:25px; /* Firefox 3.6 and earlier */ <div>if LAB 2011</div> Outputannya: CSS3 Box Shadow Box Shadow digunakan untuk memunculkan efek bayangan pada kotak div yang dibuat. Penerapannya ialah 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; <div>if LAB 2011</div>

3 Outputannya: 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 div border-width:15px; width:250px; padding:10px 20px; #round -moz-border-image:url(border.png) round; /* Firefox */ -webkit-border-image:url(border.png) round; /* Safari and Chrome */ -o-border-image:url(border.png) round; /* Opera */ border-image:url(border.png) round; #stretch -moz-border-image:url(border.png) stretch; /* Firefox */ -webkit-border-image:url(border.png) stretch; /* Safari and Chrome */ -o-border-image:url(border.png) stretch; /* Opera */ border-image:url(border.png) stretch; <div id="round">here, the image is tiled (repeated) to fill the area.</div> <br /> <div id="stretch">here, the image is stretched to fill the area.</div> <p>here is the image used:</p> <img src="border.png" />

4 Outputannya: 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 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 : 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; <p>original image: <img src="img_flwr.gif" alt="flowers" width="224" height="162" /></p>

5 Outputnya : 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 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; <p>background-origin:border-box:</p> <div id="div1"> tes1 </div> <p>background-origin:content-box:</p> <div id="div2"> tes 2 </div>

6 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. body background-image:url(img_flwr.gif),url(img_tree.gif); Outputnya

7 8.1.6 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 CSS3 Text Shadow Text shadow digunakan untuk memberikan efek bayangan terhadap teks yang ingin dibuat. Contohnya ialah: Outputannya: h1 text-shadow: 5px 5px 5px #ffff00; <h1>text-shadow effect!</h1> CSS3 Word Wrapping Word Wrap merupakan fitur dalam CSS 3 untuk melakukan penyesuaian terhadap lebar yang ditentukan. Berikut contoh penerapan word wrap : p.test width:11em; border:1px solid #000000; word-wrap:break-word;

8 Outputnya : <p class="test"> paragraf ini sangaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaat panjang banget lho sebenarnya</p> 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!