cssvault - inspiring creativity

When designers with no HTML knowledge come up with unorthodox layouts, the one slicing the design gets burdened with the task of keeping the HTML version faithful to the original design without breaking the layout, often at the cost of one’s sanity. The task is sometimes complicated by other factors such as maintaining ease of updating the content (whether it be via manual entry or CMS), accessibility requirements, usability, JavaScript / AJAX, browser rendering quirks, idiotic clients, hard to please bosses, etc etc.

Many of us has shared this experience in one form or another. The beauty of the experience is that lightbulb moment where you suddenly figure it out and after 4 hours you now have a working, hand-coded, tableless CSS you can be proud of. Turns out it wasn’t so impossible, after all!

There are many ways to fix impossible CSS layouts:

1. Background image trick - background images coupled with positioning tricks can be utilized to give the illusion that an element is where it’s supposed to be.
2. Positioning - relative and absolute positioning when used correctly with the proper nesting can place an element almost anywhere you need it to.
3. Transparent images - transparent GIF’s and PNG’s can be used to simulate layers just like in Photoshop. There is still a lot of stigma against PNG due to the lack of alpha transparency support in IE6, but this is easily fixed using IE PNG Fix, which requires very little effort and almost no modification to the HTML code.
4. Z-index - the CSS z-index is a tiny gem that helps tame multi-layered CSS, ordering them the way it should be.
5. Image editing - when all else fails, there is nothing easier than editing the image to make it CSS friendly. A common issue that benefits from editing are designs with non-repeatable background patterns. Usually, fading the pattern to the background color would solve this issue.

Personally, I have yet to encounter a design that cannot be encoded into HTML. I invite you all to share your experience. Got an impossible CSS design to layout? Let us take a look at it. It might not be as hard as you think.

Styling form elements is probably one of the toughest challenges in CSS design, right up there with positioning and dealing with varying browser quirks. That is why I personally try to avoid styling form elements, unless absolutely necessary.

Probably one of the toughest elements to style is the input type=”file”. It’s that cute little input box with a browse button beside it. You normally encounter them when uploading photos and files on a website.

In a perfect world these form elements should look consistent on all platforms and across different browsers. But this is not a perfect world, and so those who seek to style their form elements are faced with the task of making these form elements look consistent. A not to difficult task for standard input boxes, text areas, and buttons, but as always there needs to be a single element that just would not cooperate and obey CSS rules. You got it: input type=”file”

So we resort to using tricks such as multiple div layering, making the input box invisible, and even JavaScript (to the rescue, as always). For the longest time my favorite reference is Michael McGrady’s technique, which you can read about here.

Then there are those who decide that the best way to deal with these ugly creatures would be to hide the input box completely, leaving only the browse button visible for file selection. Accessibility proponents will probably cringe at this suggestion, but it works and sometimes that’s all that matters to the designer.

Personally, I prefer none of the above. In fact, I actually prefer not to style form elements at all (gasp!) Okay I was exaggerating. To not style form elements would be utterly moronic. But I think I got the point across. Remember the 90’s where everyone thought changing the color of the scroll bar was cool? Now it’s as good as dead and shamefully forgotten.

Personally the best form design is where styling done at a minimal, often restricted to sizing, placement, and font styling only. Let the operating system handle drawing of backgrounds and borders and scroll bars. They were designed that way. Plus, you’ll have less problems and and sleep better.

Zebra striping—also known as candy striping or half-shadow—is the application of faint shading to alternate lines or rows in data tables or forms. Examples of websites that use zebra striping include the currency site XE, the CIA World Factbook, and Monster.com. Zebra striping on the web is actually a carryover from print days: one of the first mentions of the technique appeared in 1961 [1]. Unfortunately according to this article on A List Apart, there really is no proof which demonstrates zebra striping as having a large, significant benefit over the other.

This illustration of Homer Simpson was created using pure HTML and CSS. The source website is written in Spanish, and it doesn’t look like any explanation was given on the creative process. Looks like it took a lot of time to create though. Ingenious!

The resulting image displays properly across most modern browsers:

• Internet Explorer 5.5, 6 y 7
• Opera 9
• Firefox 2
• Safari 3

I have even tested it in Firefox 3 and it displays properly with no issues.

Here is the complete HTML code used to create CSS Homer:
Read the rest of this entry »

Firebug is the definitive Swiss army knife of any web developer. This screen cast by CSS Tricks serves as an introduction to using Firebug. Check it out!

CSS Globe has come up with a list of Do’s and Dont’s of CSS. This series’ part 1 covers the Do’s and Dont’s of CSS Selection, summed up as:

Summary

Do

• When choosing use class names, use class names that describe content’s meaning or purpose, not it’s appearance.
• Use few class names and use them on various elements.
• Use type selectors to (re)set default styling. If you wish, use proper reset techniques (mentioned above).
• Use multiple class names on single element to optimize your css.
• Use combined selectors and precisely target your element

Don’t

• Don’t use descriptive class names like "red", "blueDot" etc.
• Don’t use complicated class names or id’s like "sideIntroSecondaryContentTop". Use descendant selectors instead.
• Don’t use universal selector for resetting entire document.
• Don’t use browser dependent selectors.
• Don’t add unnecessary class names.

Check out the full article.

Tired of writing boring XHTML and CSS code at the beginning of every slicing project? The XHTML / CSS Markup Generator is a web based tool that allows users to enter very intuitive, shortened syntax in order to generate corresponding XHTML and CSS markup, speeding up your work.

Sample input looks something like this:

#root
 #top
  #logo
   a[href="/"]=Markup Generator
  form#search
   fieldset
    label[for="query"]=Enter keyword:
    input[type="text" name="term"]#query
    button[type="submit"]=Find
 #header
  h1=Markup Generator
  h2=Nifty tool for XHTML/CSS coders
 #content
  #primary
   #about
  #secondary
   #contact.box
   #notify.box
   #bookmarks.box
 #footer
  p=Copyright (c) 2008 xMS.pl

This will result in the following XHTML and CSS code:

(XHTML):

<div id="root">
    <div id="top">
        <div id="logo">
            <a href="/">Markup Generator</a>
        </div>
        <form id="search" method="post" action="./">
            <fieldset>
                <label for="query">Enter keyword:</label>
                <input id="query" type="text" name="term" />
                <button type="submit">Find</button>
            </fieldset>
        </form>
    </div>
    <div id="header">
        <h1>Markup Generator</h1>
        <h2>Nifty tool for XHTML/CSS coders</h2>
    </div>
    <div id="content">
        <div id="primary">
            <div id="about"></div>
        </div>
        <div id="secondary">
            <div id="contact" class="box"></div>
            <div id="notify" class="box"></div>
            <div id="bookmarks" class="box"></div>
        </div>
    </div>
    <div id="footer">
        <p>Copyright (c) 2008 xMS.pl</p>
    </div>
</div>

(CSS):

#root {  }
 #top {  }
  #logo {  }
   #logo a {  }
  #search {  }
   #search fieldset {  }
    #search fieldset label {  }
    #query {  }
    #search fieldset button {  }
 #header {  }
  #header h1 {  }
  #header h2 {  }
 #content {  }
  #primary {  }
   #about {  }
  #secondary {  }
   #contact {  }
   #notify {  }
   #bookmarks {  }
 #footer {  }
  #footer p {  }

Probably one of the toughest hills to climb for every CSS beginner is positioning, and this article introduces positioning in 10 very easy to understand slides, with an accompanying screen shot of each technique. Check it out at http://www.barelyfitz.com/screencast/html-training/css/positioning/

I have always been a huge fan of the minimalistic sign-up form. You know, the ones where all it takes to create an account is to provide 3 items: username, e-mail address, and password. Including the password confirmation box and that makes four. So, I was ecstatic when Luke Wroblewski’s article came out. Here he was telling us that there is actually a better approach which allows its visitors to plunge into the service without being stopped by a sign up and a login screen.

I tested one of the featured sites myself, Geni and behold, I never even saw a registration screen. I was converted from visitor to user in a snap.

Other featured sites included Jumpcut, TripIt, and Fidelity’s myPlan.

Now that is what you call thinking out of the box!

CSS Type Set is an online application created to assist beginner CSS developers with the task of font styling. It features an AJAX-powered interface that automagically updates the preview pane in real time. The resulting CSS syntax can then be copied and pasted into a CSS file. Give it a try!