CSS3 snippets (draft): Difference between revisions

From Bluefish Wiki
Jump to navigation Jump to search
← Older editNewer edit →
Fal7i (talk | contribs)
1,658 edits
Fal7i (talk | contribs)
1,658 edits
m →‎doc:: CSS Color is Recommendation
Line 8: Line 8:
*[https://developer.mozilla.org/En/DOM/CSS mozilla]
*[https://developer.mozilla.org/En/DOM/CSS mozilla]
*[http://developer.apple.com/safari/library/documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html#//apple_ref/doc/uid/TP30001266 safari]
*[http://developer.apple.com/safari/library/documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html#//apple_ref/doc/uid/TP30001266 safari]
*http://peter.sh/experiments/vendor-prefixed-css-property-overview/
*http://www.w3.org/Style/CSS/current-work




Line 16: Line 18:


{{clear}}
{{clear}}


== CSS3 ==
== CSS3 ==

Revision as of 09:06, 18 August 2011

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


doc:


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


CSS3

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 */

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 

  word-wrap:break-word;

mozilla (et webkit):

Trident Gecko Presto WebKit

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.

Retrieved from "https://bfwiki.tellefsen.net//index.php?title=CSS3_snippets_(draft)&oldid=2356"