Best CSS Zen Garden Theme Ever
Best CSS Zen Garden Theme Ever
|
|
So there I was skimming through my usual list of websites on another boring day when this headline caught my eye:
Best CSS zen garden file ever?
My head spun furiously. Could it be possible? You be the judge! Let me warn you though, that a sense of humor is required to appreciate the screenshot below.
Hungry for more? View the site in its full, animated glory!
Of course, there had to be an explanation for this madness, right? Apparently the design, entitled “Geocities 1996″, is by Bruce Lawson. He did it back in 2004 out of nostalgia. He writes:
The CSS Zen Garden has been highly useful to me in demonstrating the value of standards when attempting to convince my reluctant colleagues to abandon tables. Thanks Mr. Shea!
However, it’s also been a major pain in the arse, as Nongyaw, friends and family now expect every site I make for them to look as good as the zen garden submissions. As a design-challenged individual, I’ve found myself almost nostalgic for the multi-coloured, multi-typefaced gif-ridden designs I used to see in 1996 when I moved to Thailand and first used the web, back in the days when Netscape 3.0 was the coolest browser out.
I hope that made your day. It surely did for me!
Similar Posts
- Where am I?
- Where can I go?
- Where have I been?
- Fluid Layout Using A Grid
- Adaptive Content
- Images In A Fluid Layout
- jQuery Masonry
- Smart Columns with jQuery & CSS
- Text Zooming
CSS Friendly Stacked Bar Graphs
Looking for a good, CSS friendly Stacked Bar Graph implementation? Look no further as Stephen of The Wojo Group has published their implementation, which is being used in Backbone, a CMS that runs on Ruby on Rails. It is based off Alen Grakalic’s Pure CSS Data Chart, and the awesome thing is that it is semantically correct, so it will definitely look good in screen readers.
CSS Magic with Fixed Background-attachment
I’m sure many of you are familiar with Eric Meyer’s Complexspiral demo, which was created to demonstrate the power of CSS and the background-attachment attribute. There are many other sites that use this concept to achieve a similar effect, providing added visual interest to the viewer. This can be seen in sites such as We Bleed Design, Westciv, Econsultancy, and even CSS Zen Garden. It has been used for years by Timpelen.
Ask the CSS Guy has come up with a short, easy to understand tutorial to help you achieve this effect. He also provides three nice examples using this same technique:
In the above examples no JavaScript was used at all, only CSS, that’s MAGIC! 
Facelift for sunhome.biz
WebdesignFromScratch.com recently gave sunhome.biz a slick re-design and they documented there thoughts and motivations so everyone can learn. The original design was drab with a large white space in the middle of the page. Also, the original design doesn’t consider the needs of its target audience, senior citizens. The new design is much easier to follow and more pleasing to the eye. Give the article a read to learn the specifics of what they changed and why they did what they did, which is the best way to learn good design.Read | Permalink | Email this | Linking Blogs | Comments
Three timeless navigation tips
It’s 2006, and we’re still talking about site navigation? Yes, we are; and apparently we need all the reminders we can get, since so few sites seem to get it right. (Including, I’m well aware, CSS Insider. Don’t hate; I didn’t design it.)In his new A List Apart article (“Where Am I?”), Derek Powazek slaps us upside the head, again, with the cardinal rules of web site navigation. From any page on a site, a user should be able to easily answer these three questions:
Derek provides visual examples of great site navigation. Put your site to the test! Do you know where you are, where you’ve been, and where you’re going?Read | Permalink | Email this | Linking Blogs | Comments
button – riz on Faves
riz | Shared With: Everyone – Jun 07 2008 | design, web, CSS, button … 1 – 3 of 3. x button +CSS +design +web. riz’s Friends. 1 – 1 of 1. mikicake. VIEW ALL …Improve your art direction abilities on 3.7CREA.TV
I just published a blog post taking you from the basics of art direcition through some advanced concepts on 3.7CREA.TV. If you ever have the responsibility of integrating imagery and style to enhance the message of your design you should read through the website art direction redux post.
You will learn what art direction is, some tools out there to help you facilitate art direction and some techniques to create an effect message through images and design concepts.
You can read the full post here.
Those familiar with fluid / elastic layouts know that they can be a little more challenging to implement compared to fixed-width layouts. With the advent of wide-screen monitors, one of the biggest advantages of fluid-width layouts is the ability to maximize available space.
It was only a year ago when 1024×768 was still the dominant screen size. However, as of January 2009, 57% of the population are on desktops higher than 1024×768. The number of users still on 1024×768 has declined sharply from 48% of the previous year to a mere 36%. On the other than, the users on widescreen desktop are rapidly growing, thanks in part to marketing by HDTV makers.
Kayla Knight has written a very good article on the topic of building good websites with fluid layout.
She comes up with 6 techniques to do this, which can be summed up as follows:
She also provides helpful examples and links to all the necessary tools needed to achieve the perfect fluid / elastic layout. With this, designers are armed and ready for the next evolution in layout design.
How does your design approach affect accessibility?
In an article entitled “Visual vs. Structural,” Tommy Olsson compares the two most typical – and often competing – web design approaches: visual design and structural design. The balanced and well-written article makes the point that while there are often no major differences in the code produced from one design approach or another, using a structural approach can result in more accessible sites. While I hesitate to use such loaded words as “better,” I definitely agree that structural design can contribute to a product that is more scalable, easier to maintain, and more accessible. (I say this from the perspective of someone who has employed both approaches at one time or another.) And remember, “accessibility” doesn’t just mean “blind people.” As the web moves away from being confined to the desktop computer, accessibility is as much about accommodating mobile technologies as it is about making sure content is available to disabled users.Read | Permalink | Email this | Linking Blogs | Comments
8 Of The Best Free CSS Tutorial Videos
Below is a collection of the best videos on CSS available on the web, hand-picked personally by me.
Short Introductory Videos
Using CSS by Joseph Lowery (03:43)
This video explains what cascading style sheets (CSS) are. You learn the basics of CSS and the primary interfaces in Dreamweaver to work with CSS. You learn how to apply basic CSS to a web page that contains text using Dreamweaver; specifically, you create and embed a new CSS rule for a heading and paragraph
Introduction To CSS Editing Using Firebug by Jim Plush (3:17)
The firebug firefox extension allows you to edit in real time your CSS code. Instead of having to make a change, reload, make a change, reload you can just edit it live to see the results.
Basics With Sample Code
Introduction to CSS by Heather James (15:26)
Good basic introduction to CSS. In the first half of the video, she explains what CSS is and its basic concepts. In the second half of the video she shows us some examples. At one point she even uses Firebug. Cool!
Creating Beautiful Interfaces with CSS by Douglas Bowman (01:02:51)
Drop-down menus and sophisticated interface elements have traditionally been implemented using JavaScript and kludgy coding workarounds that often don’t work. It’s increasingly practical to deliver rich, beautiful, functional interfaces using semantic markup and CSS. Learn how modern markup can deliver great Web interfaces that are fast and reliable.
Basic HTML and CSS Tutorial. How To Make Website From Scratch by Jimmy Ruska (39:20)
A good basic tutorial on HTML and CSS. The first 10 minutes covers mostly basic HTML. Skip to the 9-minute mark to go straight to the CSS portion of the video.
Introduction to CSS by Stefan Mischook
A good, free video tutorial by Stefan Mischook of Killersites.com
Full Website Conversion Videos
100% CSS Web Design Series by Psmeg
A series of videos which details how to create a pure CSS based website using Adobe Dreamweaver. The series is composed of 9 parts nonetheless it is quite good and very easy to follow.
Converting a Photoshop Mockup Series by Chris Coyier
How to convert a website designed in Adobe Photoshop to HTML/CSS. Following the success of the first video series, Chris Coyier has come up with another video using a minimal version of the CSS-Tricks website.
Microsoft.com: a failed redesign
Looks like Microsoft is the latest to be guilty of a failed redesign. Their current homepage iteration sports a table-based layout circa 1998.They’ve also released a beta preview of their new new homepage – which you can view only with Internet Explorer. (When I attempted to view the preview site in Firefox, I was simply redirected to the existing homepage.) The preview site appears to use semantic markup, although the source has been compacted down to only a few lines, so it’s nearly impossible to read. And with no Web Developer extension in IE, outlining all block-level elements (or all table cells) isn’t an option.
Funny that with the IE 7 team touting how standards-compliant the new browser will be, the Microsoft homepage flies in the face of standards. (Is that for-real ironic or only Alanis ironic?) Having worked for a few large corporations, I understand that one department’s products can appear to be the antithesis of another department’s, with the worker bees in both departments being none the wiser. Still, this is pretty egregious, given the emphasis Microsoft claims to be placing on web standards.
Although… we’ve been there before with Microsoft, haven’t we? Perhaps these things are cyclical.Read | Permalink | Email this | Linking Blogs | Comments