Manipulating CSS Classes With jQuery

In this lesson I want to illustrate you how to use some useful jQuery methods that allow you to manipulate easily CSS classes. In particular I prepared some examples to explain the following methods: toggleClass, hasClass, addClass and removeClass…

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

Quickie CSS3 Tricks with Fallbacks

CSS3 can do some seriously neat stuff. Just check out some of the crazy 3D stuff you can do in WebKit. But as we all know, we need to be careful with what we choose to do with it. The most cutting edge techniques are fun to play with, but since since only a sliver of browsers support them fully, we can only use them in circumstances where they fall back to otherwise perfectly acceptable styling. Let’s look at a couple of quick, simple examples…

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

Guidelines for Developing Your Own CSS Framework

Quite a few CSS frameworks have been around for a while, but most web developers avoid using them. Instead most veteran developers prefer to create their own CSS framework, which provide benefits of a personalized solution and minimizes negative aspects of depending on a third party solution…

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

Mobile Optimised Websites Using CSS3 Media Queries

CSS3 Media Queries can be used in conjunction with CSS 2.1 Media Types to target mobile users with a set device size or screen dimension. Using these queries, you can provide optimised CSS style sheets that are tailored to a particular size of device…

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

CSS3 Hover Tabs without JavaScript

With the new techniques in CSS3 and clever applications of existing CSS it is increasingly stepping on the toes of JavaScript. Which to be honest isn’t necessarily a bad thing. I thought I’d try my hand at something so here is a basic CSS tabbed content section that changes on hover…

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

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)