CSS3 snippets (draft): Difference between revisions

From Bluefish Wiki
Jump to navigation Jump to search
← Older edit
Fal7i (talk | contribs)
1,658 edits
m →‎doc:: CSS Color is Recommendation
Fal7i (talk | contribs)
1,658 edits
 
Line 20: Line 20:


== CSS3 ==
== CSS3 ==
[http://www.w3.org/TR/css3-color/ CSS Color Module Level 3] is a Recommendation. Color, opacity


*[https://developer.mozilla.org/en/CSS/opacity opacity] TGPW<br /><br />
*[https://developer.mozilla.org/en/CSS/opacity opacity] TGPW<br /><br />
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.
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 */
   opacity: 0.8;                    /* Firefox, Safari(WebKit), Opera, IE 9*/
  -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 */


*[https://developer.mozilla.org/en/CSS/outline-offset outlineOffset] GPW<br />
*[https://developer.mozilla.org/en/CSS/outline-offset outlineOffset] GPW<br />
Line 47: Line 46:
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
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;
   word-wrap:break-word;
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): ==
== mozilla (et webkit): ==

Latest revision as of 09:55, 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

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 

  word-wrap:break-word;

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

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=2357"