/* -------------------------------------------------------------- ----------------------------------------------------------------- DEFINITIONS: Beautify AUTHOR: STUDIO 1 DESIGN VERSION: 2010 v1 CONTENTS: 1 Border radius 2 Text shadow 3 Box shadow 4 RGBa 5 Webkit transition 6 nth-child 7 margins, padding, text align 8 transparency filters 9 CSS transitions ----------------------------------------------------------------- -------------------------------------------------------------- */ /* 1 Border radius */ input, textarea, select, form, object, img, a img { -webkit-border-radius:4px; -moz-border-radius:4px; border-radius:4px } .noBorder {border:none} .corner5 {-moz-border-radius: 5px; -webkit-border-radius: 5px;} .corner10 {-moz-border-radius: 10px; -webkit-border-radius: 10px;} .cornerBottom {-moz-border-radius: 0px 0px 5px 5px; -webkit-border-radius: 0px 0px 5px 5px;} .cornerTop {-moz-border-radius: 4px 4px 0px 0px; -webkit-border-radius: 4px 4px 0px 0px;} /* 2 Text shadow */ /*body { text-shadow:1px -1px 1px rgba(255,255,255,0.6) } */ /* 3 Box shadow */ form input:hover, form textarea:hover { -moz-box-shadow:0 1px 5px rgba(0, 0, 0, 0.2); -webkit-box-shadow:0 1px 5px rgba(0, 0, 0, 0.2); -o-box-shadow:0 1px 5px rgba(0, 0, 0, 0.2); box-shadow:0 1px 5px rgba(0, 0, 0, 0.2);} input:focus, textarea:focus { -moz-box-shadow:0 1px 5px rgba(0, 0, 0, 0.2); -webkit-box-shadow:0 1px 5px rgba(0, 0, 0, 0.2); -o-box-shadow:0 1px 5px rgba(0, 0, 0, 0.2); box-shadow:0 1px 5px rgba(0, 0, 0, 0.2); } .shadow_blk { -moz-box-shadow:0 1px 5px rgba(0, 0, 0, 0.2); -webkit-box-shadow:0 1px 5px rgba(0, 0, 0, 0.2); -o-box-shadow:0 1px 5px rgba(0, 0, 0, 0.2); box-shadow:0 1px 5px rgba(0, 0, 0, 0.2);} .shadow_wht { -moz-box-shadow:0 1px 5px rgba(255, 255, 255, 0.2); -webkit-box-shadow:0 1px 5px rgba(255, 255, 255, 0.2); -o-box-shadow:0 1px 5px rgba(255, 255, 255, 0.2); box-shadow:0 1px 5px rgba(255, 255, 255, 0.2);} /* 4 RGBa */ txt_opaque_blk { color:rgba(0,0,0,0.6) } txt_opaque_wht { color:rgba(255,255,255,0.6) } bg_opaque_blk{ background:rgba(0,0,0,0.4) } bg_opaque_wht { background:rgba(255,255,255,0.4) } border_opaque_blk { border-color:rgba(0,0,0,0.6) } border_opaque_wht { border-color:rgba(255,255,255,0.6) } /* 5 Webkit transition */ input, textarea, a img, #outerWrap { -webkit-transition-property: background-color, color; -webkit-transition-duration: .2s; -webkit-transition-timing-function: ease-in } input:hover, textarea:hover, input:focus, textarea:focus, a:hover img, #outerWrap:hover, ul li a:hover, ul li a:hover span { -webkit-transition-timing-function: ease-out } /* 6 nth-child */ styles the first 'child' in a list (in this case - 20px top margin would be added) :first-child { margin:20px 0 0 0 } styles the last 'child' in a list (in this case - theer would be no background) :last-child { background:none } styles the 2nd (in this case) 'child' in a list :nth-child(2) { margin:60px 0 0 0 } /* 7 teaxt align properties, margins & padding */ .txt_align_right {text-align:right} .txt_align_center {text-align:center} .txt_align_left {text-align:left} .mrg_none_top {margin-top:0px} .mrg_none_right {margin-right:0px} .mrg_none_bottom {margin-bottom:0px} .mrg_none_left {margin-left:0px} .pdg_none_top {padding-top:0px} .pdg_none_right {padding-right:0px} .pdg_none_bottom {padding-right:0px} .pdg_none_left {padding-left:0px} .noBorder {border:none} .breaker{ border-top: 2px dotted #ccc; height:5px; margin-top:} .divider {height:1px; margin:10px 0px; border-bottom:dashed 1px #ccc; width:98%; clear:both;} /* 8 transparency */ .transparent80 {filter:alpha(opacity=60); -moz-opacity:0.8; -khtml-opacity: 0.8; opacity: 0.8;} .transparent60 {filter:alpha(opacity=60); -moz-opacity:0.6; -khtml-opacity: 0.6; opacity: 0.6;} .transparent40 {filter:alpha(opacity=40); -moz-opacity:0.4; -khtml-opacity: 0.4; opacity: 0.4;} .transparent20 {filter:alpha(opacity=20); -moz-opacity:0.2; -khtml-opacity: 0.2; opacity: 0.2;} .transparentNone {filter:alpha(opacity=100); -moz-opacity:1.0; -khtml-opacity: 1.0; opacity: 1.0;} /* 9 transitions */ /*-moz-transform: firefox -os-transform: opera -webkit-transform: safari*/ img.animate {background:none repeat scroll 0 0 rgba(0, 0, 0, 0.1); border:1px solid #999999; padding:10px; -moz-border-radius: 5px; -webkit-border-radius: 5px; -webkit-transition: -webkit-transform .2s ease-in-out; -moz-box-shadow:0 1px 5px rgba(0, 0, 0, 0.2);} img.animate:hover {background:none repeat scroll 0 0 rgba(255, 255, 255, 0.4); -webkit-transform: scale(1.1); -moz-transform: scale(1.1);} /* ------------------------------ MOVING AN OBJECT (X/Y axes) */ .transX_20 {-moz-transform:translateX(20px)} /* moves an object 20px along its X axis */ .transY_20 {-moz-transform:translateY(20px)} /* moves an object 20px along its Y axis */ .trans20px {-moz-transform:translate(20px,-20px)} /* moves an object 20px along its X & Y axes */ /* ------------------------------ SCALING AN OBJECT (value) */ .scaleHlf {-moz-transform:scale(0.5)} /* scales an object to half its original size */ .scaleDbl {-moz-transform:scale(2)} /* scales an object to 2 times its original size */ .scaleXdbl {-moz-transform:scaleX(2)} /* scales an object to 2 times (X) */ .scaleYhlf {-moz-transform:scaleY(0.5)} /* scales an object to 0.5 times (Y) */ /* {-moz-transform:scale(2,0.5)} scales an object to 2 times (X) and 0.5 (Y) */ /* ------------------------------ ROTATING AN OBJECT (angle) */ .rotate45 {-moz-transform:rotate(45deg)} /* rotates an object by 45 degrees */ .rotate60 {-moz-transform:rotate(60deg)} .rotate90 {-moz-transform:rotate(90deg)} .rotate180 {-moz-transform:rotate(180deg)} .rotate270 {-moz-transform:rotate(270deg)} .rotate-45 {-moz-transform:rotate(-45deg)} /* rotates an object by -45 degrees */ .rotate-60 {-moz-transform:rotate(-60deg)} .rotate-90 {-moz-transform:rotate(-90deg)} .rotate-180 {-moz-transform:rotate(-180deg)} .rotate-270 {-moz-transform:rotate(-270deg)} /* ------------------------------ SKEWING AN OBJECT (angle) */ .skew5 {-moz-transform:skew(5deg)} /* skews an object by 5 degrees (X & Y axes) */ {-moz-transform:skew(2deg,4deg)} /* skews an object by 2 degrees (X) & 4 degrees (Y) axis) */ .skewX_5 {-moz-transform:skew(5deg)} /* skews an object by 5 degrees (X axis) */ .skewY_5 {-moz-transform:skew(5deg)} /* skews an object by 5 degrees (Y axis) */