Posts in the "CSS" category

Rotate text with CSS

Posted in on 30 July 2009 | Comments [1]

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].

Technorati : ,

Web fonts make progress

Posted in on 21 July 2009 | Comments [1]

There has been quite a lot of progress on the subject of web fonts in recent months. Rather than sticking to a core set of web-safe fonts, web designers might soon be able to use a much wider range, by choosing one of several new methods. Here’s a short summary of recent developments.

The CSS method that seems to have sparked the recent progress is the @font-face rule which is also described here on CSS3.info and in an article on A List Apart. There’s quite a few legal and licensing issues with the use of fonts in this way but browser support for @font-face is increasing.

Read more ...

Handcrafted CSS - a new book from that Bulletproof Web Design guy

Posted in on 3 July 2009 | Comments [1]

Handcrafted CSS Handcrafted CSS: More Bulletproof Web Design by Dan Cederholm and Ethan Marcotte is a new book [and DVD] due in August. As you can tell from the title, this is a follow-up book to Bulletproof Web Design and it uses a website case study to show you how to apply some modern CSS techniques. A full description of the book and authors is on the Handcrafted CSS website

I have a copy of Bulletproof Web Design and it’s a great read. It really taught me to think about what I am doing with my web design, HTML and CSS coding. If the new book is anything like that, I’ll be buying a copy! Handcrafted CSS is available as a paperback and in hardcover from Amazon.

Related: The second edition of CSS Mastery: Advanced Web Standards Solutions by Andy Budd et al is also due for release in August.

Aligning your CSS properties .... and using a few different ones

Posted in on 24 June 2009 | Comments [2]

Well, that was a slight surprise. I looked at the visitors statistics for this blog yesterday and discovered that more than 70% of you are not using Internet Explorer. As a result, I have decided to ‘align’ the CSS properties that I use with the browser stats on this blog – and start using some CSS properties that I would not normally use. By this, I mean properties that are supported by Firefox and Safari, for example, but perhaps not by IE. Users with browsers that do not support these properties will still see the website perfectly fine but will not see some of the styles that are produced by these ‘more advanced’ properties. After all, websites should not look exactly the same in all browsers.

I have started the process by sprinkling in some border-radius loveliness around the site. The border-radius CSS3 property allows you to add borders with rounded corners to elements by specifying a few simple rules in your style sheet. If you have a background colour on the element but no border you will get a rounded corner box. I will describe this in more detail in a later post but here’s a nice article that explains border-radius.

This is an example paragraph with the border radius property applied. If you are viewing this with Firefox and Safari, you will see that it has a pale green background with rounded corners. If using Internet Explorer, you will see straight edges.

Using these properties gives me a chance to experiment a bit with some newer CSS features that I’m sure will become mainstream. In this case, it also means that I can implement rounded corners in a few lines with minimal effort. Result!

Technorati :

Clearing floats with the overflow property

Posted in on 18 June 2009 | Comments [3]

Using the float property is a fundamental part of the tools that we use as web designers/developers when wrangling with CSS. Floating an image is probably one of the most common tasks when we want to align the image either left or right within a containing block [div or paragraph]. However, use of the float property comes with its own problems and chief amongst these is that often we need to ‘clear the float’ so that other elements [often the element that contains the floated element] behave in the way that we want. Here’s a method I have used recently.

Read more ...