Tutorial Belajar CSS Bagian 23 : Cara Membuat Bayangan di CSS

0
435

Pada tutorial sebelumnya, kita sudah mempelajari Tutorial Belajar CSS Bagian 22 : Cara Menggunakan Warna di CSS. Selanjutnya, kita akan mempelajari cara membuat bayangan di CSS.

CSS3 memiliki kemampuan untuk membuat bayangan pada teks atau elemen. Properti bayangan telah dibagi sebagai berikut –

  • Bayangan teks
  • Bayangan Kotak

Bayangan teks

CSS3 memiliki kemampuan untuk menambahkan efek bayangan ke teks. Berikut adalah contoh untuk menambahkan efek bayangan ke teks :

<html>
   <head>
      <style>
         h1 {
            text-shadow: 2px 2px;
         }
         h2 {
            text-shadow: 2px 2px red;
         }
         h3 {
            text-shadow: 2px 2px 5px red;
         }
         h4 {
            color: white;
            text-shadow: 2px 2px 4px #000000;
         }
         h5 {
            text-shadow: 0 0 3px #FF0000;
         }
         h6 {
            text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;
         }
         p {
            color: white;
            text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
         }
      </style>
   </head>

   <body>
      <h1>Website Mbah WP </h1>
      <h2>Website Mbah WP</h2>
      <h3>Website Mbah WP</h3>
      <h4>Website Mbah WP</h4>
      <h5>Website Mbah WP</h5>
      <h6>Website Mbah WP</h6>
      <p>Website Mbah WP</p>
   </body>
</html>

Browser akan menampilkan hasil sebagai berikut :

Bayangan kotak

Digunakan untuk menambahkan efek bayangan ke elemen, berikut adalah contoh untuk menambahkan efek bayangan ke elemen.

<html>
   <head>
      <style>
         div {
            width: 300px;
            height: 100px;
            padding: 15px;
            background-color: green;
            box-shadow: 10px 10px;
         }
      </style>
   </head>

   <body>
      <div>Ini adalah element div dengan box-shadow</div>
   </body>
</html>

Browser akan menampilkan hasil sebagai berikut :

Semoga tutorial ini membantu Anda untuk mempelajari cara membuat bayangan di CSS.

TINGGALKAN KOMENTAR

Silakan masukkan komentar anda!
Silakan masukkan nama Anda di sini

Situs ini menggunakan Akismet untuk mengurangi spam. Pelajari bagaimana data komentar Anda diproses.