CSS3 Browser Compatibility

CSS3Browser Compatibility Animation animation-name, animation-duration, animation-timing-function, presented by: Ardvice animation-delay, animation-iteration-count, and animation-direction INTERACTIVE GROUP div { Background animation: mymove 5s infinite; background-clip: content-box, padding-box, border-box -moz-animation: mymove 5s infinite; /* Firefox */ -webkit-animation: mymove 5s infinite; * Safari and Chrome */ div { -o-animation: mymove 5s infinite; /* Opera */ padding: 25px; background-color: #efcead; border:1px solid #000000; moz FF 5, Webkit Chrome, Webkit Safari, o Opera background-clip: content-box; Background -webkit-background-clip: content-box; /* Safari */ } background-origin: content-box, padding-box, border-box div { padding: 25px; div { background-color: #efcead; padding: 25px; Ad border:1px solid #000000; border:1px solid #000000; background-clip: padding-box; background-img: url('advice_logo.png'); -webkit-background-clip: padding-box; /* Safari */ background-origin: content-box; } background-repeat: no-repeat; div { -webkit-background-origin: content-box; /* Safari */ padding: 25px; } background-color: #efcead; div { border:1px solid #000000; padding: 25px; Ad background-clip: border-box; border:1px solid #000000; -webkit-background-clip: border-box; /* Safari */ background-img: url('advice_logo.png); background-origin: padding-box; background-repeat: no-repeat; IE 9, FF 4, Chrome 10, Webkit Safari 5, Opera 10.5 -webkit-background-origin: padding-box; /* Safari */ Background div { background-size: contain, cover, %, px padding: 25px; Ard border:1px solid #000000; div { background-img: url('advice_logo.png'); background-img: url('advice_logo.png'); Ad background-origin: border-box; background-repeat: no-repeat; background-repeat: no-repeat; background-size: contain; -webkit-background-origin: border-box; /* Safari */ div { IE 9, FF 4, Chrome 10, Safari 5, Opera 10.5 Ad background-img: url('advice_logo.png'); Border background-repeat: no-repeat; Font Face background-size: cover; border-radius @font-face div { background-img: url('advice_logo.png'); Ad div { @font-face { border: 1px solid; font-family: myFont; background-repeat: no-repeat; border-radius: 10px; src: url('Kartika.ttf"), background-size: 50%; url('Kartika.eot'); /* IE9 */ } div { div { border: 1px solid; div { background-img: url('advice_logo.png'); Ad border-radius: 50%; font-family: myFont; } background-repeat: no-repeat; } background-size: 100px 100px; CSS3 OR border-radius could be written as: border-top-left-radius:2em; border-top-right-radius:2em; border-bottom-right-radius:2em; IE 9, FF 4, Chrome 5, Safari 5, Opera 10.5 IE 9, FF 3.6, Chrome 4, Safari 3, Opacity Opera 10 border-bottom-left-radius:2em; Opacity IE 9, FF 4, Chrome 5, Safari 5, Opera 10.5 Box Shadow Text ShadoW: Drop-Shadow div { opacity: 0.5; box-shadow text-shadow: h-shadow v-shadow blur color; div { div { width: 100px; text-shadow: 2px 2px 2px #fffff; height: 75px; This shows opacity as expected } box-shadow: 10px 10px 5px #000; Drop Shadow Text } IE 9, FF 2, Chrome 4, Safari 4, Opera 10 IE 9, FF 4, Chrome 10, Safari, Opera 10.5 FF 3, Chrome 4, Safari 4, Opera 10 Text Shadow: Glow Text Shadow: Text ShadoW: Embossed Outline text-shadow: h-shadow v-shadow blur color; text-shadow: h-shadow v-shadow blur color; text-shadow: h-shadow v-shadow blur color; div { div { div { text-shadow: 00 3px #000000; color: #241200; color: #bedbf4; } background: #241200; background: #bedbf4; Glow Text text-shadow: -1px -1px 10px #ffff text-shadow: -1px -1px #000000; } 1px 1px #000000; FF 3, Chrome 4, Safari 4, Opera 10 Outline Text Embossed Text FF 3, Chrome 4, Safari 4, Opera 10 Transform transform: rotate, scale, move, skew FF 3, Chrome 4, Safari 4, Opera 10 div { div { transform: rotate(10deg); transform: skew(10deg); -ms-transform: rotate(10deg); /* IE 9 */ -ms-transform: skew(10deg); /* IE 9 */ -moz-transform: rotate(10deg); /* Firefox */ -webkit-transform: rotate(10deg); /* Safari and Chrome */ -moz-transform: skew(10deg); /* Firefox */ -webkit-transform: skew(10deg); /* Safari and Chrome */ -o-transform: rotate(10deg); /* Opera */ -o-transform: skew(10deg); /* Opera */ ms IE 9, moz FF 3.6, Webkit Chrome, Webkit Safari, o Opera Browser CSS38ompatibility Source: http://www.w3schools.com/cssref/css3_browsersupport.asp