CSS Tutorials - CSSHelper.net

Those of you who have explored rich typography solutions for web development should be very familiar with the different techniques floating around the Internet. Until majority of the population uses browsers that support CSS3, and until commercial font licensing issues allow use of the @font-face rule to become a norm, many resort to these font embedding techniques.

The thing with non-standard font embedding techniques is that they mostly rely on JavaScript and sometimes Flash or PHP to render text in whatever custom font is specified. Thus, choosing the right solution for a web project can become tricky. This article aims to compare them by listing the pros and cons of each technique.

Scalable Inman Flash Replacement (sIFR) / sIFR 3

Probably one of the first full-blown text replacement solutions, SIFR uses a combination of JavaScript, CSS, and Flash to render custom fonts.

Pros:

• Fully accessible to screen readers and assistive technology
• Partially selectable text (cannot select surrounding elements)
• jQuery integration
• Anti-aliasing results in crisp font rendering
• Flash-based font embedding is generally an allowable practice by most font foundries
• Easy to add text effects such as shadows in Flash

Cons:

• Requires Flash
• CPU and memory intensive
• Font license restrictions can be difficult to set up (e.g. Flash loading needs to be locked to your domain)
• Can be tricky to set up
• Embedded fonts cannot be printed

Cufon

Cufón aims to become a worthy alternative to sIFR, which despite its merits still remains painfully tricky to set up and use.
Pros:

• Easy to set up
• Does not require Flash
• Fastest loading and processing time (according to this presentation)

Cons:

• Inability to highlight and copy/paste text
• License issues prevent many fonts from being legally embedded
• Does not support justified text alignment
• Hover state for elements other than links might result to unpredictable results
• Requires extra JavaScript to prevent FOUC on IE7

Typeface.js

Typeface.js is similar to Cufon, using a JavaScript engine to render fonts on a browser using canvas or VML.

Pros:

• Easy to set up
• Does not require Flash
• Fast loading and processing time

Cons:

• Fonts are only selectable in browsers that support <canvas>
• Hover state is not supported, but a workaround that requires extra code is available
• License issues prevent many fonts from being legally embedded
• Long loading times in IE
• Only supports TTF (does not support .otf, PFB, and postscript fonts)
• Requires extra JavaScript to prevent FOUC on IE7
• Has spacing issues, according to some people

Facelift Image Replacement (FLIR)

Facelift Image Replacement (or FLIR, pronounced fleer) is an image replacement script that uses JavaScript, PHP and the GD library to dynamically generates image representations of text that use custom fonts.
Pros:

• Does not require Flash or JavaScript
• Fonts are rendered as an image and does not violate font licensing terms
• Many text effects available thanks to Imagemagick

Cons:

• Inability to highlight and copy/paste text
• Can be painful to set up
• Requires a web server with PHP and the GD library enabled
• Finer details of fonts are not rendered very well by the GD library
• Takes up additional server resources to process (bandwidth and CPU)

The good thing about these techniques is that they all take into account things like accessibility, SEO readiness, and browser support. These are all huge factors in web development today. For Internet Explorer users, IE6 is supported at least, and for non-supported browsers, thankfully every one of them degrades gracefully into your standard HTML rendered text.

In conclusion, every one of these techniques has its own set of advantages and disadvantages. sIFR is the oldest and most “proven method”, however it relies on both Flash and JavaScript thus taking a hit on performance. FLIR uses the old school technique of replacing text with images and even offers text effects. However, it is hardest to set up and requires a web server with PHP and the GD library enabled.

Typeface and Cufon are the most promising beign the easiest to setup. On the other hand they are both plagued with licensing issues and lack of ability to select text, which for many can be a deal breaker. This appears to be changing though, as Type Select builds on top of typface.js and promises text selection functionality. Still, it is a relatively new player and is also plagued by limitations such as lack of support in IE and no support for :hover and line breaks.

Share

Read More

CSS Blog

Web development has gotten more complicated.

You’ve got to worry about a plethora of new issues that you’ve never thought about when you started doing this business: data asset management (DAM), you’ve got to build and code websites in no time fast, competition is fierce & everybody has their own web development company, you’ve got to keep your costs to a minimal, etc.

We’re here to give you one of those ideas that’ll do all of those things all at once. It’s pretty easy to do.  It took me forever but i’ve finally discovered how to use SVN via TortoiseSVN (TortoiseSVN seems to be the easiest way to do SVN. Update, commit, merge files are easily executed with 2-3 clicks). If you do not have the pleasure of owning a windows machine there are many other SVN alternatives for MAC. Such a syncrosvn and versions.

What’s TortoiseSVN?

TortoiseSVN is just a open source program that manages file versions. At 3 Point 7 Designs, we discussed some methods to collaborate and keep our files updated so redundancy didn’t happen. At much of my discovery, we discovered that we can use this to also host some of our template files that we use to speed up development.

We decided that we’d host and feature our companies css/xhtml boilerplate to foster collaboration and version tracking on Google Code (code.google.com). In addition to this beautiful solution, it allows google to host our redundant files that we use for every project. Google hosting has got to be the best hosting on the internet. You can’t beat anything faster than google; they practically run and own the internet.

We just link the files to the google code repository and voila we are up and running.

Featuring 3.7 Designs Boilerplate!

We’re big fans of css frameworks. CSS frameworks are great providing quality control. It provides us the ability to get our job done quickly, efficiently and more consistently.

The 3.7 Design Boilerplate contains the file structure and the files needed to quickly start coding. It might take a while to get a hang of our id/class usages. Nonethless, it’s pretty KISS and makes sense.

Folders Structure

The following are some folders and they’re pretty self explanatory
/css - CSS files
/images - Images
/js - Javascript Files
/clientfiles - PSD, .ai, etc files go here
/concepts - concepts - currently and eventually will be moved to client files
/copy - contains word documents or text for the content of the website

CSS Files Explained

Reset.css - Some things that we commonly practice is resetting stylesheets so that they’re all at a beginning point. This is something that Eric Meyer’s blogged about.

Grid.css - We’ve added a set of grids that you can use. It’s actually a gride from 960.gs. You’re welcome to switch out any grid stylesheet here.

helper.css - This file gives you a running start if you’re prototyping a page. You can quickly using classes move block elements around with margins or padding. An example class : “ml-5” adds 5px of padding to the left side. “mh-10″ adds left and right padding. “padr-5” provides 5 px of padding on the right side, etc.

This file also contains the very important class: clearfix. If you’re not familiar with it it just primarily solves the problems of container div’s that don’t totally addup the total height of all of the child containers.

main.css This file allows is to create a base file from the reset to provide some type of consistency and legibility to the type. Often after type is reset the type is too small  to read.

style.css This last file you’ll have to use locally because it’ll be key and important in customizing your website. All the other files you can link from the google code repository. This file is the file that will contain your site specific and context specific css code.

Download Boilerplate: Latest 2.0.zip

Put it all together

With all these things put together we are providing you with a starting point. If you don’t like the way we do things; that’s totally understandable. We’re hoping to inspire others to create their own or contribute to our project.

The best part of hosting your css files is that once you add more or append to your files it’ll effect all the websites that might be linking to your files.

Hope this has been most helpful.

Read More

CSS Blog

There are a lot of good front end developers out their right now. If you fancy yourself as a front end editor then you really should be looking at how you can differentiate yourself from the rest. Yes there are lots of “good” front end developers, but there are not a whole lot of excellent front end developers.

1. Improve Your Semantic Names

If you work in a team or ever revisit your code and need to update it then you should think about the quality of your class and ID names. It is not uncommon for developers to use class names like “box”, “wrapper”, or “container.” While you may think that these naming conventions or “semanitc enough” none of them describe the content that is inside them. Instead consider using HTML5 spec’s such as “content-sub”, “section”, “content-aside” or “content-sup.”

You and your team will have a much easier time sorting through code that describes the content than trying to remember the details of “box.”

Read more about semantic naming from Andy Clarke and A List Apart.

2. Improve the Organization of Your Files

I think it is reasonable safe to assume that most developers have at least started to organize their files by type (ie: a folder for images, css, javascript, etc…). You can go a step further and improve the organization even more, particularly any folder that is going to have a lot of files (such as Images in particular and CSS as a secondary.)

I find it best to create sub folders with in images and separate images based on design structure, buttons, headlines, photos, etc…

There are plenty of other folders you may want to create to keep the updating and growth of a site easy and efficient, including:

• Documents
• Client files
• Copy
• Proofs
• Staged/Development area (folder for a “clone of the site” where you can make changes and get sign off)
• Downloads

The Elements CSS Framework does a great job of organizing files based on the normal client/provider workflow.

3. Use Commenting in Your XHTML

Any time you end up developing complex layouts you are bound to use a lot of <div>s in your markup. This can be particularly confusing to go back and edit as it becomes hard to figure out which div is being closed where. You may see three </div>s all in a row.

To combat this simply add some coments at each </div> (or any other closing element if you find that it will be helpful) to let you know what element was just closed.

     <div id="header" class="section">
          <div id="header-logo">
               <h1>HTMLiZER</h1>
          </div><!--/#header-logo-->
     </div><!--/#header-->

If you find it useful you can take it one step further and comment the primary area you would be editing (such as the main content area, sidebar, etc…)

4. Segment Your CSS

For small 4 - 5 page brochure sites your CSS will be pretty manageable even if you don’t spend the time and effort you should into organizing and commenting. Once you start developing web applications or large sites with a vast array of design “modules” you should make sure that you organize your CSS in way that is easy to manage.

I recommend splitting your css into logical different files for better organization, such as:

• reset.css
• main.css
• structure.css
• typography.css
• print.css
• helpers.css

This way you don’t have to sort through all of the typography styling to find the area where you defined the size of the header. Likewise if you want to adjust the headings it is pretty simple to find it through a small typography.css file rather than a huge file that has everything.

5. Create a TOC With Comments in Your CSS

Every CSS file you plan on editing and extending over time should have a table of contents at the begining and a headline seperator at every section. This will allow you to easily jump to a section using “find” rather than scrolling for that one area that had the CSS you are hoping to modify.

EX

/***********

TOC:

=1: Header
=2: Content
=3: Footer
=4: Navigation
=5: Portfolio

****************/

/* *********  =1: HEADER *********** */

#header { … }

6. Compress and Combine Your CSS files

Even though it is easier to work on a site when you segment and organize your css into several different file names, it actually causes your site to load slower. The more calls the browser has to make to the server for additional files the slower it will load.

Before deploying your css files you should combine and compress them. Compressing them removes any uncessary whitespace, comments, etc… that is unnecissary when the site is live.

There are several handy tools to do this including this online version.

7. Create your own framework (or improve on another one)

As you get more experience under your belt you will find that you use the same methods and naming conventions over and over. This is helpful for several reasons and it should be encouraged. It has lots of benefits including:

• More consistant rendering due to reusing ideal CSS techniques
• Easier editing and maintenance as you can better recall what names mean
• The start of code that can be saved and reused every time

Chances are that you end up rewriting the same type of code over and over again, simply because you don’t have it stored somewhere. Some examples may be:

• A class that floats an image left / right and gives it some margin
• The structure for an unordered list navigation
• The structure for a form
• external link, pdf and download icons
• clearfix
• png fix
• Typeography baselines and hierarchies
• etc…

Rather than reusing these bits of codes write modules into your own CSS framework (or you could imrpove on another one). This way you can streamline the development process so it takes less time and improve the consistancy of your work.

8. Develop your CSS to be modular or “object oriented”

You could assign every bit of code an unique ID or adjust the margins and padding per instance. Lots of coders do this to try and get the CSS as close to the designers comp as possible. However this is inefficient in development time and file size. Establish a set rule for differnt types of content and how they should be styled, this should include basic things such as:

• Font sizing (all normal text is 12px, featured text is 14px bold)
• Margin’s (normal margin is 10px between elements, margin between two content blocks is 40px, etc…)
• All navigation tabs will have 15px height and 13px font
• etc…

This way you don’t have to rewrite the code for every new item added to the site. Additionally it will keep the site feeling consistant and well balanced visually. If all elements and every page follows the same rhythm it will feel more unified as a whole.

Some call this object oriented css, it is worth looking into for rockstar like front end coding.

Read More

CSS Blog

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:

1. Fluid Layout Using A Grid
2. Adaptive Content
3. Images In A Fluid Layout
4. jQuery Masonry
5. Smart Columns with jQuery & CSS
6. Text Zooming

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.

Read the full article

Share

Read More

CSS Blog

A beta version of Apple’s Safari 4 web browser is now available for public consumption by Macintosh and PC users alike. It boasts 150 features, 30 (yes, I counted) of which are marked as “NEW”.

Among these new features, the most interesting ones are:

Speculative Loading

Safari loads the documents, scripts, and style information required to view a web page ahead of time, so they’re ready when you need them.

I wonder how Safari will “guess” which files to pre-load. Hopefully this is something that can be turned off, for those among us who would like to conserve bandwidth.

CSS Effects

Pioneered by Safari, CSS effects help developers add polish to websites by stylizing images and photos with eye-catching gradients, precise masks, and stunning reflections that require only a few lines of code.

Does anyone recall IE’s ActiveX filters? They pretty much all died with the exception of the alpha filter, and even that was just used to fix its lack of support for PNG transparency.

Acid 3 Compliance

Safari is the first — and only — web browser to pass Acid 3. Acid 3 tests a browser’s ability to fully render pages using the web standards used to build dynamic, next-generation websites, including CSS, JavaScript, XML, and SVG.

I thought Opera 10 was the first browser to pass the Acid3 test? Still, kudos to the Safari team!

HTML 5 Offline Support

Web developers can now create applications that you can use even when you don’t have access to the Internet. Thanks to HTML 5 offline support, designers can build web applications that store themselves on your computer, where you have immediate access to them. Along with the application, web developers can also choose to store the application’s data on your system, so you always have the information you need. Applications and data can be stored in a traditional SQL-like database serving as an application cache or as a “super cookie,” which stores data in the familiar cookie format.

What!?! HTML 5 support even though we are 4664 days away from HTML 5? Woo hoo Safari!

Cover Flow

Using Cover Flow, you can flip through websites as easily as you flip through album art in iTunes. Cover Flow displays your bookmarks and history as large graphical previews, so you can pick out a website instantly.

I just hope IE8 doesn’t try to copy this “feature” by adding a Flip3D mode.

History View

Take a closer look at your browsing history in the History view. Search for previously visited sites, drag web pages to your bookmarks, and clear individual items. Safari displays your history using Cover Flow, so you can flip through your search results as easily as you flip through iTunes album art.

This is definitely useful for quickly locating a page in one’s history.

So what are you waiting for? Download Safari 4 for a test drive now.

Share

Read More

CSS Blog

If CSS properties attended high school, you would never expect to see the border property sitting at the cool kids’ table. Sure, it’s a useful property and all — as long as you’re looking accentuate the boxiness of a design, right?

Actually, you’d be surprised at just how cool the border property can be. Please take the following dozen exhibits as proof that the CSS border property is a lot cooler than we give it credit for.

Jazzing Up Anchors

I’ve written here before about jazzing up anchor tags by changing the color, removing the underline, and adding background images. But border can be a great way to add a bit of visual style to your anchors without adding that great bit of accessibility that the underline provides. For example, CSS Newbie’s article links are currently styled with a dotted border, like so:

.entry a {
	color: #253c93;
	text-decoration: none;
	border-bottom: 1px dotted #253c93; }
.entry a:hover {
	border-bottom: 1px solid #253c93; }

That gives me a nice dotted border that turns solid when the user hovers over the link. All sorts of style and accessibility without that so-’90s underline.

Build a Postage Stamp

A while back, I ran across a cool little technique for faking a postage stamp using the CSS border property. The original link seems to have been lost from the web, but here’s the basic technique, in XHTML:

<div class="stamp">
	<p>99&cent;</p>
</div>

And CSS:

.stamp {
	width: 500px;
	height: 414px;
	background: #fff url(george.jpg) no-repeat;
	border: 12px dashed #1b1a19; }
.stamp p {
	color: #fff;
	margin: 10px 10px 0 0;
	font: bold 60px Georgia, "Times New Roman", Times, serif;
	text-align: right; }

Now, you could obviously take this even further with a bit of skill and a degree in something other than Rhetoric, but I think you get the idea. You can see the example live here.

Prettier Images

Borders are a great way to make your excellent images stand out even more. I wrote an article on the subject a while back, but here’s the basic idea:

img.photo {
	border: 1px solid #999;
	background-color: #fcfcfc;
	padding: 4px;}

You can see a similar technique used on CSS Newbie’s current design around all of the images in the articles, as well as the ads in the sidebar. As you can see, the technique can be subtle but visually pleasing if used properly.

Homemade Coupons

If you’re ever required to design an online coupon, you needn’t turn straight to Photoshop or the like. You can craft a coupon easily with just a bit of CSS:

.coupon {
	width: 250px;
	padding: 10px;
	text-align: center;
	border: 3px dashed #ccc; }

Just that speck of code gives me a nice coupon that looks something like this:

You’ll have your readers printing and clipping in no time.

Better Blockquotes

Blockquotes are often useful, seldom used. But if you have a website that often refers to the words of others, a well-styled blockquote will go a long way towards impressing your readers with your borrowed prose:

blockquote {
	margin: 1em 3em;
	color: #999;
	border-left: 2px solid #999;
	padding-left: 1em; }

Just a touch of code, and voila… instant credibility!

Hunt Archaic Code

If you ever take over a website (or perhaps built a website) that is still using the Code of Yesteryear, consider turning to CSS and the border property for help hunting down bits of HTML soup that could use a bit less seasoning:

font, center, s, u, b, i {
	color: #000;
	font-weight: bold;
	background-color: #f99;
	border: 3px solid #c00; }

For more information on this useful technique, see my article on finding deprecated elements with diagnostic CSS highlighting. It just might save your life someday. But I doubt it.

Round the Bend

So far, all of our techniques have had one thing in common: boxy edges. But if you’re using a browser developed within the last five or so years (read: not IE6), you’re not limited to those same old dull right angles. This article from last August shows us that CSS3 offers us a way of breaking out of — or at least bending the corners of — the CSS box:

div.rounded {
	background-color: #666;
	color: #fff;
	font-weight: bold;
	padding: 10px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px; }

The border-radius properties allow us to round the corners of elements without having to resort to images. Cool indeed!

Angle it In

Of course, not all angles are bad angles… if used properly. Way back in the day, CSS guru Eric Meyer pointed out a way to use borders to create some pretty wicked angles. If you’d like to learn more about this technique, his site is a great place to start.

CSS Drawings

And now for a bit of fun! The following excellent (and cool) examples are all drawn using the CSS border property.

This functional LCD-style digital clock was built using CSS borders to create the lines of the LCD. Check out tanfa.co.uk to see it in action!

There’s something very pop-art about this CSS skyline. It leans heavily on the border property to create the buildings and windows.

Here’s a random art generator that combines HTML, JavaScript, and the CSS border property to create random examples of modern art. If you hit the “update” button long enough, you’re bound to find something worthy of hanging on your (cubicle?) wall.

Christopher Hester is a man with fantastic CSS skill, incalculable patience, and presumably no girlfriend — at least until he started impressing the ladies with this house he built with the CSS border property. And be sure to check out his second CSS house, which he built using background colors and approximately 50 gazillion non-semantic divs.

If you know of any other fantastic uses for the CSS border property, be sure to mention them in the comments!

Read More

CSS Blog

Recently I have been working on a social networking site that was experiencing downtime due to the amount of stress its users were putting on the server. I spent a good amount of time looking for ways to improve the speed of the site, and one of this was through CSS optimization.

Structure your CSS and HTML elegantly
“CSS” Stands for Cascading Style Sheets. Notice the first word, “Cascading”? The power of this language is readily available, and it is up to you, the designer, to maximize its use. It is an interesting concept that is not too difficult to grasp. Try to find instances wherein this can be applied.

For example, the code below:

<p class="someClass">First</p>
<p class=”someClass”>Second</p>
<p class=”someClass”>Third</p>
<p class=”someClass”>Forth</p>
<p class=”someClass”>Fifth</p>


Can be rewritten this way:

<div class="someClass">
<p>First</p>
<p>Second</p>
<p>Third</p>
<p>Forth</p>
<p>Fifth</p>
</div>


But what if our code looks like this:

<p class="firstClass">First</p>
<p class=”someClass”>Second</p>
<p class=”someClass”>Third</p>
<p class=”someClass”>Forth</p>
<p class=”someClass”>Fifth</p>


We can take advantage of CSS by rewriting HTML this way:

<div class="someClass">
<p class="firstClass">First</p>
<p>Second</p>
<p>Third</p>
<p>Forth</p>
<p>Fifth</p>
</div>


Then, cascade rules defined in “firstClass” to overwrite styling principles in “someClass”.

This is just one simple example, and I hope you understand what I’m trying to get at. Just keep in mind the concept of cascading rules and it won’t be long before things like this become second nature and automatic.

Re-structure your CSS
I am a huge fan of single line CSS style. Not only does it save up space, it is also more readable. The readability bit is debatable, though. Simply put, I find it easier to locate relevant tags if the tag names are all on the same left-hand side and I do not have to scroll so much to find what I need to change. After all, designers are only concerned with CSS selectors, not the rules that are applied to it.

Optimize Your CSS
Some time ago, I wrote an article about improving website performance using CSS optimizers. I still use CSS Optimiser up to this day. For very large CSS files it is a quick and easy way to rewrite things that may otherwise prove too time-consuming to optimize manuallyt.

Use CSS Shorthand Rules
When I was still learning CSS, I found shorthand rules to be quite daunting and confusing at times. But I strived to learn the shorthand syntax for every rule simply because I am lazy and do not want to bother typing the same thing over and over not to mention having to memorize all the rule names.

Compare the example longhand its equivalent shorthand below.

Original longhand:

#someid {
background-attachment: fixed;
background-color: #000000;
background-image: url(images/image.png);
background-repeat: no-repeat;
background-position: left bottom;
}


Shorthand version:

#someid { background: #000 url(images/image.png) no-repeat fixed left bottom; }


The folks over at SitePoint has a good introduction to the art of CSS Shorthand that I can recommend to anyone who’s willing to learn.

Server-side Compression
Server-side compression techniques have long been put to use by large scale applications for two main reasons. First, bandwidth is precious and expensive. Second, it does not require having to modify code for it to work. What it does require, however, is supported server software (or hardware). Hence the term “server-side”.

One such solution can easily be deployed on Apache servers. Once again SitePoint has written an introduction to server-side compression using Apache and mod_gzip.

The drawback to this is increased CPU load. Indeed, server-side compression is a double-edged sword, but usually the pros far outweigh the cons.

Share

Read More

CSS Blog

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:

• Example 1
• Example 2
• Example 3

In the above examples no JavaScript was used at all, only CSS, that’s MAGIC!

View the full article.

Share

Read More

CSS Blog

jQuery.popeye transforms an unoredered list of images into a box displaying only one preview image at a time. The box has controls to skim through the preview images and to enlarge a given image. The box expands to accomodate the enlarged version, while the controls are hidden in full image size mode. A simple click on the image returns the box to its compact state.

The compact box has fixed, automatically calculated dimensions. The widht and height are calculated so that all thumbnail images are cropped to the smallest width and height in the set and centered resulting image area (stage).

This behaviour can be overriden in the plugin options.

Also available is a demo page which best shows the behavior of jQuery.popeye.

The nice thing about jQuery.popeye is that it degrades gracefully into a scrollable list of thumbnails which link to an enlarged version.

For more details, head over to the jQuery.popeye homepage. You can also go directly to the download page.

Share

Read More

CSS Blog

Free CSS Menus. For Quality Css rollover menus, buttons and image … Upload CSS. Latest Website Templates: Stylish Blue CS… 21 Feb, 2009. Reflection Web …

Source

CSS Help