/**
* Set the opacity CSS for required element
*/
function setOpacity(elem,level) {
//if filters then IE
//use alpha opacity
if (elem.filters) {
elem.style.filter = 'alpha(opacity=' + level + ')';
} else {
//else use W3C opacity CSS
elem.style.opacity = level / 100;
}
}
/**
* Fade out the required element over time using CSS
*/
function fadeOut(elem) {
//20 frame animation
for ( var i = 0; i < 100; i += 5 ) {
//anonymous closure makes sure correct i is used
//for each iteration
(function(){
//opacity is i
var opacity = i;
//animation
setTimeout(function(){
// Set the new opacity of the element
setOpacity( elem, 100 - opacity );
//completely hide the element at 95%
if ( opacity == 95 )
elem.style.display = 'none';
//for smooth animation change the timeout delay
//proportionately with opacity
}, ( i + 1 ) * 10 );
})();
}
}
//get id of element that closes element
var myElm = document.getElementById('myElement');
//close the element on click
myElm.onclick = function() {
fadeOut(document.getElementById('fadeOutElement'));
};
Tag Archive for opacity
Fadeout DOM element
CSS3 Opacity
background: rgba(200, 54, 54, 0.5); color: rgba(200, 54, 54, 0.5); color: #000; opacity: 0.5; filter: alpha(opacity=50); -khtml-opacity: 0.5; -webkit-opacity: 0.5; -moz-opacity: 0.5;
Transparent Class
.class-name {
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
}
Crossfade Plugin for jQuery
$.fn.crossfade = function(){
return this.each(function(){
var $$ = $(this);
$$.not('.current').hover(function(){
$$.stop().animate({opacity:0},300);
},function(){
$$.stop().animate({opacity:1},600);
});
});
};
CSS åŠé€æ˜Ž
<style>
#sukesuke1 {
position:absolute;
padding:5px;
background-color:red;
filter:alpha(opacity=75); /*IE*/
-moz-opacity:0.75; /*FF*/
opacity:0.75;
}
</style>
CSS Transparency All Browsers
.transparent_class {
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
}
Crossbrowser Opacity
selector {
opacity: .75; /* Standard: FF gt 1.5, Opera, Safari */
filter: alpha(opacity=75); /* IE lt 8 */
-ms-filter: "alpha(opacity=75)"; /* IE 8 */
-khtml-opacity: .75; /* Safari 1.x */
-moz-opacity: .75; /* FF lt 1.5, Netscape */
}
CSS Drop Shadow
****************
***** CSS ******
****************
.dropShadow {
position:relative;
z-index:1;
}
/*border boxes; inside-->outside*/
.dropShadow .drop1, .dropShadow .drop2, .dropShadow .drop3,
.dropShadow .drop4, .dropShadow .drop5 {
position:absolute;
right:0;
bottom:0;
width:100%;
height:100%;
}
.dropShadow .drop1 { opacity:0.5; }
.dropShadow .drop2 { opacity:0.4; }
.dropShadow .drop3 { opacity:0.3; }
.dropShadow .drop4 { opacity:0.2; }
.dropShadow .drop5 { opacity:0.1; }
.dropShadow.dropBR .drop1, .dropShadow.dropBR .drop2, .dropShadow.dropBR .drop3,
.dropShadow.dropBR .drop4, .dropShadow.dropBR .drop5 {
top:0; left:0; /*shadow positioned bottom-right*/
}
.dropShadow.dropBL .drop1, .dropShadow.dropBL .drop2, .dropShadow.dropBL .drop3,
.dropShadow.dropBL .drop4, .dropShadow.dropBL .drop5 {
top:0; left:-16px; /*shadow positioned bottom-left*/
}
.dropShadow.dropTR .drop1, .dropShadow.dropTR .drop2, .dropShadow.dropTR .drop3,
.dropShadow.dropTR .drop4, .dropShadow.dropTR .drop5 {
top:-16px; left:0; /*shadow positioned top-right*/
}
.dropShadow.dropTL .drop1, .dropShadow.dropTL .drop2, .dropShadow.dropTL .drop3,
.dropShadow.dropTL .drop4, .dropShadow.dropTL .drop5 {
top:-16px; left:-16px; /*shadow positioned top-left*/
}
/*top & bottom borders*/
.dropShadow .drop1 div, .dropShadow .drop2 div, .dropShadow .drop3 div,
.dropShadow .drop4 div, .dropShadow .drop5 div {
position:absolute;
top:8px; right:0; bottom:0; left:8px;
border-style:solid;
border-color:#999999;
}
.dropShadow .drop1 div { margin:7px -1px -1px 7px; border-width:1px 0 1px 0; background-color:#999999; }
.dropShadow .drop2 div { margin:6px -2px -2px 6px; border-width:1px 0 1px 0; }
.dropShadow .drop3 div { margin:4px -4px -4px 4px; border-width:2px 0 2px 0; }
.dropShadow .drop4 div { margin:2px -6px -6px 2px; border-width:2px 0 2px 0; }
.dropShadow .drop5 div { margin:0 -8px -8px 0; border-width:2px 0 2px 0; }
/*left & right borders*/
.dropShadow .drop1 div div, .dropShadow .drop2 div div, .dropShadow .drop3 div div,
.dropShadow .drop4 div div, .dropShadow .drop5 div div {
position:absolute;
top:0; right:0; bottom:0; left:0;
margin:0;
}
.dropShadow .drop1 div div { border-width:0 1px 0 1px; }
.dropShadow .drop2 div div { border-width:0 1px 0 1px; }
.dropShadow .drop3 div div { border-width:0 2px 0 2px; }
.dropShadow .drop4 div div { border-width:0 2px 0 2px; }
.dropShadow .drop5 div div { border-width:0 2px 0 2px; }
/*content being shadowed*/
.dropShadow .dropContent {
position:relative;
z-index:1;
background-color:white;
}
****************
***** HTML *****
****************
<div class="dropShadow dropBR" style="float:left; position:absolute;">
<div class="drop1"><div><div></div></div></div>
<div class="drop2"><div><div></div></div></div>
<div class="drop3"><div><div></div></div></div>
<div class="drop4"><div><div></div></div></div>
<div class="drop5"><div><div></div></div></div>
<div class="dropContent" style="border:1px solid black; padding:2px;">
<img src="birdhouse4.gif">
</div>
</div>
Link/Image opacity until hover
The CSS
a.linkopacity img {
filter:alpha(opacity=50);
-moz-opacity: 0.4;
opacity: 0.5;
-khtml-opacity: 0.4;}
a.linkopacity:hover img {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
-khtml-opacity: 1.0; }
Add the class "linkopacity" to the <a>
<a href="#" class="linkopacity"><img src="images/photo.jpg"></a>
Image-less Dropshadow
#north {position: absolute;width: 200px;left: 100px;top: 100px;height: 5px;}
#east {width: 5px;position: absolute;height: 200px;top: 100px;left: 100px}
#south {position: absolute;width: 200px;height: 5px;left: 100px;top: 302px;}
#west {width: 5px;position: absolute;height: 200px;top: 100px;left: 305px}
.ds_ch {height: 1px;line-height: 1px;width: 100%;background: black;display: block;overflow: hidden;}
#east .ds_ch, #west .ds_ch {width: 1px;height: 100%;float: left;clear: none;display: inline;}
.o1 {opacity: .5;filter: alpha(opacity=50);}
.o2 {opacity: .4;filter: alpha(opacity=40);}
.o3 {opacity: .3;filter: alpha(opacity=30);}
.o4 {opacity: .20;filter: alpha(opacity=20);}
.o5 {opacity: .10;filter: alpha(opacity=10);}
/* For connecing the shadow in 2 corners */
.mv1 {margin-top: 0px;padding-bottom: 7px;}
.mv2 {margin-top: 1px;padding-bottom: 5px;}
.mv3 {margin-top: 2px;padding-bottom: 3px;}
.mv4 {margin-top: 3px;padding-bottom: 1px;}
.mv5 {margin-top: 4px;padding-bottom: 0px;}
.m1 {margin-left: 1px;padding-right: 8px;}
.m2 {margin-left: 2px;padding-right: 6px;}
.m3 {margin-left: 3px;padding-right: 4px;}
.m4 {margin-left: 4px;padding-right: 2px;}
.m5 {margin-left: 5px;padding-right: 0px;}
/*
ds = dropshadow
ch = child
pa = parent
o = opacity
m = margin
mv = margin vertical
*/
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="Author" content="#" />
<meta name="Description" content="#" />
<meta name="Copyright" content="#" />
<meta name="Robots" content="#" />
<meta name="Generator" content="#" />
<meta name="Keywords" content="#" />
<link rel="stylesheet" href="shadows.css" type="text/css" media="screen"/>
</head>
<body>
<div id="north">
<div class="ds_ch o1 m1">
</div>
<div class="ds_ch o2 m2">
</div>
<div class="ds_ch o3 m3">
</div>
<div class="ds_ch o4 m4">
</div>
<div class="ds_ch o5 m5">
</div>
</div>
<div id="east">
<div class="ds_ch o5 mv5">
</div>
<div class="ds_ch o4 mv4">
</div>
<div class="ds_ch o3 mv3">
</div>
<div class="ds_ch o2 mv2">
</div>
<div class="ds_ch o1 mv1">
</div>
</div>
<div id="south">
<div class="ds_ch o5 m5">
</div>
<div class="ds_ch o4 m4">
</div>
<div class="ds_ch o3 m3">
</div>
<div class="ds_ch o2 m2">
</div>
<div class="ds_ch o1 m1">
</div>
</div>
<div id="west">
<div class="ds_ch o1 mv1">
</div>
<div class="ds_ch o2 mv2">
</div>
<div class="ds_ch o3 mv3">
</div>
<div class="ds_ch o4 mv4">
</div>
<div class="ds_ch o5 mv5">
</div>
</div>
</body>
</html>