Working with css3 gradients and understanding how they work
- Published by
- Posted on
- 7 Comments
It was nice being able to use gradients in my designs when starting a new projects. It gave me the ability to make elements appear in a greater style. It were even nicer when I were able to use css3 gradients with no image to get the same result. In today’s post I will showing you all how you can use css3 gradients and how it can make your life that much easier and maybe speed up your development process.
From Photoshop to css3
When making the transition from using photoshop gradient images many of you probably think that css3 is way to complicated and have not yet used its incredible features. When working with css3 gradients you will find how photoshop now goes hand and hand with css3.
Linear Gradients
Linear gradients are gradients that is usually vertical or horizontal. In Photoshop designers in most cases use 2 colors but sometime you will want to use more then 2 colors at a time and just how that can be achieved using Photoshop it can also be achieved using css3. Take a look at the code below.
background: -moz-linear-gradient(top, #87e0fd 0%, #53cbf1 53%, #05abe0 100%); /* FireFox 3.6+ */
Now Lets break the code down so you can better understand what is what and what is going on.
Moz linear gradient targets Mozilla Firefox
-moz-linear-gradient
Top lets the css3 know that the gradient is starting from the top
top
The first color if you can see the image, is from photoshop gradient tool.
#87e0fd 0%
The second color:
#53cbf1 53%
The third color:
#05abe0 100%
Targeting other browsers
So you have created your css3 gradient and you noticed that it only shows in Firefox. Why? The reason why comes to the simple fact we have not targeted other browsers in our stylesheet. How do you target other browsers with css3? Look below.
Chrome, Safari4+
-webkit-gradient(linear, left top, left bottom, color-stop(0%,#87e0fd), color-stop(53%,#53cbf1), color-stop(100%,#05abe0)); /* Chrome,Safari4+ */
Opera11.10+
-o-linear-gradient(top, #87e0fd 0%,#53cbf1 53%,#05abe0 100%); /* Opera11.10+ */
Internet Explorer10
-ms-linear-gradient(top, #87e0fd 0%,#53cbf1 53%,#05abe0 100%); /* IE10+ */
My “good” buddies Internet Explorer 6 (IE6), Internet Explorer 7 (IE7), Internet Explorer 8 (IE8), Internet Explorer 9 (IE9)
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#87e0fd', endColorstr='#05abe0',GradientType=0 ); /* IE6-9 */
Optional: For W3C Purposes if you’re into validations of your website.
background: linear-gradient(top, #87e0fd 0%,#53cbf1 53%,#05abe0 100%); /* W3C */
Great Tutorial. Im a beginner when it comes to css so this really helped
Thanks a lot, that a good explanation. Keep it up
Webkit changed their gradient syntax at the beginning of this year. -moz- and -webkit- using the same syntax you mentioned for Mozilla-Browsers.
Thanks will update!
Nice tutorial. I always use a website to auto generate the gradients. But, this is a great explanation. Also, thanks for not forgetting to include Internet Explorer in the tutorial.
Yeah generators are great but its good to know how to write it and it all seems hard but really ps does all the works and gives you all the numbers.
Thank you for a great article, but I am wondering, why Ishould I use a css gradient. In my opinion there is still reasons to use a photoshop gradient especially if you use more than 2 colorstops. First because its easy to see what your are doing.
Second because the load time has to be faster. When you use the command repeat-x,. you only need a picture that is 1 pixel wide vs the css gradient has to be created by the browser each time, if the gradient is not cached by the browser.or am I missing a vital point here ?
What are the benefits of using a css gradient ?