CSS bar charts—styling data with CSS3 and progressive enhancement

Posted on 6/Mar/2010 by Vel

Bar charts in CSS are neither very new, or very difficult. Using some pretty basic styling you can force lists etc into resembling graphs and charts fairly easily. Such charts, in their most basic form, work perfectly well in displaying and presenting the data they represent. However, using some rich CSS3 and progressive enhancement, you can really start pushing the display and presentation of these normally boring documents to the next level. They are also an ideal way in which to demonstrate the power and ability of progressive enhancement.

Visit Source

Posted in CSS, CSS3, HTML | Tagged | Leave a comment

Button Height and a Broken Box Model

Posted on 6/Mar/2010 by Vel

When I figured out the workaround for line-heights in form buttons last week, I also discovered an interesting discrepancy (feature?) across all major browsers in terms of buttons and the box model. Check out this article for a more in-depth refresher on the CSS Box Model, but here’s a brief summary:

Visit Source

Posted in CSS, HTML | Tagged , | Leave a comment

Adaptable view – how do they do it?

Posted on 27/Feb/2010 by Vel

Adaptable view is a user interface design pattern which you can use to allow users to manually change visual appearance of content in order to fit their needs. This is usually done by switching styles (in web sites and applications). This way you provide your users with more control over the appearance of content which improves user experience.

Adaptable view can be used to enable users to increase/decrease font size, change background color, darken background for higher contrast, switch between different site versions or to change the layout of the site or any part of it. To learn more about this pattern check out Adaptable View design pattern on UI Patterns. You will find a strange implementation of this pattern where complete header is being hidden – including the logo.

In this tutorial, I will focus on explaining how to manually change the layout and show you two great examples and “how did they do it”.

Visit Source

Posted in CSS, HTML, jQuery | Tagged , , | Leave a comment

We’re Ready for CSS3, but are we Ready for CSS3?

Posted on 27/Feb/2010 by Vel

We’re Ready for CSS3, but are we Ready for CSS3?

We’re all smitten with CSS3. It’s reinvigorated that sense of newness that CSS and Web Standards brought our way just a few years ago. We’re able to more easily replicate the set of design standards that has become nearly universal much faster than before with just a few CSS declarations. There are a number of CSS3 rules I’d be writing for every project, but I’m just not sure it’s as ready for prime time as many designers are making it out to be.

I’m having an honest-to-goodness back and forth with myself on this issue because I sympathize with two opposing sides to the same issue. I’ve thought about it so much that I’m not sure it’s as much of an issue I’m making it out to be, but would definitely love to have a targeted conversation about it.

I’d like to review the four rules I’d more than love to use without a second thought on every project I work on for the rest of my life, and explain the issues I’ve come up with (so far) regarding each.

Visit Source

Posted in CSS3 | Tagged | Leave a comment

CSS3 Techniques You Should Know | sixrevisions

Posted on 7/Feb/2010 by Vel

Many of you have probably heard all the buzz around CSS3, but exactly which techniques can we use today? In this article I’ll show you some different CSS3 techniques that work great in some of the leading browsers (i.e. Firefox, Chrome, Safari, Opera ), and how they will degrade well in the non-supported browsers (i.e. Internet Explorer). Using browser specific extensions, many of the proposed CSS3 styles can be used today!

If you aren’t aware of the browser extensions, these are CSS styles with a vendor specific prefix. Since CSS3 is not fully supported yet, we must use these extensions. They are as follows:

  • Mozilla/Firefox/Gecko: -moz-
  • Webkit (Safari/Chrome): -webkit- (note: Some webkit prefixes only work in Safari, and not Chrome)

As you might have guessed, one of the downsides of using these extensions is the fact that we must use all of the above prefixes to get the CSS3 style to render in Firefox, Safari, and Chrome. And no surprise to anyone, IE does not support CSS3 or do they have extensions like the other leading browsers. Alright, enough talking, lets dive right in! Note: styles without a prefix are the actual W3 specification proposal.

Posted in CSS3 | Tagged , | Leave a comment

Forgotten CSS selectors

Posted on 6/Feb/2010 by Vel

Anyone who has been using CSS for any length of time has probably been frustrated by the lack of selector support in Internet Explorer 6. There are quite a lot of cases where a CSS 2.1 selector will let you target elements in all other relevant browsers, but where you, if you want it to work in IE 6, have to add a class or id attribute to the HTML.

Well, the market share of IE 6 is now finally at a level where we as developers can say that a site “supporting” IE 6 does not mean “looking pixel perfect”. Fortunately more and more clients understand this as well. IE 7 has been out for well over three years and IE 9 is on the horizon, so I think it’s time to revive those CSS selectors that you never got to use just because IE 6 doesn’t understand them.

Here are brief explanations of some of the most useful “forgotten” CSS 2.1 selectors.

Visit Source

Posted in CSS | Tagged | Leave a comment

Free Vector Social Media Icons | icondock

Posted on 30/Jan/2010 by Vel

vector-social-media-iconsThis free set includes 50 icons of the most popular social media networks on the internet. The icons are designed in 32px and 16px vector format. With the vector format, you can scale the icon to any size to fit with your design or use it in high quality print materials. What you will get from the zip package: 32px and 16px in three different file formats: vector EPS, PNG, and GIF.

Visit Source

Posted in Freebies | Tagged , , | Leave a comment

Use CSS Sprites to Beautify your WordPress Post Dates | wpbeginner

Posted on 29/Jan/2010 by Vel

dates-css-sprites Ever wonder how to super style your blog’s post date?  I am going to show you how to do this using CSS sprites in about 18 minutes.

Editorial Note: This post is geared toward theme designers. Prior knowledge of CSS and WordPress is recommended.

What you will need:

  • A graphics program (I use Adobe Photoshop CS4)
  • A simple text editor

What you will accomplish in this tutorial:

  • The dates on your blog’s posts will be super styled using CSS Sprites

Visit Source

Posted in CSS, WordPress | Tagged , , | Leave a comment