<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Login Form</title><style>body{background: #000000;}label {font-size: 12px;font-family: arial, verdana;list-style-type: none;color: #FFFFF;text-shadow: #000 1px 1px;margin-bottom: 5px;font-weight: bold;letter-spacing: 1px;text-transform: uppercase;display: block;}form {width: 201px;padding: 20px;margin:150px auto;border: 2px solid #000000;/*** Membuat tepi menjadi rounded ***/-moz-border-radius: 20px;-webkit-border-radius: 20px;/*** Membuat bayangan di belakang box ***/-moz-box-shadow:0px -5px 300px #FFFFFF;-webkit-box-shadow:0px -5px 300px #FFFFFF;/*** Membuat Warna Gradient Pada Background - 2 Deklarasi : 1.Firefox 2.Webkit(Chrome dan Safari) ***/background: -moz-linear-gradient(19% 75% 90deg,#DD2121, #FF0000);background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#DD2121), to(#FF0000));}input {width: 200px;padding: 6px;margin-bottom: 10px;border-top: 1px solid #ad64e0;border-left: 0px;border-right: 0px;border-bottom: 0px;background: #FFFFFF;/*** Transition Selectors - Bagian apa yang akan beranimasi dan berapa lama ***/-webkit-transition-property: -webkit-box-shadow, background;-webkit-transition-duration: 0.25s;/*** Menambahkan bayangan ***/-moz-box-shadow: 0px 0px 2px #000;-webkit-box-shadow: 0px 0px 2px #000;}input:hover {-webkit-box-shadow: 0px 0px 4px #000;background: #DD2121;}input.submit {width: 10px;color: #fff;text-transform: uppercase;text-shadow: #000 1px 1px;border-top: 1px solid #DD2121;margin-top: 10px;}</style></head><body><form><label>Username:</label><input type="text" name="username" /><label>Password:</label><input type="password" name="password" /><input type="submit" value="Login" name="submit" /></form></body></html>
Hasilnya:
No comments:
Post a Comment