Posts in the "CSS3" category
Text-shadow is a CSS3 property (actually, it was introduced a while ago but removed from CSS2.1) that I am seeing more and more on websites these days. It works quite nicely (if used in moderation) and provides a design enhancement for those browsers that support it (Firefox, Opera, Safari, Chrome). Instead of writing a tutorial, like I normally do with CSS3, I thought I’d share a few useful links that provide more information about text-shadow.
The CSS3 box-shadow property is a new way of adding drop shadow effects just by editing a style sheet. There’s no need to use Photoshop! Just open your style sheet in a text editor and away you go. Well, it’s almost as simple as that but not quite. There’s one caveat and that is browser support. The box-shadow property is supported by Firefox and Safari, using their proprietary
-webkit- prefixes, but it’s not supported by Internet Explorer (or other browsers). For this reason, I think the box-shadow property is ideal for adding image link hover effects where the shadow is not absolutely essential but where it provides a nice style enhancement (enrichment) for modern browsers.
There have been several articles recently that describe advanced CSS methods, usually part of the CSS3 specification (CSS3 Info), and how these push the boundaries of what we can do with CSS. There are some great examples including:
- What You Need To Know About Behavioral CSS
- CSS Animations
- Going Nuts with CSS Transitions
- Cleaner Code with CSS3 Selectors
There’s a good article called Taming Advanced CSS Selectors by Inayaili de León on the Smashing Magazine website. The article gives a good summary of CSS selectors that can be used to target elements in your web page code without adding class names to each element. This is a good way of streamlining your code and using more modern practices.
Of course, not every browser supports these selectors but I encourage you to try them out and experiment a bit. In any case, by looking at your website visitor statistics, you may find that most of your visitors are using browsers that support these selectors. Even if not, you can still use these methods if the styles that they confer are not an absolutely critical part of your website. By using them, you’ll be providing visitors with more modern browsers with an enhanced experience.
Jonathan Snook published an interesting blog post recently where he described text rotation with CSS. The post was inspired by another article where a date display technique with sprites was described. Even though the latter method does not actually rotate the text [it uses an image replacement method], the effect is still pretty cool.
Both examples show great use of CSS to do something that is slightly different.
PS: Just in case you were wondering, the CSS3 transform method in the Snook article can be used to rotate images as well [although the Basic Image filter that gets this to work in Internet Explorer can only rotate by 90° increments].
- Adobe Air
- Quick Tips
- Search engines
- Web design
- Web development
- Web standards
- Website review
Shopify makes it easy to open an online store by providing all the tools and help you need. Click here to try it for free!
- richard on CSS Tip: Placing text on top of an image
- David on Making circles with CSS3 border-radius
- Christian Connett on Why I'm using Brackets as code editor
- Carlo on LESS or Sass or neither?
- Clive Walker on WordPress Tip: Remove Items from the Admin Menu
- Iain on WordPress Tip: Remove Items from the Admin Menu
- Davey on How to create drop caps with CSS (and CSS3)
- Clive Walker on Why I'm using Brackets as code editor