CSS | Webdesigner Depot

24 Nov
Techniques in responsive web design
CSS, Mobile, Responsive Design
Tweet View Comments
We’ve talked a lot about responsive design here on Webdesigner Depot, and shared a lot of valuable resources. Today we’re sharing another valuable resource: at the end of this article are details for getting a discount on Chris Converse’s responsive design course on MightyDeals.
CSS3 media queries allow us to dynamically alter the design and layout of a web page in order to deliver an optimal user experience from a single set of HTML and CSS markup.
The techniques in this article explain how we can leverage this powerful capability of CSS to also change imagery, alter the navigation on hand-held devices, and set up default CSS for compatibility older browsers. Read more
30 Sep
20+ Enhancing CSS3 tools and generators
CSS, HTML 5, tools
Tweet View Comments

CSS3 is an enhanced version of the Cascading Style Sheets specification, and it comes with many enchanting features that revolutionize Web layout and design, as well as other advantages.
But it has some disadvantages as well, and tackling them requires smarts. CSS3 is new on the market, so there is still a lot to improve.
The major problem is that the properties are browser-specific and cannot be easily implemented across browsers. Developers have to add extra code in order to implement the properties the same way across browsers.
In this article, we’ll highlight some effective CSS3 auto-generator tools that can assist developers—especially lazy ones!—with lots of tasks. The greatest advantage of these tools is that they allow for full customization, which means that anyone can use them with ease.
Read more
14 Sep
Recycling and animating icons with CSS
CSS, How to, Icons
Tweet View Comments
In the not so distant past, we were learning about revolutionary techniques to save HTTP Request and KBs alike through the use of image sprites. These sprites consisted of tens or even hundreds of icons arranged in an image file that was later spliced and served in a variety of ways throughout a website.
We’ve made good use of the technique, and virtually every site concerned with scalability employs it.
Thanks to the advent of CSS3’s Transform and Transition properties, we can take this a step further, and using a few concise lines of code, transform base icon templates into new icons for future use – and even throw animation into the mix for an added bonus!
The technique is as simple and intuitive as was image sprites, and allows use to rapidly deploy new icons without ever having to alter the image sprites. Read more
15 Jul
CSS Buttons: Tutorials and examples
CSS, Tutorials, Web Design
Tweet View Comments

Creating buttons with CSS is one of the most experimented-with web design techniques around. Examples and tutorials abound.
The biggest recent trend in CSS button design seems to be eliminating images, especially background images, from buttons. But there are plenty of other things designers are doing with buttons, some that do include images.
Below we’ve collected more than twenty tutorials, examples, and tools for creating CSS buttons, most of which use CSS3.
Included are buttons to suit virtually every design style. We’ve tried to focus on newer techniques here, leaving out the long-standing techniques (like the sliding door method for creating rounded corners) that most designers are already familiar with.
If you have other tutorials or examples you’d like to share, please do so in the comments! Read more
16 Jun
Why typography is the Web’s greatest media format
CSS, Typography, Web Design
Tweet View Comments
Typography is defined as the style, arrangement, or appearance of typeset matter. A look around your surroundings will reveal how much typography has influenced the world. But does it matter, particularly with the likes of YouTube, Flickr, and other forms of media growing so rapidly?
It doesn’t have depth, color, motion. It doesn’t generate feelings or emotions. It provides us with information; line after line of monotonous information. It’s text!
The YouTubes, Vimeos, Flickrs, and Instagrams of today’s generation feed those who want to forget about typography. They want information with visual and audible cues. As one would expect, gobs of text doesn’t exactly inspire them.
But the Web is still young. Things are growing at a rapid pace, much faster than before. We could, in a large part, thank Internet Explorer 6′s demise for this progression. Now we have the freedom to run wild, explore our creativity, and make typography something that does more than present information.
Will we take advantage of this rare opportunity? Read more
26 Apr
HTML5 and CSS3: Wireframing in the final product
CSS, Code, HTML 5
Tweet View Comments
It’s a classic case of Photoshop versus website. Existing wireframing and prototyping tools are incapable of accurately reflecting the environment of the web.
They produce static designs that can’t be seen through the variable known as the web browser. And when you build the final website, some elements won’t look exactly like their draft counterparts, and the client will notice those minor differences in fonts, positioning, etc.
You may be more comfortable with a graphics program, and rendering the design iterations may seem to take longer if you have to hand-code the HTML.
However, the advantages of creating a wireframe in HTML from the start are beginning to outweigh the alternatives: not only do we have new layout elements in HTML5 and more powerful selectors and styling in CSS3, but by combining them, we can throw together a simple layout quickly.
We’re hearing a new company every day (37Signals, Atomiq and others) explain its adoption of HTML prototyping. Their main reason is that the process is surprisingly easy when you have the right tools in place. You’re about to learn how easy this process can be, and when you’re done, you’ll have a head start on your next build. Read more
10 Mar
Web Culture: Grid-based Layout Designs
CSS, Code, Programming
Tweet View Comments
The semantic web has brought on a new generation of Internet technology. As designers and developers work together to redefine the rules of the web, the number of open-source projects and third-party APIs continues to grow.
The opinions of web scholars differ on the use of grid systems. Many argue that setting grid points limits the creativity of designers. Others contend that a grid provides a scientific basis for a design to be perfected.
Both sides provide interesting arguments. These ideas have become part of a unique web culture characterized by influential design rules and open-source projects.
The grid isn’t a master key to perfect design. However, math has proven that certain design specifications provide the best ratios for page elements and layouts. If you’ve heard about any of this before, you may be familiar with the many options that grid-based layouts offer designers. Read more
25 Jan
50+ Awesome CSS3 Techniques for Better Designs
CSS, Code, Compilation
Tweet View Comments

CSS3 is gaining momentum, despite the fact that the standard hasn’t even been finalized.
There are hundreds of tutorials out there to teach designers how to use it, but unfortunately a lot of them cover the same ground.
And some of the tutorials teach designers to do things that they might not think of as useful, though the techniques can usually be adapted to fit a project perfectly.
Below are more than fifty awesome CSS3 tutorials. Many are strictly CSS and HTML based, while others also incorporate JavaScript.
If you have a favorite technique or tutorial that’s not included below, please share it in the comments! Read more
25 Nov
Adding Transparencies and Gradients With CSS
CSS, Code, Color
Tweet View Comments

The way you handle color in your web designs is about to change. Perhaps you’ve been playing around with hexadecimal color values since you were a wee web-babe; if you were, get ready to to grow up fast. CSS3 has arrived, and your palette is about to get a whole lot bigger.
Compared to what’s coming, it’s sas though designers have been color-blind, working with only a small part of the chromatic spectrum. No, new hues will not be added to the rainbow.
What will happen is that color values will be defined in new ways, the entire spectrum of opacity levels will be added and gradients based on pure CSS rather than images will be thrown in, too.
Some forward-thinking websites, such as the impressive 24 Ways to Impress Your Friends, are already playing around with RGBa for text and background color effects—and the results are great. Read more
9 Nov
Developing Efficient, Streamlined CSS
CSS, Code, Programming
Tweet View Comments
CSS can be compared to a sculptor’s tool set; like sculptors at work, we designers use CSS to create structured layouts of websites.
Over the years, this process has become more organized; rules have been put in place to create best practices of coding.
In this article, we’ll take a look at some ideas you can use when writing style sheets to speed up your code.
Efficient CSS is easy to manage and easy to read and can be a resource for web designers. Getting organized is a big step, but using CSS can be a little more complicated than that.
As you read this article, keep your own preferences in mind; the best advice you can get from any developer is to find your own way of working. Combine a few of the techniques here with your own methods to get the most benefit. Read more
31 Mar
Fight Div-itis and Class-itis With the 960 Grid System
CSS, Code, Programming
Tweet View Comments

Years ago, HTML tables were the standard for laying out web pages. CSS and semantic thinking changed that, and today CSS frameworks make designing relatively easy.
But they can also generate a surprising number of superfluous elements.
The 960 Grid System encourages the addition of <div> elements and class attributes, especially on complicated pages. Is this really an improvement over nested tables?
Creating cleaner code means going beyond the framework and thinking about what it really represents.
Read more
18 Jan
CSS Transitions 101
CSS, Code, Programming
Tweet View Comments

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
Tweet View Comments

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
Tweet View Comments

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
Tweet View Comments

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
Tweet View Comments

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
Tweet View Comments

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
Tweet View Comments

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
Tweet View Comments

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.
Read more
19 Nov
Large Website Backgrounds Do’s and Don’ts
CSS, Webdesign
Tweet View Comments
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
Tweet View Comments

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