CSS3 Gradients
Use CSS 3 to create some nice subtle gradients; or very compelling gradients!
CSS 3 Gradients are not the simplest things by any means; there are several values to account for when projecting your gradient and it only worsens when working with radial gradients.
background:-moz-linear-gradient(pos, #AAA B, #XXX Y);
pos = the position of the first colour, giving direction to the gradient
#AAA = primary colour
B = where the fade begins (%)
#XXX = secondary colour
Y = where the fade begins (%)
The -webkit-gradient() is built slightly differently but works in the same manner, creating a start position and then the colors from() and to();
CSS 3 Linear Gradient
The above layer uses the following CSS 3
- CSS3 Gradient (linear_1)
- .my_CSS3_class {
- height: 100px;
- background: -moz-linear-gradient(top, #35425d 0%, #fff 100%);
- background: -webkit-gradient(linear, left top, left bottom, from(#35425d), to(#fff));
- }
The above layer uses the following CSS 3
- CSS3 Gradient (linear_2)
- .my_CSS3_class {
- height: 100px;
- background: -moz-linear-gradient(left, #35425d 25%, #fff 100%);
- background: -webkit-gradient(linear, left top, left bottom, from(#35425d), to(#fff));
- }
CSS 3 Radial Gradient
When it comes to radial gradients, I find trial-by-error works(!). As with the linear gradients, we create a central start point, a primary color and a secondary color. To get your gradient to just how you want it though, that will take some playing, saving and f5′ing – again and again and again.
The above layer uses the following CSS 3
- CSS3 Gradient (radial)
- .my_CSS3_class {
- height: 250px;
- background: -moz-radial-gradient(50% 50%, farthest-side, #487a77, #fff);
- background: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 350, from(#487a77), to(#fff));
- }
The Zen Elements CSS3 Series
- CSS3: Introduction
- CSS3: Border Image
- CSS3: Border Color
- CSS3: Border Radius
- CSS3: Box Shadow
- CSS3: Font Face
- CSS3: Gradients
- CSS3: HSL & HSLA
- CSS3: Multiple Column
- CSS3: Multiple Images
- CSS3: Opacity
- CSS3: RGB & RGBA
- CSS3: Text Shadow
- CSS3: Transform
Thank you for reading!
Alex | @ZenElements
�)
I really like the effects produced by CSS3, thanks for the tips :)
Super fantastic post, thank you!
Thankyou CSS3. Much nicer producing gradients like this rather than in photoshop