Posts Tagged ‘CSS’

CSS Three — Connecting The Dots

Wednesday, June 9th, 2010

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?

Saturday, February 27th, 2010

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

Sunday, February 7th, 2010

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

Friday, January 29th, 2010

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

10 Best Tutorials To Learn CSS3 | aext

Tuesday, January 12th, 2010

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

Saturday, November 21st, 2009

“If you are the guy who uses <div> 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 <div> 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

Saturday, November 14th, 2009

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

Saturday, November 14th, 2009

“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.”

Visit Source