CSS Magic with Fixed Background-attachment
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! 
Similar Posts
- Server bandwidth reduction
- Media type formatting
- Menu overlapping
- Styling of form elements
- and even E-mail address obfuscation
- Fluid Layout Using A Grid
- Adaptive Content
- Images In A Fluid Layout
- jQuery Masonry
- Smart Columns with jQuery & CSS
- Text Zooming
- Where am I?
- Where can I go?
- Where have I been?
Take Your CSS to the Desktop with Adobe AIR!
Here is an article that you may find useful.
Designers would find it surprising that to know that you can now take your HTML and CSS skills and use it to create desktop applications. This now very much possible for anyone who is willing to explore the power of Adobe AIR. Andrew Tetlaw has a nice little article over at SitePoint entitled Take Your CSS to the Desktop with Adobe AIR!. It provides a good, short introduction to Adobe AIR and how easy it is to use your web development skills to create rich cross-platform desktop applications.
For further reading, you may wish to check out Akash Mehta’s winning article, Walk on AIR: Create a To-do List in Five Minutes.
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!
5 Great CSS Techniques To Improve Your Website
CSS or Cascading Style Sheets is normally used to separate the style and layout of your HTML files from the actual content. However, few are aware of the added value that CSS can give to your website. Aside from the obvious ones like style standardization, CSS can be utilized to provide other useful stuff not possible with table-based layouts.
Among these benefits are things like:
Much information about these techniques can be found on the web. Below are some example implementations.
Server bandwidth reduction
CSS Optimization can translate to huge savings in server bandwidth, resulting in lower operational costs.
This article compares some of the best CSS optimizers available on the web by using heavy traffic websites like Digg and Slashdot as an example.
Media type formatting
By utilizing the CSS media attribute, you can easily control display for different media types. This is best used when formatting websites for mobile display and creating printer-friendly pages.
Here is a good tutorial that covers CSS development for mobile browsers. For techniques related to print styling, refer to this tutorial, another tutorial, and this article by Eric Meyer.
Menu overlapping
The CSS z-index property specifies the order an element is stacked, similar to how layers are arranged in Adobe Photoshop. It is also relatively easy to understand, and can be quite powerful when used correctly. It can also come in handy when creating overlapping menus. Here is a very good tutorial on how this can be done.
Styling of form elements
In a previous article we linked to Jeff Howden’s CSS-Only, tableless forms article which gives an example of what can be accomplished with CSS form styling.
Then, there’s also The Form Assembly, a CSS Zen Garden clone for showcasing form designs.
E-mail address obfuscation
When displaying an e-mail address on a website you obviously want to obfuscate it to avoid it getting harvested by spammers. There are many ways to accomplish this, and one such method can easily be implemented in CSS. Silvan Mühlemann tested nine methods and published a test page for spambots to harvest. 1.5 years later the results are out and surprisingly, only the CSS methods resulted in absolutely zero spam.
Traveling back to 1996…
The Internet was a bland wasteland in 1996. Just take a look at some of the big corporations sites from 10 years ago. It may be downright painful, but it is a testament to see how far web design has come with the help of CSS. Check out Pepsi’s futuristic web-look. Ah, those were the days…Read | Permalink | Email this | Linking Blogs | CommentsCSS 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.
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.
Non-Flash Peeling Page Effect Using jQuery & CSS
The Peeling Page is an effect is normally used by advertisers to show advertisements that would otherwise occupy space that is larger than what is available on a page. It is very slick, and is normally implemented in Flash. This script on Flashden costs $4, though there is a free tutorial available. The thing about the Flash version is that it uses both JavaScript and Flash, which may not be everyone’s cup of tea.
This is where Soh Tanaka’s jQuery + CSS idea comes in. It uses simple CSS and jQuery to mimic the Flash version, which can possibly translate to faster development and maybe even faster loading pages. The tradeoff is the absence of any extensive banner animation — something that can only be done in Flash. However, I believe this solution is worthy of a look, at least for those in need of a quick peeling page component for their project.
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