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.
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:
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.
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.