DJ ICEMAN MFKN ROXX's blog: "CSS3 TRICKS AND ENHANCEMENTS & MORE"

CSS SPEAK:
This property specifies whether content will be aurally rendered, and the nature of its rendering. It controls aural rendering in much the same way the ‘display’ property controls visual rendering.Possible Values
Value Descriptioninherit Explicitly sets the value of this property to that of the parent.normal Uses normal pronunciation rules for the current language to render content.none Suppresses/skips aural rendering of the element. No time is taken to render the element. Child elements can override this value.spell-out Spells the content one character at a time (useful with acronyms and abbreviations.)
FOR ALL MAJOR BROWSERS:
-moz-speak: spell-out;

-o-speak: spell-out;

-khtml-speak: spell-out;

-webkit-speak: spell-out;

-ms-speak: spell-out;

speak: spell-out;

 
CSS FONT-STRETCH:The font-stretch property is used to expand or contract (condense) the horizontal width of the font. The change is relative to the normal width of the font as displayed by the browser.
narrower
The narrower value contracts the font to the next smaller width.
wider
The wider value expands the font to the next larger width. The order descends from narrowest to widest in value. The normal value is the normal width of the font as displayed by the browser.
Possible Values
Value Descriptionnormal Sets the scale of condensation or expansion  to normalwider Sets the scale of expansion to the next expanded valuenarrower Sets the scale of condensation to the next condensed valueultra-condensed extra-condensed
      condensed
semi-condensed
semi-expanded
      expanded
extra-expanded
ultra-expanded
Sets the scale of condensation or expansion of the font-family. “ultra-condensed” is the most condensed (narrowest) value, and “ultra-expanded” is the most expanded (widest) value   

FOR ALL MAJOR BROWSERS
-moz-font-stretch: ultra-condensed;

-o-font-stretch: ultra-condensed;

-khtml-font-stretch: ultra-condensed;

-ms-font-stretch: ultra-condensed;

-webkit-font-stretch: ultra-condensed;

CSS BORDER-COLLAPSE:specifies which border rendering mode to use. In the collapsed border model, adjacent table cells share borders. 
Possible Values
Value Descriptioninherit Explicitly sets the value of this property to that of the parentcollapse Use the “collapsed borders” rendering modelseparate Use the “separated borders” rendering model
for all major browsers:
-moz-border-collapse: separate;

-o-border-collapse: separate;

-khtml-border-collapse: separate;

-ms-border-collapse: separate;

-webkit-border-collapse: separate;

border-collapse: separate;


CSS BORDER-SPACING:This property specifies the distance between the borders of adjacent table cells in the “separated borders” model. The space between table cells uses the background color/image specified for the explicit or assigned TABLE element.Possible Values
Value Descriptioninherit Explicitly sets the value of this property to that of the parent.[length length] Specifies an explicit border spacing. Listing one length value should assign the value to both horizontal and vertical spacing, while specifying two values should assign the first value to the horizontal spacing and the second value to the vertical spacing.
-moz-border-spacing: 10pt 5pt;-o-border-spacing: 10pt 5pt;-khtml-border-spacing: 10pt 5pt;-webkit-border-spacing: 10pt 5pt;-ms-border-spacing: 10pt 5pt;border-spacing: 10pt 5pt;

CSS CAPTION-SIDE:
This property specifies the position of elements with an intrinsic (HTML CAPTION elements) or assigned ‘display’ property value of “table-caption” in relation to the table rendering box they are assigned to. Alignment within the table caption is accomplished using the ‘text-align’ and ‘vertical-align’ properties.
==========================================================================================

Possible Values
Value Descriptioninherit -Explicitly sets the value of this property to that of the parent.top -The caption is positioned above the rendered table box.bottom -The caption is positioned below the rendered table box.left -The caption is positioned to the left of the rendered table box.right -The caption is positioned to the right of the rendered table box.
the css3 markup:

=======================

-moz-caption-side: right;

-o-caption-side: right;

-khtml-caption-side: right;

-webkit-caption-side: right;

-ms-caption-side: right;

caption-side: right;

==========================================================================================
THIS IS FOR AN EXPERIMENTAL PROPERTY FOR EACH MAJOR BROWSER THAT has the ability to turn off its system underlines for accelerator keys until the ALT key is pressed (then the accelerator underline hint is displayed.) This property should have no effect in previous Microsoft OS versions, and if this system capability is turned off (or “on”, depending on how you look at it), it will also have no effect

.=========================================================================================
-moz-accelerator: true; 

-o-accelerator: true; 

-ms-accelerator: true; 

-khtml-accelerator: true; 

-webkit-accelerator: true; 

accelerator: true; 



THIS IS FOR BOX SHADOWS FOR EACH MAJOR BROWSER
-moz-box-shadow: 0px 0px 17px white;

-webkit-box-shadow:  0px 0px 17px white;

box-shadow:  0px 0px 17px white;

-ms-box-shadow:  0px 0px 17px white;

-o-box-shadow:  0px 0px 17px white;

-khtml-box-shadow: 0px 0px 17px white;

THIS IS FOR BORDERS FOR EACH MAJOR BROWSER:  

border: 1px solid green;

-moz-border: 1px solid green;

-webkit-border: 1px solid green;

-ms-border: 1px solid green;

-o-border: 1px solid green;

-khtml-border: 1px solid green;

THIS IS FOR MAKING EACH BORDER SIDE A DIFFERENT COLOR IN EACH MAJOR BROWSER

-moz-border-top-colors: #cccccc #cccccc #cccccc #cccccc #cccccc #ff4064 #cccccc #cccccc #cccccc #cccccc #cccccc #cccccc;

-moz-border-bottom-colors: #7976ff #7976ff #7976ff #ff4064 #ff4064 #ff4064 #fcff07 #fcff07 #fcff07 #24ff52 #24ff52 #24ff52 #7976ff #7976ff;

-moz-border-left-colors: #7976ff #7976ff #7976ff #ff4064 #ff4064 #ff4064 #fcff07 #fcff07 #fcff07 #24ff52 #24ff52 #24ff52 #7976ff #7976ff;

-moz-border-right-colors: #7976ff #7976ff #7976ff #ff4064 #ff4064 #ff4064 #fcff07 #fcff07 #fcff07 #24ff52 #24ff52 #24ff52 #7976ff #7976ff;

-ms-border-top-colors: #cccccc #cccccc #cccccc #cccccc #cccccc #ff4064 #cccccc #cccccc #cccccc #cccccc #cccccc #cccccc;

-ms-border-bottom-colors: #7976ff #7976ff #7976ff #ff4064 #ff4064 #ff4064 #fcff07 #fcff07 #fcff07 #24ff52 #24ff52 #24ff52 #7976ff #7976ff;

-ms-border-left-colors: #7976ff #7976ff #7976ff #ff4064 #ff4064 #ff4064 #fcff07 #fcff07 #fcff07 #24ff52 #24ff52 #24ff52 #7976ff #7976ff;

-ms-border-right-colors: #7976ff #7976ff #7976ff #ff4064 #ff4064 #ff4064 #fcff07 #fcff07 #fcff07 #24ff52 #24ff52 #24ff52 #7976ff #7976ff;

-o-border-top-colors: #cccccc #cccccc #cccccc #cccccc #cccccc #ff4064 #cccccc #cccccc #cccccc #cccccc #cccccc #cccccc;

-o-border-bottom-colors: #7976ff #7976ff #7976ff #ff4064 #ff4064 #ff4064 #fcff07 #fcff07 #fcff07 #24ff52 #24ff52 #24ff52 #7976ff #7976ff;

-o-border-left-colors: #7976ff #7976ff #7976ff #ff4064 #ff4064 #ff4064 #fcff07 #fcff07 #fcff07 #24ff52 #24ff52 #24ff52 #7976ff #7976ff;

-o-border-right-colors: #7976ff #7976ff #7976ff #ff4064 #ff4064 #ff4064 #fcff07 #fcff07 #fcff07 #24ff52 #24ff52 #24ff52 #7976ff #7976ff;

-khtml-border-top-colors: #cccccc #cccccc #cccccc #cccccc #cccccc #ff4064 #cccccc #cccccc #cccccc #cccccc #cccccc #cccccc;

-khtml-border-bottom-colors: #7976ff #7976ff #7976ff #ff4064 #ff4064 #ff4064 #fcff07 #fcff07 #fcff07 #24ff52 #24ff52 #24ff52 #7976ff #7976ff;

-khtml-border-left-colors: #7976ff #7976ff #7976ff #ff4064 #ff4064 #ff4064 #fcff07 #fcff07 #fcff07 #24ff52 #24ff52 #24ff52 #7976ff #7976ff;

-khtml-border-right-colors: #7976ff #7976ff #7976ff #ff4064 #ff4064 #ff4064 #fcff07 #fcff07 #fcff07 #24ff52 #24ff52 #24ff52 #7976ff #7976ff;

-webkit-border-top-colors: #cccccc #cccccc #cccccc #cccccc #cccccc #ff4064 #cccccc #cccccc #cccccc #cccccc #cccccc #cccccc;

-webkit-border-bottom-colors: #7976ff #7976ff #7976ff #ff4064 #ff4064 #ff4064 #fcff07 #fcff07 #fcff07 #24ff52 #24ff52 #24ff52 #7976ff #7976ff;

-webkit-border-left-colors: #7976ff #7976ff #7976ff #ff4064 #ff4064 #ff4064 #fcff07 #fcff07 #fcff07 #24ff52 #24ff52 #24ff52 #7976ff #7976ff;

-webkit-border-right-colors: #7976ff #7976ff #7976ff #ff4064 #ff4064 #ff4064 #fcff07 #fcff07 #fcff07 #24ff52 #24ff52 #24ff52 #7976ff #7976ff;

border-top-colors: #cccccc #cccccc #cccccc #cccccc #cccccc #ff4064 #cccccc #cccccc #cccccc #cccccc #cccccc #cccccc;

border-bottom-colors: #7976ff #7976ff #7976ff #ff4064 #ff4064 #ff4064 #fcff07 #fcff07 #fcff07 #24ff52 #24ff52 #24ff52 #7976ff #7976ff;

border-left-colors: #7976ff #7976ff #7976ff #ff4064 #ff4064 #ff4064 #fcff07 #fcff07 #fcff07 #24ff52 #24ff52 #24ff52 #7976ff #7976ff;

border-right-colors: #7976ff #7976ff #7976ff #ff4064 #ff4064 #ff4064 #fcff07 #fcff07 #fcff07 #24ff52 #24ff52 #24ff52 #7976ff #7976ff;

THIS IS FOR BORDER RADIUS FOR EACH MAJOR BROWSER:

-moz-border-radius: 5px;

-webkit-border-radius: 5px;

-ms-border-radius: 5px;

-o-border-radius: 5px;

-khtml-border-radius: 5px;

border-radius: 5px;

THIS IS FOR BORDER IMAGES FOR EACH MAJOR BROWSER:
-moz-border-image: url() 20 20 20 20 stretch stretch;

-ms-border-image: url() 20 20 20 20 stretch stretch;-o-border-image: url() 20 20 20 20 stretch stretch;-khtml-border-image: url() 20 20 20 20 stretch stretch;

-webkit-border-image: url() 20 20 20 20 stretch stretch;

border-image: url() 20 20 20 20 stretch stretch;

THIS IS FOR TEXT SHADOWING FOR EACH MAJOR BROWSER

-moz-text-shadow: #COLOR 0px 0px 0px;

-ms-text-shadow: #COLOR 0px 0px 0px;

-o-text-shadow: #COLOR 0px 0px 0px;

-khtml-text-shadow: #COLOR 0px 0px 0px;

-webkit-text-shadow: #COLOR 0px 0px 0px;

text-shadow: #COLOR 0px 0px 0px;

THIS IS FOR TEXT DECORATIONS FOR EACH MAJOR BROWSER:

-moz-text-decoration: blink or none or Bold or Bolder or oblique or Uppercase or lowercase or Italics;

-ms-text-decoration: blink or none or Bold or Bolder or oblique or Uppercase or lowercase or Italics;

-o-text-decoration: blink or none or Bold or Bolder or oblique or Uppercase or lowercase or Italics;

-khtml-text-decoration: blink or none or Bold or Bolder or oblique or Uppercase or lowercase or Italics;

-webkit-text-decoration: blink or none or Bold or Bolder or oblique or Uppercase or lowercase or Italics;

text-decoration:blink or none or Bold or Bolder or oblique or Uppercase or lowercase or Italics;

THIS IS FOR BACKGROUND CLIP & BACKGROUND ORIGIN FOR EACH MAJOR BROWSER:

-moz-background-clip: padding; 

-moz-background-origin: padding-box;  

-ms-background-clip: padding; 

-ms-background-origin: padding-box;   

-khtml-background-clip: padding; 

-khtml-background-origin: padding-box;  

-o-background-clip: padding; 

-o-background-origin: padding-box;   

-webkit-background-clip: padding; 

-webkit-background-origin: padding-box;  

 background-clip: padding; 

background-origin: padding-box;    

THIS IS FOR BACKGROUND-SIZING FOR EACH MAJOR BROWSER:

background-size: 100% 100%;

-moz-background-size: 100% 100%;

-ms-background-size: 100% 100%;

-o-background-size: 100% 100%;

-khtml-background-size: 100% 100%;

-webkit-background-size: 100% 100%;

THIS IS FOR THE CSS3 MULTIPLE BACKGROUNDS PROPERTY FOR EACH MAJOR BROWSER:
(*****NOTE THAT THESE CAN BE ALTERED TO YOUR OWN SPECS*****)

-moz-background-image: url(left.png), url(right.png), url(main.png);

-moz-background-repeat: no-repeat, no-repeat, repeat-x;

-moz-background-position: left top, right top, left top;

-o-background-image: url(left.png), url(right.png), url(main.png);

-o-background-repeat: no-repeat, no-repeat, repeat-x;

-o-background-position: left top, right top, left top;

-khtml-background-image: url(left.png), url(right.png), url(main.png);

-khtml-background-repeat: no-repeat, no-repeat, repeat-x;

-khtml-background-position: left top, right top, left top;

-ms-background-image: url(left.png), url(right.png), url(main.png);

-ms-background-repeat: no-repeat, no-repeat, repeat-x;

-ms-background-position: left top, right top, left top;

-webkit-background-image: url(left.png), url(right.png), url(main.png);

-webkit-background-repeat: no-repeat, no-repeat, repeat-x;

-webkit-background-position: left top, right top, left top;

background-image: url(left.png), url(right.png), url(main.png);

background-repeat: no-repeat, no-repeat, repeat-x;

background-position: left top, right top, left top;

THIS IS FOR THE BORDER RADIUS FOR EACH MAJOR BROWSER:

-moz-border-radius-top-left: 21px;

-moz-border-radius-top-right: 21px;

-moz-border-radius-bottom-left: 21px;

-moz-border-radius-bottom-right: 21px;

-webkit-border-top-left-radius: 21px;

-webkit-border-top-right-radius: 21px;

-webkit-border-bottom-left-radius: 21px;

-webkit-border-bottom-right-radius: 21px;

-ms-border-radius-top-left: 21px;

-ms-border-radius-top-right: 21px;

-ms-border-radius-bottom-left: 21px;

-ms-border-radius-bottom-right: 21px;

-o-border-top-left-radius: 21px;

-o-border-top-right-radius: 21px;

-o-border-bottom-left-radius: 21px

;-o-border-bottom-right-radius: 21px;

-khtml-border-radius-top-left: 21px;

-khtml-border-radius-top-right: 21px;

-khtml-border-radius-bottom-left: 21px;

-khtml-border-radius-bottom-right: 21px;

-webkit-border-top-left-radius: 21px;

-webkit-border-top-right-radius: 21px;

-webkit-border-bottom-left-radius: 21px;

-webkit-border-bottom-right-radius: 21px;

THIS IS FOR THE TRANSFORMATION TO ROTATION:
-moz-transform: rotate(0deg);

-webkit-transform: rotate(0deg);

-o-transform: rotate(0deg);

transform: rotate(0deg);

-ms-transform: rotate(0deg);

-khtml-transform: rotate(0deg);

THIS IS FOR THE TRANSITIONAL ELEMENTS: 
-moz-transition-delay: 1s;

-moz-transition: all 1s ease-in-out;

-moz-transition-duration: 1s;

-moz-transition-timing-function: ease-in-out;

-moz-transition-property: all;

-ms-transition-delay: 1s;

-ms-transition: all 1s ease-in-out;

-ms-transition-duration: 1s;

-ms-transition-timing-function: ease-in-out;

-ms-transition-property: all;

-webkit-transition-delay: 1s;

-webkit-transition: all 1s ease-in-out;

-webkit-transition-duration: 1s;

-webkit-transition-timing-function: ease-in-out;

-webkit-transition-property: all;

-khtml-transition-delay: 1s;

-khtml-transition: all 1s ease-in-out;

-khtml-transition-duration: 1s;

-khtml-transition-timing-function: ease-in-out;

-khtml-transition-property: all;-o-transition-delay: 1s;

-o-transition: all 1s ease-in-out;

-o-transition-duration: 1s;

-o-transition-timing-function: ease-in-out;

-o-transition-property: all;

transition-delay: 1s;transition: all 1s ease-in-out;

transition-duration: 1s;

transition-timing-function: ease-in-out;

transition-property: all;


THIS IS FOR THE TRANSFORMATION WITH ROTATION AND SCALE PROPERTIES:

-webkit-transform: rotate(360deg) scale(1.3);

-moz-transform: rotate(360deg) scale(1.3);

-o-transform: rotate(360deg) scale(1.3);

transform: rotate(360deg) scale(1.3);



THIS IS FOR OPACITY & FILTER SETTINGS FOR EACH MAJOR BROWSER:
opacity: 0.70;

-moz-opacity: 0.70;

-o-opacity: 0.70;

-ms-opacity: 0.70;

-khtml-opacity: 0.70;

-webkit-opacity: 0.70;

filter: alpha(opacity=70);

-moz-filter: alpha(opacity=70);

-ms-filter: alpha(opacity=70);

-khtml-filter: alpha(opacity=70);

-o-filter: alpha(opacity=70);

-webkit-filter: alpha(opacity=70);