Setelah di postingan sebelumnya saya sudah sedikit menjelaskan tentang apa itu javascript, maka di postingan kali ini kita akan mencoba beberapa fitur yang ada di CSS3 sekaligus mengkombinasikannya dengan javascript.
Rounded Corners (Sudut Tumpul)
Pertama kita mulai dengan Sudut Tumpul atau yang sering disebut dengan Rounded Corners.
Di CSS3 kita dapat membuat suatu objek memiliki sudut tumpul atau rounded corners dengan menambahkan properti border-radius. berikut contoh penggunaan border-radius pada tombol dengan css yang ditulis menggunakan cara penulisan Embadded Stylesheet.
<html>
<head>
<style>
.btn{
border-radius: 5px;
}
</style>
</head>
<body>
<button class="btn">button</button>
</body>
</html>
Hasil Output :
Color Gradient (Warna Gradien)
Jika Anda sering bermain dengan software editing foto seperti Photoshop mungkin Anda sudah tidak asing dengan apa yang disebut dengan warna gradien. warna gradien(sering disebut dengan warna ramp atau warna deret) menentukan berbagai warna tergantung dari posisi, biasanya digunakan untuk mengisi suatu objek. Warna yang dihasilkan bervariasi terus-menerus dengan posisi, sehingga menghasilkan transisi warna yang halus. Terdapat beberapa variasi warna gradien yang dapat kita gunakan di CSS3 namun disini saya hanya menunjukkan cara penggunaan warna gradien yang biasa yaitu dari atas kebawah.
berikut contoh cara penggunaan warna gradient di CSS3 :
<html>Hasil output :
<head>
<style>
.gradient{
background: linear-gradient(cyan, whitesmoke);
height: 50px;
width: 100%;
}
</style>
</head>
<body>
<div class="gradient"></div>
</body>
</html>
Shadows(Bayangan)
Pada CSS3 juga terdapat efek bayangan yang dapat kita gunakan untuk memberikan efek bayangan pada suatu objek atau teks Berkut contoh efek bayangan pada text
<html>
<head>
<style>
span{
text-shadow: 2px 2px;
}
</style>
</head>
<body>
<span></div>
</body>
</html>
Hasil output :
Teks Dengan efek bayangan
kemudian untuk memberikan efek bayangan pada sebuah objek biasanya menggunakan properti box-shadow.
<html>
<head>
<style>
.shadow{
height: 50px;
width: 50px;
box-shadow:10px 10px;
}
</style>
</head>
<body>
<span></div>
</body>
</html>
Hasil Output :
Itu tadi beberapa fitur baru di CSS3, untuk postingan selanjutnya saya akan membahas tentang properti Transform,Animaton dan Transition serta menggabungkannya dengan javascript.
Semoga bermanfaat !!!
Komentar
Posting Komentar