Demonstration

TripleB ...provides CSS 3 capabilities for div elements!

For test purposes

resize the browser window and zoom in and out
change blind text

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.

tripleb.js is distributed under the Netzgestade Non-commercial Software License Agreement. License permits free of charge use on non-commercial and private web sites only under special conditions (as described in the license). This license equals neither "open source" nor "public domain". There are also Commercial Software Licenses available.

YOU AGREE TO ALL CONDITIONS OF THIS LICENCE AGREEMENT CONCERNING THE USE OF THE SOFTWARE BY ACCEPTING THIS LICENCE. IF YOU DO NOT AGREE TO ALL CONDITIONS OF THIS AGREEMENT, YOU SHALL NOT INSTALL THE SOFTWARE, OR USE IT IN OTHER WAYS.

About TripleB

TripleB is my first attempt to get the 3 major beautifying features of CSS 3, namely "border-radius", "box-shadow" and "background-image: gradient", to run on not natively supporting browser platforms.

Because of compatibility reasons and to get the first release done, I've built in several...
Restrictions:

"border-type" is always "solid"
"border-radius" always all four corners
"box-shadow" blur radius max is "32px"
"box-shadow" color is always "black" (IE only)
"gradient" direction is horizontal or vertical only
"gradient" size is always "100%"
"gradient" colors are reduced to "from" and "to" color
Real background images with no repeating are always centered
Real background images with repeating starts always at 0,0
Real background images with repeat-x or repeat-y are currently not supported (IE only)
Elements must be displayed on startup to be identified by the initialization function.
Elements border, shadow and background styles can't be modified after the initialization.

Features:

Because tripleb.js uses microformat class names to set individual parameters, it's possible to see the styles on supporting browser platforms also when javascript is out of action.
Elements dimensions will resize automatically on events like "onresize", "onzoom" and "onchange".
The custom events "onzoom" and "onchange" are done by the use of an observer (for canvas only).
The observers interval is configurable from 50 to 5000 ms (default 1000 ms).
If the element was modified by tripleb.js or not, can be queried by "if(object.modified) {... }".
The repainting of an element can be enforced without time delay by "cvi_3b.paint(object);".
The elements content can always be changed by e.g. "object.lastChild.innerHTML".

Disadvantages:

A visual problem is the displaying of similar looking shadows. I've done my best, but I'm really dissatisfied with the result.
IE's vml do not support clipping. Result is, that shadows shines through if background-color is set to transparent and the gradient uses opacities lower than 100%.
IE 5-6 and Safari 1-2 are currently not supported.
Opera is very slow, especially on huge elements.
Because of Opera, it's important to set border and background-colors as 6-hex-digit (e.g. #ffa508).
Because of Opera, it's also necessary to set border-width in pixel only.

The concept behind the simulation makes it necessary to split the block-level element into an outer div and an inner block-level element. So that the outer element is always a div and represents the background "style" while the inner element is of the type block-level and represents the "content". If the outer div should have settings for "padding" and/or "overflow", they must be set to the inner element to work properly.

Example:

<head>
<style type="text/css">
	.outer {
		margin: 0 1em 1em 0;
		padding: 0; 
		float: left;
		display: block; 
		position: relative; 
		border: solid 2px #ffa500; 
		background-color: #ffcc00;
	}
	.inner {
		display: block; 
		position: relative; 
		padding: 1em; 
		margin: 0;
	}
	/* if you want the style to be visible on natively supporting  
	   browser platforms also when javascript is out of action */
	.bradius_10 {
		-moz-border-radius: 10px;
		-webkit-border-radius: 10px;
		-khtml-border-radius: 10px;
		border-radius: 10px;
	}
</style>
</head>
<body>
	<div class="outer tripleb bradius_10"><p class="inner">
		Lorem ipsum dolor sit amet, consectetuer adipiscing elit, 
		sed diam nonummy nibh euismod tincidunt ut laoreet dolore 
		magna aliquam erat volutpat. 
	</p></div>
</body>

TripleB always uses the inbuilt browser capabilities first. As a last solution, if the combination of features don't match the browser capabilities, it creates an additional element. This element is positioned in the outer div as the first child, before the inner element. The element consists of the type canvas or div and is always named like the outer div, followed by an underscore and the suffix "canvas". The outer div can also be queried (for tripleb.js DOM modification) by "if(object.modified) {... }". The inner element can always be accessed by "object.lastChild". If the outer div is modified and the additional element consists of the type canvas, then tripleb.js has added an observer for a custom "onzoom" event. Assuming that the inner element has been changed by "object.lastChild.innerHTML" and the elements dimensions have also been changed, the repainting of the canvas element starts after the defined interval (default 1000 ms) modifiable by the tripleb property "cvi_3b.interval=200;". You can also enforce the repainting of the canvas without time delay by "cvi_3b.paint(object);".

Classes

Initialisation class "tripleb"

vary the border-radius by adding bradius followed by an underscore and the desired radius in pixel:
Border radius class "bradius_16"

vary the box-shadow by adding bshadow followed by an underscore and the desired color as 6-hex-digit or 3-hex-digit, followed by an underscore and the desired opacity in %, followed by an underscore and the desired x-position in pixel, followed by an underscore and the desired y-position in pixel, followed by an underscore and the desired blur-radius in pixel:
Box shadow class "bshadow_000000_100_0_0_10" - max blur-radius is 32px, max-min x/y offset +-64px

vary the background-gradient by adding bgradient followed by an underscore and the desired angle as °, followed by an underscore and the desired from-color as 6-hex-digit or 3-hex-digit, followed by an underscore and the desired from-opacity in %, followed by an underscore and the desired to-color as 6-hex-digit or 3-hex-digit, followed by an underscore and the desired to-opacity in %:
Background gradient class "bgradient_0_ffffff_100_ffa500_50" - angle is currently limited to 0==vertical, 90==horizontal

Syntax

Set defaults using Javascript


		cvi_3b.interval = 1000;	//INT 50-5000 (ms)

Get some informations

FLOAT = cvi_3b.version;
STRING = cvi_3b.released;

Initialize simulation using Javascript

cvi_3b.init();

This function has been executed automatically on page load!

Repaint element using Javascript

cvi_3b.paint(element);

Example:: var ele=document.getElementById("outer"); if(ele&&ele.modified) {cvi_3b.paint(ele);}

Why use Javascript TripleB?

Fast, small and quite easy to implement with a little knowledge of html and css.
Don't need to spend time in an image editor creating images to simulate round corners, shadows and gradients.
It's dead easy to change the attributes of the elements.
Free of charge use on non-commercial and private web sites.

In older browsers, the script degrades and your visitors won't notice a thing.

License

tripleb.js is distributed under the Netzgestade Non-commercial Software License Agreement.
License permits free of charge use on non-commercial and private web sites only under special conditions (as described in the license). This license equals neither "open source" nor "public domain". There are also Commercial Software Licenses available.

YOU AGREE TO ALL CONDITIONS OF THIS LICENCE AGREEMENT CONCERNING THE USE OF THE SOFTWARE BY ACCEPTING THIS LICENCE.
IF YOU DO NOT AGREE TO ALL CONDITIONS OF THIS AGREEMENT, YOU SHALL NOT INSTALL THE SOFTWARE, OR USE IT IN OTHER WAYS.

Other Projects

home
developer
laboratory
mapzoom.js
Supports zoom & pan for pixel & vector data! It's a conceptual combination of ShiftZoom and Mapper. Requires no plugin/extension or any other external resource!
shiftzoom.js
Supports zoom & pan functionality! The library allows you to add/remove zoom and pan functionality to oversized images on your webpages. Requires no plugin/extension or any other external resource!
snapfit.js
Supports jigsaw puzzle functionality! The script allows you to add jigsaw puzzles with individual options to images on your webpages. Requires no plugin/extension or any other external resource!
booklet.js
Simulates an authentic looking album or book presenting photos, images and pictures of all sizes and with any aspect ratio. Includes covering, navigation, information, linking and auto generated visual table of contents. Requires no plugin/extension or any other external resource!
loupe.js
Simulates an authentic looking magnifying glass! The script allows you to add a loupe for magnifying (inc. start viewpoint) to an image on your webpage. Requires no plugin/extension but one external resource image!
busy.js
Supports native spinner animations! The library allows you to add/remove loading indicators to the viewport and to block-level elements on your webpages. Requires no plugin/extension or any other external resource!
mapper.js
Emulates native area highlighting! The script allows you to add automatic area highlighting to image maps on your webpages (inc. export to SVG). Requires no plugin/extension or any other external resource!
glossy.js
Simulates a glossy shaded and beveled button look! The script allows you to add individual corners, shadings and shadows to images on your webpages. Requires no plugin/extension or any other external resource!
slided.js
Simulates a slide frame look including gradients! The script allows you to add individual colors, shadings and shadows to images on your webpages. Requires no plugin/extension or any other external resource!
corner.js
Simulates a whole bunch of image effects! The script allows you to add individual corners, shadings and shadows to images on your webpages. Requires no plugin/extension or any other external resource!
transm.js
Supports programmable image transitions! Features 113 transitions, 32 tweenings, individual corners, overlay graphics and event actions. Requires no plugin/extension or any other external resource!
gauge.js
Supports programmable gauges! The script allows you to add gauges (with shading and reflection) to your webpages. Requires no plugin/extension or any other external resource!
filmed.js
Simulates a film strip look including reflection! The script allows you to add individual colors, shining and shadows to images on your webpages. Requires no plugin/extension or any other external resource!
edge.js
Simulates masked image edges! The script allows you to add individual masks (inc. inbuilt mask) to images on your webpages. Requires no plugin/extension but zero or more external mask images!
sphere.js
Simulates a spherical image effect! The script allows you to add an spherical picture effect with individual zooming, shading, shining, transparency and colors to images on your webpages. Requires no plugin/extension or any other external resource!
bevel.js
Simulates a whole bunch of image effects! The script allows you to add bevels with individual glowing, shading and shining to images on your webpages. Requires no plugin/extension or any other external resource!
curl.js
Simulates a page curl image effect! The script allows you to add curls with individual paperback color, shadow opacity and size to images on your webpages. Requires no plugin/extension or any other external resource!
instant.js
Simulates an instant picture look including tilt! The script allows you to add individual colors, tiltings and shadows to images on your webpages. Requires no plugin/extension or any other external resource!
reflex.js
Simulates a Cover Flow^™ image effect! The script allows you to add individual borders, tiltings and reflections to images on your webpages. Requires no plugin/extension or any other external resource! *Cover Flow is a trademark of Apple Inc.