Welcome to cornflex

Description

Cornflex is not so much a cereal's trademark as a :

• modular: easy to use and reuse
• full CSS: no javascript needed
• transparent: PNG alpha based
• cross-browsers: compatible with ie(internet explorer)>=5 , mozilla/firefox , safari >=2 , opera
• liquid: horizontally and vertically
• and nestable: stack as many rounded corners boxes together as you want

rounded corners box technique for the web.

Live Demo

Follow the bee and enter into the magical world of cornflex!

Instructions for use

NB: As an example and for the rest of that section, we'll consider a sample of a white rounded corners box that we'll name whitebox

xHTML markup

<div class="cornflex whitebox">
        <div class="t">
                <div class="c">
                        <!--content goes here-->
                </div>
        </div>
        <div class="r"></div>
        <div class="b"></div>
        <div class="l"></div>
</div>

CSS stuff

As you can see and as a modular approach, cornflex consists of using two classes:

• a common one, that applies to every cornflex's rounded corners box: the class cornflex
• a specific one, that describes your particular rounded corners box: here, the class whitebox

Common class

Just include the cornflex's common stylesheet in your web page:

<link rel="stylesheet" type="text/css" href="cornflex-common.css" />

Specific class

• On photoshop, create your whitebox as stated below:
  download the whitebox.psd source file
  and export the 4 slices to:
  • whitebox_t.png
  • whitebox_r.png
  • whitebox_b.png
  • whitebox_l.png

• Now create a new cornflex-whitebox.css file and edit it as below by replacing with your own ((values)):
  

  .cornflex.whitebox {
          padding:0 ((Ω+β))px ((Ω+γ))px 0;
  }
  .cornflex.whitebox .t {
          background-image:url(whitebox_t.png);
  }
  .cornflex.whitebox .t .c {
          padding-top:((α))px;
          padding-left:((δ))px;
          position:relative;
          top:((Ω/2))px;
          left:((Ω/2))px;
  }
  .cornflex.whitebox .r,
  .cornflex.whitebox .b {
          width:((Ω+β))px;
  }
  .cornflex.whitebox .b,
  .cornflex.whitebox .l {
          height:((Ω+γ))px;
  }
  .cornflex.whitebox .r {
          bottom:((Ω+γ))px;
          background-image:url(whitebox_r.png);
  }
  .cornflex.whitebox .b {
          background-image:url(whitebox_b.png);
  }
  .cornflex.whitebox .l {
          right:((Ω+β))px;
          background-image:url(whitebox_l.png);
  }
  
  * html .cornflex.whitebox .l {
          width:expression(this.parentNode.offsetWidth - ((Ω+β)) + 'px');
  }
  * html .cornflex.whitebox .r {
          height:expression(this.parentNode.offsetHeight - ((Ω+γ)) + 'px');
  }
  

• Finally, link it to your page:
  

  <link rel="stylesheet" type="text/css" href="cornflex-whitebox.css" />
  

  NB: In order to override some common rules, it's important loading cornflex-whitebox.css AFTER cornflex-common.css

jQuery cornflex plugin

With the cornflex jquery plugin, it's even easier!
The only things you have to do is to include the cornflex's common stylesheet and call the plugin with your own ((values)):

<link rel="stylesheet" type="text/css" href="cornflex-common.css" />

<script src="jquery.js"></script>
<script src="jquery.cornflex.js"></script>
<script>
        $(document).ready(function(){
                $("div, .or, #whateveryouwant").cornflex('whitebox', {
                        omega: ((Ω)),                   // rounded corner's radius
                        image_t: 'whitebox_t.png',      // path to top image (relative OR url)
                        image_r: 'whitebox_r.png',      // right image
                        image_b: 'whitebox_b.png',      // bottom image
                        image_l: 'whitebox_l.png',      // left image
                        alpha: ((α)),                   // alpha value (cf. schema)
                        beta: ((β)),                    // beta value
                        gamma: ((γ)),                   // gamma value
                        delta: ((δ))                    // delta value
                });
        });
</script>

Download the source, or see it in action!

Author

Antoine BERNIER, web designer - abernier (at) pnumb (dot) com
Paris FRANCE

License

Cornflex is released under the Open Source MIT License, which gives you the possibility to use it and modify it in every circumstance.