Salam sapa sahabat blogger, kali ini saya akan membuat postingan tentang CSS. Mungkin postingan ini adalah postingan pertama untuk kategori CSS pada blog ini. Karena di waktu-waktu sebelumnya saya sibuk membuat postingan dengan kategori html, php, ms word, netbeans, dan lain sebagainya. Nah pada kesempatan ini saya baru diberi ide oleh sang Maha Kuasa tentang CSS. Semoga artikel tentang CSS ini mudah untuk dipahami oleh pengunjung blog ini.
CSS adalah kependekan dari Cascading Style Sheet. CSS adalah bahasa pemerograman web yang dapat digunakan untuk menghias dan mengatur tampilan / layout halaman web supaya terlihat lebih menarik dan elegan. CSS adalah sebuah teknologi internet yang direkomendasikan oleh World Wide Web Consortium atau W3C pada tahun 1996. Awalnya, CSS dikembangkan di SGML pada tahun 1970, dan terus dikembangkan hingga saat ini. CSS telah mendukung banyak bahasa markup seperti HTML, XHTML, XML, SVG (Scalable Vector Graphics) dan Mozilla XUL (XML User Interface Language).
Mari lanjut ke ini materinya gan.
1. Teks Shadow.
- Salin kode di bawah ini ke teks editor kalian, lalu simpan dengan nama teks bayangan.html atau terserah kalian. (simpan di folder htdocs)
<html>
<head>
<style>
h2
{
text-shadow:5px 3px 3px blue;
}
</style>
</head>
<body>
<h2>Ini teks shadow dengan CSS</h2>
</body>
</html>
hasilnya :
Keterangan :
- posisi bayangan 5px ke arah kanan (value pertama)
- posisi bayangan 3px ke arah bawah (value kedua)
- ketebalan blur 3px (value ketiga)
- warna bayangan adalah biru. (value keempat).
2. Multiple Teks Shadow.
- posisi bayangan 5px ke arah kanan (value pertama)
- posisi bayangan 3px ke arah bawah (value kedua)
- ketebalan blur 3px (value ketiga)
- warna bayangan adalah biru. (value keempat).
2. Multiple Teks Shadow.
<html>
<head>
<title>Multiple Color</title>
<style type="text/css">
h3 {
text-shadow: 0 0 5px blue, 0 0 10px red;
}
</style>
</head>
<body>
<h3>Ini Multiple Color Shadow Teks</h3>
</body>
</html>
Hasilnya :
Keterangan :
- Perhatikan teks di atas memiliki 2 bayangan.
- Bayangan pertama berwarna biru karena kita memberikan value 0 0 5px blue
- Bayangan kedua berwarna merah karena kita memberikan value 0 0 10px red
- Anda bisa memisahkan beberapa value text-shadow dengan menggunakan tanda koma.
- Dalam contoh diatas saya bedakan ketebalan blur sehingga terlihat perbedaan warna antara bayangan pertama dan bayangan kedua.
3. Box Shadow
<html>
<head>
<title>Box Shadow</title>
<style type="text/css">
#bayangan
{
box-shadow:5px 5px 5px #ccc;
width: 300px;
height: 350px;
}
</style>
</head>
<body>
<div id="bayangan">
<img src="Koala.jpg" width="300px">
<h2 style="text-align: center;">Koala</h2>
</div>
</body>
</html>
Hasilnya :
Keterangan :
- Dalam contoh diatas saya membuat sebuah kotak dengan ukuran lebar 300px dan didalamnya saya berikan sebuah gambar.
- Pada kotak tersebut terdapat sebuah bayangan dengan ukuran 5px kearah kanan,5px bawah, dan ketebalan blur 5px, dan memiliki warna #ccc yaitu warna abu – abu.
Demikianlah artikel tentang dunia CSS yang bisa saya tulis di postingan ini. Semoga artikel ini bermanfaat khususnya bagi yang senang dengan dunia pemerograman web. Silahkan kembangkan sendiri kode CSS diatas sesuai kreatifitas yang kalian miliki.
Sampai Jumpa
11/18/2017 04:36:00 PM
Tags :
CSS
Subscribe by Email
Follow Updates Articles from This Blog via Email
No Comments