Cascading Style Sheet atau yang biasa disingkat dengan CSS adalah salah satu bahasa pemrograman untuk web yang berfungsi mengendalikan beberapa komponen website sehingga akan lebih terstruktur dan seragam. Versi CSS terakhir adalah CSS3 yang sampai saat ini sedang dalam taham pengembangan.
Berikut beberapa fitur yang terdapat dalam CSS3:
Border Radius
Fitur ini berfungsi untuk menampilkan sudut “border” yang melengkung (tidak tajam lagi) atau dalam istilah bahasa inggris “rounded corner”.
Kode:
-moz-border-radius: 10px; /*ukuran lengkungan sudut*/
-webkit-border-radius: 10px; /*ukuran lengkungan sudut*/
Berikut contoh yang diterapkan dalam sebuah DIV.
Kode CSS:
#area {
margin: 0px 0px 0px 0px;
padding: 20px 20px 20px 20px;
width: 400px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
background: #FFC546;
}
Penerapan dalam halaman HTML:
<html>
<head>
<title>Mengenal CSS3</html>
<style type="text/css">
#area {
margin: 0px 0px 0px 0px;
padding: 20px 20px 20px 20px;
width: 400px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
background: #FFC546;
}
</style>
</head>
<body>
<div id="area">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</body>
</html>
Hasil tampilan di perambah:
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Text Shadow
Fitur ini berfungsi untuk menampilkan tulisan atau teks ber-efek bayangan (shadow).
Kode:
text-shadow: 1px 1px 1px #FFFFFF; /*jarak dan warna bayangan teks*/
Kode CSS:
#area {
margin: 0px 0px 0px 0px;
padding: 20px 20px 20px 20px;
width: 400px;
background: #FFC546;
color: #000000; /*warna teks hitam*/
text-shadow: 1px 1px 1px #FFFFFF; /*warna bayangan teks putih*/
}
Penerapan dalam halaman HTML:
<html>
<head>
<title>Mengenal CSS3</html>
<style type="text/css">
#area {
margin: 0px 0px 0px 0px;
padding: 20px 20px 20px 20px;
width: 400px;
background: #FFC546;
color: #000000;
text-shadow: 1px 1px 1px #FFFFFF;
}
</style>
</head>
<body>
<div id="area">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</body>
</html>
Hasil tampilan di perambah:
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Sekarang kita coba untuk mengimplementasikan kedua fitur tersebut (Border Radius dan Text Shadow) di dalam sebuah halaman HTML.
Kode:
<html>
<head>
<title>Mengenal CSS3</html>
<style type="text/css">
#area {
margin: 0px 0px 0px 0px;
padding: 20px 20px 20px 20px;
width: 400px;
background: #FFC546;
color: #000000;
text-shadow: 1px 1px 1px #FFFFFF;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
</style>
</head>
<body>
<div id="area">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</body>
</html>
Hasil tampilan di perambah:
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Bagaimana? Anda tertarik dengan perkembangan fitur-fitur yang ada di CSS3? Mari kita tunggu fitur-fitur berikutnya.
Posting Komentar
Posting Komentar