Sometimes being a web-developer is just damn hard. Particularly coding is often responsible for slowing down our workflow, reducing the quality of our work and sleepless nights with pizza and coffee laying around the laptop. Reason: with a number of incompatibility issues and quite creative rendering engines it sometimes takes too much time to find a workaround for some problem without addressing browsers with quirky hacks. And that’s where ready-to-use solutions developed by other designers come in handy.
One year ago we’ve published the post with 53 CSS-Techniques You Couldn’t Live Without1 where we provided references to the most useful CSS-techniques which are often used in almost every project. Over the last year we’ve been observing what’s happening with the CSS-based web-development, and we collected most useful CSS-techniques we’ve stumbled upon — for us and for our readers.
In this post we present 50 new CSS-techniques, ideas and ready-to-use solutions for effective coding. You definitely know some of them, but definitely not all of them. Some technique is missing? Let us know in the comments to this post.
Thanks to all developers who contributed to the CSS-based design over the last year. The community appreciates it.
- Triadic Background Setting with CSS2
- CSS Server-Side Pre-Processor5
- Advanced CSS Menu7
- Styling File Inputs with CSS and the DOM9
- A Savvy Approach to Copyright Messaging11
- Advanced CSS Menu Trick13
- CSS hover effect15
- Creating a table with dynamically highlighted columns like Crazy Egg’s pricing table17
- A Stripe of List Style Inspiration19
- Rediscovering the Button Element21
- Dynamic CSS With Variables
- A CSS styled table version 223
- CSS Step Menu25
- Creating bulletproof graphic link buttons with CSS | 456 Berea Street28
- Iconize Textlinks with CSS30
- Better Ordered Lists (Using Simple PHP and CSS)32
- Circular Menu with CSS34
- CSS Dock Menu38
- Digg-like navigation bar using CSS
- How to create VISTA style toolbar with CSS
- Fade Out Bottom40
- Scrollovers – A New Way of Linking42
- How to Style an A to Z Index with CSS44
- CSS List Boxes46
- How-to create a “Table of Contents” Navigation48
- CSS Recipe for Success50
- Partial Opacity52
- Simple Round CSS Links (Wii Buttons)54
- Drop Shadow CSS56
- CSS Double Lists58
- Perspective Text with CSS60
- Better Email Links: Featuring CSS Attribute Selectors62
- CSS: Menu Descriptions64
- CSS Transparency Settings for All Browsers66
- Custom Reading Containers68
- Eric Meyer’s CSS Reset69
- PNG Overlay71
- Turning Lists into Trees72
- Create Resizable Images With CSS74
Derek Powazek suggests adding a copyright message to a photo and use CSS to crop its view. This is supposed to accomplish the goal of adding robust copyright information without defacing your own work.
What we want to do here, is instead of simply altering the state of the navigation item the user is currently rolling over, we want to alter the non navigation items as well.
A different type of list and navbar styling. As stripes.
Geoffrey Grosenbach describes how you can integrate CSS variables in CSS coding — with Ruby on Rails.
A method of designing the so-called step-menus26, which have some steps users have to go through in order to achieve some aim. This menu offers a varying amount of steps, dependent upon the type of user accessing the application.
Links are fun, but sometimes we don’t know where they take us. With this little CSS technique a user can identify a link by its icon. The updated release of the technique.
Ordered lists are boring! Sure you can apply background images and do quite a bit of sprucing up to a regular ordered list, but you just don’t get enough control over the number itself.
This tutorial explains how to design a digg-like navigation bar using a liquid design with rounded corners for links.
Reproducing Vista toolbar, with buttons and hover effect in cross-browser compatible CSS and (X)HTML.
This is a demonstration of the effect where the bottom of the page seems to fade out. The technique makes use of an fixed position div (bottom: 0%) with a transparent PNG image and a high z-index value.
Using a simple unordered list this experiment aligns the boxes across the page with the end result being to showcase items like services, products, or specials. One of cool thing about this — if you turn off styles — is the extractable semantics with the headings and paragraphs used.
In as little as 8 lines of HTML, and 5 lines of CSS, the Table Of Contents Navigation block can be integrated in your site ready for even more styling.
Learn how to generate code for displaying the e-mail automatically once mailto is used. CSS Attribute Selectors in action which is not supported by Internet Explorer 6 and 7.
Further Techniques Link
This amazing little script allows the user to resize any container.
Create a transparent PNG overlay which can be used as a mask / frame around regular JPEG or GIF so users can upload photos without having to worry about using any graphics program to apply filters, plus it saves time.
- 1 /2007/01/19/53-css-techniques-you-couldnt-live-without/
- 2 http://silverbackapp.com/
- 3 http://www.wilsonminer.com/
- 4 http://silverbackapp.com/
- 5 http://www.shauninman.com/archive/2007/06/27/css_server_side_pre_processor
- 6 http://www.shauninman.com/archive/2007/06/27/css_server_side_pre_processor
- 7 http://www.webdesignerwall.com/tutorials/advanced-css-menu/
- 8 http://www.webdesignerwall.com/tutorials/advanced-css-menu/
- 9 http://www.shauninman.com/archive/2007/09/10/styling_file_inputs_with_css_and_the_dom
- 10 http://www.shauninman.com/archive/2007/09/10/styling_file_inputs_with_css_and_the_dom
- 11 http://powazek.com/posts/867
- 12 http://powazek.com/posts/867
- 13 http://www.3point7designs.com/blog/2007/12/22/advanced-css-menu-trick/
- 14 http://www.3point7designs.com/blog/2007/12/22/advanced-css-menu-trick/
- 15 http://veerle.duoh.com/blog/comments/css_hover_effect/
- 16 http://veerle.duoh.com/blog/comments/css_hover_effect/
- 17 http://www.askthecssguy.com/2007/08/creating_a_table_with_dynamica.html
- 18 http://www.askthecssguy.com/2007/08/creating_a_table_with_dynamica.html
- 19 http://www.wpdfd.com/issues/82/list_style_inspiration/
- 20 http://www.wpdfd.com/issues/82/list_style_inspiration/
- 21 http://particletree.com/features/rediscovering-the-button-element/
- 22 http://particletree.com/features/rediscovering-the-button-element/
- 23 http://veerle.duoh.com/blog/comments/a_css_styled_table_version_2/
- 24 http://veerle.duoh.com/blog/comments/a_css_styled_table_version_2/
- 25 http://codylindley.com/CSS/325/css-step-menu
- 26 http://time-tripper.com/uipatterns/Step-by-Step_Instructions
- 27 http://codylindley.com/CSS/325/css-step-menu
- 28 http://www.456bereastreet.com/archive/200705/creating_bulletproof_graphic_link_buttons_with_css/
- 29 http://www.456bereastreet.com/archive/200705/creating_bulletproof_graphic_link_buttons_with_css/
- 30 http://pooliestudios.com/projects/iconize/
- 31 http://pooliestudios.com/projects/iconize/
- 32 http://css-tricks.com/better-ordered-lists-using-simple-php-and-css/
- 33 http://css-tricks.com/better-ordered-lists-using-simple-php-and-css/
- 34 http://metalize.liveonstyle.com/2007/03/22/menu-circular-en-css/
- 35 http://metalize.liveonstyle.com/2007/03/22/menu-circular-en-css/3/
- 36 http://metalize.liveonstyle.com/wp-content/uploads/2007/03/index.html
- 37 http://metalize.liveonstyle.com/2007/03/22/menu-circular-en-css/
- 38 http://www.ndesign-studio.com/blog/mac/css-dock-menu
- 39 http://www.ndesign-studio.com/blog/mac/css-dock-menu
- 40 http://css-tricks.com/examples/FadeOutBottom/
- 41 http://css-tricks.com/examples/FadeOutBottom/
- 42 http://www.scrollovers.com/
- 43 http://www.scrollovers.com/
- 44 http://www.smileycat.com/miaow/archives/000211.php
- 45 http://www.smileycat.com/miaow/archives/000211.php
- 46 http://mikecherim.com/gbcms_xml/news_page.php?id=24#n24
- 47 http://mikecherim.com/gbcms_xml/news_page.php?id=24#n24
- 48 http://5thirtyone.com/archives/776
- 49 http://5thirtyone.com/archives/776
- 50 http://www.search-this.com/2007/11/26/css-a-recipe-for-success/
- 51 http://www.search-this.com/2007/11/26/css-a-recipe-for-success/
- 52 http://www.cssplay.co.uk/opacity/png.html
- 53 http://www.cssplay.co.uk/opacity/png.html
- 54 http://www.hedgerwow.com/360/dhtml/css-round-button/demo.php
- 55 http://www.hedgerwow.com/360/dhtml/css-round-button/demo.php
- 56 http://www.phoenity.com/newtedge/drop_shadow/
- 57 http://www.phoenity.com/newtedge/drop_shadow/
- 58 http://mikecherim.com/experiments/css_double_lists.php
- 59 http://mikecherim.com/experiments/css_double_lists.php
- 60 http://mikecherim.com/gbcms_xml/news_page.php?id=30#n30
- 61 http://mikecherim.com/gbcms_xml/news_page.php?id=30#n30
- 62 http://css-tricks.com/better-email-links-featuring-css-attribute-selectors/
- 63 http://css-tricks.com/better-email-links-featuring-css-attribute-selectors/
- 64 http://mikecherim.com/experiments/css_menu_descriptions.php#
- 65 http://mikecherim.com/experiments/css_menu_descriptions.php
- 66 http://css-tricks.com/css-transparency-settings-for-all-broswers/
- 67 http://css-tricks.com/css-transparency-settings-for-all-broswers/
- 68 http://www.devlounge.net/articles/custom-reading-containers
- 69 http://meyerweb.com/eric/tools/css/reset/
- 70 http://meyerweb.com/eric/tools/css/reset/
- 71 http://sonspring.com/journal/png-overlay
- 72 http://odyniec.net/articles/turning-lists-into-trees/
- 73 http://odyniec.net/articles/turning-lists-into-trees/
- 74 http://www.smileycat.com/miaow/archives/000648.php
- 75 http://www.smileycat.com/miaow/archives/000648.php
Hold on, Tiger! Thank you for reading the article. Did you know that we also publish printed books and run friendly conferences – crafted for pros like you? Like SmashingConf Barcelona, on October 25–26, with smart design patterns and front-end techniques.