Topic: Cleanest way to build boxes with rounded edges, borders/dropshadows and gradients (Page 1 of 1) Pages that link to <a href="http://ozoneasylum.com/backlink?for=31025" title="Pages that link to Topic: Cleanest way to build boxes with rounded edges, borders/dropshadows and gradients (Page 1 of 1)" rel="nofollow" >Topic: Cleanest way to build boxes with rounded edges, borders/dropshadows and gradients <span class="small">(Page 1 of 1)</span>\

 
Blaise
Paranoid (IV) Inmate

From: London
Insane since: Jun 2003

IP logged posted posted 05-29-2009 15:40 Edit Quote

Hi, I've been working on a site the last week or so and I'm beginning to feel that I'm going about things the wrong way to build these panels that I've had from my design.



Here is an example panel, the content that fits inside can grow in length, so the width of the panel will be fixed, but not the height. usually I would crop the image into two parts, a large top part, and a small bottom part, that would include the curves only, if necessary I would add a backround colour to match the end point of the gradient.

The problem here is that this involves a drop shadow and sits on a background that includes a gradient as well (may not in this screenshot), so I want to use a png to work best with the drop shadow on the box and the anti-aliasing on the curves, however this will cause me problems with IE6.

In any case here's a sample of what my current code looks like pretty much

code:
<div class="panel">
  <div class="innerPanel">
    <p>This is the content inside my panel</p>
  </div>
</div


code:
div.panel {
  background: url("../images/bg_panel_bottom.png") no-repeat 0 100%;
  padding: 0 0 5px;
}

div.innerPanel {
  background: url("../images/bg_panel_top.png") no-repeat 0 0;
  padding: 5px 5px 0;
}



Witht he code above I would use a large extended bg_panel_top.png so that if the panel grew it would mange, the problem here is that the gradient would lose its visual appeal, and it's posible with excessive content that the background would eventually run out and look broken.

Now I've no phobia of adding mroe divs, but I do want the code to be clean and slick, so it is easiy readable and rewritable, I also don't want to rely on any kind of JavaScript solution, so, has anyone got any ideas or points they'd like to raise, any suggestions on how to improve this?

reisio
Paranoid (IV) Inmate

From: Florida
Insane since: Mar 2005

IP logged posted posted 05-30-2009 04:33 Edit Quote
code:
background: url(../images/alphatrans.png) !important; /* for all browsers but IE6       */
background: url(../images/indexed.png); /* for IE6, they won't miss the shadows anyways */

Taeo920
Obsessive-Compulsive (I) Inmate

From:
Insane since: Nov 2009

IP logged posted posted 11-26-2009 07:08 Edit Quote

When I have to tackle creating containers like this I typically use this structure.

code:
<div class="container">
	<div class="top"></div>
	<div class="content">
		<p>Stuff</p>
	</div>
	<div class="bottom"></div>
</div>

div.container { width: 200px; }
div.container div.top { background: url("top.png") no-repeat; height: 5px; }
div.container div.content { background: url("content.png") repeat y; padding: 5px; }
div.container div.bottom { background: url("bottom.png") no-repeat; height: 5px; }

Taeo920
Obsessive-Compulsive (I) Inmate

From:
Insane since: Nov 2009

IP logged posted posted 11-26-2009 07:09 Edit Quote

And as for the IE6 transparency bit Javascript is your only real option aside from reisio's suggestion of just making a separate graphic for IE6 only. I personally use a jQuery plugin called iFixPng.

poi
Paranoid (IV) Inmate

From: Norway
Insane since: Jun 2002

IP logged posted posted 11-26-2009 10:49 Edit Quote

About PNGs, if you're fine with having alpha transparency in every browsers but IE6, you can use PNG8 with alpha transparency. IE6 will simply skip any non-fully opaque pixel.

reisio
Paranoid (IV) Inmate

From: Florida
Insane since: Mar 2005

IP logged posted posted 11-27-2009 00:36 Edit Quote

All you need is to add an extra program to your PNG creation process, or pay for Fireworks and learn Fireworks and learn a special PNG creation process, etc.!

Blaise
Paranoid (IV) Inmate

From: London
Insane since: Jun 2003

IP logged posted posted 11-27-2009 10:20 Edit Quote
quote:
When I have to tackle creating containers like this I typically use this structure.

code:
<div class="container">
<div class="top"></div>
<div class="content">
<p>Stuff</p>
</div>
<div class="bottom"></div>
</div>

div.container { width: 200px; }
div.container div.top { background: url("top.png") no-repeat; height: 5px; }
div.container div.content { background: url("content.png") repeat y; padding: 5px; }
div.container div.bottom { background: url("bottom.png") no-repeat; height: 5px; }


That's precisely what I'm trying to avoid though

Good point Poi, I never thought to try just an 8-bit png.



Post Reply
 
Your User Name:
Your Password:
Login Options: Remember Me On This Computer
 
Your Text:
Loading...
Options: Show Signature
Enable Slimies
Enable Linkwords

« BackwardsOnwards »

Show Forum Drop Down Menu