| [CSS Tool] CSS Gradients; [√] | |
|---|---|
| Tweet Topic Started: Friday, 27. January 2012, 20:58 (930 Views) | |
| Aidan | Friday, 27. January 2012, 20:58 Post #1 |
![]()
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:
|
Off
Profile |
Quote Top
|
| Geoffrey | Friday, 27. January 2012, 21:08 Post #2 |
![]()
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.![]() Other Sigs Awards & Memories
| |
Off
Profile |
Quote Top
|
| Aidan | Monday, 13. February 2012, 05:09 Post #3 |
![]()
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: 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 | Sunday, 4. March 2012, 21:38 Post #4 |
![]()
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 » |
| Track Topic · E-mail Topic |
8:14 PM Jul 10
|
Powered by ZetaBoards Premium · Privacy Policy



Multi
Multi
























8:14 PM Jul 10


Outline Live