Modern browsers have supported CSS3 elements for some time now. Firefox, Safari, Chrome, and Opera are doing a great job of bringing the glory of CSS3 to our web pages: round corners, drop shadows, gradients, and more. Internet Explorer? Version 9 promises to support CSS3 widely. Unfortunately, versions of Internet Explorer all the way up [...]
BLOG > Tag Archives: CSS3
Drop shadows with CSS3
Jun
09
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.). [...]
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!