Tutorial Belajar CSS Bagian 23 : Cara Membuat Bayangan di CSS

0
32

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.

LEAVE A REPLY

Please enter your comment!
Please enter your name here

This site uses Akismet to reduce spam. Learn how your comment data is processed.