Forms

This comes from CSS3 For Web Designers by Dan Cederholm

by Matthew Day

HTML

<div class="wrapper">
<form action="/" id="thing-alerts">
<fieldset>
<label for="alerts-name">Your Name</label>
<input type="text" id="alerts-name" />
</fieldset>
<fieldset>
<label for="alerts-email">Your Email</label>
<input type="text" id="alerts-email" />
</fieldset>
<fieldset>
<input type="submit" value="Subscribe" />
</fieldset>
</form>
</div>

CSS

.wrapper {
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#7E95C2), to(#1F4766));
}

#thing-alerts fieldset {
margin: 0 0 10px 0;
}

#thing-alerts label {
display: block;
font-weight: bold;
line-height: 1.4;
color: white;
letter-spacing: 2px;
}

#thing-alerts fieldset:last-child {
margin: 0;
}

#thing-alerts fieldset input[type="text"] {
width: 215px;
padding: 5px 8px;
font-size: 1.2em;
color: #666;
border: none;
background-color: #fff;
border-radius: 4px;
}

#thing-alerts input[type="submit"] {
padding: 8px 15px;
font-family: Helvetica, Arial, sans-serif;
font-weight: bold;
line-height: 1;
color: #444;
border: none;
background-color: #fff;
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.85);
background-image: -webkit-gradient(linear, »
0% 0%, 0% 100%, from(#fff), to(#bbb));
background-image: -moz-linear-gradient(0 100% »
90deg, #fff, #bbb);
background-color: #fff;
border-radius: 23px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

#thing-alerts input[type="text"]:focus {
-webkit-box-shadow: 0 0 12px rgba(51, 204, 255, 0.5);
-moz-box-shadow: 0 0 12px rgba(51, 204, 255, 0.5);
box-shadow: 0 0 12px rgba(51, 204, 255, 0.5);
}


@-webkit-keyframes pulse {
    100% {
        -webkit-box-shadow: 0 0 12px rgba(0,0,0, 0.9);
    }
}

#thing-alerts input[type="text"]:focus {
-webkit-animation: pulse 1.5s infinite ease-in-out;
}

#thing-alerts input[type="submit"]:hover,
#thing-alerts input[type="submit"]:focus {
-webkit-animation: pulse 1.5s infinite ease-in-out;
}