![simple css form simple css form](https://i.ytimg.com/vi/mBw4t5JXR2o/maxresdefault.jpg)
Now that we have the basics out of the way, we can start making the form look how we want. (I will continue to use the black color for demonstration at the end, I’ll switch to the real color we will be using for the form.) So to get a simple linear gradient from top to bottom – black to white – we would do like this:īackground: -webkit-gradient(linear, left top, left bottom, from(#000000), to(#FFFFFF)) īackground: -moz-linear-gradient(top, #000000, #FFFFFF) If you want a gradient going from top to bottom (90deg) you don’t need to assign an angle. Gecko gradients, on the other hand, require only a start point (Y), and at least two colors. The angle is determined by where start and end are, and the gradient will be colored with the “from(color)” fading to “to(color)”. Webkit gradients require a start point (X and Y), an end point (X and Y), a from-color, and a to-color. webkit-gradient( linear,, , from(), to() )Īs you can see, the methods are quite different, so this will require some explaining.
#Simple css form code#
Thankfully, we don’t need to code a rainbow today we just need a straight linear gradient. With CSS3 gradients, you can create some amazing shapes - from dart boards to rainbows - so as you can imagine it has a more complex syntax. While the box-shadow syntax is easy to grasp, gradients are trickier. Basically, we don’t want anyone to notice the shadow, but still have it lift the fields from the page.
![simple css form simple css form](https://i0.wp.com/www.csscodelab.com/wp-content/uploads/2019/11/simple-clean-html5-css3-login-form-design.png)
If we apply too much shadow, it will look ugly if we apply too little, it won’t have an effect. So our box-shadow is black with 10% (0.1) opacity, no horizontal and vertical offset, and with a blur of 8 pixels. An opaque black on the other hand will work well no matter what background. It’s perfectly fine to use a light grey for the shadow’s color, but if you are using any other background than white it will look strange. RGBA (Red Green Blue Alpha) is, simply put, color with opacity. You might notice that there was no normal RGB color used, this is because we’re using two CSS3 techniques on the same line: box-shadow and rgba. Internet Explorer has their own weird way of doing things, and although it’s capable of making a shadow it will not look the way we want it.
![simple css form simple css form](https://codes4education.com/wp-content/uploads/2020/11/Preloader-Design-CSS-min-1.png)
Until CSS3 becomes the standard, you have to use all three methods.
![simple css form simple css form](https://freefrontend.com/assets/img/css-login-forms/CSS-Login-Form.png)
Even more impressive is that this is done without any images at all.īy following this tutorial you will not only end up with a lightweight and beautiful form, you’ll also learn and understand new CSS3 techniques, such as box-shadow, gradients, opaque colors, and rounded corners.ĬSS3 is the next generation of CSS that is currently under development, but that doesn’t stop browsers from already implementing many of the prominent features. Subtle background gradients give depth to the fields while shadows lift them from the page. This tutorial includes a screencast available to Tuts+ Premium members. Thanks to advanced CSS properties, such as gradients and shadows, it’s now quite easy to turn a dull web form into something beautiful – with minimal effort.