Tài liệu HTML & CSS: The Complete Reference- P15 docx

676
P a r t I I : C o r e S t y l e

676
P a r t I I : C o r e S t y l e
Note
• Under IE this property is known as –ms-layout-grid-char to correctly show it is
an extension.
layout-grid-line
This Microsoft-proposed CSS property defines the gridline value used for laying out
Japanese or Chinese characters in a Web document.
Syntax
layout-grid-line: none | auto | length | percentage
where length is any positive length unit and percentage is a value derived from the size of the
parent element the rule is applied to.
Example
<p style="layout-grid-line: 100px;">
A short text sample<br>
with line breaks so<br>
the meaning of this<br>
property will be obvious.</p>
Compatibility
No specification IE 5+
Note
• Under IE this property is known as –ms-layout-grid-line to correctly show it is
an extension.
layout-grid-mode
This Microsoft-proposed CSS property defines whether the text layout grid uses one or
two dimensions.
Syntax

layout-grid-mode: both | none | line | char
where line specifies to use a line grid, char specifies to use a character grid, and both
specifies to use both grids. A value of none turns all grids off. The default is both.
Example
<p style="layout-grid-mode: none; layout-grid-line: 100px;">
A short text sample<br>
with layout-grid-mode<br>
set to a value of none<br>
to turn off the grid.</p>
Compatibility
No specification IE 5+
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.

C h a p t e r 6 : C S S 3 P r o p r i e t a r y a n d E m e r g i n g F e a t u r e s R e f e r e n c e
677

PART II
C h a p t e r 6 : C S S 3 P r o p r i e t a r y a n d E m e r g i n g F e a t u r e s R e f e r e n c e
677
Note
• Under IE 8+ this property is known as –ms-layout-grid-mode to correctly show it
is an extension.
layout-grid-type
This Microsoft-proposed CSS property defines the type of grid to be used for laying out
Japanese or Chinese characters in a Web document.
Syntax
layout-grid-type: fixed | loose | strict
where fixed is used for a monospace font layout, strict is used for most complex
ideographic character types, and loose is used for more alphabetic types like hiragana
in Japanese.

Example
<p style="layout-grid-type: strict; layout-grid-line: 55px;">
A short text sample would likely be in Chinese, not English.</p>
Compatibility
No specification IE 5+
Note
• Under IE 8+ this property is known as –ms-layout-grid-type to correctly show it
is an extension.
line-break
This property defines line-breaking rules for Asian text.
Syntax
line-break: normal | strict
Example
p {line-break: normal;}
Compatibility
No specification Chrome 1+, IE 5+, Safari 2+
Notes
• Under IE 8+ this property is known as –ms-line-break to correctly show it is an
extension. Under WebKit-based browsers this is called –webkit-line-break since
Safari 3.0 and –khtml-line-break since Safari 2.0.
• This property is deprecated according to Microsoft documentation and should be
replaced by
word-break per the upcoming CSS3 specification.
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.

678
P a r t I I : C o r e S t y l e

678
P a r t I I : C o r e S t y l e

marquee-direction
This property specifies the direction in which a marquee should move.
Syntax
marquee-direction: forward | reverse
See the notes for proprietary equivalents.
Example
<p style="overflow: auto;
overflow-x:-webkit-marquee;
display:-wap-marquee;
overflow-style: marquee-line;
width: 100px;
-webkit-marquee-direction:right;
-wap-marquee-dir: ltr;
marquee-direction:reverse;">
ABCDEFGHIJKLMNOPQRSTUVWXYZ
</p>
Compatibility
CSS3 Chrome 1+, Opera 8+, Safari 2+
Notes
• The default value is forward.
• This property can be replicated by using the HTML
<marquee> tag and setting the
direction attribute to left | right | up | down.
• The property was supported under Safari 2 as
–khtml-marquee-direction.
• This property is supported as
-webkit-marquee-direction in Safari 3+. The
syntax is
-webkit-marquee-direction: ahead | auto | backwards | down | forwards |
left | reverse | right | up

• This property is supported as -wap-marquee-dir in Opera. The syntax is
-wap-marquee-dir: ltr | rtl
• According to the standard, the actual direction of the marquee movement will
depend on the overflow-style and direction of text flow in the document
according to Table 6-10.
overflow-style
Direction Value Forward Direction Reverse Direction
marquee-line ltr
Left Right
rtl
Right Left
marquee-block
Up Down
TABLE 6-10 Marquee Direction Logic
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.

C h a p t e r 6 : C S S 3 P r o p r i e t a r y a n d E m e r g i n g F e a t u r e s R e f e r e n c e
679

PART II
C h a p t e r 6 : C S S 3 P r o p r i e t a r y a n d E m e r g i n g F e a t u r e s R e f e r e n c e
679
Of course, if the marquee-style is set to alternate, the directions will flip back
and forth.
marquee-play-count
This property defines how many times the marquee runs.
Syntax
marquee-play-count: positive number | infinite
Example
<p style="overflow: auto;

overflow-x:-webkit-marquee;
display:-wap-marquee;
overflow-style: marquee-line;
width: 100px;
-webkit-marquee-repetition:5;
-wap-marquee-loop: 5;
marquee-play-count:5;">
ABCDEFGHIJKLMNOPQRSTUVWXYZ
</p>
Compatibility
CSS3 Chrome 1+, Opera 8+, Safari 2+
Notes
• This property is replicable in many browsers using a <marquee> tag.
• The default value is 1, meaning the element performs its effect once.
• This property can be replicated using the HTML
marquee tag and setting the loop
attribute to a number or infinite.
• This property is supported as
-webkit-marquee-repetition in WebKit-based
browsers like Safari. It’s also known as -khtml-marquee-repetition in Safari 2.0.
In these browsers, the default is infinite. If it is not set to infinite, the element
will disappear after it completes the loops.
• This property is supported as
-wap-marquee-loop in Opera browsers.
• For some reason, you may see a browser stop the marquee effect after a certain
number of iterations regardless of setting.
marquee-speed
This property defines how fast the marquee scrolls.
Syntax
marquee-speed: fast | normal | slow

Example
<p style="overflow: auto;
overflow-x:-webkit-marquee;
display:-wap-marquee;
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.

680
P a r t I I : C o r e S t y l e

680
P a r t I I : C o r e S t y l e
overflow-style: marquee-line;
width: 100px;
-webkit-marquee-speed:fast;
-wap-marquee-speed: fast;
marquee-speed:fast;">
ABCDEFGHIJKLMNOPQRSTUVWXYZ
</p>
Compatibility
CSS3 Chrome 1+, Opera 8+, Safari 2+
Notes
• This property is replicable in many browsers using a <marquee> tag.
• The default value is
normal.
• The property is supported as
–webkit-marquee-speed in Safari 3+ and -khtml-
marquee-speed
in Safari 2.0.
• In Safari, there is an additional format:
-webkit-marquee-speed: distance / time

• The property is supported as –wap-marquee-speed in Opera browsers.
marquee-style
This property defines the motion of the marquee.
Syntax
marquee-style: alternate | scroll | slide
where alternate causes the marquee to bounce back and forth, scroll causes the
marquee to scroll completely off of one end before reappearing on the other end, and slide
causes the marquee to reset as soon as all of the content is visible.
Example
<p style="overflow: auto;
overflow-x:-webkit-marquee;
display:-wap-marquee;
overflow-style: marquee-line;
width: 100px;
-webkit-marquee-style:alternate;
-wap-marquee-style: alternate;
-wap-marquee-loop: infinite;
marquee-style:alternate;">
ABCDEFGHIJKLMNOPQRSTUVWXYZ
</p>
Compatibility
CSS3 Chrome 1+, Opera 8+, Safari 2+
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.

C h a p t e r 6 : C S S 3 P r o p r i e t a r y a n d E m e r g i n g F e a t u r e s R e f e r e n c e
681

PART II
C h a p t e r 6 : C S S 3 P r o p r i e t a r y a n d E m e r g i n g F e a t u r e s R e f e r e n c e
681

Notes
• This property is replicable in many browsers using a <marquee> tag.
• The default value is
scroll.
• This property can be replicated using the HTML
marquee tag and setting the
behavior attribute to alternate | scroll | slide.
• This property is supported as
-webkit-marquee-style in Safari 3+ and –khtml-
marquee-style
in Safari 2.
• This property is supported as
-wap-marquee-style in Opera.
mask
This property defines a mask to be used as a box’s overlay in order to clip the box to a
complex shape. This is a shorthand property for the more specific mask properties.
Syntax
mask: mask-attachment, mask-clip, mask-image, mask-repeat, mask-composite,
mask-box-image;
where each value corresponds to the more specific property.
Example
<div style="height: 100px;
width: 200px;
background-color: red;
padding: 20px;
border: 5px dashed black;
-webkit-mask: scroll border -webkit-gradient(linear, left top,
left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0))) repeat border;"></div>
ONLINE />Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.

682
P a r t I I : C o r e S t y l e

682
P a r t I I : C o r e S t y l e
Compatibility
No specification Safari 3.1+
Note
• In WebKit-based browsers this property is –webkit-mask.
mask-attachment
This property specifies whether the mask should scroll or stay fixed when the page is scrolled.
Syntax
mask-attachment: fixed | scroll
where the mask will scroll with the page on scroll and will not move on fixed.
Example
<img src="main.jpg" style="-webkit-mask-image: -webkit-gradient(linear,
left top, right bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
-webkit-mask-attachment: fixed;">
Compatibility
No specification Chrome 2+, Safari 3.1+
Note
• In WebKit-based browsers this property is –webkit-mask-attachment.
mask-box-image
This property specifies an image to be used as a mask over the border box of an element.
Syntax
mask-box-image: [url() | function()] top right bottom left x_repeat y_repeat
where url is the location of the image, function is a function that generates an image, top,
right, bottom, and left specify the distances from the edges of the image, and x_repeat
and y_repeat can be set to repeat, stretch, or round to indicate how the image is
altered to fit the dimensions.

Example
<img src="main.jpg" style="-webkit-mask-box-image: url(mask.png) 10 50 50
10 stretch;">
Compatibility
No specification Chrome 2+, Safari 3.1+
Note
• In WebKit-based browsers this property is –webkit-mask-box-image.
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.

C h a p t e r 6 : C S S 3 P r o p r i e t a r y a n d E m e r g i n g F e a t u r e s R e f e r e n c e
683

PART II
C h a p t e r 6 : C S S 3 P r o p r i e t a r y a n d E m e r g i n g F e a t u r e s R e f e r e n c e
683
mask-clip
This property specifies whether the mask clips to the border, padding, or content.
Syntax
mask-clip: border | padding | content
where the mask clips to the specified option.
Example
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>mask-clip Example</title>
<style type="text/css">
div {height: 50px; width: 150px;
float: left;
margin: 20px; padding: 20px;

background-color: red;
font: bold xx-large;
border: 15px solid black;
-webkit-mask-image: url(starmask.png);
-webkit-mask-repeat: repeat;
-webkit-mask-size: 20px 20px;}
</style>
</head>
<body>
<div style="-webkit-mask-clip: content;">content</div>
<div style="-webkit-mask-clip: border;">border</div>
<div style="-webkit-mask-clip: padding;">padding</div>
</body>
</html>
ONLINE />Compatibility
No specification Chrome 2+, Safari 3.1+
Note
• In WebKit-based browsers this property is –webkit-mask-clip.
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.

684
P a r t I I : C o r e S t y l e

684
P a r t I I : C o r e S t y l e
mask-composite
This property specifies the compositing style for the mask.
Syntax
mask-composite: border | padding
where the default is border.

Example
<div style="height: 100px; width: 200px; background-color: red;
padding: 20px; border: 5px dashed black;
-webkit-mask-image: -webkit-gradient(linear, left top, left
bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
-webkit-mask-composite: padding;"></div>
Compatibility
No specification Chrome 2+, Safari 3.1+
Note
• In WebKit-based browsers this property is specified as –webkit-mask-composite.
mask-image
This property specifies the image to be used for the element’s mask.
Syntax
mask-image: url(image) | function
where function is a function that generates an image.
Example
<img src="tucker.jpg" width="200" height="133"
style="-webkit-mask-image: url(ovalmask.gif);">
ONLINE />Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.

C h a p t e r 6 : C S S 3 P r o p r i e t a r y a n d E m e r g i n g F e a t u r e s R e f e r e n c e
685

PART II
C h a p t e r 6 : C S S 3 P r o p r i e t a r y a n d E m e r g i n g F e a t u r e s R e f e r e n c e
685
Compatibility
No specification Chrome 2+, Safari 3.1+
Note
• In WebKit-based browsers this property is –webkit-mask-image.

mask-origin
This property specifies how the position of the mask should be calculated by setting the
origin relative to different locations within an element’s box.
Syntax
mask-origin: border | content | padding
where the mask will be anchored to the upper-left corner of the element’s border, content, or
padding based on the specified option.
Example
<div style="height: 100px; width: 200px;
background-color: red;
padding: 20px;
border: 5px dashed black;
-webkit-mask-image: -webkit-gradient(linear, left top, left bottom,
from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
-webkit-mask-origin: padding;
-webkit-mask-clip: padding;" >
</div>
Compatibility
No specification Chrome 3+, Safari 4+
Notes
• In WebKit-based browsers this property is –webkit-mask-origin.
• If
mask-origin is set to padding and mask-clip is set to border, it will act as if
a mask with alpha value 0 is over the border, therefore rendering it invisible.
mask-position
This property specifies the position of the mask.
Syntax
mask-position: xpos ypos
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.

686
P a r t I I : C o r e S t y l e

686
P a r t I I : C o r e S t y l e
where xpos and ypos are set according to the more specific mask-position-x and mask-
position-y
properties.
Examples
<img src="tucker.jpg" width="200" height="133"
class="masked" style="-webkit-mask-position: 10px 10px;">
<img src="tucker.jpg" width="200" height="133"
class="masked" style="-webkit-mask-position: right top;">
<img src="tucker.jpg" width="200" height="133"
class="masked" style="-webkit-mask-position: 50% 50%;">
ONLINE />Compatibility
No specification Chrome 2+, Safari 3.1+
Note
• In WebKit-based browsers this property is known as –webkit-mask-position.
mask-position-x
This property specifies the x-coordinate in the position of the mask.
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.

C h a p t e r 6 : C S S 3 P r o p r i e t a r y a n d E m e r g i n g F e a t u r e s R e f e r e n c e
687

PART II
C h a p t e r 6 : C S S 3 P r o p r i e t a r y a n d E m e r g i n g F e a t u r e s R e f e r e n c e
687
Syntax

mask-position-x: length | percentage | left | center | right
Example
<img src="example.jpg" style="-webkit-mask-image: url(mask.png);
-webkit-mask-repeat: no-repeat;
-webkit-mask-position-x: 180px;">
Compatibility
No specification Chrome 2+, Safari 3.1+
Note
• In WebKit-based browsers this property is known as –webkit-mask-position-x.
mask-position-y
This property specifies the y-coordinate in the position of the mask.
Syntax
mask-position-y: length | percentage | top | center | bottom
Example
<img src="example.jpg" style="-webkit-mask-image: url(mask.png);
-webkit-mask-repeat: no-repeat;
-webkit-mask-position-y: 160px;">
Compatibility
No specification Chrome 2+, Safari 3.1+
Note
• In WebKit-based browsers this property is known as –webkit-mask-position-y.
mask-repeat
This property specifies how the mask image will repeat.
Syntax
mask-repeat: repeat | repeat-x | repeat-y | no-repeat
where the default is repeat.
Examples
<img src="tucker.jpg" style="-webkit-mask-image: url(star.png);
-webkit-mask-repeat: repeat-x;">
<img src="tucker.jpg" style="-webkit-mask-image: url(star.png);

-webkit-mask-repeat: no-repeat;">
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.

688
P a r t I I : C o r e S t y l e

688
P a r t I I : C o r e S t y l e
ONLINE />Compatibility
No specification Chrome 2+, Safari 3.1+
Notes
• In WebKit-based browsers this property is known as –webkit-mask-repeat.
• If the value is not set to
repeat, any area that is not covered by the mask will be
treated as if there is a mask with an alpha value of 0 over it and that area will not
display.
mask-size
This property specifies the size of a mask.
Syntax
mask-size: length [ length]
where one length value indicates both the width and height and two length values indicate
the width first and then the height.
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.

C h a p t e r 6 : C S S 3 P r o p r i e t a r y a n d E m e r g i n g F e a t u r e s R e f e r e n c e
689

PART II
C h a p t e r 6 : C S S 3 P r o p r i e t a r y a n d E m e r g i n g F e a t u r e s R e f e r e n c e
689

Example
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>mask-size Example</title>
<style type="text/css">
img.masked {-webkit-mask-image: url(starmask3.png);}
</style>
</head>
<body>
<img src="tucker.jpg" width="200" height="133"
class="masked">
<img src="tucker.jpg" width="200" height="133"
class="masked" style="-webkit-mask-size: 10px;">
<img src="tucker.jpg" width="200" height="133"
class="masked" style="-webkit-mask-size: 50px 50px;">
<img src="tucker.jpg" width="200" height="133"
class="masked" style="-webkit-mask-size: 200px 133px;">
</body>
</html>
ONLINE />Compatibility
No specification Chrome 3+, Safari 4+
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.

690
P a r t I I : C o r e S t y l e

690
P a r t I I : C o r e S t y l e

Note
• In WebKit-based browsers this property is –webkit-mask-size.
opacity
This property specifies the transparency of an element.
Syntax
opacity: alphavalue | inherit
where alphavalue is a number ranging from 0.0, fully transparent, to 1.0, fully opaque.
Examples
#tng {opacity: 0.8; background-color: blue;}
#invisible {opacity: 0;}
#blam {opacity: 1;}
#ie2 {opacity: 0.7; filter: alpha(opacity=70); zoom: 1;}
Compatibility
CSS3 Chrome 1+, Firefox 1+, IE 4+ (using filter property), Opera 9+, Safari 1.2+
Note
• When using the filter property for Internet Explorer, make sure that the opaque
object that you will apply the effect to has layout, which is usually accomplished by
setting its size or position.
outline-offset
This property defines the offset from an element’s border and its outline.
Syntax
outline-offset: length | inherit
where length is any valid CSS length value used to move the outline away from the
element’s border. Negative values are supported and will put the outline within the
element’s border.
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.

C h a p t e r 6 : C S S 3 P r o p r i e t a r y a n d E m e r g i n g F e a t u r e s R e f e r e n c e
691

PART II
C h a p t e r 6 : C S S 3 P r o p r i e t a r y a n d E m e r g i n g F e a t u r e s R e f e r e n c e
691
Examples
#offset1 {outline: dashed 4px green; border: solid 10px red;
outline-offset: 15px;}
#offset2 {outline: dashed 4px green; border: solid 10px red;
outline-offset: -45px;}
Compatibility
CSS3 Firefox 1.5+, Opera 9.5+, Safari 1.2+
Note
• Before Firefox 1.5, Mozilla browsers supported the equivalent –moz-outline-
offset
property.
outline-radius
This property defines the rounding of the corners on an outline.
Syntax
outline-radius: lengths | inherit
where lengths is up to four valid CSS length or percentage values to round the corners of the
outline. When multiple values are used, they are applied starting with the top left and
proceeding to top right, bottom right, and finally bottom left. The values copy into the
locations opposite, similar to how margins and paddings are handled in CSS.
Examples
#radius1 {-moz-outline-radius: 20px;}
#radius2 {-moz-outline-radius: 20px 5px;}
#radius3 {-moz-outline-radius: 20px 60px 5px 45px;}
Compatibility
CSS3 speculative Firefox 3+
Notes
• This property is alluded to in CSS3 discussions, though it is not currently

documented. The discussion here is based upon the current implementation in
Mozilla-based browsers, which support it as –moz-outline-radius.
• Mozilla browsers also define
–moz-outline-radius-topleft, -moz-outline-
radius-topright
, -moz-outline-radius-bottomright, and –moz-outline-
radius-bottomleft
to set the corners individually.
overflow-style
This property allows a marquee to be used in the case of a text overflow.
Syntax
overflow-style: auto | marquee-block | marquee-line
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.

692
P a r t I I : C o r e S t y l e

692
P a r t I I : C o r e S t y l e
The initial value is auto, which allows the user agent to determine the scrolling effect. A
value of
marquee-line employs horizontal scrolling, and a value of marquee-block
employs vertical scrolling. The particular directions left to right or up and down will
depend on the text direction in the document.
Example
<p style="overflow: auto;
overflow-x:-webkit-marquee;
display:-wap-marquee;
overflow-style: marquee-line;
width: 100px;">

ABCDEFGHIJKLMNOPQRSTUVWXYZ
</p>
Compatibility
CSS3 Chrome 1+, Opera 8+, Safari 2+
Notes
• In Safari, it is necessary to set an element’s overflow-x or overflow-y to
-webkit-marquee to activate marquee-style functionality.
• In Opera, it is necessary to set an element’s
display to -wap-marquee to activate
marquee effects.
overflow-x
This property defines how content should behave when it exceeds the width of its enclosing
element.
Syntax
overflow-x: auto | hidden | scroll | visible
Example
<p style="overflow-x: scroll; width: 100px;">
ABCDEFGHIJKLMNOPQRSTUVWXYZ
</p>
Compatibility
CSS3 Chrome 2+, Firefox 1+, IE 4+, Opera 9.5+, Safari 3+
Notes
• This property is correctly written as –ms-overflow-x under IE 8 to show that it is
an extension.
• This is currently in the CSS3 specification and also supports values of
no-display
and no-content.
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.

C h a p t e r 6 : C S S 3 P r o p r i e t a r y a n d E m e r g i n g F e a t u r e s R e f e r e n c e

693

PART II
C h a p t e r 6 : C S S 3 P r o p r i e t a r y a n d E m e r g i n g F e a t u r e s R e f e r e n c e
693
overflow-y
This property defines how content should behave when it exceeds the height of its
enclosing element.
Syntax
overflow-y: auto | hidden | scroll | visible
Example
<p style="overflow-y: scroll; height: 25px; width: 50px;
background-color: #00f;">
ABC<br>
DEF<br>
GHI<br>
JKL<br>
MNO<br>
PQR<br>
STU<br>
VWXYZ </p>
Compatibility
CSS3 Chrome 2+, Firefox 1+, IE 4+, Opera 9.5+
Notes
• This property is correctly written as –ms-overflow-y under IE 8 to indicate it as an
extension.
• This is currently in the CSS3 specification and also supports values of
no-display
and no-content.
• Some Firefox versions put the scroll bar the wrong direction with this property.

perspective
This property is used to give a 3-D sense of depth to an element. Only the children of the
element are given the noted perspective, not the actual element itself.
Syntax
perspective: none | number
where number is set to the distance of the z=0 plane from the viewer. The default is none.
Examples
<div style="height:100px;width:180px;background-color:red;
-webkit-perspective:200;">Perspective set.<br><br>
<div style="height:50px;width:100px;background-color:blue;-webkit-
transform:rotateY(55deg);">
Child gains perspective.
</div>
</div>
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.

694
P a r t I I : C o r e S t y l e

694
P a r t I I : C o r e S t y l e
<div style="height:100px;width:180px;background-color:red;" >No perspective
set.
<div style="height:50px;width:100px;background-color:blue;-webkit-
transform:rotateY(55deg);">
No perspective used.
</div>
</div>
Compatibility
CSS3 Safari 4+

Notes
• WebKit supports this property as –webkit-perspective, though it is currently
only available in the iPhone and the development builds of Safari 4+ on Macs.
• This property only works in conjunction with another transform because it alters
the way the other transform acts.
perspective-origin
This property is used to set the x and y origins for the –webkit-perspective property.
Syntax
perspective-origin: percentage | length | left | center | right [percentage |
length | top | center | bottom ]
where the default value is 50% 50%.
Example
<div style="height:200px;width:200px;background-color:red;
-webkit-perspective:200;-webkit-perspective-origin:right bottom;">
Perspective set.
<div style="position: relative;left: 50px;top: 50px;height:50px;
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.

C h a p t e r 6 : C S S 3 P r o p r i e t a r y a n d E m e r g i n g F e a t u r e s R e f e r e n c e
695

PART II
C h a p t e r 6 : C S S 3 P r o p r i e t a r y a n d E m e r g i n g F e a t u r e s R e f e r e n c e
695
width:120px;background-color:blue;-webkit-transform:rotateY(55deg);">
Child gains perspective.
</div>
</div>
Compatibility
CSS3 Safari 4+

Notes
• WebKit supports this property as –webkit-perspective-origin, though it is
currently only available in the iPhone and the development builds of Safari 4+ on
Macs.
• This property only works in conjunction with the
–webkit-perspective property.
resize
This CSS3 property is used to define whether an element should be resized and, if so, upon
what axis.
Syntax
resize: both | horizontal | none | vertical
Examples
<div style="height: 100px;width: 100px;margin: 100px;border: 1px solid
black;overflow: auto;resize: both;">Resize both ways</div>
<form action="#" method="get">
<div><label>Username:
<input type="text" name="username" style="resize: horizontal;">
</label></div>
<div><label>Comments:
<textarea name="comments" style="resize: vertical;"> </textarea>
</label>
</div>
</form>
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.

696
P a r t I I : C o r e S t y l e

696
P a r t I I : C o r e S t y l e

The visual presentation of how elements should be resized is not set, but so far it appears
that supporting browsers present a bottom-right resize corner indication.
Compatibility
CSS3 Chrome 3+, Safari 3+
Notes
• The property applies only to elements that do not have an overflow value of
visible. In general, this means that often you may set overflow: auto on
elements you wish to resize, as visible is the common value. Form fields, of
course, do not have that value and require no extra property.
• This property is commonly used on
<textarea> tags.
ruby-align
This property defines the alignment of Ruby text as defined by a <rt> tag, in relation to
base text defined by a <ruby> tag.
Syntax
ruby-align: auto | center | distribute-letter | distribute-space | left |
line-edge | right
The default value of auto leaves it to the browser to align the Ruby text. A value of center
centers the Ruby text in the center of the text below if smaller or centers the reading guide
text above if larger. The distribute-letter and distribute-space values distribute the
reading guide text evenly across the text below, adding space in the case of distribute-
space
. Values of left and right align the reading guide text above to the left or right when
it is smaller than the base text. A value of line-edge normally centers the reading guide text
unless the text is at the end of line where in that case it lines it up to the edge instead.
Examples
<p>123<ruby style="ruby-align: left;">日本語
<rp>(</rp><rt>にほんご</rt><rp>)</rp></ruby>456</p>
<p>123<ruby style="ruby-align: right;">日本語<rp>(</rp><rt>にほんご</
rt><rp>)</rp></ruby>456</p>

<p>123<ruby style="ruby-align: center;">日本語 <rp>(</rp><rt>にほんご</
rt><rp>)</rp></ruby>456</p>
<p>123<ruby style="ruby-align: distribute;">日本語<rp>(</rp><rt>にほんご</
rt><rp>)</rp></ruby>456</p>
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.

C h a p t e r 6 : C S S 3 P r o p r i e t a r y a n d E m e r g i n g F e a t u r e s R e f e r e n c e
697

PART II
C h a p t e r 6 : C S S 3 P r o p r i e t a r y a n d E m e r g i n g F e a t u r e s R e f e r e n c e
697
Compatibility
CSS3 IE 5+
Note
• This property would be correctly written as –ms-ruby-align under IE 8 to
indicate it is an extension, but for some reason it is not indicated as such in the
documentation.
ruby-overhang
This property defines the overhang of Ruby text as defined by a <rt> tag, in relation to base
text defined by a <ruby> tag in regard to adjacent characters.
Syntax
ruby-overhang: auto | none | whitespace
Examples
<p>123<ruby style="ruby-overhang: whitespace;">
日本語 <rp>(</rp><rt>にほんご</rt><rp>)</rp>
</ruby>456</p>
<p>123<ruby style="ruby-overhang: auto;">
日本語 <rp>(</rp><rt>にほんご</rt><rp>)</rp>
</ruby>456</p>

<p>123<ruby style="ruby-overhang: none;">
日本語 <rp>(</rp><rt>にほんご</rt><rp>)</rp>
</ruby>456</p>
Compatibility
CSS3 IE 5+
Notes
• This property would be correctly written as –ms-ruby-overhang under IE 8, but
for some reason the documentation does not indicate this.
• The positioning can be quite subtle.
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.

698
P a r t I I : C o r e S t y l e

698
P a r t I I : C o r e S t y l e
ruby-position
This property defines the position of ruby text as defined by a <rt> tag, in relation to base
text defined by a <ruby> tag.
Syntax
ruby-position: above | inline
where the common value is above and a value of inline runs the guide text after the item.
Examples
<p>ruby-position:above <ruby style="ruby-position: above;">日本語
<rp>(</rp><rt>にほんご</rt><rp>)</rp></ruby></p>
<p>ruby-position: inline <ruby style="ruby-position: inline;">日本語
<rp>(</rp><rt>にほんご</rt><rp>)</rp></ruby></p>
Compatibility
CSS3 IE 5+
Note

• This property would be correctly written as –ms-ruby-position under IE 8, but
for some reason the documentation does not indicate this.
scrollbar-3dlight-color
This property is used to define a color for the top and left edges of the scroll box in
a scroll bar.
Syntax
scrollbar-3dlight-color: color
where color is a standard CSS color value like #f00, red, and so on.
Example
<! space intentional for scroll bars >
<form>
<div>
<textarea rows="1" cols="20" style="scrollbar-3dlight-color: red;">


</textarea>
</div>
</form>
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.

C h a p t e r 6 : C S S 3 P r o p r i e t a r y a n d E m e r g i n g F e a t u r e s R e f e r e n c e
699

PART II
C h a p t e r 6 : C S S 3 P r o p r i e t a r y a n d E m e r g i n g F e a t u r e s R e f e r e n c e
699
Compatibility
No specification IE 5.5+, Opera 9.5+
Notes
• This property is correctly written as –ms-scrollbar-3dlight-color under IE 8

to show that it is an extension.
• A mention in the CSS3 UI specification says that this type of feature may be
considered later.
scrollbar-arrow-color
This property is used to set the color of the arrow icon within a scroll bar.
Syntax
scrollbar-arrow-color: color
where color is a standard CSS color value like #f00, red, and so on.
Example
<! space intentional for scroll bars >
<form action ="#" method="get">
<div>
<textarea rows="1" cols="20" style="scrollbar-arrow-color: red;">


</textarea>
</div>
</form>
Compatibility
No specification IE 5.5+, Opera 9.5+
Notes
• This property is correctly written as –ms-scrollbar-arrow-color under IE 8 to
show that it is an extension.
• The arrows will not color until the scroll region is active and scrolling may be
needed.
• A mention in the CSS3 UI specification says that this type of feature may be
considered later.
scrollbar-base-color
This property sets the base color for a scroll bar, which will include the scroll box, track, and
scroll arrows.

Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.

700
P a r t I I : C o r e S t y l e

700
P a r t I I : C o r e S t y l e
Syntax
scrollbar-base-color: color
where color is a standard CSS color value like #f00, red, and so on.
Example
<! space intentional for scroll bars >
<form action="#" method="get">
<div>
<textarea rows="1" cols="20" style="scrollbar-base-color: red;">


</textarea>
</div>
</form>
Compatibility
No specification IE 5.5+, Opera 9.5+
Notes
• This property is correctly written as –ms-scrollbar-base-color under IE 8 to
show that it is an extension.
• Setting this property to define a base color and then overriding individual scroll
pieces may be useful.
• A mention in the CSS3 UI specification says that this type of feature may be
considered later.
scrollbar-darkshadow-color

This property defines a shadow color for the right and bottom edges of a scroll bar.
Syntax
scrollbar-darkshadow-color: color
where color is a standard CSS color value like #f00, red, and so on.
Example
<form action="#" method="get">
<div>
<textarea rows="10" cols="20" style="scrollbar-darkshadow-color: red;">


</textarea>
</div>
</form>
Compatibility
No specification IE 5.5+, Opera 9.5+
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.