Essential CSS/HTML Lists Styling Techniques

Certain elements in HTML lend themselves to many situations when marking up a website, one of the more useful of these elements is the HTML list. Using lists, a developer can markup horizontal navigation, dropdown navigation, a list of links, and even scrolling content panels with the help of Javascript. These features can help developers build new sites and applications as well as integrate new content into existing applications…

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

Fixed Positioning in Internet Explorer 6

Fixed positioning has always been a nuisance for web designers because of the lack of support for it in Internet Explorer 6, but I've come up with a solution that allows for cross-browser fixed positioning that doesn't come at the large costs that other techniques result in. If you've been on the hunt for a way to get elements with position: fixed; to work properly in Internet Explorer 6, undoubtedly you've noticed that most methods come at the expense of absolute positioning or resorting to scripting. This does not…

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

CSS Absolute Positioning: Create a Fancy Link Block

Absolute position is a feature of the CSS2 specification that is supported by all of web browsers. If you posit an element an image, a table, or whatever absolutely on your page, it will appear at the exact pixel you specify. In this tutorial, we will use some tricks to create a fancy link block that make our links more attractive…

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

5 Must Read Presentations about CSS Coding

If you are looking for documentation to improve your CSS skills I suggest you to take a look at the following 5 must read presentations about CSS coding. The following presentations help you learn how to write efficient and maintainable CSS code, understand secrets of CSS inheritance, line-height and CSS System approach a practical way to write high-quality, reusable CSS code with a shared vocabulary for developers, learn Object Oriented CSS in order to develop high performance web applications and websites. Good reading!

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

Rounded Corners in Internet Explorer

One of the reasons that I love Firefox and Webkit-based browsers (Chrome, Safari) is the ability to effortlessly create rounded-corner elements using pure CSS. As you probably already know, IE doesn’t allow you to create rounded corners without using images or endless hacking. Enter the CurvyCorners javascript project. CurvyCorners allows you to quickly create rounded corners within Internet Explorer…

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

The Mystery Of The CSS Float Property

In this article, we’ll discuss exactly what the float property is and how it affects elements in particular contexts. We’ll also take a look at some of the differences that can occur in connection with this property in the most commonly-used browsers. Finally, we’ll showcase a few practical uses for the CSS float property. This should provide a well-rounded and thorough discussion of this property and its impact on CSS development…

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

15 Ways to Improve CSS Techniques Using jQuery

CSS is great and when it is combined with powerful JavaScript frameworks like jQuery, you can achieve some really amazing things. Combining these two together will let you enhance the user experience by providing more intuitive and responsive web interface. Here are 15 ways you can use jQuery to improve CSS techniques…

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

How To Implement Animations of CSS Properties With jQuery

In the past days I received several requests from my readers that asked me to dedicate the new issue of my jQuery Lesson Series to how to implement custom animations of CSS properties of HTML elements.

So this post illustrates a basic way to use the jQuery animate() function that allows you to animate easy a property or a group of CSS properties of DOM elements…

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

Using Rounded Corners with CSS3

A few years back, rounded corners became one of the signature design elements of the Web 2.0 trend. Even though they started as a fad, rounded corners are more than simple eye candy. They also have a role in separating or grouping the sections of a page.

As CSS3 gets closer to becoming the new standard for mainstream design, the days of rounded corners through elaborate background images is fading. This means less headache and time spent working out alternatives for each browser…

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

Mouse Cursor Affordance

One important interaction indicator on the web is the mouse cursor. The default cursor arrow changes into a pointing hand when you hover over links for example, which indicates they are indeed links and can be clicked on. It also changes into other things to differentiate context, for example it can change into a text input cursor when hovering over text fields to indicate you can type there.

When styling your website with CSS, in some cases you may lose the correct cursor type for certain elements. It’s important to retain this indicator as it will inform the user about how the item they’re hovering over can be used (see affordances). The solution is easy: if the cursor type is wrong, specify it using the CSS “cursor” property…

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