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:
- Webkit (Safari/Chrome):
-webkit-(note: Some webkit prefixes only work in Safari, and not Chrome)
Drop ShadowsThe drop shadow effect accepts multiple values. First is simply the color of the shadow. It will accept four
lengthvalues, 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
insetkeyword that will create an inset shadow.
box-shadow: #333 3px 3px 4px; -moz-box-shadow: #333 3px 3px 4px;
transformstyle, you can make elements appear to “grow” when hovered. With a value above
scale, the element will increase in size. On the other hand, a value below
1will 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);
-webkit-box-shadow: #333 3px 3px 4px;