Home arrow Style Sheets arrow Page 2 - CSS with Turbine: the Border-Radius and Background Gradient Plug-ins
STYLE SHEETS

CSS with Turbine: the Border-Radius and Background Gradient Plug-ins


In this eighth part of the series, I discuss how to extend the core functionality of Turbine by using its “border-radius” and “background gradient” plug-ins. The library automatically generates (whenever possible) a cross-browser version of the properties handled by each plug-in, thus solving internal incompatibilities and even producing proprietary, vendor-specific implementations.

Author Info:
By: Alejandro Gervasio
Rating: 5 stars5 stars5 stars5 stars5 stars / 15
October 04, 2010
TABLE OF CONTENTS:
  1. · CSS with Turbine: the Border-Radius and Background Gradient Plug-ins
  2. · Using the background gradient plug-in

print this article
SEARCH DEVARTICLES

CSS with Turbine: the Border-Radius and Background Gradient Plug-ins - Using the background gradient plug-in
(Page 2 of 2 )

In reality, using the “background gradient” plug-in referenced in the previous segment isn’t very different from working with its cousin “border-radius.” The process also requires you to declare an @plugins rule at the top of the target CSS file. However, the best way to understand how to use the plug-in is by example. Below I created a whole new one for you, which will decorate all of the divs which have been assigned a “subsection” class with an appealing red gradient. Check it out: 

@turbine
    plugins:backgroundgradient
body
    padding: 0
    margin: 0
    background: #000
    font: 0.9em Arial, Helvetica, sans-serif
    color: #fff
p
    margin: 0 0 10px 0
#wrapper
    width: 960px
    margin: 0 auto
#header, #footer
    padding: 20px
#content
    padding: 20px
    overflow: hidden
    .subsection
        float: left
        width: 240px
        padding: 20px
        margin-right: 20px
        background-image: linear-gradient(top, #f00, #6F2302)
        p
            color: #000

As you can see from the above code sample, the “background-image” property has been used in this case to create an image-less gradient within the targeted selectors. Thanks to the functionality of the “background gradient” plug-in, this enhanced version of the property can be used on most modern browsers with pretty satisfactory results.

But hold on a second! In theory, the plug-in does its business correctly, which is the expected behavior. But to complete this example, it’s necessary to show how the previous CSS file looks after being parsed by Turbine, right? Well, that’s precisely what I’m going to do below, so read the lines to come.  

Completing the earlier example: the parsed version of the CSS file

In keeping with the concepts deployed in the section that you just read, here’s how the previous CSS file looks, once it has been processed by Turbine and sent out to the browser:

/*
 Stylesheet generated by Turbine - http://turbine.peterkroener.de/
 Version: 1.1.0pre
 Path: /turbine
 Benchmark: 0.023298025131226
 Browser: firefox
 Browser version: 3.68
 Browser engine: gecko
 Browser engine version: 1.928
 Platform: windows
 Platform version: 5.1
 Platform type: desktop
*/
body {
 padding: 0;
 margin: 0;
 background: #000;
 font: 0.9em Arial, Helvetica, sans-serif;
 color: #fff;
 zoom: 1; /* Added by background-gradient plugin */
 filter: progid:DXImageTransform.Microsoft.gradient(enabled:false); /* Added by background-gradient plugin */
 -ms-filter: "progid:DXImageTransform.Microsoft.gradient(enabled:false)"; /* Added by background-gradient plugin */
}
p {
 margin: 0 0 10px 0;
}
#wrapper {
 width: 960px;
 margin: 0 auto;
}
#header, #footer {
 padding: 20px;
}
#content {
 padding: 20px;
 overflow: hidden;
}
#content .subsection {
 float: left;
 width: 240px;
 padding: 20px;
 margin-right: 20px;
 background-image: -moz-linear-gradient(top,#f00,#6F2302); /* Modified by background-gradient plugin */
 zoom: 1; /* Added by background-gradient plugin */
 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#FFFF0000,endColorstr=#6F2302,gradientType=0); /* Added by background-gradient plugin */
 -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#FFFF0000,endColorstr=#6F2302,gradientType=0)"; /* Added by background-gradient plugin */
}
#content .subsection p {
 color: #000;
}

In this case, the “background gradient” plug-in has done the hard work behind the scenes and effectively generated all of the source code required to display the specified gradient within the target CSS selectors. As you may know, Internet Explorer only supports background gradients by means of a proprietary filter, which is why the earlier code sample looks so cluttered and filled from top to bottom with non-standard properties. The right side of this issue (if there is one) is that if you test the plug-in using Microsoft’s browser, the gradients will be rendered correctly.

And with this last example, we’ve come to the end of this part of the series. As usual, feel free to edit all of the code samples developed previously. Doing so will let you arm yourself with a better understanding of how to use the “border-radius” and “background gradient” plug-ins bundled with Turbine.     

Final thoughts

In this eighth installment of the series, I discussed how to extend the core functionality of Turbine by using its “border-radius” and “background gradient” plug-ins. As you just saw in the examples coded before, the library automatically generates (whenever possible, of course) a cross-browser version of the properties handled by each plug-in, thus solving internal incompatibilities and even producing proprietary, vendor-specific implementations.

In the next tutorial, I’m going to continue exploring the plug-in module that comes included with Turbine. This time you’ll learn how to work with two more, called “transform” and “minifier.” As the names suggest, the first one comes in handy for working with the brand new “transform” CSS3 property, and the last one can be used for minifying a specified CSS file.

Don’t miss the next chapter!  


DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware.

blog comments powered by Disqus
STYLE SHEETS ARTICLES

- CSS Padding Overview
- CSS: Margins Overview
- Top CSS3 Button Tutorials
- More Top CSS3 Tutorials for Animation and Im...
- CSS Mega Menus: Adding Extra Sections
- CSS Mega Menus
- CSS3 Accordian Menu: Horizontally Display Hy...
- CSS Combinators: Working with Child Combinat...
- CSS Combinators: Using General Siblings
- Intro to CSS Combinators
- CSS Semicircles and Web Page Headers
- Drawing Circular Shapes with CSS3 and Border...
- More CSS Pagination Link Templates
- CSS Pagination Links
- Animated CSS3 Image Gallery: Advanced Transi...

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 

Developer Shed Affiliates

 




© 2003-2014 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials