Er is geen CSS ondersteuning.
Op deze pagina staat een klein voorbeeld van een radiale gradient als achtergrond (in de body van de pagina). In IE is dat natuurlijk doodsimpel (met de "DXImageTransform") en ook mozilla en webkit leveren nooit zoveel problemen op. Opera daarentegen kan alleen maar met svg een "radial gradient" neerzetten. Om nu met één "commando" alle browsers hetzelfde kunstje te laten doen is heel goed mogelijk, maar daar is wel javascript voor nodig. Laten we deze procedure maar onder de noemer "progressive enhancement" plaatsen: als er geen javascript voorhanden is zal niemand merken dat er een radiale gradient op de pagina ontbreekt.
De procedure staat hieronder. Laten we eerst maar de "opdrachtregel" even behandelen. Onderaan het script bij de window.onload staat de regel:
doe_radial(['body', '#0000aa', '#002200', '500', 'boven_midden']);};
body is duidelijk. de volgende twee items zijn de begin- en de eind-kleur van de gradient. de 500 bepaalt de diameter van de gradient (in pixels), en "boven_midden" bepaalt de positie van de radial gradient op de pagina. Als je de gradient ergens anders op de pagina wilt positioneren kan je dit makkelijk in de code wijzigen door een nieuwe if (radial_array[4]== toe te voegen. In het stukje javascript heb ik "aangepast_midden" toegevoegd. Verander in de opdrachtregel "boven-midden" in "aangepast_midden" en de radial staat op een andere plaats op de pagina. Je kan zoveel verschillende plaatsbepalingen aanmaken als je wilt. Kijk even in het script hoe alles gedaan is. Het script zet je zo laag als mogelijk in de body-sectie van jouw pagina. Het enige wat ik nog te melden heb is dat alles crossbrowser, valide html (en css) en JSLint-proof is.
/*global window: false */
function radial_ie(radial_array) {
var horizontale_positie,
verticale_positie;
var kleur_in=radial_array[1];
var kleur_naar=radial_array[2];
var de_radius=radial_array[3];
var elementje=radial_array[0] == 'body' ? document.body: document.getElementById(radial_array[0]);
if (radial_array[4]=='boven_midden') {
horizontale_positie=elementje.offsetWidth / 2 - de_radius;
verticale_positie=-de_radius;}
if (radial_array[4]=='aangepast_midden') {
horizontale_positie=elementje.offsetWidth / 2 - de_radius;
verticale_positie=elementje.offsetHeight / 2 - de_radius;}
var fiks=document.createElement('div');
fiks.style.width=de_radius * 2;
fiks.style.height=de_radius * 2;
fiks.style.position='absolute';
fiks.style.zIndex='-1';
fiks.style.top='0px';
fiks.style.left='0px';
fiks.style.marginLeft=horizontale_positie;
fiks.style.marginTop=verticale_positie;
fiks.style.backgroundColor=kleur_in;
fiks.style.filter='progid:DXImageTransform.Microsoft.Alpha(opacity=100, finishopacity=0, style=2)';
elementje.appendChild(fiks);
elementje.style.backgroundColor=kleur_naar;}
function radial_opera(radial_array) {
var x_hoogte,
x_breedte,
horizontale_positie,
verticale_positie;
var elementje=radial_array[0] == 'body' ? document.body: document.getElementById(radial_array[0]);
var kleur_in=radial_array[1];
var kleur_naar=radial_array[2];
var de_radius=radial_array[3];
var verticale_start=de_radius - (de_radius * 2);
if (radial_array[0]=='body') {
x_breedte=document.body.clientWidth;
x_hoogte=document.body.clientHeight;
}else{
x_breedte=document.getElementById(radial_array[0]).offsetWidth;
x_hoogte=document.getElementById(radial_array[0]).offsetHeight;}
if (radial_array[4]=='boven_midden') {
horizontale_positie=((x_breedte) / 2) - (de_radius);
verticale_positie=verticale_start;}
if (radial_array[4]=='aangepast_midden') {
horizontale_positie=((x_breedte) / 2) - (de_radius);
verticale_positie=((x_hoogte) / 2) - (de_radius);}
var svg = '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="' + (de_radius * 2) + 'px" height="' + (de_radius * 2) + 'px"><defs><radialGradient id="rg" cx="50%" cy="50%" r="100%"><stop stop-color="' + kleur_in + '" offset="0%"></stop><stop stop-color="' + kleur_naar + '" offset="50%"></stop></radialGradient></defs><rect style="fill:url(#rg);" width="' + (de_radius * 2) + 'px" height="' + (de_radius * 2) + 'px"/> </svg> ';
var vertaal_data=window.btoa(svg);
elementje.style.background='url("data:image/svg+xml;base64,' + vertaal_data + '") no-repeat ' + kleur_naar + ' ' + horizontale_positie + 'px ' + verticale_positie + 'px';}
function radial_strict(radial_array) {
var position1,
position2;
var elementje=radial_array[0] == 'body' ? document.body: document.getElementById(radial_array[0]);
var de_radius=radial_array[3];
if (radial_array[4]=='boven_midden') {
position1='center';
position2='top';}
if (radial_array[4]=='aangepast_midden') {
position1='center';
position2='center';}
elementje.style.background='-webkit-gradient(radial, ' + position1 + ' ' + position2 + ', 0, ' + position1 + ' ' + position2 + ', ' + radial_array[3] + ', from(' + radial_array[1] + '), to(' + radial_array[2] + '))';
elementje.style.background='-moz-radial-gradient(' + position2 + ' ' + position1 + ' ,circle farthest-side, #0000aa 0%, #002200 ' + de_radius + 'px)';}
var user_agent=navigator.userAgent.toLowerCase();
function doe_radial(radial_array) {
if (!window.opera && user_agent.indexOf("msie") != -1) {
radial_ie(radial_array);
} else if (window.opera) {
radial_opera(radial_array);
} else {
radial_strict(radial_array);}}
window.onload=function() {
doe_radial(['body', '#0000aa', '#002200', '500', 'boven_midden']);};
cache 05-02-2011