السَّلاَمُ عَلَيْكُمْ وَرَحْمَةُ اللهِ وَبَرَكَاتُهُ
Pada kali ini saya akan memberikan tutorial cara membuat Effect Glowing Blue Input Dengan CSS3, pada tutorial ini saya tidak menggunakan framework css seperti BOOTSTRAP atau semacamnya, kali ini saya menggunakan murni dengan css3
effect text input ini memang sangat sederhana, namun sangat indah dipandang mata :D
langsung saja kita mulai tutorialnya. .
1. Buat File Index.html, setelah itu ketikkan script berikut .
<!DOCTYPE HTML>
<html>
<head>
<title>Effect Glowing Blue Input Dengan CSS3</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<form action="" method="post">
<div>
<label for="name">Text Input</label>
<input type="text" name="name" id="name"/>
</div>
<div>
<label for="textarea">Textarea</label>
<textarea cols="40" rows="8" name="textarea" id="textarea"></textarea>
</div>
</form>
</body>
</html> 2. Jangan lupa buat file Style.css, setelah itu ketikkan script berikut .
input[type=text], textarea {
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
outline: none;
padding: 3px 0px 3px 3px;
margin: 5px 1px 3px 0px;
border: 1px solid #DDDDDD;
}
input[type=text]:focus, textarea:focus {
-moz-box-shadow: 0 0 5px #51cbee;
-webkit-box-shadow: 0 0 5px #51cbee;
box-shadow: 0 0 5px #51cbee;
padding: 3px 0px 3px 3px;
margin: 5px 1px 3px 0px;
border: 1px solid #51cbee;
}
label {
width: 150px;
float: left;
}
body {
padding: 20px;
} sehingga menjadi seperti berikut ini
Sangat mudah bukan :D
silahkan di coba dan di praktekan.
dan Semoga bermanfaat bagi Anda semua
0 komentar:
Posting Komentar