Oct 172013

There are many CSS table generators out there: some better than others. Most output beautiful looking tables with the downside of bloated code and extra divs. If you’re looking for quick basic table CSS then I recommend HTML and CSS Table Border Style Wizard. This is not complete solution but rather a visual quickstart for basic table features.

Oct 072013

Here’s a link to the latest DZone Refcard which provides a good overview of key CSS3 features and how to code them. Refcardz in general are well done handy references. Here’s an index of all Refcardz. In order to download Refcardz you will need to create a basic account, but don’t worry, you will only receive emails when new Refcardz are released. It’s well worth it.

CSS3: Basics Cheat Sheet from DZone Refcardz – Free, professional tutorial guides for developers.

Oct 072013

This is one of those catch-all articles that lines up seemingly disparate tips and tricks from different areas that are aimed at speeding up your workflow as a designer. Some may be time savers but several are just really cool techniques. All are linked to “how to” resources and some are better than others. Here are a few standouts.

  • Rounded Corners Done Right
  • Favicons Next to External Links
  • Speed Up CSS Prototyping
  • Doodle meeting scheduler
  • ColorBlendy

There are several resources on JavaScript and JQuery as well.

Powerful Workflow Tips, Tools And Tricks For Web Designers | Smashing Magazine.

Sep 272013

Question: what are CSS sprites?
Answer: a single image file containing a composite of several images.
Question: how are they used?
Answer: a common application is navigation where different sections of an image are revealed based on menu item states e.g. static, hover, selected.
If you’re not familiar with CSS sprites then this article is a great primer. Sprites are a powerful tool for front end designers. Learn about their advantages and how to use them.

The Mystery Of CSS Sprites: Techniques, Tools And Tutorials | Smashing Coding.

Sep 042013

Interactive design elements are highly effective across a broad range of physical and virtual products if they are done in a way that increases user engagement in a positive way. Case in point, using CSS hover elements for user interactions. This article provides and excellent example along with a tutorial on how it’s done.

Designing For Emotion With Hover Effects | Smashing Coding.

Sep 042013

Heydon Pickering makes an excellent case for pure semantic CSS and makes the point that “There’s no such thing as semantic CSS. There’s only semantic HTML and its visible form”. In other words, target HTML elements and attributes instead of relying on non-semantic markup i.e. CSS classes. He provides excellent practical examples including how to identify link types and add icons after the links which is a technique I frequently use.

Semantic CSS With Intelligent Selectors | Smashing Coding.