Archive for the ‘CSS’ Category

« Older Entries

A JavaScript Content Switcher That Works Without JavaScript | impressivewebs

Tuesday, March 9th, 2010

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

Tags: , ,
Posted in CSS, HTML, JavaScript | No Comments »

CSS bar charts—styling data with CSS3 and progressive enhancement

Saturday, March 6th, 2010

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

Tags:
Posted in CSS, CSS3, HTML | No Comments »

Button Height and a Broken Box Model

Saturday, March 6th, 2010

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

Tags: ,
Posted in CSS, HTML | No Comments »

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

Tags: , ,
Posted in CSS, HTML, jQuery | No Comments »

Forgotten CSS selectors

Saturday, February 6th, 2010

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

Tags:
Posted in CSS | No Comments »

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

Tags: , ,
Posted in CSS, WordPress | No Comments »

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

Tags: , ,
Posted in CSS, CSS3 | No Comments »

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

Tags: , , ,
Posted in CSS, HTML | No Comments »

« Older Entries