CSS3 snippets (draft)

CSS3 snippets is work in progress, this page is only for documentation.

doc:

• mozilla
• safari
• http://peter.sh/experiments/vendor-prefixed-css-property-overview/
• http://www.w3.org/Style/CSS/current-work

   -moz-box-shadow: teal 60px -16px;
-webkit-box-shadow: teal 60px -16px;
        box-shadow: teal 60px -16px;

CSS3

• opacity TGPW
  
  

The opacity CSS property specifies the transparency of an element, i.e. the degree to which the background behind the element is overlaid. Values:A <number> in the range 0.0 to 1.0. Any value smaller or larger will be clamped to this range.

  opacity: 0.8;                    /* Firefox, Safari(WebKit), Opera */
  -ms-filter: "alpha(opacity=80)"; /* IE 8 */
  filter: alpha(opacity=80);       /* IE 4-7 */
  zoom: 1;       /* set "zoom", "width" or "height" to trigger "hasLayout" in IE 7 and lower */ 

• outlineOffset GPW
  

The outline-offset CSS property is used to set space between an outline and the edge or border of an element. An outline is a line that is drawn around elements, outside the border edge.Values: The width of the space. See <length> for possible units. Negative values place the outline inside the element.

 outline-offset: 3px;

• overflowX TGPW
  

overflow-x specifies whether to clip content, render a scroll bar or display overflow content of a block-level element, when it overflows at the left and right edges. overflow-x: visible | hidden | scroll | auto

  overflow-x:  hidden;

• overflowY TGPW
  

overflow-y specifies whether to clip content, render a scroll bar or display overflow content of a block-level element, when it overflows at the top and bottom edges. overflow-y: visible | hidden | scroll | auto

  overflow-y:  scroll;

• wordSpacing TGPW
  

The word-spacing CSS property specifies spacing behavior between words. word-spacing: normal | <length>

  word-spacing:  1em;

• wordWrap TGW
  

The word-wrap CSS property is used to to specify whether or not the browser is allowed to break lines within words in order to prevent overflow when an otherwise unbreakable string is too long to fit. word-wrap: normal | break-word | inherit

  word-wrap:break-word;

mozilla (et webkit):

Trident Gecko Presto WebKit

• MozAppearanceGW
• MozBackgroundClipTGPW
• MozBackgroundInlinePolicy
• MozBackgroundOriginTGPW
• MozBinding
• MozBorderBottomColors
• MozBorderEnd
• MozBorderEndColor
• MozBorderEndStyle
• MozBorderWidth
• MozBorderImageGPW
• MozBorderLeftColors
• MozBorderRadiusGPW
• MozBorderRadiusBottomleft
• MozBorderRadiusBottomright
• MozBorderRadiusTopleft
• MozBorderRadiusTopright
• MozBorderRightColors
• MozBorderStart
• MozBorderStartColor
• MozBorderStartStyle
• MozBorderStartWidth
• MozBorderTopColors
• MozBoxAlign
• MozBoxDirection
• MozBoxFlex
• MozBoxOrient
• MozBoxOrdinalGroup
• MozBoxPack
• MozBoxShadowTGPW
• MozBoxSizingTGPW
• MozColumnCountGW
• MozColumnGapGW
• MozColumnRuleGW
• MozColumnRuleColorGW
• MozColumnRuleStyleGW
• MozColumnRuleWidthGW
• MozColumnWidthGW
• MozFloatEdge
• MozForceBrokenImageIcon
• MozImageRegion
• MozMarginEndG
• -moz-linear-gradient TGW
• -moz-repeating-linear-gradient TG
• -moz-radial-gradient TGW
• MozMarginStartGW
• MozOpacity use CSS3 opacity
• MozOutline
• MozOutlineColor
• obsolete: MozOutlineOffset no longer supported at all, use OutlineOffset
• MozOutlineRadiusG
• MozOutlineRadiusBottomleftG
• MozOutlineRadiusBottomtopG
• MozOutlineRadiusTopleftG
• MozOutlineRadiusToprightG
• MozOutlineStyle
• MozOutlineWidth
• MozPaddingEnd
• MozPaddingStart
• MozStackSizing
• MozTransformTGPW
• MozTransformOriginTGPW
• MozUserFocus
• MozUserInput
• MozUserModify
• MozUserSelect
• MozWindowShadow

snippets

G*PW* border-radius

<leaf type="insert" title="border-radius" tooltip="G*PW* pre { background: gold; border: ridge gold; -moz-border-radius: 13em/3em; -webkit-border-radius: 13em 3em; border-radius: 13em/3em; } Accepts one, two, three or four border-radius values, optional followed by a slash / and a second set of values. If the slash followed by a second set of radii is specified, the values before the slash are used to specify the horizontal radius, while the values after the slash specify the vertical radius."><before>-moz-border-radius: %0;-webkit-border-radius: %0;border-radius: %0;</before><after></after><param name="hv or h/v radii"/></leaf>

Differences between -moz-border-radius and -webkit-border-radius
<percentage> values are are implemented in a non-standard way in Gecko (Firefox) and not supported by Safari/WebKit.
Safari/WebKit supports only one value for all 4 corners. For different radii the long form properties must be used.
Safari/WebKit doesn't support the slash / notation. If two values are specified, an elliptical border is drawn on all 4 corners.