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.
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.
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.
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.
Simple Double Quotes - This CSS tutorial will show you how to display two double-quote images using one blockquote tag.
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.
Loading...
man! i love this place!
awesome post..!! really superb..
keep it up !
dtptutorialss last blog post..How to Create A Retro Style Apple Wallpaper in Photoshop
Very useful, thanks.
wonderful selection @Angie thanks for the useful css tech. list..
joyoge designers’ bookmarks last blog post..fruitful colours Photo inspiration 2 | design Inspiration
@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 :)
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
Excellent and complete roundup. Thanks for including vimeo menu :)
I truly impressed with this collection. Thank you very much.
Awesome Angie! Thanks for putting this together :D
Great resource, thanks for sharing :)
Patternheads last blog post..Free Twitter Backgrounds — Hi-Res Grungy Set 1
WOW I love this site! Thank you
Excellent resources. Always good to compare techniques.
Definitely a must-bookmark for web designers and coders. Love these important and inspiring tips and tricks on CSS usage.
Really good collection, definitely worth bookmarking.
Keep it up, your saving the web thousands of hours of development time!
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?
nice collection!
thanks
Art2codes last blog post..40 Outstanding CSS Techniques And Tutorials
Great stuff. Like some of the menus. Thanks for the round up.
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
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!
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
A really great list of tips. Thanks for posting.
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 :)
Great list, very usefull, thanks for sharing
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.
Great list, great collection..
Love your site
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
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
Great stuff! The ‘pullquotes’ are cool–simple technique that I can use on several sites. Thanks! Chris
Always looking for that list of great tutorials. This one is wonderful and quite extensive. Thank you so much!
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
superb, very nice , thanks also
keep it up
Thank you!
Oh man! you are really good. Faved +1 !!!
Realy great post, thanks you.
LucaS´s last blog ..Přehrávání RMVB v Kubuntu
good selection
keep it up!