Home arrow Style Sheets arrow 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
(Page 1 of 2 )

If you still haven’t heard about it, Turbine is a thorough library written in PHP which, through its parsing engine, will let you create your CSS files by using a shortened and tight syntax, very similar to the one used by Python. While this can be considered its primary capability, the library also provides support for many other handy features. These include the ability to define nested and multi-line CSS selectors, utilize constants and aliases, and even extend its core functionality via a decent number of plug-ins that are very easy to use.

Moreover, to illustrate how useful Turbine can be for building shorter CSS files, in the previous part of the series I discussed in detail the implementation of its “copy” statement. This statement can be used for copying one or multiple properties of a specific CSS selector to a different one. What’s more, the use of the “copy” option along with Turbine’s multiple Inheritance makes reusing CSS styles a no-brainer process.

As I just mentioned, the library packs a respectable number of core plug-ins that permit you to perform additional tasks, such as minifying and resetting style sheets files, and using CSS3 properties (at least some of them) in a pretty cross-browser fashion as well. If you're interested in learning how to work with some of these plug-ins, in this eighth part of the series I’m going to discuss a couple of them. Called “border-radius” and “background gradient,” they're capable of generating (when possible) “standard” implementations of the “border-radius” and “background” CSS3 properties.

Ready to learn how to put these plug-ins to work for you? Then begin reading!

Generating a cross-browser version of the “border-radius” CSS property: using Turbine’s “border-radius” plug-in

One of Turbine's biggest strengths is its flat learning curve. This becomes evident when using its core plug-ins, as the process requires you to declare at the beginning of the target CSS file an @turbine rule, followed by the name and value of the plug-in being invoked.

Does this sound confusing to you? Well, suppose for a moment that you need to add nifty rounded corners to the subsections of the web page shown in previous tutorials, whose structure looked like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html charset=utf-8" />
<title>Parsing a CSS file with Turbine (using the border-radius plug-in)</title>
<link rel="stylesheet" href="css.php?files=styles.cssp" />
</head>
<body>
<div id="wrapper">
    <div id="header">
        <h1>Parsing a CSS file with Turbine (using the border radius plug-in)</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere ullamcorper lacus et sollicitudin. Morbi ultrices condimentum lacus, sit amet venenatis purus bibendum sit amet. Quisque rhoncus sodales sapien ac blandit. Nam lacus urna, commodo eget tincidunt vitae, ullamcorper at nulla. Vivamus ac iaculis justo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae Aliquam erat volutpat. Sed quis elit erat, et ultricies diam. Phasellus non turpis malesuada erat ultrices tincidunt sed vitae magna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae Duis purus risus, lacinia at faucibus id, luctus nec diam. In nulla neque, consequat ac hendrerit ac, pulvinar eu dui. Aenean in arcu felis, non hendrerit est.</p>
    </div>
    <div id="content">
        <h2>Main content section</h2>
        <div class="subsection">
            <h3>First subsection</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
        <div class="subsection">
            <h3>Second subsection</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
        <div class="subsection">
            <h3>Third subsection</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
    </div>
    <div id="footer">
        <h2>Footer section</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere ullamcorper lacus et sollicitudin. Morbi ultrices condimentum lacus, sit amet venenatis purus bibendum sit amet. Quisque rhoncus sodales sapien ac blandit. Nam lacus urna, commodo eget tincidunt vitae, ullamcorper at nulla. Vivamus ac iaculis justo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae Aliquam erat volutpat. Sed quis elit erat, et ultricies diam. Phasellus non turpis malesuada erat ultrices tincidunt sed vitae magna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae Duis purus risus, lacinia at faucibus id, luctus nec diam. In nulla neque, consequat ac hendrerit ac, pulvinar eu dui. Aenean in arcu felis, non hendrerit est.</p>
    </div>
</div>
</body>
</html>
  
Now, to add the desired rounded corners to the “subsection” divs via the “border-radius” plug-in, it’s necessary to define a CSS file similar to the following one:

@turbine
    plugins: borderradius
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: #f00
        border-radius: 10px
        p
            color: #000

That was pretty easy to code, wasn’t it? As you can see, the “border-radius” plug-in was first called via the brand new “plugins” statement, and then its associated CSS3 property was assigned to the aforementioned “subsection” class. This simple process generates a cross-browser version of the property in question, which is shown below:

/*
 Stylesheet generated by Turbine - http://turbine.peterkroener.de/
 Version: 1.1.0pre
 Path: /turbine
 Benchmark: 0.2248158454895
 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;
}
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: #f00;
 border-radius: 10px; /* Added by border radius plugin */
 -moz-border-radius: 10px; /* Added by border radius plugin */
 -webkit-border-radius: 10px; /* Added by border radius plugin */
 -khtml-border-radius: 10px; /* Added by border radius plugin */
}
#content .subsection p {
 color: #000;
}
 
At this point, if you test the earlier web page using your own browser, you should see that all of the divs with a “subsection” class assigned to them will be decorated with four neat rounded corners. Needless to say, Internet Explorer will ignore this, as it currently doesn’t support the “border-radius” property. 

So far, so good. Now that you've learned how to use the “border-radius” plug-in included with Turbine, it’s time to start discussing another one. Called “background gradient,” it can be used for filling web page elements with engaging gradients, quite similar to what you would do with Photoshop or any other popular image editor.

This topic will be covered in the coming section, so jump ahead and keep reading.


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-2017 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials