The Simpler CSS Grid 214

The Simpler CSS Grid

Last week I talked about 960 Grid System is Getting Old. Surprisingly a lot of comments have been made. It seems like people are using 960gs because of the "golden ratio" — all numbers are even. I'm a designer, not a grid scientist. Why restrict your layout so that it can fit into this 960gs? A grid is supposed to help you in design, not to limit your creativity. The 978 grid, that I mentioned before, is not just about increasing the page width, but to loosen the gutter space so users can read it more comfortably. Today, I would like to write a follow up post to further ellaborate on some of the points I brought up initially.

CSS3 Media Queries 155

CSS3 Media Queries

CSS2 allows you to specify stylesheet for specific media type such as screen or print. Now CSS3 makes it even more efficient by adding media queries. You can add expressions to media type to check for certain conditions and apply different stylesheets. For example, you can have one stylesheet for large displays and a different stylesheet specifically for mobile devices. It is quite powerful because it allows you to tailor to different resolutions and devices without changing the content. Continue on this post to read the tutorial and see some websites that make good use of media queries.

ScrollTo Posts With jQuery 122

ScrollTo Posts With jQuery

Inspired by the CargoCollective and David DeSandro's site, I asked my Twitter followers (@nickla) on how to do the scrollto posts with jQuery. Within a day, Ben Bodien of Neutron Creations sent back a quick demo on how to replicate the similar result with the ScrollTo plugin. The script finds your current view position and scroll to the next or previous post accordingly. Check out the demo to see what I'm talking about.

View Demo Scrollto Posts

Beautiful CSS3 Search Form 240

Beautiful CSS3 Search Form

Lately I've been playing around with CSS3 and discovered some new CSS tricks. Did you know you can make a round circle with border-radius and create inner shadow effect with box-shadow inset? Check out this beautiful search form demo that I've created with CSS gradient, border-radius, and box-shadow. It displays perfect in CSS3 browsers and degrades gracefully in non-CSS3 browsers.

View Demo Search Form

Voices That Matter: Conference 2010 45

Voices That Matter: Conference 2010

New Riders’ Voices That Matter: Web Design Conference, now in its fourth consecutive year, will take place June 28-29 in San Francisco and the timing couldn’t be better! Web design is undergoing an historic transformation: while the basics of HTML, CSS, and JavaScript haven't changed, the new and evolving functionality in the HTML5 and CSS3 specs, the number of new ways in which people access the Web, and the rise of social media mean that Web designers need to know more than ever. Post a comment in this post before May 21, 2010 for your chance to win a free ticket.

Update: the winner is #34.

CSS3 Gradient Buttons 397

CSS3 Gradient Buttons

Last week I talked about Cross-Browser CSS Gradient. Today I'm going to show you how to put the CSS gradient feature in a good practical use. Check out my demo to see a set of gradient buttons that I have created with just CSS (no image or Javascript). The buttons are scalable based on the font-size. The button size can be easily adjusted by changing the padding and font-size values. The best part about this method is it can be applied to any HTML element such as div, span, p, a, button, input, etc.

TWEET & SAVE: tweet a message to receive a 15% Themify discount code instantly. Tweet it now!