CSS 3
Pengertian CSS3 Untuk saat ini terdapat tiga versi CSS, yaitu CSS1, CSS2, dan CSS3. CSS1 dikembangkan berpusat pada pemformatan dokumen HTML, CSS2 dikembangkan untuk memenuhi kebutuhan terhadap format dokumen agar bisa ditampilkan di printer CSS3 adalah versi terbaru dari CSS yang mampu melakukan banyak hal dalam desain website. CSS3 juga dapat melakukan animasi pada halaman website, diantaranya animasi warna hingga animasi 3D. Dengan CSS3 desainer lebih dimudahkan dalam hal kompatibilitas websitenya pada smartphone dengan dukungan fitur baru yakni media query. fitur baru pada CSS3 seperti: multiple background, border-radius, drop-shadow, border-image, CSS Math, dan CSS Object Model.
<html> <head> <style> div { width:100px; height:75px; background-color:red; border:1px solid black; } div#div2 transform:rotate(30deg); -ms-transform:rotate(30deg); /* IE 9 */ -webkit-transform:rotate(30deg); /* Safari and Chrome */ </style> </head> <body> <div>Hello saya sedang mencoba CSS3.</div> <div id="div2">Hello saya sedang mencoba CSS3.</div> </body> </html>
Div sendiri memiliki arti dari division, tag ini merupakan block element yang berguna untuk menggabungkan atau membuat group tag-tag/element-element, baik itu block ataupun inline element yang ada di dalam tag div itu sendiri. <html> <head> <title>Div and SPAN </title> </head> <body> <div> <b>DIV</b> <p> Div tag digunakan untuk mengelompokan group element biasnya untuk block-level element</p> /div> <div align="right”> <b>SPAN</b> Ini adalah devisi kedua. ditulis denagn alignment kanan.</p> </div> <span style="font-size:25; color:orange”> baris ini dalm span dengan warna orange. </span></body></html>
BORDER PADA CSS3 Dengan CSS3, Anda dapat membuat perbatasan bulat, menambahkan bayangan ke kotak, dan menggunakan gambar sebagai perbatasan - tanpa menggunakan program desain, seperti Photoshop. Dalam bab ini Anda akan belajar tentang sifat-sifat perbatasan berikut: - border-radius - box-shadow - image perbatasan
BORDER PADA CSS3 Internet Explorer 9 + mendukung border-radius dan box-shadow. Firefox, Chrome, dan Safari mendukung semua properti perbatasan baru. Catatan: Safari 5, dan versi yang lebih lanjut, membutuhkan awalan-WebKit-perbatasan-untuk gambar. Opera mendukung border-radius dan box-shadow, tetapi membutuhkan awalan-o-untuk perbatasan-gambar.
CSS3 Rounded corners Dalam CSS3, menciptakan sudut dibulatkan mudah. Dalam CSS3, properti border-radius digunakan untuk membuat sudut bulat:
<html> <head> <style> div { border:2px solid red; padding:10px 40px; background:#dddddd; width:300px; border-radius:25px; } </style> </head> <body> <div>Border ini menggunakan property border-radius</div> </body> </html>
CSS3 BOX SHADOW Dalam CSS3, properti kotak-shadow digunakan untuk menambahkan bayangan ke kotak:
<html> <head> <style> div { width:300px; height:100px; background-color:blue; box-shadow: 10px 10px 5px #888888; } </style> </head> <body> <div></div> </body> </html>
CSS3 Border picture
<html> <head> <style> div {border:15px solid transparent;width:250px;padding:10px 20px;} #round { -webkit-border-image:url(border.png) 30 30 round; /* Safari 5 and older */ -o-border-image:url(border.png) 30 30 round; /* Opera */ border-image:url(border.png) 30 30 round;} #stretch{ -webkit-border-image:url(border.png) 30 30 stretch; /* Safari 5 and older */ -o-border-image:url(border.png) 30 30 stretch; /* Opera */ border-image:url(border.png) 30 30 stretch; } </style> </head> <body> <p><b>Note:</b> Internet Explorer does not support the border-image property.</p> <p>The border-image property specifies an image to be used as a border.</p> <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>contoh gambarnya</p> <img src="border.png”> </body> </html>
TRANSISI PADA CSS3 DUKUNGAN BROWSER CSS3, kita dapat menambahkan efek ketika mengubah dari satu gaya yang lain, tanpa menggunakan animasi Flash atau javascripts. DUKUNGAN BROWSER Internet Explorer 10, Firefox, Chrome, dan Opera mendukung properti transisi. Safari membutuhkan awalan-WebKit-. Catatan: Internet Explorer 9, dan versi sebelumnya, tidak mendukung properti transisi. Catatan: Chrome 25, dan versi sebelumnya, membutuhkan awalan-WebKit-.
Bagaimana cara kerjanya? CSS3 transisi adalah efek yang memungkinkan elemen secara bertahap berubah dari satu gaya yang lain. Untuk melakukan ini, Anda harus menentukan dua hal: 1. Tentukan properti CSS Anda ingin menambahkan efek ke 2. Tentukan durasi efek.
<html> <head> <style> div{width:100px;height:100px;background:red; transition:width 2s; -webkit-transition:width 2s; /* Safari */} div:hover {width:300px;} </style> </head> <body> <p><b>Note:</b> dokumen ini tidak mendukung untuk dibuka dengan Internet Explorer 9 dan versi sebelumnya.</p> <div></div> <p>Hover over the div element above, to see the transition effect.</p> </body> </html>
Menambahkan efek pada lebar, tinggi, dan transformasi: <html> <head> <style> div {width:100px;height:100px;background:red;transition:width 2s, height 2s; -webkit-transition:width 2s, height 2s, -webkit-transform 2s; /* Safari */ } div:hover {width:200px;height:200px;transform:rotate(180deg); -webkit-transform:rotate(180deg); /* Safari */ </style> </head> <body> <div>Hover over me to see the transition effect!</div> </body> </html>
Properti WARNA pada CSS3 Properti BACKGROUND pada CSS3
ANIMASI CSS3 Animasi adalah efek yang memungkinkan elemen secara bertahap berubah dari satu gaya yang lain. Anda dapat mengubah banyak gaya yang Anda inginkan, sebanyak yang Anda inginkan. Tentukan kapan perubahan akan terjadi dalam persen, atau kata kunci "dari" dan "untuk", yang sama dengan 0% dan 100%. 0% adalah awal dari animasi, 100% adalah ketika animasi selesai. Untuk mendukung browser terbaik, Anda harus selalu menentukan baik 0% dan 100% pemilih.
<html> <head> <style> div{ width:100px; height:100px; background:red; animation:myfirst 5s; -webkit-animation:myfirst 5s; /* Safari and Chrome */ } @keyframes myfirst { 0% {background:red;} 25% {background:yellow;} 50% {background:blue;} 100% {background:green;} @-webkit-keyframes myfirst {0% {background:red;} 100% {background:green;}} </style> </head> <body> <p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p> <p><b>Note:</b> When an animation is finished, it changes back to its original style.</p> <div></div> </body> </html>