CSS3 Dropdown Menu

A Mac-like multi-level dropdown menu that I’ve created using border-radius, box-shadow, and text-shadow. It renders perfect on Firefox, Safari and Chrome. The dropdown also works on non-CSS3 compitable browsers such as IE7+, but the rounded corners and shadow will not be rendered…

VN:F [1.9.22_1171]
Rating: +1 (from 1 vote)

Understanding CSS3 and CSS2.1 Border Properties

Even before CSS3 introduced a cornucopia of new border properties, CSS2.1 provided plenty of great functionality, enabling designers to style and enhance borders in many different ways. But now with the many new border properties available with CSS3, much more is possible, including everything from background border images, asymmetrical border radii, border transformations, custom fitting, and much more. While not every browser fully supports all of these new stylistic possibilities, we can practice progressive enhancement to create beautiful, well-styled borders for modern browsers while supporting the dinosaurs with suitable fallback styles…

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

Why You Should Deeply Nest Your CSS Selectors

Most developers, even experienced developers, don’t understand the value of deeply nesting CSS selectors. Although writing the same selectors over and over might seem redundant, it’s worth the extra effort. Your code will be better organized, easier to read, and more maintainable…

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

Simulate Realism with CSS3

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…

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

EZ-CSS: An easy to use, lightweight, CSS framework

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)…

VN:F [1.9.22_1171]
Rating: +1 (from 1 vote)

CSS3 Examples and Best Practices

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…

VN:F [1.9.22_1171]
Rating: +1 (from 1 vote)

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)