40 Outstanding css Techniques And Tutorials

We here at Arbenting are really big fans of style. Having spent years to develop and refine our own personal styles, we understand the care and time involved in that process. It is no wonder that once we began down the path of the developer, that CSS would become one of Angie’s favorite areas to explore and learn. She is all about the style, afterall, and it was in that spirit that this post was born. You see, when you are developing your own personal style, you are not starting from scratch. It is not about re-inventing the wheel, you have elements that you are comfortable with using to combine with others until you find that style that fits. This post was created in that same tone.

With CSS, it is not about re-inventing the wheel either, it’s about using existing code that others have worked to establish and personalizing it, to make it your own. And here is a collection of code snippets that have been graciously contributed to the community from those students of style, those seeders of CSS. We hope you all enjoy the 40 outstanding CSS techniques and tutorials we have gathered from the corners of the web.

Image Galleries

Not so simple photograph gallery – A photo gallery featuring a default image, a line or two of descriptive text and the ability to click an image to hold it on the screen.

Hoverbox Image Gallery – A CSS based image gallery where images are enlarged when you hover over them.

CSS Sliding Photograph Galleries – An image gallery consisting of just an unordered list of images that are normally compressed vertically. When you hover over one of these compressed images it expands to full size.

Cross Browser Multi-Page Photograph Gallery – An expansion on the Hoverbox gallery above offering multiple pages.

Navigation

Advanced CSS Menu – How to code an advanced (un-typical) list menu utilizing the CSS position property.

The Menu Menu

Create Vimeo-like top navigation – The base for this tutorial is simple CSS drop down menu based on unordered list.

How to Style an A to Z Index with CSS – How to style an A to Z index that doesn’t break when you increase text size.

CSS Candy Menu – Candy Menu is a stylish CSS drop down menu that’s comes in six provocative colors to get you started.

A flyout menu with breadcrumb trail – This is a standard flyout menu with a few frills and graphics to show which levels have flyouts, and it can also be made to show which path has been taken to arrive at your current page.

Css Menu with Icons

Sitemap Celebration – A sitemap technique based on CSS-styled nested lists.

Navigation Matrix Reloaded – A rollover navigation using only one image.

Buttons

Scalable CSS Buttons Using png and Background Colors – How to create a dynamic CSS button using PNG, transparency and background colors that degrades nicely and supports full scalability.

CSS Pushbutton Links – How to create working pushbuttons with no images.

Lists

How to Create a Block Hover Effect for a List of Links

Better Ordered Lists Using Simple PHP and CSS – This technique is nice ‘n’ bulletproof because it doesn’t use any graphic elements to contain the number.

The Amazing LI – Using CSS and Unordered List Items to Do Just About Anything.

Tables

A CSS Styled Table – A very easy to follow tutorial on styling a sleek table.

Styling Tables with CSS – This article shows how to customize the borders, spacing, padding, background and colours of tables and table cells, as well as how to produce alternate-coloured table rows and create hover effects.

A CSS Styled Calendar

Text and Links

CSS Text Wrapper – The CSS Text Wrapper allows you to easily make HTML text wrap in shapes other than just a rectangle. You can make text wrap around curves, zig-zags, or whatever you want.

Showing Hyperlink Cues with CSS – Supported in IE7, Firefox, and Safari.

Checkmark Your Visited Links with Pure CSS – How to place a checkmark next to visited links using the before and after pseudo classes.

CSS Gradient Text Effect – A simple CSS trick to show you how to create gradient text effect with a PNG image (pure CSS, no Javascript or Flash).

Other Effects

CSS Sticky Footer – Valid html/css for a sticky footer tested in all major and most minor browsers.

The CSS-Only Accordion Effect – An accordion effect using only pure CSS, no javascript.

Pullquotes

Simple Double Quotes – This CSS tutorial will show you how to display two double-quote images using one blockquote tag.

CSS Image Maps

Creating a Star Rater Using CSS – How to create a star rating system similar to netflix using CSS.

Create a Valid CSS Alert Message – An allert message that passes the CSS Validator and works as expected in Safari, Firefox, and Internet Explorer.

CSS Rollovers – Learn how to create a simple rollover image using CSS.

Perfect pagination style using CSS – This tutorial explains how to design a pagination for search results or more in general to split a long list of records in more pages.

Pure CSS Animated Progress Bar – A simple demonstration of how you can create animated progress bar using pure css.

Add a Loading Icon to Your Larger Images – An easy, non javascript, way to let your visitors know that images are loading.

Simple Accessible Charts – An easy, fast and accessible way to display simple data charts and beautify them with CSS.

Cross Browser Transparent Columns – How to create transparent columns that work in all browsers using the opacity property and keeping the content opaque.

CSS Speech Bubbles – Easy to customize speech bubbles coded in valid XHTML and CSS.

Sliding Doors of CSS – A rarely discussed advantage of CSS is the ability to layer background images, allowing them to slide over each other to create certain effects.

The wrap up

Once again, we hope the post was helpful and as useful to you as it has been to us. If there are some techniques and tutorials that we have missed out on, feel free to drop us a note in the comments so that we can check it out. As always, thanks for stopping by the blog.

A Final Word

We appreciate you stopping by and checking out the post. For more from the Arbenting team, make sure you Subscribe for free to the blog.

57 Responses to “40 Outstanding css Techniques And Tutorials”

  1. man! i love this place!

  2. awesome post..!! really superb..

    keep it up !

    dtptutorialss last blog post..How to Create A Retro Style Apple Wallpaper in Photoshop

  3. Very useful, thanks.

  4. 40 Outstanding CSS Techniques And Tutorials | Arbenting…

    A collection of code snippets that have been graciously contributed to the community from those students of style, those seeders of CSS….

  5. 40 Outstanding CSS Techniques And Tutorials | Arbenting…

    A collection of code snippets that have been graciously contributed to the community from those students of style, those seeders of CSS….

  6. wonderful selection @Angie thanks for the useful css tech. list..

    joyoge designers’ bookmarks last blog post..fruitful colours Photo inspiration 2 | design Inspiration

  7. @Hezi – That’s really nice to hear, I’m glad you’re finding the site useful :)

    @dtptutorials – Thank you, we’ll keep doing our best.

    @T-Law – No problem, we love doing what we can

    @Joyoge – Thanks for the comment, I’m happy you enjoyed the post :)

  8. popurls.com // popular today…

    story has entered the popular today section on popurls.com…

  9. Great collection! thanks, I’v submitted a link of this article to our website webmasterclip.com in order to share it with more people.

    Edward.Hs last blog post..How To Start A Membership Site Just Got Easier Thanks To Yaro Starak

  10. [...] el artículo 40 Outstanding CSS Techniques And Tutorials, de Ar-bent-ing, comparte una colección de fragmentos de código que han contribuido a mejorar los [...]

  11. Excellent and complete roundup. Thanks for including vimeo menu :)

  12. I truly impressed with this collection. Thank you very much.

  13. Awesome Angie! Thanks for putting this together :D

  14. Great resource, thanks for sharing :)

    Patternheads last blog post..Free Twitter Backgrounds – Hi-Res Grungy Set 1

  15. WOW I love this site! Thank you

  16. Excellent resources. Always good to compare techniques.

  17. Definitely a must-bookmark for web designers and coders. Love these important and inspiring tips and tricks on CSS usage.

  18. Really good collection, definitely worth bookmarking.
    Keep it up, your saving the web thousands of hours of development time!

  19. Hi there, nice collection, but the link to http://www.designmeme.com/articles/learn-web-design-css-rollovers/ is a very bad example.

    He uses ids, 2 images and also a span which is set to display:none, not very search engine friendly. You could do this with less markup and search engine friendly aswell.

    kind of like:
    a.special_link {background: url(../img/link.png) top left no-repeat; display:block;text-indent:20000px/*Text invisible, but not for google*/}
    a.special_link:hover {background: url(../img/link.png) bottom left no-repeat;}

    put the first state at the top of the image and the hover at the bottom, css sprites like with no interruption when loading the second image on hover.

    Anyway, thanks for the list :)

    Toms last blog post..Habe ich Schweinegrippe?

  20. [...] 40 Outstanding CSS Techniques And Tutorials: These are truly outstanding and you’ll see some of them in some future work! [...]

  21. nice collection!
    thanks

    Art2codes last blog post..40 Outstanding CSS Techniques And Tutorials

  22. Great stuff. Like some of the menus. Thanks for the round up.

  23. [...] 40 Outstanding CSS Techniques And Tutorials (tags: webdev list tutorial inspiration css) [...]

  24. [...] 40 Outstanding CSS Techniques And Tutorials [...]

  25. [...] Without having to change the organization of your content, suppose you want to move from a three-column layout to a two-column layout. By just redefining your CSS file you can achieve that. Some great CSS tips have been shared in this blog post. [...]

  26. Great! I’m redesigning my site and this is extremely helpful! Thanks a lot. Awesome blog by the way :)

    Nikolais last blog post..Don’t Follow The Leader

  27. [...] 40 Outstanding CSS Techniques And Tutorials | Arbenting (tags: tutorial css gallery) [...]

  28. [...] 40 Outstanding CSS Techniques And Tutorials Arbenting (tags: css webdesign) [...]

  29. This is a fantastic list with a whole lot of resources to try out. I can’t wait to get to some of these.

    Many thanks for posting!

  30. [...] 40 Outstanding CSS Techniques And Tutorials [...]

  31. [...] 40 Outstanding CSS Techniques And Tutorials [...]

  32. Great CSS tips here, that sliding door technique is so cool. My web design is gonna kick ass! Merci

    rorys last blog post..The advantages of W3C compliance – May 1, 2009

  33. A really great list of tips. Thanks for posting.

  34. [...] 40 Outstanding CSS Techniques And Tutorials | Arbenting With CSS, it is not about re-inventing the wheel either, it’s about using existing code that others have worked to establish and personalizing it, to make it your own. And here is a collection of code snippets that have been graciously contributed to the community from those students of style, those seeders of CSS. We hope you all enjoy the 40 outstanding CSS techniques and tutorials we have gathered from the corners of the web. [...]

  35. Wow, I fell behind in commenting for a few days and am now drowning in comments here. Thanks so much to everyone who took the time to reply!

    @Edward – Thanks so much for submitting the article to webmasterclip!

    @Janko – Thanks! You always have some of the best web development tutorials!

    @Andrew – Thank you, I’m glad you found it useful.

    @Dani – Thanks! It’s always our pleasure :)

    @Patternhead – You’re very welcome!

    @Abaloo – Thank you, I’m happy you’ve been enjoying the blog.

    @Anthony – Thank you, I agree, it’s always nice to read various techniques just to keep up to speed on the fastest and easiest ways to do things.

    @Jonath – Thank you so much, I’m happy you found it bookmark worthy :)

    @anonymous – Thank you! Saving developers time is our goal with articles like this :)

    @Tom – Thanks so much for replying and giving your way of doing image rollovers.

    @Art2code – Thank you for commenting :)

    @Kp – Thank you. It’s definitely nice to have plenty of techniques for menus. Navigation is such a major part of a site.

    @Nikolai – Thanks! I hope you find some useful techniques here for your site redesign.

    @Erick – Thank you! I love getting in there and getting my hands dirty when trying out new techniques.

    @rory – I’ve used the sliding door technique on quite a few sites I’ve built. It makes things so easy.

    @Jay – Thank you, I’m happy you found it useful :)

  36. Great list, very usefull, thanks for sharing

  37. Great list of 40 CSS techniques. I’m already working on one of my project. I am happy to visit your site and find such a nice information.

    Great post….!Keep up the good work.

  38. Great list, great collection..
    Love your site

  39. Thumbs up for that great collection of usefull css-pimping-tricks. Can´t wait to try some of them with my next webproject. I think I´ll loose many hours of my life integrate them ;-)

    HASENFARMs last blog post..Tila Tequila lässt die Knospen sprießen

  40. [...] [Arbenting] 40 Outstanding CSS Techniques and Tutorials [...]

  41. [...] 40-outstanding-css-techniques-and-tutorials [...]

  42. This is a great post. A lot of valuable information for designers. It’s always fun to learn new techniques and add these to the batch of knowledge we already know.

    Thanks again for another great post. I can always count of you for relevant and unique content.

    TJ
    Boston Web Design

  43. [...] Louder Than Words 11. What Makes a Great Logo Design? 12. The Tricky Truth About Downsizing 13. 40 Outstanding CSS Techniques And Tutorials 14. 31 Cool 404 Error Page Designs 15. Ayrton Senna, the Legend 16. Ultimate WordPress Tutorial [...]

  44. [...] Een thema van een weblog is meestal gemaakt met css. Daarom voor de thema makers deze tips: een lijst met bruikebare css tools en 40 css tips en handleidingen. [...]

  45. Great stuff! The ‘pullquotes’ are cool–simple technique that I can use on several sites. Thanks! Chris

  46. Always looking for that list of great tutorials. This one is wonderful and quite extensive. Thank you so much!

  47. [...] 40 Outstanding CSS Techniques And Tutorials | Arbenting [...]

  48. [...] 40 Outstanding CSS Techniques And Tutorials [...]

  49. The speech bubbles one I may have to have a go at as it looks so slick and lovely, just what I like.

    Thank you for this interesting list, much love to CSS!

    Gemma x

    Gemma Wilds last blog post..Sweet As Candy Bracelet

  50. [...] Modules & Resources 27 Best Places You Should Visit To Get Incredible Web Design Inspiration! 40 Outstanding CSS Techniques And Tutorials 36 Eye-Catching Jquery Navigation Menus Best web-based FTP managers 3 Easy Ways To Restart Your [...]

  51. superb, very nice , thanks also
    keep it up

  52. Thank you!

  53. [...] 40 Outstanding CSS Techniques And Tutorials | Arbenting With CSS, it is not about re-inventing the wheel either, it’s about using existing code that others have worked to establish and personalizing it, to make it your own. And here is a collection of code snippets that have been graciously contributed to the community from those students of style, those seeders of CSS. We hope you all enjoy the 40 outstanding CSS techniques and tutorials we have gathered from the corners of the web. (tags: css webdesign tutorials design techniques gallery webdev web) [...]

  54. Oh man! you are really good. Faved +1 !!!

  55. Realy great post, thanks you.
    .-= LucaS´s last blog ..Přehrávání RMVB v Kubuntu =-.

  56. good selection

    keep it up!

  57. thank you for the information…..

Leave a Reply

About the Blog

The Arbenting Design Blog was created by Angie Bowen & Rob Bowen to give back to the design community with freebies, how-tos and helpful advice. All of the freebies offered here are available for both commercial & personal use, no attribution required.

Contact Us