#left_column #border-image-1 {
margin: 0 30px;
width: 270px;
padding: 14px;
-o-border-image: url(‘/wp-content/uploads/2007/09/border.png’) 27 round round;
-icab-border-image: url(‘/wp-content/uploads/2007/09/border.png’) 27 round round;
-khtml-border-image: url(‘/wp-content/uploads/2007/09/border.png’) 27 round round;
-moz-border-image: url(‘/wp-content/uploads/2007/09/border.png’) 27 round round;
-webkit-border-image: url(‘/wp-content/uploads/2007/09/border.png’) 27 round round;
border-image: url(‘/wp-content/uploads/2007/09/border.png’) 27 round round;
border: double orange 1em
}
#left_column #border-image-2 {
margin: 0 30px;
width: 270px;
padding: 14px;
-o-border-image: url(‘/wp-content/uploads/2007/09/border.png’) 27 stretch stretch;
-icab-border-image: url(‘/wp-content/uploads/2007/09/border.png’) 27 stretch stretch;
-khtml-border-image: url(‘/wp-content/uploads/2007/09/border.png’) 27 stretch stretch;
-moz-border-image: url(‘/wp-content/uploads/2007/09/border.png’) 27 stretch stretch;
-webkit-border-image: url(‘/wp-content/uploads/2007/09/border.png’) 27 stretch stretch;
border-image: url(‘/wp-content/uploads/2007/09/border.png’) 27 stretch stretch;
border: double orange 1em;
}
#left_column #box-shadow-1 {
margin: 30px 0;
-o-box-shadow: 10px 10px 5px #888;
-icab-box-shadow: 10px 10px 5px #888;
-khtml-box-shadow: 10px 10px 5px #888;
-moz-box-shadow: 10px 10px 5px #888;
-webkit-box-shadow: 10px 10px 5px #888;
box-shadow: 10px 10px 5px #888;
padding: 5px 5px 5px 15px;
background-color: #eee;
width: 90%;
}
#left_column #box-shadow-2 {
margin: 30px 0;
box-shadow: -10px -10px 0px #000;
-o-box-shadow: -10px -10px 0px #000;
-icab-box-shadow: -10px -10px 0px #000;
-khtml-box-shadow: -10px -10px 0px #000;
-moz-box-shadow: -10px -10px 0px #000;
-webkit-box-shadow: -10px -10px 0px #000;
border-radius: 5px;
-o-border-radius: 5px;
-icab-border-radius: 5px;
-khtml-border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
padding: 5px 5px 5px 15px;
background-color: #eee;
width: 90%;
}
#left_column .multi-column {
background-color: #fff;
-o-column-gap: 1em;
-icab-column-gap: 1em;
-khtml-column-gap: 1em;
-moz-column-gap: 1em;
-webkit-column-gap: 1em;
column-gap: 1em;
padding: 5px;
}
#left_column #multi-column-1 {
-o-column-width: 13em;
-icab-column-width: 13em;
-khtml-column-width: 13em;
-moz-column-width: 13em;
-webkit-column-width: 13em;
column-width: 13em;
}
#left_column #multi-column-2 {
-o-column-count: 3;
-icab-column-count: 3;
-khtml-column-count: 3;
-moz-column-count: 3;
-webkit-column-count: 3;
column-count: 3;
-o-column-rule: 1px solid black;
-moz-column-rule: 1px solid black;
-webkit-column-rule: 1px solid black;
column-rule: 1px solid black;
}
#left_column .word-wrap {
border: 1px solid;
padding: 5px;
width: 200px;
word-wrap:normal;
}
#left_column #word-wrap { word-wrap: break-word; }
#left_column .media-queries {
background-color: #f00;
float: left;
height: 100px;
margin-left: 30px;
text-align: center;
width: 100px;
}
@media all and (min-width: 640px) {
#media-queries-1 { background-color: #0f0; }
}
@media screen and (max-width: 2000px) {
#media-queries-2 { background-color: #0f0; }
}
ul.showlist {
list-style: disc !important;
}
/* CSS3 Preview – general page layout */
div.eg {
background-color: #F2FFE1;
padding: 10px;
margin-right: 20px;
margin-top: 10px;
white-space: normal;
border-radius: 5px;
-moz-border-radius: 5px;
font-family: Verdana, Helvetica, sans-serif;
}
div.previewinset {
padding-left: 20px;
background: url(‘http://news.css3.info/wp-content/themes/communitynews/img/orange-bullet.png’) no-repeat 0px 6px;
}
h3.preview {
font-size: 22px;
color: #000000;
text-decoration: underline;
}
h4.preview {
font-size: 18px;
color: #cc6600;
text-decoration: none;
}
h5.preview {
font-size: 14px;
color: black;
}
/* CSS3 Preview – border-radius examples */
div.exampleborderradius {
background-color: #eee;
padding: 20px;
margin-top: 10px;
margin-right: 20px;
text-align: center;
border-radius: 15px;
-moz-border-radius: 15px;
}
div.exampleborderradiusa {
background-color: #464646;
float:left;
margin-top: 20px;
margin-right: 40px;
height: 65px;
width:160px;
text-align: center;
border-bottom-right-radius: 50px;
-moz-border-radius-bottomright: 50px;
}
div.exampleborderradiusb {
background-color: #464646;
float:left;
margin-top: 20px;
margin-right: 40px;
height: 65px;
width:160px;
text-align: center;
border-bottom-right-radius: 50px 25px;
-moz-border-radius-bottomright: 50px 25px;
}
div.exampleborderradiusc {
background-color: #464646;
float:left;
margin-top: 20px;
margin-right: 40px;
height: 65px;
width:160px;
text-align: center;
border-bottom-right-radius: 25px 50px;
-moz-border-radius-bottomright: 25px 50px;
}
div.exampleborderradiusd {
background-color: #464646;
float:left;
margin-top: 20px;
margin-right: 40px;
width: 12em;
height: 5em;
border-radius: 1em 4em 1em 4em;
text-align: center;
-moz-border-radius: 0.5em 2em 0.5em 2em;
}
div.exampleborderradiuse {
background-color: #464646;
float:left;
margin-top: 20px;
margin-right: 40px;
height: 65px;
width:160px;
text-align: center;
border-radius: 25px 10px / 10px 25px;
-moz-border-radius: 25px 10px / 10px 25px;
-webkit-border-radius: 25px 10px / 10px 25px;
}
div.exampleborderradiusf {
float:left;
background-color: #464646;
margin-top: 20px;
margin-right: 40px;
width: 70px;
height: 70px;
text-align: center;
-moz-border-radius: 35px;
border-radius: 35px;
}
.examplelabelborderradius {
color: white;
font-size: 20px;
position: relative;
top: 20px;
}
/* CSS3 Preview – box-shadow examples */
div.exampleboxshadow{
background-color: #eee;
padding: 20px;
margin-top: 10px;
margin-right: 20px;
text-align: center;
-moz-box-shadow: 10px 10px 5px #888;
-webkit-box-shadow: 10px 10px 5px #888;
box-shadow: 10px 10px 5px #888;
}
div.exampleboxshadowa {
background-color: #eee;
float:left;
margin-top: 20px;
margin-right: 40px;
height: 65px;
width:160px;
text-align: center;
-moz-box-shadow: -5px -5px #888;
-webkit-box-shadow: -5px -5px #888;
box-shadow: -5px -5px #888;
}
div.exampleboxshadowb {
background-color: #eee;
float:left;
margin-top: 20px;
margin-right: 40px;
height: 65px;
width:160px;
text-align: center;
-moz-box-shadow: -5px -5px 5px #888;
-webkit-box-shadow: -5px -5px 5px #888;
box-shadow: -5px -5px 5px #888;
}
div.exampleboxshadowc {
background-color: #eee;
float:left;
margin-top: 20px;
margin-right: 40px;
height: 65px;
width:160px;
text-align: center;
-moz-box-shadow: -5px -5px 0 5px #888;
-webkit-box-shadow: -5px -5px 0 5px#888;
box-shadow: -5px -5px 0 5px #888;
}
div.exampleboxshadowd {
background-color: #eee;
float:left;
margin-top: 20px;
margin-right: 40px;
height: 65px;
width:160px;
text-align: center;
-moz-box-shadow: -5px -5px 5px 5px #888;
-webkit-box-shadow: -5px -5px 5px 5px#888;
box-shadow: -5px -5px 5px 5px #888;
}
div.exampleboxshadowe {
background-color: #eee;
float:left;
margin-top: 20px;
margin-right: 40px;
height: 65px;
width:160px;
text-align: center;
-moz-box-shadow: 0 0 5px #888;
-webkit-box-shadow: 0 0 5px#888;
box-shadow: 0 0 5px #888;
}
div.exampleboxshadowf {
background-color: #eee;
float:left;
margin-top: 20px;
margin-right: 40px;
height: 65px;
width:160px;
text-align: center;
-moz-box-shadow: 0 0 5px 5px #888;
-webkit-box-shadow: 0 0 5px 5px#888;
box-shadow: 0 0 5px 5px #888;
}
div.exampleboxshadowg {
background-color: #eee;
float:left;
margin-top: 20px;
margin-right: 40px;
height: 65px;
width:160px;
text-align: center;
-moz-box-shadow: inset -5px -5px #888;
-webkit-box-shadow: inset -5px -5px #888;
box-shadow: inset -5px -5px #888;
}
div.exampleboxshadowh {
background-color: #eee;
float:left;
margin-top: 20px;
margin-right: 40px;
height: 65px;
width:160px;
text-align: center;
-moz-box-shadow: inset -5px -5px 5px #888;
-webkit-box-shadow: inset -5px -5px 5px #888;
box-shadow: inset -5px -5px 5px #888;
}
div.exampleboxshadowi {
background-color: #eee;
float:left;
margin-top: 20px;
margin-right: 40px;
height: 65px;
width:160px;
text-align: center;
-moz-box-shadow: inset -5px -5px 0 5px #888;
-webkit-box-shadow: inset -5px -5px 0 5px#888;
box-shadow: inset -5px -5px 0 5px #888;
}
div.exampleboxshadowj {
background-color: #eee;
float:left;
margin-top: 20px;
margin-right: 40px;
height: 65px;
width:160px;
text-align: center;
-moz-box-shadow: inset -5px -5px 5px 5px #888;
-webkit-box-shadow: inset -5px -5px 5px 5px#888;
box-shadow: inset -5px -5px 5px 5px #888;
}
div.exampleboxshadowk {
background-color: #eee;
float:left;
margin-top: 20px;
margin-right: 40px;
height: 65px;
width:160px;
text-align: center;
-moz-box-shadow: inset 0 0 5px #888;
-webkit-box-shadow: inset 0 0 5px#888;
box-shadow: inset 0 0 5px #888;
}
div.exampleboxshadowl {
background-color: #eee;
float:left;
margin-top: 20px;
margin-right: 40px;
height: 65px;
width:160px;
text-align: center;
-moz-box-shadow: inset 0 0 5px 5px #888;
-webkit-box-shadow: inset 0 0 5px 5px#888;
box-shadow: inset 0 0 5px 5px #888;
}
div.exampleboxshadowm {
background-color: #eee;
margin-top: 60px;
margin-bottom: 60px;
margin-left: 225px;
height: 65px;
width: 160px;
text-align: center;
-moz-box-shadow: 0 0 10px 5px black, 40px -30px lime, 40px 30px 50px red, -40px 30px yellow, -40px -30px 50px blue;
-webkit-box-shadow: 0 0 10px 5px black, 40px -30px lime, 40px 30px 50px red, -40px 30px yellow, -40px -30px 50px blue;
box-shadow: 0 0 10px 5px black, 40px -30px lime, 40px 30px 50px red, -40px 30px yellow, -40px -30px 50px blue;
}
div.exampleboxshadown {
background-color: #eee;
float:left;
margin-top: 20px;
margin-right: 40px;
height: 65px;
width:150px;
text-align: center;
-moz-box-shadow: 5px 5px rgb(0,0,0);
-webkit-box-shadow: 5px 5px rgb(0,0,0);
box-shadow: 5px 5px rgb(0,0,0);
}
div.exampleboxshadowo {
background-color: #eee;
float:left;
margin-top: 20px;
margin-right: 40px;
height: 65px;
width:150px;
text-align: center;
-moz-box-shadow: 5px 5px rgba(0,0,0,0.7);
-webkit-box-shadow: 5px 5px rgba(0,0,0,0.7);
box-shadow: 5px 5px rgba(0,0,0,0.7);
}
div.exampleboxshadowp {
background-color: #eee;
float:left;
margin-top: 20px;
height: 65px;
width:150px;
text-align: center;
-moz-box-shadow: 5px 5px rgba(0,0,0,0.5);
-webkit-box-shadow: 5px 5px rgba(0,0,0,0.5);
box-shadow: 5px 5px rgba(0,0,0,0.5);
}
div.exampleboxshadowq {
background-color: #eee;
float:left;
margin-top: 20px;
margin-right: 40px;
height: 65px;
width:150px;
text-align: center;
-moz-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 5px 5px black;
-webkit-box-shadow: 5px 5px black;
box-shadow: 5px 5px black;
}
div.exampleboxshadowr {
background-color: #eee;
float:left;
margin-top: 20px;
margin-right: 40px;
height: 65px;
width:150px;
text-align: center;
-moz-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 5px 5px 5px black;
-webkit-box-shadow: 5px 5px 5px black;
box-shadow: 5px 5px 5px black;
}
.examplelabelboxshadow {
color: #888;
font-size: 20px;
position: relative;
top: 20px;
}
div.examplebackgroundboxshadow {
background: url(‘http://www.css3.info/demos/background_veneer.png’) no-repeat;
padding-top: 20px;
padding-bottom: 40px;
padding-left: 20px;
margin-right: 20px;
-moz-boder-radius: 5px;
border-radius: 5px;
}
.exampletest {
background-color: #5595A7
}
table.browsersupportboxshadow {
width: 100%;
margin-top: 30px;
}
.browsersupportboxshadow tr:hover {
background-color: #eee;
}
tr.thead,
tr.thead:hover {
background-color: #42AEC2;
color: white;
}
tr.footnote,
tr.footnote:hover {
background-color: white;
color: grey;
}
.browsersupportboxshadow td,
.browsersupportboxshadow th {
vertical-align: top;
padding: 10px 5px 10px 5px;
}
/* CSS3 Preview – multiple backgrounds examples */
.examplemultiplebackgrounds {
width: 500px;
height: 250px;
background-image: url(img/sheep.png), url(img/betweengrassandsky.png);
background-repeat: no-repeat;
background-position: center bottom, left top;
padding: 5px;
}
.examplemultiplebackgrounds p {
color: white;
font-weight: bold;
}
.examplemultiplebackgroundsa {
width: 500px;
height: 250px;
background-image: url(img/decoration.png), url(img/ribbon.png), url(img/old_paper.jpg);
background-repeat: no-repeat;
background-position: left top, right bottom, left top;
}
.examplemultiplebackgroundsb {
display: inline-block;
margin: 1em; padding: 1em;
background-image: url(img/left.png), url(img/right.png), url(img/main.png);
background-repeat: no-repeat, no-repeat, repeat-x;
background-position: left top, right top, left top ;
}
/* CSS3 Preview – background-size examples */
.examplebackgroundsize1 {
width: 550px;
height: 250px;
background-image: url(img/betweengrassandsky.png);
background-repeat: no-repeat;
background-color: #EEE;
background-size: auto;
margin: 10px 0;
color: white;
font-weight: bold;
}
.examplebackgroundsize2 {
width: 550px;
height: 250px;
background-image: url(img/betweengrassandsky.png);
background-repeat: no-repeat;
background-color: #EEE;
background-size: 275px 125px;
margin: 10px 0;
color: white;
font-weight: bold;
}
.examplebackgroundsizea {
width: 550px;
height: 250px;
background-image: url(img/betweengrassandsky.png);
background-repeat: no-repeat;
background-color: #EEE;
background-size: auto;
margin: 10px 0;
color: white;
font-weight: bold;
}
.examplebackgroundsizeb {
width: 550px;
height: 250px;
background-image: url(img/betweengrassandsky.png);
background-repeat: no-repeat;
background-color: #EEE;
background-size: 200px;
margin: 10px 0;
color: white;
font-weight: bold;
}
.examplebackgroundsizec {
width: 550px;
height: 250px;
background-image: url(img/betweengrassandsky.png);
background-repeat: no-repeat;
background-color: #EEE;
background-size: auto 125px;
margin: 10px 0;
color: white;
font-weight: bold;
}
.examplebackgroundsized {
width: 550px;
height: 250px;
background-image: url(img/betweengrassandsky.png);
background-repeat: no-repeat;
background-color: #EEE;
background-size: 200px 200px;
margin: 10px 0;
color: white;
font-weight: bold;
}
.examplebackgroundsizee {
width: 550px;
height: 250px;
background-image: url(img/betweengrassandsky.png);
background-repeat: no-repeat;
background-color: #EEE;
background-size: 50%;
margin: 10px 0;
color: white;
font-weight: bold;
}
.examplebackgroundsizef {
width: 550px;
height: 250px;
background-image: url(img/betweengrassandsky.png);
background-repeat: no-repeat;
background-color: #EEE;
background-size: auto 25%;
margin: 10px 0;
color: white;
font-weight: bold;
}
.examplebackgroundsizeg {
width: 550px;
height: 250px;
background-image: url(img/betweengrassandsky.png);
background-repeat: no-repeat;
background-color: #EEE;
background-size: 80% 125px;
margin: 10px 0;
color: white;
font-weight: bold;
}
.examplebackgroundsizeh {
width: 495px;
height: 225px;
background-image: url(img/betweengrassandsky.png);
background-repeat: no-repeat;
background-color: #EEE;
background-size: contain;
margin: 10px 0;
color: white;
font-weight: bold;
}
.examplebackgroundsizei {
width: 580px;
height: 200px;
background-image: url(img/betweengrassandsky.png);
background-repeat: no-repeat;
background-color: #EEE;
background-size: contain;
margin: 10px 0;
color: white;
font-weight: bold;
}
.examplebackgroundsizek {
width: 495px;
height: 225px;
background-image: url(img/betweengrassandsky.png);
background-repeat: no-repeat;
background-color: #EEE;
background-size: cover;
margin: 10px 0;
color: white;
font-weight: bold;
}
.examplebackgroundsizel {
width: 580px;
height: 200px;
background-image: url(img/betweengrassandsky.png);
background-repeat: no-repeat;
background-color: #EEE;
background-size: cover;
margin: 10px 0;
color: white;
font-weight: bold;
}
.examplebackgroundsizen {
width: 580px;
height: 200px;
background-image: url(img/sheep.png), url(img/sheep.png), url(img/betweengrassandsky.png);
background-repeat: no-repeat;
background-position: 20px 100px, 450px 50px, center bottom;
background-color: #EEE;
background-size: 70px, auto, cover;
margin: 10px 0;
color: white;
font-weight: bold;
}
/*
Examples for CSS3 Basics / Transitions
*/
div.exampletransitiona1 {
width: 580px;
padding: 9px 15px;
background-color: #ED8029;
color: white;
margin-bottom: 20px;
margin-top: 20px;
border-radius: 5px;
}
div.exampletransitiona1:hover {
background-color: #A7B526;
}
div.exampletransitiona2 {
width: 580px;
padding: 9px 15px;
background-color: #ED8029;
color: white;
border-radius: 5px;
-webkit-transition: background-color 5s;
-moz-transition: background-color 5s;
-o-transition: background-color 5s;
-ms-transition: background-color 5s;
transition: background-color 5s;
}
div.exampletransitiona2:hover {
background-color: #A7B526;
}
/* Example Transition B – Timing Functions */
div.exampletransitionb {
width: 520px;
}
div.exampletransitionb div {
width: 100px;
margin: 5px 0;
padding: 5px;
color: white;
background-color: #ED8029;
border-radius: 5px;
text-align: right;
}
div.exampletransitionb:hover div {
width: 500px;
}
div.exampletransitionb div.ease {
-webkit-transition: 3s ease;
-moz-transition: 3s ease;
-o-transition: 3s ease;
-ms-transition: 3s ease;
transition: 3s ease;
}
div.exampletransitionb div.linear {
-webkit-transition: 3s linear;
-moz-transition: 3s linear;
-o-transition: 3s linear;
-ms-transition: 3s linear;
transition: 3s linear;
}
div.exampletransitionb div.easein {
-webkit-transition: 3s ease-in;
-moz-transition: 3s ease-in;
-o-transition: 3s ease-in;
-ms-transition: 3s ease-in;
transition: 3s ease-in;
}
div.exampletransitionb div.easeout {
-webkit-transition: 3s ease-out;
-moz-transition: 3s ease-out;
-o-transition: 3s ease-out;
-ms-transition: 3s ease-out;
transition: 3s ease-out;
}
div.exampletransitionb div.easeinout {
-webkit-transition: 3s ease-in-out;
-moz-transition: 3s ease-in-out;
-o-transition: 3s ease-in-out;
-ms-transition: 3s ease-in-out;
transition: 3s ease-in-out;
}
/* Example Transition C – Delay */
div.exampletransitionc {
width: 520px;
}
div.exampletransitionc div {
width: 100px;
margin: 5px 0;
padding: 5px;
color: white;
background-color: #ED8029;
text-align: right;
border-radius: 5px;
}
div.exampletransitionc:hover div {
width: 500px;
}
div.exampletransitionc div.no {
-webkit-transition: 3s linear;
-moz-transition: 3s linear;
-o-transition: 3s linear;
-ms-transition: 3s linear;
transition: 3s linear;
}
div.exampletransitionc div.one {
-webkit-transition: 3s linear 1s;
-moz-transition: 3s linear 1s;
-o-transition: 3s linear 1s;
-ms-transition: 3s linear 1s;
transition: 3s linear 1s;
}
div.exampletransitionc div.two {
-webkit-transition: 3s linear 2s;
-moz-transition: 3s linear 2s;
-o-transition: 3s linear 2s;
-ms-transition: 3s linear 2s;
transition: 3s linear 2s;
}
div.exampletransitionc div.three {
-webkit-transition: 3s linear 3s;
-moz-transition: 3s linear 3s;
-o-transition: 3s linear 3s;
-ms-transition: 3s linear 3s;
transition: 3s linear 3s;
}
div.exampletransitionc div.five {
-webkit-transition: 3s linear 5s;
-moz-transition: 3s linear 5s;
-o-transition: 3s linear 5s;
-ms-transition: 3s linear 5s;
transition: 3s linear 5s;
}
div.exampletransitionc div.minustwo {
-webkit-transition: 3s linear -2s;
-moz-transition: 3s linear -2s;
-o-transition: 3s linear -2s;
-ms-transition: 3s linear -2s;
transition: 3s linear -2s;
}
/* Example Transition D – Form Size and Background Color on :focus */
input#exampletransitiond {
width: 200px;
padding: 10px;
border: 1px solid rgba(0,0,0,0.5);
border-radius: 10px;
-webkit-transition: 3s linear;
-moz-transition: 3s linear;
-o-transition: 3s linear;
-ms-transition: 3s linear;
transition: 3s linear;
}
input#exampletransitiond:focus {
width: 300px;
background-color: #E7FBF8;
outline: none;
-moz-box-shadow: inset 0 0 5px rgba(0,0,0,0.5);
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.5);
box-shadow: inset 0 0 5px rgba(0,0,0,0.5);
}
/* Example Transition E – On a roll */
div.exampletransitione {
width: 500px;
height: 60px;
margin: 20px 0;
}
div.exampletransitione div.transition {
width: 20px;
height: 20px;
background-color: #ED8029;
color: #fff;
padding: 10px;
border-radius: 5px;
margin-left: 0;
-webkit-transition: 3s linear;
-moz-transition: 3s linear;
-o-transition: 3s linear;
-ms-transition: 3s linear;
transition: 3s linear;
}
div.exampletransitione:hover div.transition {
width: 50px;
height: 50px;
margin-left: 400px;
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-o-transform:rotate(360deg);
-ms-transform:rotate(360deg);
transform:rotate(360deg);
-moz-box-shadow: -5px -5px 5px #888;
-webkit-box-shadow: -5px -5px 5px #888;
box-shadow: -5px -5px 5px #888;
}
div.exampletransitionf {
width: 500px;
height: 60px;
margin: 20px 0;
}
div.exampletransitionf div.transition {
width: 50px;
height: 50px;
background-color: red;
padding: 10px;
border-radius: 5px;
margin-left: 0;
-webkit-transition: margin-left 3s linear, background-color 2s ease 3s;
-moz-transition: margin-left 3s linear, background-color 2s ease 3s;
-o-transition: margin-left 3s linear, background-color 2s ease 3s;
-ms-transition: margin-left 3s linear, background-color 2s ease 3s;
transition: margin-left 3s linear, background-color 2s ease 3s;
}
div.exampletransitionf:hover div.transition {
margin-left: 400px;
background-color: green;
}
/*
Browser Support Table
*/
table.browsersupport {
font-size: 12px;
margin: 0;
width: 610px;
text-align: left;
border-collapse: collapse;
margin: 15px 0px 25px 0px;
}
table.browsersupport th
{
font-size: 14px;
font-weight: normal;
padding: 12px 6px 12px 6px;
color: #000;
border-bottom: 1px solid #f6f6f6;
}
table.browsersupport td
{
padding: 10px 3px 10px 5px;
color: #000;
border-bottom: 1px solid #f6f6f6;
width: 74px;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;;
transition: all 1s ease-in-out;
}
table.browsersupport tr:hover td
{
font-weight: bold;
background: #f6f6f6;
}
table.browsersupport tr td:first-child { width: 240px; }
table.browsersupport span.orange {
padding-top: 7px;
text-align: center;
font-size: 10px;
background-color: #ED8029;
display: block;
width: 30px;
height: 23px;
border-radius: 15px;
color: #fff;
font-weight: bold;
float: left;
}
table.browsersupport span.green {
padding-top: 7px;
text-align: center;
font-size: 10px;
background-color: #A7B526;
display: block;
width: 30px;
height: 23px;
border-radius: 15px;
color: #fff;
font-weight: bold;
float: left;
margin-right: 5px;
}
div.browsersupportkey span.orange {
padding-top: 3px;
text-align: center;
font-size: 10px;
background-color: #ED8029;
display: block;
width: 20px;
height: 17px;
border-radius: 10px;
color: #fff;
font-weight: bold;
float: left;
margin-right: 5px;
}
div.browsersupportkey span.green {
padding-top: 3px;
text-align: center;
font-size: 10px;
background-color: #A7B526;
display: block;
width: 20px;
height: 17px;
border-radius: 10px;
color: #fff;
font-weight: bold;
float: left;
margin-right: 5px;
}
div.browsersupportkey {
border-bottom: 1px solid #f6f6f6;
padding-left: 5px;
width: 605px;
margin-bottom: 20px;
}
div.browsersupportkey span.key {
font-size: smaller;
}
div.extexpwrap {
width: 600px;
margin-top: 20px;
}
div.extexpimg {
float: left;
width: 130px;
padding: 5px;
}
div.extexptxt {
float: left;
width: 440px;
margin-left: 20px;
font-size: smaller;
}
div.extexppad {
padding-top: 10px;
}
/* Example 1 – CSS3 Attribute Selectors */
div.exampleselectors1 ul {
list-style-type: none;
}
div.exampleselectors1 ul li a {
padding-left: 20px;
background-image: url(demo-images/file.png);
background-repeat: no-repeat;
}
div.exampleselectors1 ul li a[href^=”https://”] {
background-image: url(demo-images/lock.png);
}
div.exampleselectors1 a[href^=”mailto:”] {
background-image: url(demo-images/mail.png);
}
div.exampleselectors1 a[href^=”ftp://”] {
background-image: url(demo-images/folder_ftp.png);
}
div.exampleselectors1 a[href^=”magnet”] {
background-image: url(demo-images/magnet.png);
}
/* Example 2 – CSS3 Attribute Selectors */
div.exampleselectors2 ul {
list-style-type: none;
}
div.exampleselectors2 ul li a {
display: block;
padding-left: 20px;
background-image: url(demo-images/file.png);
background-repeat: no-repeat;
}
div.exampleselectors2 ul li a[href$=”.pdf”] {
background-image: url(demo-images/pdf.png);
}
div.exampleselectors2 ul li a[href$=”.docx”] {
background-image: url(demo-images/page_white_word.png);
}
div.exampleselectors2 ul li a[href$=”.xlsx”] {
background-image: url(demo-images/page_white_excel.png);
}
div.exampleselectors2 ul li a[href$=”.mp3″] {
background-image: url(demo-images/audio.png);
}
/* Example 3 – CSS3 Attribute Selectors */
div.exampleselectors3 ul {
list-style-type: none;
}
div.exampleselectors3 ul li a {
display: block;
padding-left: 20px;
background-image: url(demo-images/file.png);
background-repeat: no-repeat;
}
div.exampleselectors3 ul li a[href*=”google.com”] {
background-image: url(demo-images/google.png);
}
div.exampleselectors3 ul li a[href*=”twitter.com”] {
background-image: url(demo-images/twitter.png);
}
div.exampleselectors3 ul li a[href*=”facebook.com”] {
background-image: url(demo-images/facebook.png);
}
div.exampleselectors3 ul li a[href*=”yahoo.com”] {
background-image: url(demo-images/yahoo.png);
}
There is a specific article on CSS3.info that I wanted to cover. It involves CSS3 transitions and how to stack and combine transitions.
The transition-timing-function property is used to specify how the pace of the transition changes over its duration. This can be done in one of two ways. Either by specifying a number of pre-defined keywords (ease, linear, ease-in, ease-out or ease-in-out), or by defining a custom timing function (by specifying four coordinates to define a cubic bezier curve).
For Example:
- transition-timing-function: ease;
- transition-timing-function: ease, linear;
- transition-timing-function: cubic-bezier(0.6, 0.1, 0.15, 0.8);
The example below demonstrates how each different function behaves. Each box below will expand in width from 150px to 500px when the example is hovered over, with all transitions being of the same duration (3 seconds) and triggered simultaneously.
easelinearease-inease-outease-in-out
The timing function is specified using a cubic bezier curve, which is defined by four control points, P0 through P3 (see diagram below). P0 and P3 are always set to (0,0) and (1,1). The ‘transition-timing-function’ property is used to specify the values for points P1 and P2. These can be set to preset values using the keywords listed (see above), or can be set to specific values using the ‘cubic-bezier’ function. In the ‘cubic-bezier’ function, P1 and P2 are each specified by both an X and Y value.
The final step in a creating a transition effect is to specify an optional delay using the transition-delay property. As with the transition-duration property, the transition-delay property accepts a comma-separated list of times, specified in seconds or milliseconds, which in this case determines the length of time between the transition being triggered and the transition starting. The default value is 0, ie. the transition will commence as soon as triggered.
Negative values are accepted for transition-delay. When supplied the transition will commence as soon as triggered, however it will appear to have begun execution at the specified offset, ie; the transition effect will begin part-way through its cycle (see the examples section below for an example).
The Syntax:
transition-delay:
This is an extremely good article to read about CSS3 transitions. I would highly recommend giving it a read before your next project.
Leave Your Response