Firefox CSS Magic

By Jeff Starr on Sunday, November 12, 2006 — 12 Responses metadata

Post #236 categorized as Presentation, last updated on Apr 20, 2008
Tagged with attribute, css, elements, firefox, tips, tricks

Consider this post an evolving receptacle for Firefox-specific CSS tricks.

Change the color of highlighted text

*::-moz-selection {
   background: #FF3C00; /* the background color of the highlight */
   color: #FFF; /* the color of the text within the highlight */
}

Change the opacity of an element

div#division { /* choose either attribute */
   -moz-opacity: 0.99; /* possible values: 0-1 */
   -moz-opacity: 99%; /* possible values: 0%-99% */
}

Control item selection of an element

div#division { /* choose one of the following values */
   -moz-user-select: none; /* no content within the element may be selected */
   -moz-user-select: all; /* contents may be selected only as a whole */
   -moz-user-select: text; /* [default value] only text may be selected */
   -moz-user-select: toggle; /* all contents of the element are selected */
   -moz-user-select: inhereit; /* inherits user-select value from parent element */
   -moz-user-select: element; /* elements may be selected one at a time */
   -moz-user-select: elements; /* multiple elements may be selected at the same time */
}

Round the corners of elements

div#division { /* choose one of the following values */
   -moz-border-radius: inherit; /* inherits border-radius value from parent element */
   -moz-border-radius: 7px; /* length/unit values indicate corner/border radius */
   -moz-border-radius: 70%; /* percentage values indicate relative corner radius */
}

Note that the -moz-border-radius property may be expressed as to target specific corner(s):

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

Further, the following rule consolidates these four properties into one:

-moz-border-radius: 7px 3px 7px 3px;

Add an outline to an element

div#division, h1 { /* choose one of the following values */
   -moz-outline-width: inherit; /* inherits moz-outline value from parent element */
   -moz-outline-width: medium; /* possible values: thin, medium, thick */
   -moz-outline-width: 7px; /* specifies outline width via an explicit length/unit */
}

Reverse item order in elements

div#division { /* choose one of the following values */
   -moz-box-direction: normal; /* items displayed top to bottom and left to right */
   -moz-box-direction: reverse; /* items displayed bottom to top and right to left */
}

Add a multi-colored, multi-layered border to an element

This nifty CSS property adds a border to an element that is any number of pixels in width. Each pixel-width of the border may display with a unique, user-specified color.

div#divisions { /* spcifies a border along with a uniform color for non-Moz browsers */
   border: 3px solid #333; /* if only two moz-border colors are defined, the third will be this color */
}
div#divisions { /* choose on of the following values */
   -moz-border-colors: inherit; /* inherits border-colors value from parent element */
   -moz-border-colors: none; /* [default value] no color-striping is applied */
   -moz-border-colors: red white blue; /* indicates color values from outside to inside */
   -moz-border-colors: #333 #777 #999; /* indicates color values from outside to inside */
   -moz-border-colors: ThreeDDarkShadow ThreeDShadow transparent; /* named values also apply */
}

Further, -moz-border-color property may be segregated as follows:

div#divisions { /* use any/all of the following attributes */
   -moz-border-top-colors: #333 #777 #999 #FFF;
   -moz-border-right-colors: #333 #777 #999 #FFF;
   -moz-border-bottom-colors: #000 #999 #CCC #DDD;
   -moz-border-left-colors: #000 #999 #CCC #DDD;
}

Subscribe to Perishable Press

Toggle Post Options 30034 visits