Multi
Multi
[CSS Tool] CSS Gradients; [√]
Topic Started: Friday, 27. January 2012, 20:58 (930 Views)
Aidan
Member Avatar
Level 12
CSS Gradients

I will just skip to the chase with this, because there really is not much to it. First of all, if you are going to use this documentation at all, I highly recommend you use ColorZilla for all your CSS Gradient needs.

To start off, I would like to point to this article that explains CSS(3) Gradients. The reason I say CSS Gradients and not CSS3 Gradients is due to the fact that, with ColorZilla it is rather browser-compatible with just about anything. The best part is, there is always a "back-up plan" so to speak. If the browser does not support CSS(3) Gradients, then it will simply use the first line of code that is automatically generated by ColorZilla: background:#[HEX value, which varies by gradient];. Take a look at all the great features that are included when using ColorZilla. Isn't it marvelous? :#

Anyway, next. What you are going to want to do is take a look at the CSS box that is below the Preview box on the right-hand side. My preference is to remove Comments because they really are not necessary, and they only take up more space when you are coding a theme. I also like to have the color format set to HEX just because that is the most common format used. And, if it did not occur to you yet, you are going to want to check IE9 Support, even if you do hate Internet Explorer.

Once you have done all that, simply click either of the import buttons. For the purpose of this tutorial, I will be explaining the first of two buttons, import from image, simply because that is the one I have always used. Either upload the image, or copy and paste the URL to the image, and then click import. Now just hover over the box in which the CSS appears, click copy (it will show up once you have hovered over the box), and you are done (that is, once you paste the code and update your CSS)!

To recap:
  1. Go to ColorZilla
  2. Import from image
  3. Browse for, or copy and paste, the URL to the image
  4. Import
  5. Copy, and then paste, to your CSS
Off
Profile
Quote
Top
 
Geoffrey
Member Avatar
It's a love story, baby just say yes
Nice doc. Going to bookmark ColorZilla now. :)
Consider this statement my permission to convert my themes to other platforms. Please link back to http://geoffreykoester.com. Be sure to rehost all theme images on the new platform as we do not know how long they will redirect. Also some boards hosting theme/skin images may not survive the move.

Posted Image

Other Sigs
Awards & Memories
Off
Profile
Quote
Top
 
Aidan
Member Avatar
Level 12
Another thing I would like to mention is the use of fall-back images. I will use the default/initial gradient as an example:
Code:
 
background: #1e5799;
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzFlNTc5OSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iIzI5ODlkOCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUxJSIgc3RvcC1jb2xvcj0iIzIwN2NjYSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM3ZGI5ZTgiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(50%,#2989d8), color-stop(51%,#207cca), color-stop(100%,#7db9e8));
background: -webkit-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%);
background: -o-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%);
background: -ms-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%);
background: linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 );
The line of code with the really long URL is the one in which your image URL would go. You could, of course, leave that URL as it is, but for the sake of keeping your CSS even shorter it would be best to use your own image.
Off
Profile
Quote
Top
 
Aidan
Member Avatar
Level 12
Outline Tips & Tricks
A P P R O V E D

Your tutorial has been accepted and your tokens have been added!
Off
Profile
Quote
Top
 
1 user reading this topic (1 Guest and 0 Anonymous)
« Previous Topic · Coding & Development · Next Topic »

Welcome Guest [Log In] [Register]
Outline Live
Loading..
Loading..