CSS3 is here to make our lives easier as web designers and developers. While it’s not something we can always rely on heavily for layout purposes just yet, we can use it to enhance certain aspects of our designs by spending a considerably less amount of time doing so.
However, CSS3 has not been created for the sole purpose of making it easier and quicker to create a website but also so we can create much better sites than we ever could with CSS before. Here are a few examples…
Direct link: Simulate Realism with CSS3
ez-css is a different kind of CSS framework. Authors are not bound to a “grid”. Plus, columns and gutters can be of any width.
ez-css works by forcing the final element in the HTML flow to become a block formatting context (using “hasLayout” for Internet Explorer lt 8)…
Direct link: EZ-CSS: An easy to use, lightweight, CSS framework
The CSS3 trend is getting more and more popular. In fact CSS3 new features open a lot of new possibilities. However, don’t get too excited so soon because it is not fully supported by all browsers yet. But this doesn’t mean you shouldn’t use it at all. So, when should you use CSS3 new features? Well, continue on this post to see some excellent examples…
Direct link: CSS3 Examples and Best Practices
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…
Direct link: CSS Rounded Corners In All Browsers With No Images
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…
Direct link: The Hidden Power of border-radius
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…
Direct link: CSS Bar Charts – Styling Data With CSS3 and Progressive Enhancement
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…
Direct link: Forgotten CSS selectors
There isn’t a lot of information to be found about the :not() selector. The specifications only offer 3 lines of text and a couple of examples. So lets see what it can do!
Direct link: The CSS3 :not() selector
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…
Direct link: iPhone CSS Tips for Building iPhone Websites
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…
Direct link: Multiple Backgrounds and CSS Gradients