Mastering CSS, Part 2: Advanced Techniques and Tools

CSS is one of the most basic building blocks of modern web design. It creates the structure and style that surrounds your content and is capable of making your site a joy to use or a pain in the neck. Mastering CSS is one of the most important things a web designer can do, and has really become an essential criteria for being a successful designer.In Part 1: Styling Design Elements we covered the basics of web design with CSS. In Part 2 we’re offering up some more advanced techniques and effects you can achieve with CSS. Everything from creating your own online apps like calendars to styling web pages for use with the iPhone to some basics of working with CSS3 is covered here…

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

Making Forms Convert Through Awesome Inline Labels

Forms are everywhere on the web – it’s the primary way users can interact with a web-based system. If your site or app uses forms and we’d bet that it does those forms need to be well designed, or users aren't going to follow through. They may not sign up for your service, they may not fill out their demographic information, they may not even log in again after sign up. We love well-designed forms here at ZURB, and recently we’ve been exploring some cool new tricks for how we can display form inputs and labels in a concise, usable and totally awesome way…

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

8 Good Examples of Using CSS z-index Property

If you are new in CSS then you may find it difficult to understand the CSS z-index property. In simple words z-index sets the stack order of specific elements. An element with greater stack order is always in front of another element with lower stack order. Here are some examples to explain how the z-index property works…

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

5 CSS3 Design Enhancements That You Can Use Today

Cascading Style Sheets CSS is the language of Web design, and the next generation of CSS design properties are just chomping at the bit to be released.Are you eager to start using them, but don’t know where to start?Although many of the new properties are not yet “official”, some browsers have already implemented many of the features of the coming CSS Level 3 specifications.The problem is that many browsers -most notably Internet Explorer – have not.The trick to using these new CSS3 features is to treat them as design enhancements…

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

Object Oriented CSS

Object oriented CSS OOC is one of the new buzz words in the industry. A lot of work is being done by Nicole Sullivan. I kind of like the idea myself and have been doing some forrays into it myself. I think that it will stop hap-hazard CSS coding. I find this happens quite a lot, you get lazy and just add a little bit of code to the bottom of your stylesheet. Worse you add an inline style. The idea behind OOC is that you seperate the structure from the skin and the container from the content. Basically this means that CSS developers write their code with extensibility in mind. So that one can make changes without un-necessarily rewriting or duplicating previous code…

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

Making Hyperlink Icons with CSS

Hyperlinks can link to any number of different sources (pdfs, emails, external links, popups). By placing an icon beside each of these types it will take the surprise out of clicking on a hyperlink for the user. The plan is to do this in an intelligent manner so users don’t have to worry about placing a class on each link. This is especially handy if you’re building for CMS users that aren’t HTML savvy…

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

CSS hacks & browser version detection – a new approach

How to target almost any browser from the server side using PHP.

The workflow…

  1. Style everything for a web standards compliant browser like Firefox or Opera.
  2. Load an additional PHP file which outputs CSS styles with specific hacks.
  3. That’s it you’re done.
VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)