If you aren’t aware of the browser extensions, these are CSS styles with a vendor specific prefix. Since CSS3 is not fully supported yet, we must use these extensions. They are as follows:
- Mozilla/Firefox/Gecko:
-moz-
- Webkit (Safari/Chrome):
-webkit-
(note: Some webkit prefixes only work in Safari, and not Chrome)
Drop Shadows
The drop shadow effect accepts multiple values. First is simply the color of the shadow. It will accept fourlength
values, and the first two are the x (horizontal) offset and the y (vertical) offset. The next value is the amount of blur added to the shadow. The fourth and final value is the spread amount of the blur. Box shadow will also accept an inset
keyword that will create an inset shadow.box-shadow: #333 3px 3px 4px; -moz-box-shadow: #333 3px 3px 4px;
Transform
With thetransform
style, you can make elements appear to “grow” when hovered. With a value above 1
added to scale
, the element will increase in size. On the other hand, a value below 1
will cause the element to decrease in size. Along with scale
, their are many different transforms available to use. Visit Firefox’s developer page to see what else you can use.-moz-transform: scale(1.15); -webkit-transform: scale(1.15);
Transform Demo:
-webkit-box-shadow: #333 3px 3px 4px;