CSS | Webdesigner Depot

18 Jan

Despite people’s expectation of change and movement on the screen, CSS and HTML have few controls that allow you to design interactivity, and those that exist are binary.

A link is either one color or another. A text field is either one size or another. A photo is either transparent or opaque. No in-betweens from one state to the next. No transitions.

This has led to most web pages feeling abrupt, with elements shifting and changing ungracefully.

Yes, we can use DHTML and leverage the jQuery library for transitions, but this requires a lot of code for something that should be very simple.

What we need is a quick and easy way to add simple transitions to the page and in this article you’ll find useful information about CSS transitions and how to use them. Read more

18 Aug

250+ Resources to Help You Become a CSS Expert

CSS, Code, Compilation

52

CSS is the second-most-important thing you can master when it comes to web design, right after HTML.

And the capabilities of CSS can be staggering (especially with the new CSS3 standard already making appearances in some browsers).

If you can imagine it, it’s likely someone has already figured out how to do it with CSS.

Below are more than 250 resources for mastering CSS. While they’re not likely to make it any less staggering, they can help you master the techniques that will help set your designs apart from the crowd. Read more

10 Aug

5 CSS3 Design Enhancements That You Can Use Today

CSS, Code, Development

84

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

27 May

The 960 Grid System Toolbox & Resources

CSS, Web Development

38

The 960 Grid System was created by Nathan Smith as a way to streamline web development workflow by providing commonly used dimensions, based on a width of 960 pixels.

The 960.gs (or any CSS framework) was primarily developed for rapid prototyping, cutting down on repetitive and tedious tasks, but is also more than suited to be used for any web design project.

It will give your site a structured and solid foundation for you to build and style your design upon.

In this article, you’ll find tutorials, a showcase of sites designed using the 960.gs, spin offs, basic WP themes built on the 960.gs and possible alternative frameworks, if for some reason you don’t like the 960 grid system. Read more

20 May

10 Best CSS Practices to Improve Your Code

CSS, Code, Programming

135

It’s really easy to find yourself wondering how your CSS got to be such a mess.

Sometimes it’s the result of sloppy coding from the start, sometimes it’s because of multiple hacks and changes over time.

Whatever the cause, it doesn’t have to be that way. Writing clean, super-manageable CSS is simple when you start off on the right foot and make your code easier to maintain and edit later on.

Here are 11 tips for speeding up the process, writing CSS that is slimmer, faster and less likely to give you a headache. Read more

6 May

Why Does Clean Markup Matter in Web Design?

Accessibility, CSS, Development, Web Standards

62

Because the web is a changing and ever evolving organism, it’s important to build sites that can grow with it and easily ride the current instead of drowning when a new wave approaches.

Clean markup and building with web standards not only helps you do this, but will save you both time and money in the long run.

As the web expands, so the technologies that it uses grow with it. While HTML has been around for a long time, it has acquired quite a few sidekicks along the way.

First Javascript, then CSS, XML and later AJAX. Wide adoption of HTML 5 is just around the corner, with Firefox, Safari, Opera and Chrome already enjoying nearly full HTML 5 support (the slow kid on the block, Internet Explorer, is lagging behind as usual).

In this article, we’ll review the basics of web standards, what they are, what they mean to you, and some important tips to help you deal with this important and often neglected issue.
Read more

23 Mar

30 Useful Web Design Books for 2009

Books, CSS, Design

71

To keep up with the fast-paced web design industry you must seek out self education sources as often as possible, such as books, or you’ll be left behind.

The year 2009 promises to bring us some excellent, and even groundbreaking, new reads. Listed below are 30 web design related books from some of the brightest designers and developers in the industry, that will likely be influential must-reads.

Certainly there can’t be any promise that these books will deliver, but it will be worth your while to check them out.

Each book has either a release date or estimated release date listed, however these dates often change due to publishing and other related issues, so please take these dates as approximations only. Read more

5 Feb

Is Google Chrome The New IE 6 For Web Designers?

CSS, Code, Programming, Validation

102

Just when you thought you were done with IE 6 and its hacks and exceptions, now you’ve got a new browser to consider: Google’s Chrome.

The good news is that Chrome is a lot more compatible with web standards than IE 5 and 6. However, Chrome has its own idiosyncrasies and bugs.

No one knows if Chrome is here to stay, but it has already captured a surprisingly decent share of the web browser market in a short period of time.

Here are some tips to get your web pages working in Chrome and hopefully looking the way they were designed to look.

Large Website Backgrounds Do’s and Don’ts

CSS, Webdesign

42

Large backgrounds make a very impressive visual impact on websites. A web designer has the possibility to play with different design variables that are usually used by photographers, such as depth of field or focus. The background does not have to be just photos, but also any other large illustration or even video.

In this article you will learn about the different large background styles and how to use them. You will also find out about the impact that large backgrounds has on bandwidth and site performance in general. Finally you will learn how to properly implement large backgrounds. Read more

17 Nov

Are You Following the Principles of Top Notch CSS Design?

CSS, Validation

23

CSS can be an extremely powerful markup language for designers.

However, the CSS that is produced is only as good as the principles that are being followed by the designer creating the code.

While you may think that anyone can crank out CSS, there is a big difference between writing CSS and producing top notch CSS.

To ensure that you are on the right track, here are eight CSS principles that every web designer should be following. Read more