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…
Archive for August, 2009
-
Mastering CSS, Part 2: Advanced Techniques and Tools
Posted: 2 years ago in Articles
Read More: Mastering CSS, Part 2: Advanced Techniques and Tools
-
Making Forms Convert Through Awesome Inline Labels
Posted: 2 years ago in Articles
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…
Read More: Making Forms Convert Through Awesome Inline Labels
-
CSS Remix
Posted: 2 years ago in Galleries
CSS Remix showcases only the best designed CSS based websites. Started in early 2006, CSS Remix has a dedicated and passionate fan-base of web professionals including designers, developers, entrepreneurs, freelancers, and more..
Read More: CSS Remix
-
8 Good Examples of Using CSS z-index Property
Posted: 2 years ago in Tutorials
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…
-
5 CSS3 Design Enhancements That You Can Use Today
Posted: 2 years ago in Articles
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…
Read More: 5 CSS3 Design Enhancements That You Can Use Today
-
Object Oriented CSS
Posted: 2 years ago in Articles
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…
Read More: Object Oriented CSS
-
Making Hyperlink Icons with CSS
Posted: 2 years ago in Tutorials
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…
Read More: Making Hyperlink Icons with CSS
-
5 CSS tricks with lists
Posted: 2 years ago in Tutorials
Read More: 5 CSS tricks with lists
-
CSS hacks & browser version detection – a new approach
Posted: 3 years ago in Code
How to target almost any browser from the server side using PHP.
The workflow…
- Style everything for a web standards compliant browser like Firefox or Opera.
- Load an additional PHP file which outputs CSS styles with specific hacks.
- That’s it you’re done.
Read More: CSS hacks & browser version detection – a new approach
-
An Introduction to CSS 2.1 and CSS 3 selectors
Posted: 3 years ago in Code
An online demo showing examples of CSS 2.1 and CSS 3 selectors. Concise, to the point and useful future reference…