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:
- Rounded Corners
- Fades
- Drop Shadows / Glows
- 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?
Whatya think?