25 Code Snippets for Web Designers (Part4)

May 4, 2007 by · 13 Comments 

Today we have part 4 of our series on handy code snippets where we round up CSS, html and Ajax techniques, these are useful resources for web designers so get them bookmarked! If you missed them, also check out part one , part two and part three.


Simple Accessible ‘More’ Links – “There is this information that we are hiding. But why not show that hidden information when the user is hovering the link?”

simple accessible more links


10 Tips for an easier CSS Life – As with most things, a logical and structured approach is the best way to go. Therefore I have put together 10 quick tips (in no special order) to help make your CSS coding as pain-free as possible

css web design tips


CSS Gallery Layout – Setting up a gallery layout is not exactly one of the jobs I am looking forward to doing. I assume you all are using lists by now to lay out thumbnail galleries, right?

css gallery tips


CSS Alert Box – In various places around the net you may have seen alert boxes which, as far as I can tell, owe their origins to the K2 template for WordPress.

css alert box


CSS Tab Designer – CSS Tab Designer is a unique and easy to use software to help you design css-based lists and tabs visually and without any programming knowledge required css tabs

Mini Slide Navigation – Sliding nav bar using javascript for the slide effect

mini slide navigation


Centered Tabs with CSS – What if we need a bit more flexibility? What if we need to place our navigation in the center?

133.jpg


Multi Column Layout – We all know the problems that arise when we try to build multi-column layouts in which the columns are of equal height

multi column layout


CSS Shorthand Properties – One of the many great possibilities in CSS is the use of shorthand properties. It lets you specify several properties by using only one

css shorthand tips


10 CSS tricks you may not know – 10 Handy tips

10 css tricks


Snook’s Resizable Underlines – The aim is to apply underlines to paragraph text that stretch the whole width of the column (without using justified text), regardless of the lengths of the paragraph text itself

resizable underlines


Layout-O-Matic – Create layouts of your choosing with this online tool

layout o matic


List-O-Matic – Create navigation bars from lists using this online tool

list o matic


CSS Vista – Edit CSS and see the results live in Firefox and Internet Explorer simultaneously

css vista


Image Floats with the text wrap – How many times do you have an image floated left in a block of content, but want to keep that content from wrapping around your image?

image floats with text wrap


Web Standards Checklist – A list to run through before you launch a standards compliant website

web standards checklist


Future Proof your CSS with conditional comments – Conditional comments in your style sheets

193.jpg


CSS Star Ratings – Another handy piece of css and html for rating stars

css star ratings


CSS Typography – You don’t often see CSS and typography used in the same sentences and for good reason. Traditional typography is a very subtle and beautiful form of design, with thousands of variations and choices

214.jpg


Zoom Zoom Zoom – Let the user change the size of the text

222.jpg


Sliding Doors box with rounded corners – The goal of the exercise was to create rounded-corner boxes with visual flare and the absolute minimal amount of semantically correct markup

202.jpg


Changing Man Layout – A liquid three column layout which featured two flexible outer columns and a fixed width centre column

123.jpg


Switch McLayoutCSS-based liquid layout has proven successful during the reign of 800-pixel to 1024-pixel screens, but as we use a wider range of devices to access the web, we need more powerful and flexible ways of managing layout

252.jpg


Styling Form Controls – A question that is frequently asked in forums like the css-discuss mailing list is how to style form controls in a consistent way across platforms

213.jpg



Oliver Dale runs Kooc Media, A UK-Based web company which specialises in Web Apps, Online Communities, Wordpress Tutorials & Wordpress Plugins.

Comments

13 Responses to “25 Code Snippets for Web Designers (Part4)”
  1. shery says:

    thanks for the information it’s really helped me specially the CSS Tab Designer

  2. Oli says:

    Glad to hear it!

  3. Jekfe says:

    Really like this ‘Code Snippets’ part… Please keep this part alive.

    Great job!

  4. friend says:

    This is a tremendous collection… thanks for it.

  5. Kishan says:

    I am learning CSS.
    You provided right content for me to explore further. Thanks a lot.

  6. Thank you!! This page will definitely be a good one to add to my bookmarked pages!

  7. merLoâ„¢ says:

    This was perfect for what I needed to know. Thanks!

  8. Tigerplug says:

    Great tutorial, I wanted to learn more CSS for my wordpress so I can move it to wordpress.org.

    You just made my day! I knew getting up because I wouldnt sleep would pay off!

  9. cbush says:

    Your the man! Thanks a bunch.

  10. Webice says:

    Cool list, very informative. Thanks and keep up the good work.

  11. Someguy says:

    You can’t mention Sliding Doors box with rounded corners without mentioning http://spiffybox.com

  12. justin c says:

    nice post. also check out http://www.13styles.com for some well built menus. I’ve used their menu code a few times now.

  13. Andy says:

    Great list of snippets! I love this one and your previous 3! Hope to see a part 5!