Skip to content

The SuperDiv

Without any doubt in my mind, this is the holy grail of web development.  A superDiv.  I spoke with Brad Neuberg about this at AjaxExperience.  He was working on possibly using the <canvas> tag to do interesting things like this.  Corner.js does this pretty well for <img> tags, but not for generic divs.

This is what I have been asked for by people for over 14 years.  They want:

  1. Rounded Corners
  2. Fades
  3. Drop Shadows / Glows
  4. Bevels/Emboss

This is a picture of it.  It should work just like a <div> tag in html.

I plead with the browser makers or javascript gurus out there to satisfy this ultimate issue.  This is something that should be possible with CSS.  Just use Photoshop as the key to the syntax.

Example: (I am literally copying right off Photoshop CS3.  The following is the actual info for the picture above.)

div {
  height: 100px; width: 100px;
  drop-shadow-angle: 120;
  drop-shadow-opacity: 75%;
  drop-shadow-distance: 5px;
  drop-shadow-spread: 0%;
  drop-shadow-size: 5px;
  drop-shadow-contour: linear;
  bevel-style: inner;
  bevel-technique: smooth;
  bevel-depth: 100%;
  bevel-direction: up;
  bevel-size: 5px;
  bevel-soften: 0px;
  bevel-shading-angle: 120;
  bevel-shading-altitude: 30;
  bevel-gloss-contour: linear;
  gradient-opacity: 100%;
  gradient-start-color:#db443f ;
  gradient-end-color: #9a3d3a;
  gradient-style: linear;
  gradient-angle: 90;
  corner-style: rounded;
  corner-radius: 5px;
}

My god, this would eliminate all of the craziness I go through to make a box with rounded corners.  The JS solutions out there make a ton of div tags dynamically to mimic the vector behavior desired.  I know you can do this with Flash, but I just don’t know how to use Flash.  I want an HTML solution.This should work on DIVs, Buttons, Input/Select fields, etc.

I think this really falls to the browser makers to make the canvas tag a replacement for the DIV tag.  It would make the life of the lowly HTML developer/designer much better.

Who is in charge of Firefox?  Chrome?  IE?  Can I get a little love here?

Published inUncategorized

One Comment

  1. Tom Quaile Tom Quaile

    Glen,

    Seems to me that this is something that the W3C should add to the CSS specification for a new version of CSS. The browser developers are only implementing (sometimes incorrectly and differently) these specifications.

    That being said, it’s pretty easy to do in Flex. 😉

    http://weblogs.macromedia.com/mc/archives/2005/10/round-cornered.html

    Tom

Leave a Reply