CSS3 snippets (draft): Difference between revisions

From Bluefish Wiki
Jump to navigation Jump to search
 
(6 intermediate revisions by the same user not shown)
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 17: Line 19:
{{clear}}
{{clear}}


== 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 />
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*/
*[https://developer.mozilla.org/en/CSS/outline-offset outlineOffset] GPW<br />
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;
*[https://developer.mozilla.org/En/CSS/Overflow-x overflowX] TGPW<br />
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;


== CSS3 ==
*[https://developer.mozilla.org/En/CSS/Overflow-y overflowY] TGPW<br />
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;


*[https://developer.mozilla.org/en/CSS/word-spacing wordSpacing] TGPW<br />
The word-spacing CSS property specifies spacing behavior between words. word-spacing:  normal | <length>
  word-spacing:  1em;


*[https://developer.mozilla.org/en/CSS/opacity opacity]
*[https://developer.mozilla.org/En/CSS/Word-wrap wordWrap] TGW<br />
*[https://developer.mozilla.org/en/CSS/outline-offset outlineOffset] 
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
*[https://developer.mozilla.org/En/CSS/Overflow-x overflowX]
  word-wrap:break-word;
*[https://developer.mozilla.org/En/CSS/Overflow-y overflowY] 
*[https://developer.mozilla.org/en/CSS/word-spacing wordSpacing]
*[https://developer.mozilla.org/En/CSS/Word-wrap wordWrap]


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): ==
Line 44: Line 64:
*<del>[https://developer.mozilla.org/en/CSS/-moz-border-left-colors MozBorderLeftColors]</del>
*<del>[https://developer.mozilla.org/en/CSS/-moz-border-left-colors MozBorderLeftColors]</del>
*[https://developer.mozilla.org/en/CSS/-moz-border-radius MozBorderRadius]GPW
*[https://developer.mozilla.org/en/CSS/-moz-border-radius MozBorderRadius]GPW
*[https://developer.mozilla.org/en/CSS/-moz-border-radius-bottomleft MozBorderRadiusBottomleft]
*<del>[https://developer.mozilla.org/en/CSS/-moz-border-radius-bottomleft MozBorderRadiusBottomleft]</del>
*[https://developer.mozilla.org/en/CSS/-moz-border-radius-bottomright MozBorderRadiusBottomright]
*<del>[https://developer.mozilla.org/en/CSS/-moz-border-radius-bottomright MozBorderRadiusBottomright]</del>
*[https://developer.mozilla.org/en/CSS/-moz-border-radius-topleft MozBorderRadiusTopleft]
*<del>[https://developer.mozilla.org/en/CSS/-moz-border-radius-topleft MozBorderRadiusTopleft]</del>
*[https://developer.mozilla.org/en/CSS/-moz-border-radius-topright MozBorderRadiusTopright]
*<del>[https://developer.mozilla.org/en/CSS/-moz-border-radius-topright MozBorderRadiusTopright]</del>
*<del>[https://developer.mozilla.org/en/CSS/-moz-border-right-colors MozBorderRightColors]</del>
*<del>[https://developer.mozilla.org/en/CSS/-moz-border-right-colors MozBorderRightColors]</del>
*[https://developer.mozilla.org/En/CSS/-moz-border-start <del><span style="color:red">MozBorderStart</span></del>]
*[https://developer.mozilla.org/En/CSS/-moz-border-start <del><span style="color:red">MozBorderStart</span></del>]
Line 53: Line 73:
*[https://developer.mozilla.org/En/CSS/-moz-border-start-style <del><span style="color:red">MozBorderStartStyle</span></del>]
*[https://developer.mozilla.org/En/CSS/-moz-border-start-style <del><span style="color:red">MozBorderStartStyle</span></del>]
*[https://developer.mozilla.org/En/CSS/-moz-border-start-width <del><span style="color:red">MozBorderStartWidth</span></del>]
*[https://developer.mozilla.org/En/CSS/-moz-border-start-width <del><span style="color:red">MozBorderStartWidth</span></del>]
*[https://developer.mozilla.org/en/CSS/-moz-border-top-colors MozBorderTopColors]
*<del>[https://developer.mozilla.org/en/CSS/-moz-border-top-colors MozBorderTopColors]</del>
*[https://developer.mozilla.org/en/CSS/-moz-box-align MozBoxAlign]
*<del>[https://developer.mozilla.org/en/CSS/-moz-box-align MozBoxAlign]</del>
*[https://developer.mozilla.org/en/CSS/-moz-box-direction MozBoxDirection]
*<del>[https://developer.mozilla.org/en/CSS/-moz-box-direction MozBoxDirection]</del>
*[https://developer.mozilla.org/en/CSS/-moz-box-flex MozBoxFlex]
*<del>[https://developer.mozilla.org/en/CSS/-moz-box-flex MozBoxFlex]</del>
*[https://developer.mozilla.org/en/CSS/-moz-box-orient <del>MozBoxOrient</del>]
*[https://developer.mozilla.org/en/CSS/-moz-box-orient <del>MozBoxOrient</del>]
*[https://developer.mozilla.org/en/CSS/-moz-box-ordinal-group MozBoxOrdinalGroup]
*<del>[https://developer.mozilla.org/en/CSS/-moz-box-ordinal-group MozBoxOrdinalGroup]</del>
*[https://developer.mozilla.org/en/CSS/-moz-box-pack MozBoxPack]
*<del>[https://developer.mozilla.org/en/CSS/-moz-box-pack MozBoxPack]</del>
*[https://developer.mozilla.org/en/CSS/-moz-box-shadow MozBoxShadow]
*[https://developer.mozilla.org/en/CSS/-moz-box-shadow MozBoxShadow]TGPW
*[https://developer.mozilla.org/En/CSS/Box-sizing MozBoxSizing]
*[https://developer.mozilla.org/En/CSS/Box-sizing MozBoxSizing]TGPW
*[https://developer.mozilla.org/en/CSS/-moz-column-count MozColumnCount]
*[https://developer.mozilla.org/en/CSS/-moz-column-count MozColumnCount]GW
*[https://developer.mozilla.org/en/CSS/-moz-column-gap MozColumnGap]
*[https://developer.mozilla.org/en/CSS/-moz-column-gap MozColumnGap]GW
*[https://developer.mozilla.org/En/CSS/-moz-column-rule MozColumnRule]
*[https://developer.mozilla.org/En/CSS/-moz-column-rule MozColumnRule]GW
*[https://developer.mozilla.org/En/CSS/-moz-column-rule-color MozColumnRuleColor]
*[https://developer.mozilla.org/En/CSS/-moz-column-rule-color MozColumnRuleColor]GW
*[https://developer.mozilla.org/En/CSS/-moz-column-rule-style MozColumnRuleStyle]
*[https://developer.mozilla.org/En/CSS/-moz-column-rule-style MozColumnRuleStyle]GW
*[https://developer.mozilla.org/En/CSS/-moz-column-rule-width MozColumnRuleWidth]
*[https://developer.mozilla.org/En/CSS/-moz-column-rule-width MozColumnRuleWidth]GW
*[https://developer.mozilla.org/en/CSS/-moz-column-width MozColumnWidth]
*[https://developer.mozilla.org/en/CSS/-moz-column-width MozColumnWidth]GW
*[https://developer.mozilla.org/en/CSS/-moz-float-edge MozFloatEdge]
*<del>[https://developer.mozilla.org/en/CSS/-moz-float-edge MozFloatEdge]</del>
*[https://developer.mozilla.org/en/CSS/-moz-force-broken-image-icon MozForceBrokenImageIcon]
*<del>[https://developer.mozilla.org/en/CSS/-moz-force-broken-image-icon MozForceBrokenImageIcon]</del>
*[https://developer.mozilla.org/en/CSS/-moz-image-region MozImageRegion]
*<del>[https://developer.mozilla.org/en/CSS/-moz-image-region MozImageRegion]</del>
*[https://developer.mozilla.org/en/CSS/-moz-margin-end MozMarginEnd]
*<del>[https://developer.mozilla.org/en/CSS/-moz-margin-end MozMarginEnd]</del>G
*[https://developer.mozilla.org/en/CSS/-moz-margin-start MozMarginStart]
*[https://developer.mozilla.org/en/CSS/-moz-linear-gradient -moz-linear-gradient] TGW
*[https://developer.mozilla.org/en/CSS/-moz-repeating-linear-gradient -moz-repeating-linear-gradient] TG
*[https://developer.mozilla.org/en/CSS/-moz-radial-gradient -moz-radial-gradient] TGW
*[https://developer.mozilla.org/en/CSS/-moz-margin-start MozMarginStart]GW
*[https://developer.mozilla.org/en/CSS/opacity <del>MozOpacity</del>] use CSS3 opacity
*[https://developer.mozilla.org/en/CSS/opacity <del>MozOpacity</del>] use CSS3 opacity
*[https://developer.mozilla.org/en/CSS/-moz-outline MozOutline]
*<del>[https://developer.mozilla.org/en/CSS/-moz-outline MozOutline]</del>
*[https://developer.mozilla.org/en/CSS/-moz-outline-color MozOutlineColor]
*<del>[https://developer.mozilla.org/en/CSS/-moz-outline-color MozOutlineColor]</del>
*obsolete: MozOutlineOffset no longer supported at all, use OutlineOffset
*obsolete: MozOutlineOffset no longer supported at all, use OutlineOffset
*[https://developer.mozilla.org/en/CSS/-moz-outline-radius MozOutlineRadius]
*<del>[https://developer.mozilla.org/en/CSS/-moz-outline-radius MozOutlineRadius]</del>G
*[https://developer.mozilla.org/en/CSS/-moz-outline-radius-bottomleft MozOutlineRadiusBottomleft]
*<del>[https://developer.mozilla.org/en/CSS/-moz-outline-radius-bottomleft MozOutlineRadiusBottomleft]</del>G
*[https://developer.mozilla.org/en/CSS/-moz-outline-radius-bottomright MozOutlineRadiusBottomtop]
*<del>[https://developer.mozilla.org/en/CSS/-moz-outline-radius-bottomright MozOutlineRadiusBottomtop]</del>G
*[https://developer.mozilla.org/en/CSS/-moz-outline-radius-topleft MozOutlineRadiusTopleft]
*<del>[https://developer.mozilla.org/en/CSS/-moz-outline-radius-topleft MozOutlineRadiusTopleft]</del>G
*[https://developer.mozilla.org/en/CSS/-moz-outline-radius-topright MozOutlineRadiusTopright]
*<del>[https://developer.mozilla.org/en/CSS/-moz-outline-radius-topright MozOutlineRadiusTopright]</del>G
*[https://developer.mozilla.org/en/CSS/-moz-outline-style MozOutlineStyle]
*<del>[https://developer.mozilla.org/en/CSS/-moz-outline-style MozOutlineStyle]</del>
*[https://developer.mozilla.org/en/CSS/-moz-outline-width MozOutlineWidth]
*<del>[https://developer.mozilla.org/en/CSS/-moz-outline-width MozOutlineWidth]</del>
*[https://developer.mozilla.org/en/CSS/-moz-padding-end MozPaddingEnd]
*<del>[https://developer.mozilla.org/en/CSS/-moz-padding-end MozPaddingEnd]</del>
*[https://developer.mozilla.org/en/CSS/-moz-padding-start MozPaddingStart]
*<del>[https://developer.mozilla.org/en/CSS/-moz-padding-start MozPaddingStart]</del>
*[https://developer.mozilla.org/en/CSS/-moz-stack-sizing MozStackSizing]
*<del>[https://developer.mozilla.org/en/CSS/-moz-stack-sizing MozStackSizing]</del>
*[https://developer.mozilla.org/En/CSS/-moz-transform MozTransform]
*[https://developer.mozilla.org/En/CSS/-moz-transform MozTransform]TGPW
*[https://developer.mozilla.org/En/CSS/-moz-transform-origin MozTransformOrigin]
*[https://developer.mozilla.org/En/CSS/-moz-transform-origin MozTransformOrigin]TGPW
*[https://developer.mozilla.org/en/CSS/-moz-user-focus MozUserFocus]
*<del>[https://developer.mozilla.org/en/CSS/-moz-user-focus MozUserFocus]</del>
*[https://developer.mozilla.org/en/CSS/-moz-user-input MozUserInput]
*<del>[https://developer.mozilla.org/en/CSS/-moz-user-input MozUserInput]</del>
*[https://developer.mozilla.org/en/CSS/-moz-user-modify <del><span style="color:red">MozUserModify</span></del>]
*[https://developer.mozilla.org/en/CSS/-moz-user-modify <del><span style="color:red">MozUserModify</span></del>]
*[https://developer.mozilla.org/en/CSS/-moz-user-select MozUserSelect]
*<del>[https://developer.mozilla.org/en/CSS/-moz-user-select MozUserSelect]</del>
*[https://developer.mozilla.org/En/CSS/-moz-window-shadow MozWindowShadow]
*<del>[https://developer.mozilla.org/En/CSS/-moz-window-shadow MozWindowShadow]</del>


{{top}}
{{top}}


== snippets ==
;G*PW* border-radius:<leaf type="insert" title="border-radius" tooltip="G*PW*&#10;pre {&#10;background: gold;&#10;border: ridge gold;&#10;-moz-border-radius: 13em/3em;&#10;-webkit-border-radius: 13em 3em;&#10;border-radius: 13em/3em;&#10;}&#10;&#10;Accepts one, two, three or four border-radius values, optional followed by a slash / and a second set of values.&#10;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>
<div style="background: gold;-moz-border-radius: 13em/3em;-webkit-border-radius: 13em/3em;border-radius: 13em/3em;">
Differences between -moz-border-radius and  -webkit-border-radius<br />
<percentage> values are are implemented in a non-standard way in Gecko (Firefox) and not supported by Safari/WebKit.<br />
Safari/WebKit supports only one value for all 4 corners. For different radii the long form properties must be used.<br />
Safari/WebKit doesn't support the slash / notation. If two values are specified, an elliptical border is drawn on all 4 corners.
</div>


[[Category:Snippets repository]]
[[Category:Snippets repository]]

Latest revision as of 09:55, 18 August 2011

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


doc:[edit]


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


CSS3[edit]

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):[edit]

Trident Gecko Presto WebKit

Top.png

snippets[edit]

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.