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: Content Switcher, no javascript, pure css
Posted in CSS, HTML, JavaScript | No Comments »
March 6th, 2010
Last week I posted a CSS3 dropdown menu and someone complained that I didn’t explain the CSS code in detail. Well, here is a post on the basics of the new properties: text-shadow, box-shadow, and border-radius. These CSS3 properties are commonly used to enhance layout and good to know.
Visit Source
Tags: Border Radius, Box Shadow, CSS3, RGBA, Text Shadow
Posted in CSS3 | No Comments »
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: CSS3 Data Visualisation Progressive Enhancement
Posted in CSS, CSS3, HTML | No Comments »
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: box model, Button Height
Posted in CSS, HTML | No Comments »
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: CSS, HTML, jQuery
Posted in CSS, HTML, jQuery | No Comments »
February 27th, 2010
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
Tags: CSS3
Posted in CSS3 | No Comments »
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.
Tags: CSS, CSS3
Posted in CSS3 | No Comments »
