Whilst looking at some nice new stuff on Dribbble I came across this beautiful design for a form and thought "I reckon I could do that with some CSS3". So I did! And here's how it turned out. Feel free to look at the source code for markup or the bottom of the page for the CSS and use/change/snub the styles!
There are a couple of inconsistencies between even the latest browsers. Chrome has a bug that means applying a border-radius and inset box-shadow to same element for some reason makes the background break out of the border-radius rather than clipping it. If you are able try disabling the box-shadow for the inputs and see the rounded corners instead! Hopefully they'll get this sorted.
I also found quite a nice effect that, as far as I know, only works in Webkit-based browser that allows for simple element reflections in CSS3! So, if you're looking at this page in Chrome or Safari you should see a reflection of the form just underneath it. I love this effect and can't wait for it to become a standard!
#form-wrap {
background: #666;
padding: 20px;
overflow: hidden;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
background: -moz-radial-gradient(center 10% 20deg, circle cover, #444 20%, #000000 50%);
background: -webkit-gradient(radial, 430 50, 0, 430 50, 312, from(#444), to(#000));
}
form#beautiful {
width: 300px;
margin: 20px auto;
background: #FFF;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
box-shadow: 0 0 7px 0px #000 inset, 0 0 16px 0px #000;
-moz-box-shadow: 0 0 7px 0px #000 inset, 0 0 16px 0px #000;
-webkit-box-shadow: 0 0 7px 0px #000 inset, 0 0 16px 0px #000;
background: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0, rgb(255,255,255)),
color-stop(0.41, rgb(217,217,217)),
color-stop(1, rgb(255,255,255))
);
background: -moz-linear-gradient(
center bottom,
rgb(255,255,255) 0%,
rgb(217,217,217) 41%,
rgb(255,255,255) 100%
);
-webkit-box-reflect: below 10px
-webkit-gradient(linear, left top, left bottom,
from(transparent), to(rgba(255, 255, 255, 0.2)));
}
form#beautiful fieldset {
border: 0;
}
form#beautiful fieldset h2 {
text-align: center;
font: 60px 'Yanone Kaffeesatz', Arial, sans-serif;
padding: 0;
margin: 0;
color: #000;
}
form#beautiful fieldset p {
margin: 20px 0;
}
form#beautiful fieldset label {
display: none;
}
form#beautiful fieldset input {
width: 240px;
padding: 12px 20px;
border: 0;
font-size: 28px;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
box-shadow: 1px 1px 0 0 #FFF, 5px 5px 40px 2px #BBB inset;
-moz-box-shadow:1px 1px 0 0 #FFF, 5px 5px 40px 2px #BBB inset;
-webkit-box-shadow: 1px 1px 0 0 #FFF, 5px 5px 40px 2px #BBB inset;
-webkit-background-clip: padding-box;
}
form#beautiful fieldset input#submit {
width: 280px;
cursor: pointer;
box-shadow: 0 0 4px 0 #666;
-moz-box-shadow: 0 0 4px 0 #666;
-webkit-box-shadow: 0 0 4px 0 #666;
background: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0, rgb(237,237,237)),
color-stop(0.41, rgb(217,217,217)),
color-stop(1, rgb(255,255,255))
);
background: -moz-linear-gradient(
center bottom,
rgb(237,237,237) 0%,
rgb(217,217,217) 41%,
rgb(255,255,255) 100%
);
}
form#beautiful fieldset input#submit:hover {
background: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0, rgb(232,114,198)),
color-stop(0.41, rgb(230,71,185)),
color-stop(1, rgb(235,176,218))
);
background: -moz-linear-gradient(
center bottom,
rgb(232,114,198) 0%,
rgb(230,71,185) 41%,
rgb(235,176,218) 100%
);
}