~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~SAYA MENDENGAR LALU SAYA LUPA ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ SAYA MEMBACA LALU SAYA INGAT ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ SAYA MELAKUKAN LALU SAYA MENGERTI~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

12 November 2014

Cara Memberi Efek Box Shadow Pada Input Type Text, Input Type Password, dan Textarea dengan CSS


Assalamu'alaikum Warohmatullahi Wabarokatuh

Pada artikel ini, menjelaskan mengenai bagaimana caranya memberikan efek cahaya ketika kursor diletakkan pada input type text, input type password dan pada textarea pada HTML. Jadi ketika input type text diklik, boxshadow akan muncul. Perhatikan script ini, script ini sudah saya coba dan bisa. Silahkan copykan dan jalankan jika ingin mencoba melihat hasilnya.

<html>
<head><title>Coba Teks Area</title>
<style type="text/css">

input[type=text], input[type=password], textarea {
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
outline: none;
font-family: verdana;
color: purple;
padding: 5px;
border-radius: 5px 5px 5px 5px;
}

input[type=text]:focus, input[type=password]:focus, textarea:focus {
box-shadow: 0 0 5px rgba(81, 103, 238, 3);
font-family: verdana;
color: purple;
padding: 5px;
border-radius: 5px 5px 5px 5px;
}

</style>
</head>
<body><br>
<input type="text" placeholder="Ini yang input type text"><br><br>
<input type="password" placeholder="Ini yang input type password"><br><br>
<textarea>Ini yang teks area</textarea>
</body>
</html>

Lama waktu box shadow muncul setelah kursor diletakkan bisa diubah pada bagian script "all 1s ease-in-out;" maksud dari 1s ialah 1 detik. Jadi box shadow akan muncul sepurna secara berangsur selama satu detik tersebut. Ubah 1s menjadi waktu yang diinginkan misalnya 5s. Ketebalan box shadow juga bisa ditambahkan atau dikurangi pada bagian script "box-shadow: 0 0 5px rgba(81, 103, 238, 3);" ubah 5px sesuai keinginan. 
Sekian sedikit artikel tentang cara memberikan efek box shadow pada input type text, input type password, dan textarea ini. Jika ada kekurangan mohon dimaafkan. Semoga bermanfaat.

Wassalamu'alaikum Warohmatullahi Wabarokatuh


ARTIKEL TERKAIT:


BACA JUGA TULISAN MENARIK LAINNYA :

0 Komentar:

Post a Comment