40 Outstanding css Techniques And Tutorials
Apr
30
2009
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.
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.
April 30th, 2009 at 11:34 am
man! i love this place!
April 30th, 2009 at 12:56 pm
awesome post..!! really superb..
keep it up !
dtptutorialss last blog post..How to Create A Retro Style Apple Wallpaper in Photoshop
April 30th, 2009 at 1:05 pm
Very useful, thanks.
April 30th, 2009 at 2:24 pm
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….
April 30th, 2009 at 2:30 pm
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….
April 30th, 2009 at 2:52 pm
wonderful selection @Angie thanks for the useful css tech. list..
joyoge designers’ bookmarks last blog post..fruitful colours Photo inspiration 2 | design Inspiration
April 30th, 2009 at 2:55 pm
@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
April 30th, 2009 at 3:00 pm
popurls.com // popular today…
story has entered the popular today section on popurls.com…
April 30th, 2009 at 6:39 pm
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
April 30th, 2009 at 11:44 pm
[...] 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 [...]
May 1st, 2009 at 12:12 am
Excellent and complete roundup. Thanks for including vimeo menu
May 1st, 2009 at 1:46 am
I truly impressed with this collection. Thank you very much.
May 1st, 2009 at 1:57 am
Awesome Angie! Thanks for putting this together
May 1st, 2009 at 3:02 am
Great resource, thanks for sharing
Patternheads last blog post..Free Twitter Backgrounds – Hi-Res Grungy Set 1
May 1st, 2009 at 3:14 am
WOW I love this site! Thank you
May 1st, 2009 at 3:35 am
Excellent resources. Always good to compare techniques.
May 1st, 2009 at 5:18 am
Definitely a must-bookmark for web designers and coders. Love these important and inspiring tips and tricks on CSS usage.
May 1st, 2009 at 7:24 am
Really good collection, definitely worth bookmarking.
Keep it up, your saving the web thousands of hours of development time!
May 1st, 2009 at 7:28 am
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?
May 1st, 2009 at 12:08 pm
[...] 40 Outstanding CSS Techniques And Tutorials: These are truly outstanding and you’ll see some of them in some future work! [...]
May 1st, 2009 at 3:15 pm
nice collection!
thanks
Art2codes last blog post..40 Outstanding CSS Techniques And Tutorials
May 1st, 2009 at 5:29 pm
Great stuff. Like some of the menus. Thanks for the round up.
May 1st, 2009 at 9:14 pm
[...] 40 Outstanding CSS Techniques And Tutorials (tags: webdev list tutorial inspiration css) [...]
May 1st, 2009 at 11:07 pm
[...] 40 Outstanding CSS Techniques And Tutorials [...]
May 2nd, 2009 at 1:51 am
[...] 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. [...]
May 3rd, 2009 at 4:48 am
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
May 3rd, 2009 at 10:28 am
[...] 40 Outstanding CSS Techniques And Tutorials | Arbenting (tags: tutorial css gallery) [...]
May 4th, 2009 at 5:02 am
[...] 40 Outstanding CSS Techniques And Tutorials Arbenting (tags: css webdesign) [...]
May 4th, 2009 at 3:56 pm
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!
May 4th, 2009 at 4:05 pm
[...] 40 Outstanding CSS Techniques And Tutorials [...]
May 5th, 2009 at 12:33 am
[...] 40 Outstanding CSS Techniques And Tutorials [...]
May 5th, 2009 at 1:19 am
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
May 5th, 2009 at 4:13 am
A really great list of tips. Thanks for posting.
May 5th, 2009 at 11:22 am
[...] 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. [...]
May 5th, 2009 at 8:34 pm
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
May 6th, 2009 at 10:25 am
Great list, very usefull, thanks for sharing
May 8th, 2009 at 1:40 am
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.
May 9th, 2009 at 11:06 am
Great list, great collection..
Love your site
May 10th, 2009 at 3:01 am
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
May 10th, 2009 at 10:08 pm
[...] [Arbenting] 40 Outstanding CSS Techniques and Tutorials [...]
May 12th, 2009 at 10:30 am
[...] 40-outstanding-css-techniques-and-tutorials [...]
May 12th, 2009 at 1:32 pm
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
May 15th, 2009 at 12:25 am
[...] 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 [...]
May 16th, 2009 at 12:03 pm
[...] 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. [...]
May 17th, 2009 at 12:06 pm
Great stuff! The ‘pullquotes’ are cool–simple technique that I can use on several sites. Thanks! Chris
May 18th, 2009 at 6:15 am
Always looking for that list of great tutorials. This one is wonderful and quite extensive. Thank you so much!
May 27th, 2009 at 4:31 pm
[...] 40 Outstanding CSS Techniques And Tutorials | Arbenting [...]
May 28th, 2009 at 6:45 am
[...] 40 Outstanding CSS Techniques And Tutorials [...]
May 28th, 2009 at 8:53 am
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
June 1st, 2009 at 12:55 pm
[...] 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 [...]
June 6th, 2009 at 2:22 pm
superb, very nice , thanks also
keep it up
June 15th, 2009 at 5:29 pm
Thank you!
June 22nd, 2009 at 7:04 am
[...] 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) [...]
June 25th, 2009 at 8:39 pm
Oh man! you are really good. Faved +1 !!!
July 7th, 2009 at 12:05 am
Realy great post, thanks you.
.-= LucaS´s last blog ..Přehrávání RMVB v Kubuntu =-.
July 15th, 2009 at 6:30 am
good selection
keep it up!
June 29th, 2010 at 1:45 am
thank you for the information…..