Return to Snippet

Revision: 55962
at March 1, 2012 23:24 by catrinho


Initial Code
Opacity / Transparency

THE SYNTAX

#myElement {

    opacity: .4; /* other browsers  and IE9+ */
    filter: alpha(opacity=40); /* IE6+ */
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=40); /* IE6+ */
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=40)"; /* this works in IE8 only */
}

Rounded Corners (border-radius)

THE SYNTAX

.box-radius {
	border-radius: 15px;
	behavior: url(border-radius.htc);
}

Box Shadow

THE SYNTAX
.box-shadow {
	-moz-box-shadow: 2px 2px 3px #969696; /* for Firefox 3.5+ */
	-webkit-box-shadow: 2px 2px 3px #969696; /* for Safari and Chrome */
	filter: progid:DXImageTransform.Microsoft.Shadow(color='#969696', Direction=145, Strength=3);
}

Text Shado

THE SYNTAX

.text-shadow {
	text-shadow: #aaa 1px 1px 1px;
}

// include jQuery library in your page
// include link to plugin in your page

$(document).ready(function(){
	$(".text-shadow").textShadow();
});

Gradients

THE SYNTAX

#gradient {
	background-image: -moz-linear-gradient(top, #81a8cb, #4477a1); /* Firefox 3.6 */
	background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #4477a1),color-stop(1, #81a8cb)); /* Safari & Chrome */
	filter:  progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#81a8cb', endColorstr='#4477a1'); /* IE6 & IE7 */
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#81a8cb', endColorstr='#4477a1')"; /* IE8 */
}

Transparent Background Colors (RGBA)

THE SYNTAX

#rgba p {
	background: rgba(98, 135, 167, .4);
}
#rgba p {
	filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#886287a7', endColorstr='#886287a7');
}

Multiple Backgrounds

THE SYNTAX

#multi-bg {
	background: url(images/bg-image-1.gif) center center no-repeat, url(images/bg-image-2.gif) top left repeat;
}

#multi-bg {
	background: transparent url(images/bg-image-1.gif) top left repeat;
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (src='images/bg-image-2.gif', sizingMethod='crop'); /* IE6-8 */
	-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/bg-image-2.gif', sizingMethod='crop')"; /* IE8 only */
}

Element Rotation (CSS Tranformations)\
´
the sintax

#rotate {
	-webkit-transform: rotate(180deg);
	-moz-transform: rotate(180deg);
}

#rotate {
	filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
}

Initial URL

                                

Initial Description
CSS3 Solutions for Internet Explorer

more info:
http://coding.smashingmagazine.com/2010/04/28/css3-solutions-for-internet-explorer/

Initial Title
CSS3 Solutions for Internet Explorer

Initial Tags

                                

Initial Language
PHP