CSS Rounded Corners In All Browsers With No Images

In this article we’ll walk through getting rounded corners working in all browsers. Firefox, Safari and Chrome are easy with the border-radius property, but we’ll have to jump through some extra hoops to get it working in IE and Opera.

After only a few compromises, we will have CSS rounded corners working in all browsers, and without using any images…

VN:F [1.9.22_1171]
Rating: +3 (from 7 votes)

The Hidden Power of border-radius

So hopefully after reading – Understanding CSS – Padding, Positioning and CSS3 – you understand the basics of CSS and have been experimenting with other properties. It is important to remember that some properties will allow you to achieve effects that aren’t necessarily stated. In this post we will explore the property border-radius and how it can be used to create circles, semi-cricles and quarter-circles. It also has the potential to produce some terrific designs using just CSS – no images…

VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

CSS Bar Charts – Styling Data With CSS3 and Progressive Enhancement

Bar charts in CSS are neither very new, or very difficult. Using some pretty basic styling you can force lists etc into resembling graphs and charts fairly easily. Such charts, in their most basic form, work perfectly well in displaying and presenting the data they represent. However, using some rich CSS3 and progressive enhancement, you can really start pushing the display and presentation of these normally boring documents to the next level. They are also an ideal way in which to demonstrate the power and ability of progressive enhancement…

VN:F [1.9.22_1171]
Rating: +2 (from 2 votes)

Forgotten CSS selectors

Anyone who has been using CSS for any length of time has probably been frustrated by the lack of selector support in Internet Explorer 6. There are quite a lot of cases where a CSS 2.1 selector will let you target elements in all other relevant browsers, but where you, if you want it to work in IE 6, have to add a class or id attribute to the HTML. Well, the market share of IE 6 is now finally at a level where we as developers can say that a site “supporting” IE 6 does not mean “looking pixel perfect”. Fortunately more and more clients understand this as well. IE 7 has been out for well over three years and IE 9 is on the horizon, so I think it’s time to revive those CSS selectors that you never got to use just because IE 6 doesn’t understand them. Here are brief explanations of some of the most useful “forgotten” CSS 2.1 selectors…

VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

iPhone CSS Tips for Building iPhone Websites

With the rapid rise in mobile browsers, it has probably never been more important to ensure your sites can be handled on these platforms. By far one of the most popular such browsers is Mobile Safari on the iPhone – this is one of the easiest browsers to develop for: it runs on Webkit (meaning a lot of rich CSS3 support) and it’s only ever on one resolution and on one OS.

The practical upshot of this is that you need to do no cross-browser testing, and can use all the CSS3 you like. This post will show you some of the basics of developing and designing websites for the iPhone and Mobile Safari…

VN:F [1.9.22_1171]
Rating: +2 (from 2 votes)

Multiple Backgrounds and CSS Gradients

CSS3 features are making their way into the various browsers and while many are holding off on implementing them, there are those who are venturing ahead and likely running into a world of interesting quirks across the various platforms.

Two such features that I have been having the pleasure of enjoying are the use of multiple backgrounds and CSS gradients. I’m covering both features because multiple backgrounds by itself is simple enough, as are CSS gradients, but combining the two is where things get interesting…

VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

Use CSS3 to Create a Dynamic Stack of Index Cards

Recently we hear a lot about CSS3 and its features and even though there are already some web sites out there that take advantage of some of the CSS3 features including DesignLovr we hardly ever see the full potential of what can be achieved with CSS3.Today we’re going to take a step into that direction and discover some of the possibilities CSS3 gives us.We will create a dynamic stack of index cards solely with HTML and CSS3 and use such CSS3 features as transform and transition for the dynamic effects and @font-face, box-shadow and border-radius for the styling…

VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

10 Tips for Better Print Style Sheets

Print style sheets have been somewhat forgotten, and yet they remain important all the same. Many people print out articles to read while traveling or when they have no access to the Internet.

Print style sheets have definite benefits. For example, reading on paper is less tiring on the eyes than reading on screen.

Also, following tutorials is easier if you have one next to you, with your code editor open on the screen; that way, you don’t have to switch windows every time to look something up.

In this article we’ll point out 10 easy tips that will help you create better print style sheets.

VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)