CSS3 snippets (draft)

From Bluefish Wiki
Jump to: navigation, search
Man2 note.png CSS3 snippets is work in progress, this page is only for documentation.


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


CSS Color Module Level 3 is a Recommendation. Color, opacity

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, or inherit. Any value smaller or larger will be clamped to this range.

  opacity: 0.8;                    /* Firefox, Safari(WebKit), Opera, IE 9*/

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;

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;

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;

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

  word-spacing:  1em;

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


background-clip background-origin background-size border-radius border-bottom-left-radius border-bottom-right-radius border-top-left-radius border-top-right-radius box-shadow box-sizing column-count column-gap column-rule column-rule-color column-rule-style column-rule-width column-span column-width columns text-overflow overflow-x overflow-y

mozilla (et webkit):

Trident Gecko Presto WebKit



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.