CSS Box Shadow - Membuat Efek Bayangan pada Area

Berikut ini adalah kode CSS dasar untuk membuat efek bayangan pada objek:

CSS Bayangan Outset:

div {
  -webkit-box-shadow:10px 10px 7px #222; /* Safari & Chrome */
  -moz-box-shadow:10px 10px 7px #222;    /* Firefox */
  box-shadow:10px 10px 7px #222;         /* W3C */
}

CSS Bayangan Inset:

div {
  -webkit-box-shadow:inset 10px 10px 7px #222; /* Safari & Firefox */
  -moz-box-shadow:inset 10px 10px 7px #222;    /* Firefox */
  box-shadow:inset 10px 10px 7px #222;         /* W3C */
}

10px yang pertama adalah ukuran offset sumbu-X, 10px yang ke dua adalah offset sumbu-Y, 7px adalah tingkat blur, #222 adalah warna bayangan. Kamu juga bisa menuliskan nilai offset negatif untuk membuat bayangan menuju ke arah sebaliknya. Cara penerapannya bisa diletakkan secara top down ataupun inline seperti ini:

Top-Down	Inline
#kotak1 { -webkit-box-shadow:10px 10px 7px #222; -moz-box-shadow:10px 10px 7px #222; box-shadow:10px 10px 7px #222; } ...... <div id='kotak1'>OBJEK</div>	<div style='-webkit-box-shadow:10px 10px 7px #222;-moz-box-shadow:10px 10px 7px #222;box-shadow:10px 10px 7px #222;'> OBJEK </div>

Dan ini adalah contoh-contoh penerapan yang lebih detail. Saya sudah memberikan warna merah dan hijau untuk mempertegas bagian mana yang harus menjadi perhatian:

-webkit-box-shadow: 10px 5px 7px #222;
-moz-box-shadow: 10px 5px 7px #222;
box-shadow: 10px 5px 7px #222;

-webkit-box-shadow: 0 10px 7px #222;
 -moz-box-shadow: 0 10px 7px #222;
box-shadow: 0 10px 7px #222;

-webkit-box-shadow: 10px 0 7px #222;
-moz-box-shadow: 10px 0 7px #222;
box-shadow: 10px 0 7px #222;

-webkit-box-shadow: 0 0 7px #222;
-moz-box-shadow: 0 0 7px #222;
box-shadow: 0 0 7px #222;

-webkit-box-shadow: 0 0 20px #222;
-moz-box-shadow: 0 0 20px #222;
box-shadow: 0 0 20px #222;

-webkit-box-shadow: 0 0 20px #f10c0c;
-moz-box-shadow: 0 0 20px #f10c0c;
box-shadow: 0 0 20px #f10c0c;

-webkit-box-shadow: 10px 5px 0 #222;
-moz-box-shadow: 10px 5px 0 #222;
box-shadow: 10px 5px 0 #222;

-webkit-box-shadow: -10px -5px 0 #222;
-moz-box-shadow: -10px -5px 0 #222;
box-shadow: -10px -5px 0 #222;

-webkit-box-shadow: inset 10px 5px 7px #222;
-moz-box-shadow: inset 10px 5px 7px #222;
box-shadow: inset 10px 5px 7px #222;

-webkit-box-shadow: inset 0 10px 7px #222;
-moz-box-shadow: inset 0 10px 7px #222;
box-shadow: inset 0 10px 7px #222;

-webkit-box-shadow: inset 10px 0 7px #222;
-moz-box-shadow: inset 10px 0 7px #222;
box-shadow: inset 10px 0 7px #222;

-webkit-box-shadow: inset 0 0 7px #222;
-moz-box-shadow: inset 0 0 7px #222;
box-shadow: inset 0 0 7px #222;

-webkit-box-shadow: inset 0 0 20px #222;
-moz-box-shadow: inset 0 0 20px #222;
box-shadow: inset 0 0 20px #222;

-webkit-box-shadow: inset 0 0 20px #f10c0c;
-moz-box-shadow: inset 0 0 20px #f10c0c;
box-shadow: inset 0 0 20px #f10c0c;

-webkit-box-shadow: inset 10px 5px 0 #222;
-moz-box-shadow: inset 10px 5px 0 #222;
box-shadow: inset 10px 5px 0 #222;

-webkit-box-shadow: inset -10px -5px 0 #222;
-moz-box-shadow: inset -10px -5px 0 #222;
box-shadow: inset -10px -5px 0 #222;

READ MORE - CSS Box Shadow - Membuat Efek Bayangan pada Area

CSS Input Text dan Textarea

textarea dengan css

textarea biasa

Dan ini adalah CSS untuk mengubah tampilannya:

blockquote.collapsed {
  margin:15px 30px;
  font:italic 14px Georgia,Serif;
  height:0px;
  padding:0px 0px;
  background-color:#FFE046;
  border:10px solid #FDD404;
  border-left-color:#D7362E;
  -webkit-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
  -moz-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
  box-shadow:0px 1px 2px rgba(0,0,0,0.4);
  overflow:auto;
  -webkit-transition:all 1s cubic-bezier(1,0,0,1) 0.5s;
  -moz-transition:all 1s cubic-bezier(1,0,0,1) 0.5s;
  -ms-transition:all 1s cubic-bezier(1,0,0,1) 0.5s;
  -o-transition:all 1s cubic-bezier(1,0,0,1) 0.5s;
  transition:all 1s cubic-bezier(1,0,0,1) 0.5s;
}

blockquote.collapsed:hover {
  padding:10px 15px;
  background-color:#47AD47;
  border:5px solid #156715;
  height:350px;
}

Letakkan kode tersebut di atas </style> atau ]]></b:skin>
Dari penampilan kode ini Saya rasa kalian sudah mengerti maksudnya.

input[type="text"] { ... }

textarea { ... }

Nah, untuk kode yang terakhir itu digunakan untuk membuat tampilan warna textarea dan input text menjadi berubah ketika kursor sedang aktif di dalamnya.

input[type="text"]:focus,
textarea:focus {
  background-color:#FFE4B5;
}

 


READ MORE - CSS Input Text dan Textarea

CSS Margin dan Padding

Secara sederhana, margin dapat didefinisikan sebagai kerenggangan antara area dengan daerah luar, sedangkan padding adalah kerenggangan antara area dengan objek di dalamnya.Deklarasi margin dan padding dapat dituliskan seperti ini:

• margin:5px;
• padding:5px;

CSS Margin dan Padding

5px adalah contoh value dari properti margin dan padding. Selain ukuran kerenggangan dalam piksel, ukuran margin dan padding juga dapat ditentukan dengan satuan em, pt ataupun %, meskipun sebenarnya ada juga satuan pengukuran yang lainnya. Kamu bahkan bisa menuliskan ukuran kerenggangan negatif seperti -5px, -100px, dll.

Margin dan padding dapat dipecah menjadi empat bagian seperti ini:

Deklarasi	Keterangan
margin-top:5px;	Menentukan margin sebelah atas sebesar 5 piksel
margin-right:5px;	Menentukan margin sebelah kanan sebesar 5 piksel
margin-bottom:5px;	Menentukan margin sebelah bawah sebesar 5 piksel
margin-left:5px;	Menentukan margin sebelah kiri sebesar 5 piksel
padding-top:5px;	Menentukan padding sebelah atas sebesar 5 piksel
padding-right:5px;	Menentukan padding sebelah kanan sebesar 5 piksel
padding-bottom:5px;	Menentukan padding sebelah bawah sebesar 5 piksel
padding-left:5px;	Menentukan padding sebelah kiri sebesar 5 piksel

Atau kamu juga bisa menggunakan cara yang lebih praktis, yaitu dengan menggabungkan keempat pengukuran kerenggangan yang berbeda dalam satu properti margin/padding saja seperti ini:

Deklarasi	Keterangan
margin:1px 2px 3px 4px;	Margin atas: 1 piksel Margin kanan: 2 piksel Margin bawah: 3 piksel Margin kiri: 4 piksel
margin:1px 2px 3px;	Margin atas: 1 piksel Margin kanan dan kiri: 2 piksel Margin bawah: 3 piksel
margin:2px 4px;	Margin vertikal (atas dan bawah): 2 piksel Margin horizontal (kanan dan kiri): 4 piksel
padding:1px 2px 3px 4px;	Padding atas: 1 piksel Padding kanan: 2 piksel Padding bawah: 3 piksel Padding kiri: 4 piksel
padding:1px 2px 3px;	Padding atas: 1 piksel Padding kanan dan kiri: 2 piksel Padding bawah: 3 piksel
padding:2px 4px;	Padding vertikal (atas dan bawah): 2 piksel Padding horizontal (kanan dan kiri): 4 piksel

READ MORE - CSS Margin dan Padding