[[Snippet]] Round Boxes, without any image, 100% CSS

[Guest]

Welcome, Guest. Please login or register.
Did you miss your activation email?

1 Hour 1 Day 1 Week 1 Month Forever
Login with username, password and session length

[chucky]

Hi ! I just finished this little snippet, it generates round boxes, without any image, just CSS.
example here :

http://wiki.jalakai.co.uk/dokuwiki/doku.php/test/boxes

Adapted from a dokuwiki plug-in, itself based on a css technique "snazzy borders" : http://www.cssplay.co.uk/boxes/snazzy.html" by stu nicholls,
itself based on the "nifty corners" technique
http://pro.html.it/esempio/nifty/ 
by Alessandro Fulciniti.

1°) Paste this in one of your CSS :

Code:

/* SNAZZY BORDERS & ROUNDED BOXES */
/* You can add classes, change colors tu suit your needs :) */
/* Modx Roundboxes snippet by Vinh CHUC, www.pikkitux.com */
div.box {
  width: 50%;
  margin: 1em auto;
  border: 1px solid;
  padding: 4px;
}
 
/* rounded corners styles from Stu Nicholls snazzy borders, http://www.cssplay.co.uk/boxes/snazzy.html */
.xtop, .xbottom {background:transparent; font-size:0; line-height: 1px;}
.xb1, .xb2, .xb3, .xb4 {display:block; overflow:hidden; border-style: solid;}
.xb2, .xb3 {height:1px;}
.xb2, .xb3, .xb4 {border-width:0 1px;}
.xb1 {height: 0; margin:0 5px; border-width:1px 0 0 0;}
.xb2 {margin:0 3px; border-width:0 2px;}
.xb3 {margin:0 2px;}
.xb4 {height:2px; margin:0 1px;}
 
div.box .xtop, div.box .xbottom {display: none;}
div.box.round .xtop, div.box.round .xbottom {display: block;}
 
div.box.round { border: none; padding: 0;}
div.box.round .xbox {display:block; border-width:0 1px; border-style: solid; padding: 0 4px; }
 
div.box p.box_title, div.box p.box_caption {
  font-size: 90%;
  margin: 0;
  padding: 2px 6px;
  line-height: 1.2em;
}
 
div.box p.box_title { margin-bottom: 4px;}
div.box p.box_caption { margin-top: 4px;}
 
div.box .box_content {
  margin: 0;
  padding: 0 6px;
  border-width: 1px;
  border-style: dashed;
  line-height: 1.2em;
}
 
/* floating alignment */
 
div.box.left {
  float: left;
  margin-right: 1em;
}
 
div.box.right {
  float: right;
  margin-left: 1em;
}
 
/* colours */
/* default */
div.box, div.box .box_content, div.box .xbox, div.box .xb1, div.box .xb2, div.box .xb3, div.box .xb4 {
  border-color:  #8cacbb;
}
 
div.box, div.box .xbox, div.box .xb1, div.box .xb2, div.box .xb3, div.box .xb4 {
  background: #ecf1f4;
}
 
div.box p.box_title, div.box p.box_caption { background: #dee7ec;}
div.box .box_content { background: #f7fafb;}
 
/* blue */
div.box.blue, div.box.blue .box_content, div.box.blue .xbox,
div.box.blue .xb1, div.box.blue .xb2, div.box.blue .xb3, div.box.blue .xb4 {
  border-color:  #bbbbdd;
}
 
div.box.blue, div.box.blue .xbox,
div.box.blue .xb1, div.box.blue .xb2, div.box.blue .xb3, div.box.blue .xb4 {
  background: #e4ecf8;
}
 
div.box.blue p.box_title, div.box.blue p.box_caption {background: #cad0ee;}
div.box.blue .box_content {background: #f4f8fd;}
 
/* red */
div.box.red, div.box.red .box_content, div.box.red .xbox,
div.box.red .xb1, div.box.red .xb2, div.box.red .xb3, div.box.red .xb4 {
  border-color:  #ddbbbb;
}
 
div.box.red, div.box.red .xbox,
div.box.red .xb1, div.box.red .xb2, div.box.red .xb3, div.box.red .xb4 {
  background: #f8ece4;
}
 
div.box.red p.box_title, div.box.red p.box_caption {background: #eed0ca;}
div.box.red .box_content {background: #fdf4ec;}
 
/* green */
div.box.green, div.box.green .box_content, div.box.green .xbox,
div.box.green .xb1, div.box.green .xb2, div.box.green .xb3, div.box.green .xb4 {
  border-color:  #bbddbb;
}
 
div.box.green, div.box.green .xbox,
div.box.green .xb1, div.box.green .xb2, div.box.green .xb3, div.box.green .xb4 {
  background: #e4f8f2;
}
 
div.box.green p.box_title, div.box.green p.box_caption {background: #c4e4d4;}
div.box.green .box_content {background: #ecfaf6;}
 
/* orange */
div.box.orange, div.box.orange .box_content, div.box.orange .xbox,
div.box.orange .xb1, div.box.orange .xb2, div.box.orange .xb3, div.box.orange .xb4 {
  border-color:  #da3;
}
 
div.box.orange, div.box.orange .xbox,
div.box.orange .xb1, div.box.orange .xb2, div.box.orange .xb3, div.box.orange .xb4 {
  background: #f4e8ca;
}
 
div.box.orange p.box_title, div.box.orange p.box_caption {background: #f0d499;}
div.box.orange .box_content {background: #f8f0da;}
 
/* must come last to override coloured background when using rounded corners */
 
div.box.round {
  background: transparent !important;
}
 
/* end plugin:box */

and the snippet

Code:

// This plug-in generates Round Boxes without images, just pure CSS. Adapted from a dokuwiki plug-in,
// itself based on a css technique "snazzy borders" : http://www.cssplay.co.uk/boxes/snazzy.html" by stu
// nicholls, itself based on the "nifty corners" technique http://pro.html.it/esempio/nifty/  by Alessandro // Fulciniti.
// Examples here http://wiki.jalakai.co.uk/dokuwiki/doku.php/test/boxes
// Syntax :
//[[Roundboxes? &title=yourtitle&content=yourcontent&round=yes or no&width=width in %&color=a //color&align=left or right]]   
// you are not forced to set all the variables, only title and content are really necessary, others have
// default values
// example :
//[[Roundboxes? &title=luke&content=I'm your father&color=green&width=80&round=yes&align=right]]
// Version 1.0 24/12/2005

//Parameters

  // The Width of the box in percent, default is 80%
if ( $width == NULL )
{ $width = '80' ;}

 // Round or not round corners ? Default is yes, enter no to disable round corners
if ( $round == "no" )
{ $round = NULL; }
else { $round ='round'; }

 // The Color of the Boxes, default color is blue, ( blue, red, green, orange )
if ( $color == NULL )
{ $color = 'blue'; }

 // the $align variable can be set to left or right, your boxe will then have a float:left/tight property


// The Core of the Snippet :)
$s = ' ';

$var1 ='<div class="box ';
$var2 ='" style="width:';
$var3 ='%;">
 <b class="xtop"><b class="xb1"></b><b class="xb2"></b><b class="xb3"></b><b class="xb4"></b></b>
 <div class="xbox">
<p class="box_title">';
$var4 ='</p>
<div class="box_content"><p>';
$var5 ='</p></div>
 </div>
 <b class="xbottom"><b class="xb4"></b><b class="xb3"></b><b class="xb2"></b><b class="xb1"></b></b>
</div>';

$output = $var1.$align.$s.$color.$s.$round.$var2.$width.$var3.$title.$var4.$content.$var5;

echo $output;

// Plug-in made by Vinh CHUC, vinh.chuc@gmail.com

sorry if my english sucks , it's not my native language, please post any comments or suggestions
bye !




edit : there is a bug if you use the equal sign in the content or title variables, do you know how to solve this ??

[sottwell]

The problem I have with this is that it will have an impact on server performance applied to enough pages/minute. My goal is to get my pages out on the "wire" as quickly as possible, with as little impact on server resources as possible. The javascript NiftyCorners idea is acceptable under this constraint, since the "work" is done on the client's machine. As far as I am concerned, server-side scripts are for essential functionality, not "eye candy".

[chucky]

i don't run a very important website, so i do not pay much attention to the server resources, and i think most of users does't own a 100+ pages website so ... Moreover all visitors doesn't have javascript enabled  ( maybe you'll have a little faster website, but some of the visitors will got a weird display :s )

as you want the fastest generation for your pages, i guess you enabled the cache functionality , so just cache the snippet output, and it will not slow down your server !

bye