Home arrow DHTML arrow Page 2 - Marks, Orphans, and More Style Sheet Properties
DHTML

Marks, Orphans, and More Style Sheet Properties


If you're looking for a thorough resource on style sheet properties, you've come to the right place. This article, the seventh part of a series, covers marks, orphans, and more. It is excerpted from chapter four of Dynamic HTML: The Definitive Reference, Third Edition, written by Danny Goodman (O'Reilly; ISBN: 0596527403). Copyright 2006 O'Reilly Media, Inc. All rights reserved. Used with permission from the publisher. Available from booksellers or direct from O'Reilly Media.

Author Info:
By: O'Reilly Media
Rating: 5 stars5 stars5 stars5 stars5 stars / 4
October 11, 2007
TABLE OF CONTENTS:
  1. · Marks, Orphans, and More Style Sheet Properties
  2. · Moz border radius
  3. · Orphans
  4. · Outline-offset

print this article
SEARCH DEVARTICLES

Marks, Orphans, and More Style Sheet Properties - Moz border radius
(Page 2 of 4 )

-moz-border-radius
IE n/a NN n/a Moz all Saf n/a Op n/a CSS n/a

Inherited: No

This is a shortcut property that lets you set the radius of one or more border corners. The number of values determines which sides receive the assigned colors. Note that this value arrangement differs from the preliminary CSS3 border-radius property value setup.

CSS Syntax

-moz-border-radius: radius {1,4}

Value

A border corner radius can be defined by a length measure, signifying the length of the radius of the imaginary circle from which the rounded corner comes. The larger the value, the more rounded the corner becomes. For screen display, the pixel length unit is most appropriate. You may also use a percentage value in the range between 0% (no rounding) to 50% (maximum rounding). The rounded border does not crop content of the element.

This property accepts one, two, three, or four radius values, depending on how many and which corners you want to make round. Value quantities and positions are interpreted as shown in the following table.

Number of values Effect
1 All four corners set to same value
2 Top left and bottom right corners set to the first value, top right and bottom left corners set to the second value
3 Top left corner set to first value, top right and bottom left corners set to second value, bottom right corner set to third value
4 Top left, top right, bottom right, and bottom left corners set, respectively

Initial Value       0

Example

div.hotbox {-moz-border-radius: 20px} div.circle {-moz-border-radius: 50%}

Applies To                 All elements.

-moz-border-radius-bottomleft,
-moz-border-radius-bottomright,
-moz-border-radius-topleft,
-moz-border-radius-topright
IE n/a NN n/a Moz all Saf n/a Op n/a CSS n/a

Inherited: No

Controls the radius of one border corner. Note that the value arrangement differs from the preliminary CSS3 corner-specific border-radius property value setup.

-moz-opacity

CSS Syntax

-moz-border-radius-bottomleft: radius
-moz-border-radius-bottomright: radius
-moz-border-radius-topleft: radius
-moz-border-radius-topright:
radius

Value                  See -moz-border-radius.

Initial Value       0

Example

div.bizarro {-moz-border-radius-topright:10%; -moz-border-radius-bottomright:10% }

Applies To            All elements.

-moz-opacity
IE n/a NN n/a Moz all Saf n/a Op n/a CSS n/a

Inherited: No

Controls the level of opacity of the element. The lower the value, the more transparent the element becomes. This is a proprietary Mozilla property that was joined by the CSS3 opacity property in Mozilla 1.7.2.

CSS Syntax

-moz-opacity: alphaValue

Value

The level of opacity is determined by a floating-point number between 0.0 and 1.0. A completely opaque rendering occurs at a value of 1.0. Percentage values supported in earliest Mozilla versions have been dropped.

Initial Value          1

Example        div#watermark {-moz-opacity: 0.4}

Applies To             All elements .

Object Model Reference

[window.]document.getElementById("elementID").style.MozOpacity

opacity
IE n/a NN n/a Moz 1.7.2 Saf 1.2 Op 9 CSS 3

Inherited: No

Controls the level of opacity of the element. The lower the value, the more transparent the element becomes. Although the property is technically not inherited, the opacity of all child elements of a container are governed by the setting of the parent container.

CSS Syntax

opacity: alphaValue

Value

The level of opacity is determined by a floating-point number between 0.0 and 1.0. A completely opaque rendering occurs at a value of 1.0.

Initial Value          1 

Example        div#watermark {opacity: 0.35}

Applies To             All elements.

Object Model Reference

[window.]document.getElementById("elementID").style.opacity


blog comments powered by Disqus
DHTML ARTICLES

- Text-Justify, Volume, and Other Style Sheet ...
- Ruby-Position, Size, and Other Style Sheet P...
- Padding, Pages, and More Style Sheet Propert...
- Marks, Orphans, and More Style Sheet Propert...
- Layouts, Margins, and Other Style Sheet Prop...
- Floats, Fonts, and Other Style Sheet Propert...
- Color, Filters, and Other Style Sheet Proper...
- Borders and More with Style Sheets
- Learning Style Sheet Properties
- Style Sheet Property Reference
- Completing a Noisy Image Application
- An Object-Based Approach to Building Noisy I...
- A Basic Method for Building Noisy Images
- Adding More Features to Sliders with the Scr...
- Using Sliders with the Scriptaculous Framewo...

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 

Developer Shed Affiliates

 




© 2003-2017 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials