The box-shadow property of CSS3 allows us to add a highly customizable drop shadows to elements of our site without using images. We can add a drop shadow to almost anything – from images to buttons to div tags. The box-shadow property is supported by all the usual standards-compliant browsers (Firefox, Safari, Chrome, Opera, etc.). [...]
BLOG > Tag Archives: CSS
Transparency with CSS3
Jun
09
Prior to the release of the RGBA element of CSS3, web designers had to use transparent background images and hacks to provide the illusion of opacity. With the RGBA element, we can now create opacity purely through CSS. The syntax looks like this: 1 2 3 div { background: rgba(94, 165, 168, 0.7); } Values [...]
Round Corners with CSS3
Jun
08
The border-radius element can be used to create round corners on box-items such as navigation tabs, modules, input fields, etc. Though CSS3 is still in the works, the border-radius element is already being used widely today. For example, Twitter uses the border-radius element throughout its site. For Firefox, we create round corners using -moz-border-radius. For [...]
Custom Fonts with @font-face
Jun
02
Up until recently, there was a short list of “safe” fonts for web designers to use when styling web pages. These included Arial, Helvetica, Verdana, Georgia, Comic Sans (argh!), etc. Using the @font-face CSS element, we can now include any licensed TrueType (.ttf) or OpenType (.otf) font!