Freelance Web Designer » CSS

Styling ordered list numbers | 456 Berea Street

Vel — Thu, 26 May 2011 12:52:33 +0000

“I’ve always been annoyed by how difficult it is to style the numbers of ordered lists. Quite often a design calls for something other than just a plain figure – a different font, size, colour, background, whatever.

The traditional approach to solving this problem has been to prevent the browser from rendering the numbers of the list items (li elements) and instead hard code the numbers in the text content of the li. That makes it possible to add styling hooks to the number and style away until you’re happy.

Doing it that way works visually, but it isn’t exactly a semantically correct way of using lists. When you view a faked numbered list with CSS disabled you see either a list with the item numbers repeated or a list with bullets and numbers, and that feels backwards to me.”

View Source

A JavaScript Content Switcher That Works Without JavaScript | impressivewebs

Vel — Tue, 09 Mar 2010 13:24:04 +0000

Recently, while doing research/work on a completely unrelated topic, I came across the beautiful illustrations on Rype Arts, which are displayed inside of a JavaScript-driven content switcher. For some reason, I happened to visit the page with JavaScript disabled and noticed that the content switcher was still working (albeit, with a few flaws).

At first I couldn’t figure out how it was functioning. Normally, with JavaScript disabled, this type of content switcher (or content slider) will just display one item, or else display all items, without allowing any “switching” functionality. After some poking around, I realized it’s not a very difficult thing to do. The switcher utilizes in-page anchors and overflow: hidden to keep the switchability intact.

Visit Source

CSS bar charts—styling data with CSS3 and progressive enhancement

Vel — Sat, 06 Mar 2010 09:40:50 +0000

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

Button Height and a Broken Box Model

Vel — Sat, 06 Mar 2010 08:32:01 +0000

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

Adaptable view – how do they do it?

Vel — Sat, 27 Feb 2010 11:42:47 +0000

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

Forgotten CSS selectors

Vel — Sat, 06 Feb 2010 09:43:33 +0000

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

Use CSS Sprites to Beautify your WordPress Post Dates | wpbeginner

Vel — Fri, 29 Jan 2010 10:21:18 +0000

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

10 Best Tutorials To Learn CSS3 | aext

Vel — Tue, 12 Jan 2010 08:15:34 +0000

In the last few years, web design has improved significantly. There are so many tutorials out there to increase the skills capacity web designers and web developers. Some popular browsers such as Firefox, Safari already supported some CSS3 properties, and now the designer has many CSS3 properties. Today, I will share some tutorials, tips and tricks about CSS3.

Visit Source

Coding Clean and Semantic Templates | webdesignerwall

Vel — Sat, 21 Nov 2009 15:45:27 +0000

“If you are the guy who uses

tag for everything, this post is for you. It focuses on how you can write clean HTML code by using semantic markups and minimize the use of

tag. Have you ever edited someone’s templates, don’t those messy tags drive you crazy? Not only writing clean templates can benefit yourself, but your team as well. It will save you time when you have to debug and edit (particularly the large projects).”

Visit Source

5 Simple, But Useful CSS Properties | webdesignerwall.com

Vel — Sat, 14 Nov 2009 17:59:33 +0000

“This post is about 5 useful CSS properties that you should be very familiar with, but will most likely rarely use. I’m not talking about the new fancy CSS3 properties. I’m referring to the old CSS2 properties such as: clip, min-height, white-space, cursor, and display that are widely supported by all browsers. So, don’t miss this post because you might be surprised how useful they are.”

Visit Source