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

CSS Three — Connecting The Dots

Vel — Wed, 09 Jun 2010 13:19:40 +0000

As a web community, we’ve made a lot of exciting progress in regards to CSS3. We’ve put properties like text-shadow & border-radius to good use while stepping into background-clip and visual effects like transitions and animations. We’ve also spent a great deal of time debating how and when to implement these properties. Just because a property isn’t widely supported by browsers or fully documented at the moment, it doesn’t mean that we shouldn’t be working with it. In fact, I’d argue the opposite.

Best practices for CSS3 usage need to be hashed out in blog posts, during spare time, and outside of client projects. Coming up with creative and sensible ways to get the most out of CSS3 will require the kind of experimentation wherein developers gladly trade ten failures for a single success. Right now, there are tons of property combinations and uses out there waiting to be discovered. All we have to do is connect the dots. It’s time to get your hands dirty and innovate!

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

CSS3 Techniques You Should Know | sixrevisions

Vel — Sun, 07 Feb 2010 09:23:58 +0000

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.

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

Smart Columns with CSS & jQuery | sohtanaka.com

Vel — Sat, 14 Nov 2009 17:47:40 +0000

The great thing about having fixed columns in a liquid layout, is that it will fill up the view port with as many columns as it can fit. But as you can see there will be certain viewport resolutions, where it leaves excess white space where a column was just not able to squeeze in.

Visit Source

Mega Drop Down Menus w/ CSS & jQuery | sohtanaka.com

Vel — Sat, 14 Nov 2009 17:43:52 +0000

“According to usability expert Jakob Nielson, mega drop down menus tested to be more efficient for large scale websites. I decided to experiment with different ways of implementing this technique and would like to share how I achieved this method.” … Continue reading →

Negative letter-spacing

Vel — Thu, 08 Oct 2009 10:08:04 +0000

I worked today on PSD to XHTML conversions and noticed that, only firefox work well with negative letter-spacing. So, I had to adjust space between letters a little … less than 1 px, so I placed in my css “letter-spacing: -0.04em”. This work only in Firefox (I have installed FF3.0 ). I made some tests and here are results:

Firefox 3.0
letter-spacing: -0.04em; – work
letter-spacing: -0.5px; – work
letter-spacing: -1px; – work

Safari 3.1.2 / Chrome 3.0
letter-spacing: -0.04em; – ignored
letter-spacing: -0.5px; – ignored
letter-spacing: -1px; – work

Opera 9.6
letter-spacing: -0.04em; – render it as -1px
letter-spacing: -0.5px; – ignored
letter-spacing: -1px; – work

Internet Explorer – test via IE Tester
IE8
letter-spacing: -0.04em; – render it as -1px
letter-spacing: -0.5px; – render it as -1px
letter-spacing: -1px; – work

IE6&7
letter-spacing: -0.04em; – render it as -1px
letter-spacing: -0.5px; – ignored
letter-spacing: -1px; – work