SydneyFX – A Web Designer Blog

Did you know that you can use CSS to create text shadows? Well I think it’s a pretty cool thing that CSS allows you to do if you just want to give your page headings a subtle lift instead of just a boring flat text heading. So why not just use a graphic to give the same effect? Well it’s pretty common knowledge that text heading are better for search engines and can easily be tagged with the appropriate html so using CSS to create the subtle shadow is a win-win for you and your site users.

The way it works is by applying the property text-shadow to your selector ie: h1. Here is a you could write your CSS.

h1 {   color: black;

   text-shadow: #ccc 2px 0.2em 3px;

}

The values in the text shadow property example above are #ccc which defines the colour of the shadow, 2px determines how deep the depth of shadow, 0.2em defines how far right (or left using negative values) the shadow will be, and the 3px defines the amount of blur to be applied.

Here is a sample of how text-shadow looks providing your browser is capable of rendering the text-shadow property. Firefox, Opera & IE6 & 7 all don’t render the text-shadow property, however Safari for Windows & Mac work great.

This would produce a nice drop shadow on your text heading just giving to give you the effect that your headings have a little depth to them. The only downside to the text-shadow property is that it doesn’t work on browsers that aren’t CSS2 compatible but we should be seeing more of this kind of thing as browsers improve and add more CSS functionality.

CSS CSS

I’ve always enjoyed reading books that challenge your thinking and motivate you to be better at what you do. One area of web design I really have a passion to improve on is CSS or Cascading Style Sheets.

Recently I purchased Transcending CSS by Andy Clarke. Andy has been involved in web design for over ten years, runs his own design studio and contributes in many web standards workshops and conferences all around the world.

Transcending CSS by Andy Clarke

I really think Andy has created a excellent book which is very motivating and inspirational. This book is really well presented with beautiful images inspiring your design thoughts, challenges you to create cutting edge CSS layouts with accessibility and degrading gracefully with older browsers with less CSS support, challenges you not to use hacks and filters in your CSS code providing practical alternatives, and creates an enthusiasm to create better websites than you have ever done before regardless of your skill level.

You will also learn to truly separate visual design from layout and use the power of CSS to create rich semantically structured design that conforms to web standards. Transcending CSS gives you practical processes to streamline your design time and implement time saving techniques developed by professionals in the industry in a real studio environment.

Not really a book for beginners who are still working with table layouts or wanting to learn CSS, but those who have some basic knowledge of CSS and have designed websites, or for advanced CSS users who want to set higher standards in their work.

If your passionate about CSS then you can’t go past this book. I already have a few books on CSS in my bookshelf and this is my pick of the bunch to date.

Edit: As of the 1st of January 2007 this book was listed as No 6 on Amazon’s bestselling book about Scripting and Programming.

CSS, Robert Mirabito, Web Design Books , CSS, Tech Books

I found a great article that explains issues related with inline and block level elements using CSS for list items however this knowlege can be applied to CSS inline and block level elements in general. A great css article by Russ Weakley over at Max Design.

CSS, Robert Mirabito