- 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 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
Top lets the css3 know that the gradient is starting from the top
The first color if you can see the image, is from photoshop gradient tool.
The second color:
The third color:
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.
-webkit-gradient(linear, left top, left bottom, color-stop(0%,#87e0fd), color-stop(53%,#53cbf1), color-stop(100%,#05abe0)); /* Chrome,Safari4+ */
-o-linear-gradient(top, #87e0fd 0%,#53cbf1 53%,#05abe0 100%); /* Opera11.10+ */
-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 */