Menu Search
Jump to the content X X
The Smashing Book #5

We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. new Smashing Book 5 features smart responsive design techniques and patterns.

50 Useful Coding Techniques (CSS Layouts, Visual Effects and Forms)

Advertisement

Although CSS is generally considered a simple and straightforward language, sometimes it requires creativity, skill and a bit of experimentation. The good news is that designers and developers worldwide often face similar problems and choose to share their insights and workarounds with the wider community.

This is where we come in. We are always looking to collect such articles for our posts so that we can deliver the most useful and relevant content to our readers. In this post, we present an overview of useful CSS/jQuery coding tips, tricks and techniques for visual effects, layouts and web form design to help you find solutions to the problems you are dealing with or will have to deal with in future.

You may want to look at similar CSS-related posts that we published last months:

CSS Layouts: Techniques And Workarounds Link

Facebook Style Footer Admin Panel4
Learn how to re-create the Facebook footer admin panel with CSS and jQuery. Also check out part 25.

Facebook Style Footer Admin Panel6

Adaptable View: How Do They Do It?7
This tutorial explains how to manually change a layout, and it shows two great examples and “how they did it.”

Adaptable view - how do they do it?8

Easy Display Switch with CSS and jQuery9
A quick and simple way to enable users to switch page layouts using CSS and jQuery.

  Easy Display Switch with CSS and jQuery10

Quick Tip – Resizing Images Based On Browser Window Size11
In fluid layouts, formatting text to adjust smoothly to window size is easy, but images are not as fluid-friendly. This quick tip shows how to switch between two image sizes based on the size of the browser, the DIV or whatever else you choose.

Quick Tip - Resizing Images Based On Browser Window Size12

One Page Résumé Site13
A clean layout on one page—literally (just one index.html file with optional images). It comes with contact information in microformats and a main area for the resume using a definition list (dl). And it prints well.

One Page Résumé Site14

Pegs: Automate Display: fixed++15
Chris Wetherell posts on Pegs, a strategy for having one scroll bar but independent scrolling areas. After the first one, click on the other items to flip between sizes. You will see that an area’s scroll depends on the configuration.

Pegs: Automate display: fixed++16

CSS 100% Height17
A common problem among designers is how to get a div to stretch 100% of the window’s height. There are a few different techniques out there, and this tutorial shows one of them.

CSS 100% Height18

CSS3 Drop-Down Menu19
A clean, simple a nice navigation menu, designed by Nick La.

Fluid Images

CSS Trick for a Scrolling Transparent Background Effect
Scroll the page to watch a battle between good and evil take shape. The effect requires two images: one transparent and one tiled gradient image. The gradient scrolls under the transparent PNG. Because it matches the colors in the PNG, each set of images disappears, depending on the part of the gradient they’re on top of.

CSS Trick For A Scrolling Transparent Background Effect

Fluid Images20
By default, an image element that is 500 pixels doesn’t exactly play nice with a container as large as 800 pixels or one as small as 100. What’s a designer to do?

Fluid Images21

Scroll/Follow Sidebar, Multiple Techniques22
A really simple concept: the sidebar follows you as you scroll down the page. There are a number of ways to go about it. Two are covered here: CSS and JavaScript (jQuery), with a bonus CSS trick.

Scroll/Follow Sidebar, Multiple Techniques23

Vertical Centering With CSS24
There are a few different ways to vertically center objects using CSS, but choosing the right one can be difficult. Here is a list of the best ways and an explanation of how to create a nice centered website.

 Vertical Centering With CSS25

Create YouTube-like adaptable view using CSS and jQuery26
Other than the “Turn off the lights” feature, YouTube has great stuff, such as the “change view” feature, which allows you to switch between normal and wide mode, thus expanding or shrinking the video area. Creating this is very simple.

Create YouTube-like adaptable view using CSS and jQuery27

How To Create a Horizontally Scrolling Site28
If websites were made of wood, the grain would run up and down. Vertical is the natural flow of the Web. But browsers are equipped with vertical and horizontal scroll bars, right? We have the choice to go against the grain and create web pages that scroll primarily horizontally and that even expand horizontally to accommodate more content. Perhaps a slight blow to usability, but a cool creative touch nonetheless!

How To Create a Horizontally Scrolling Site 29

Purely CSS – Faking Minimum Margins30
min-margin is non-existent in the CSS world. After you’ve pondered and Googled it, check out the solution here.

Purely CSS - Faking Minimum Margins 31

Create Sidebars of Equal Height with Faux Columns32
CSS can be tricky business. Creating columns of equal height, where the content in one column is longer than the content in another, is frustrating. Here’s where the faux-column technique can help. Find out how this solution makes even the most complicated layout a breeze to code.

Setting Equal Heights with jQuery33
Here is a script to match the heights of boxes in the same container and create a tidy grid, with little overhead.

Setting Equal Heights with jQuery34

Quick Tip: Centered Fake Floats
There were ways to center-align left-floated elements, but then inline-block became popular and everything changed. After a bit of tinkering, Zaharenia Atzitzikaki found an efficient and (mostly) cross-browser-compatible way to center elements without floats.

6 Flexible jQuery Plugins to Control Web Page Layouts Easily35
A collection of six jQuery plug-ins to manage page layouts easily.

  6 Flexible jQuery Plugins To Control Webpage Layouts Easily36

Four Methods to Create Equal-Height Columns37
This article discusses ways to create equal-height columns that work in all major browsers (including IE6). All of the methods show how to create a three-column layout.

Four Methods to Create Equal Height Columns 38

How to: CSS Large Background39
A tutorial with various CSS examples for how to create a large background using either a single image or double images.

  How to: CSS Large Background40

A Nice Little CSS Positioning Technique
Here, we have a basic unordered list (ul), with left-floated images where the text doesn’t wrap under the images. Of course, this technique could be deployed in loads of other instances.

A Nice Little CSS Positioning Technique

Perfect Full Page Background Image41
This technique allows an image to fill the page, with no white space. The image scales as needed and retains its proportions, without triggering scroll bars.

Perfect Full Page Background Image 42

Smart Columns With CSS and jQuery43
In observing liquid-width websites, Soh Tanaka sees two common techniques for displaying columns: fixed columns and liquid columns. He points out the drawbacks of both and pitches his solution.

Smart Columns w/ CSS and jQuery44

Images And Visual Effects With CSS Link

A Beautiful Apple-Style Slideshow Gallery With CSS and jQuery45
Create an Apple-like slideshow gallery, similar to the one used on Apple’s website to showcase products. It works entirely in the front end; no PHP or databases required.

A Beautiful Apple-style Slideshow Gallery With CSS and jQuery 46

Rolling a coke can around with pure CSS47
Román Cortés is having a lot of fun doing CSS tricks these days. He just built a rolling coke can that uses background-attachment, background-position and a few other tricks to achieve the effect. No fancy CSS3 needed here!

 Rolling a coke can around with pure CSS48

Grayscale Hover Effect With CSS and jQuery49
A few months ago, James Padolsey introduced a cool grayscale technique for non-IE browsers. His technique inspired Soh Tanaka to come up with a workaround with a similar effect. His solution relies on CSS Sprites and a few lines of jQuery, but it requires a bit of preparation before implementation. It is not recommended for large-scale projects; it is probably best for portfolio pieces.

Greyscale Hover Effect w/ CSS and jQuery50

Codename Rainbows
Some JavaScript and CSS magic is used here to apply a two-color gradient to text. Shadows and highlights can also be applied. This works especially well on big websites and for dynamic content where creating images for every instance would be impractical.

 Codename Rainbows

3 Easy and Fast CSS Techniques for Faux Image Cropping51
This article summarizes three fast and easy CSS techniques for displaying only a portion of an image. All of the techniques need only a couple of lines of CSS. You are not literally cropping, which is why it’s called faux image cropping. These techniques can be helpful if you want to keep images to a certain size (for example, thumbnails in a news section). Being able to use CSS to control which portion of an image to display is great.

3 Easy and Fast CSS Techniques for Faux Image Cropping52

Image Rollover Borders That Do Not Change Layout53
With CSS, the border of any block-level element is factored into the element’s size in the layout. So, if you add a border to an element on hover, the layout will shift. In this post, you will find how to use the regular border property and create inner borders to get around that.

Image Rollover Borders That Do Not Change Layout 54

Horizontal Stripes55
This tutorial shows you how to create never ending horizontal stripes in your web design using CSS.

Horizontal Stripes56

Nine Techniques for CSS Image Replacement57
Put nine different techniques of image replacement to the test.

Nine Techniques for CSS Image Replacement58

Bokeh effects with CSS3 and jQuery59
This tutorial teaches you how to re-create the bokeh effect with CSS 3. With some help from jQuery, we can add some randomness in colour, size and position for the effect.

Bokeh effects with CSS3 and jQuery60

A Stationary Logo That Changes on Page Scroll with CSS 61
Here is an interesting effect that modifies the logo when the page is scrolled, using the CSS background-attachment property.

A Stationary Logo That Changes on Page Scroll with CSS 62

Silhouette Fade-Ins63
To achieve the effect in the image above, first we need a DIV with the silhouettes as a background image. Then we put four images in that DIV, all the exact same size, with each band member highlighted. These images are hidden by default. Then you absolutely position four regions on top of the DIV; these are the roll-over link areas. With jQuery, we apply hover events to them, fading in the appropriate image.

Silhouette Fadeins64

Creating Triangles in CSS (the link was removed due to possible malware)
Few people realize that a browser draws borders at angles. This technique takes advantage of that. One side of the border is given the color of the arrow, and the rest are transparent. Then you give the border a large width; the ones above are 20 pixels.

Creating Triangles in CSS  65

A parallax optical illusion with CSS: The Horse in Motion66
Time for some fun with CSS and optical illusions.

A parallax optical illusion with CSS: The Horse in Motion67

Pure CSS Line Graph68
The idea here is not only to offer data visualization to people who aren’t comfortable using scripting languages, but to demonstrate the power of CSS and offer a different way of using CSS. If you are not a fan of line graphs and data visualization, you may still benefit from this article. Think of it as a CSS experiment, and learn a thing or two about CSS Sprites and positioning.

Pure Css Line Graph 69

Zooming with jQuery and CSS70
This post is about text zooming with jQuery and CSS. This is a basic-level tutorial about changing a style using a jQuery script. A simple way to zoom website content.

Zooming with jQuery and CSS71

Create Resizing Thumbnails Using Overflow Property72
This tutorial teaches you how to control thumbnail sizes. Sometimes we don’t have enough space to fit large thumbnails, and yet we would rather avoid small indecipherable images. Using this trick, we can limit the default dimensions of thumbnails and show them at full size when the user mouses over them.

Create Resizing Thumbnails Using Overflow Property 73

Cross-browser drop shadows using pure CSS
Most methods of adding drop-shadows to content blocks require additional HTML mark-up and one or more PNG images. But by combining the Glow and Shadow filters, something that fairly closely resembles the rendered CSS3 shadow can be achieved.

Cross-browser drop shadows using pure CSS

Date Badges and Comment Bubbles for Your Blog74
One of the things you have to deal with when your blog grows is having to cram more info into less space to show everything you want to show. One thing you can do is add an icon for the date and then a bubble over it with the number of comments for that post.

Date Badges and Comment Bubbles for Your Blog75

CSS Tables And Web Forms Link

UX trick: display form data as tabular data76
This is a little trick to enhance the user experience of forms. It displays editable form data as readable tabular data.

UX trick: display form data as tabular data77

Tables: Not As Evil As You Think78
Tables are evil, right? Yes and no. For tabular data, they’re not, of course. That’s what tables are for in the first place. CSS can do an excellent job of styling a properly formatted table, and the table structure provides good scaffolding for JavaScript calls. But what is addressed here is using tables for non-tabular data (i.e. for the layout). Yes, that’s right: using tables for layout.

 Tables: Not As Evil As You Think79

Perfect Drop-Down Log-In Box Like Twitter Using jQuery
This shows you how to create a Twitter-style drop-down log-in form using jQuery. It’s really easy, it saves space on the page and visitors feel comfortable with the awesome toggle form.

Perfect Dropdown Login Box like Twitter using jQuery

Make a Select’s Options Printable80
When printing a Web page with select elements on it, the select drop-down prints just as it looks on the Web. This of course is practically useless on the printed page. One option for handling this is to follow every select HTML element with an unordered list that duplicates the content. Hide the unordered list in your main CSS file and reveal it with your print style sheet. This is a reasonable approach, except that it’s a big ol’ pain in the butt to deal with all the time. Let’s rely on jQuery to do the heavy lifting instead.

Make a Select's Options Printable81

Twitter-Like Log-In With jQuery and CSS82
This post explains how to get the Twitter-like hide and show effect for logging in using jQuery and CSS.” Very simple: just five lines of JavaScript for the hide() and show() events and a little CSS.

Twitter like Login with Jquery and CSS83

Clean and Pure CSS Form Design84
This tutorial illustrates how to design a pure CSS form without using HTML tables.

 Clean and pure CSS FORM design85

CSSG Collection: Free Comment Styles86
This is the second CSSG collection from CSS Globe.

CSSG Collection: Free Comment Styles 87

Have a Field Day with HTML5 Forms88
Here is a look at how to style a beautiful HTML5 form using some advanced CSS and the latest CSS3 techniques. You will definitely want to re-style your forms after having read this article.

24 ways: Have a Field Day with HTML5 Forms89

Editable/Printable Invoice90
Create editable and printable invoices using CSS and some JavaScript. This is version 2 from Vinh Pham.

Editable/Printable Invoice, Version 2 91

How to Mask Passwords Like the iPhone92
Many smartphones, including the iPhone, show the last character that you typed in a password field with a delay of a second or two. You can see that last character but not the entire password. But browsers don’t do what these mobile devices do. Here is a solution, with some fancy JavaScript and behind-the-scenes trickery.

How to Mask Passwords Like the iPhone93

Make Web Forms Suck Less With Labels94
We’ve been filling out Web forms for years, and we all gripe that they could be better. Even with generous padding, the fields are too small. But hardly anyone has improved the most under-rated interaction of them all: checkboxes and radio buttons.

 Make Web Forms Suck Less With Labels95

FancyForm: JavaScript checkbox replacement96
FancyForm is a powerful and flexible checkbox-replacement script that changes the appearance and function of HTML form elements. It is accessible and easy to use, and it degrades gracefully on older non-supported browsers.

FancyForm - Javascript checkbox replacement97

jQuery checkbox v.1.3.0 Beta 198
A lightweight custom-styled checkbox implementation for jQuery 1.2.x and 1.3.x.

jQuery checkbox v.1.3.0 Beta 199

Disabled labels and the Trilemma plug-in
The form above on the left makes use of the disabled attribute, but the default browser settings for disabled inputs don’t contrast as much as one would like. To better distinguish at a glance between which inputs are disabled and enabled, the labels of disabled inputs in the form on the right are styled with a faint gray color.

Disabled labels and the Trilemma plugin

Fluid Search Box100
Creating a fluid search box when you have only a single element next to it is trivial. What you should do is wrap the input in an element and use padding to create space for the fixed element; then position the fixed element absolutely (or relatively) in the space created by the padding.

Last Click Link

Browser Pong101
A whole new pong game using three browser windows for the ball and racquets. Clever!

Browser Pong102

(kk) (jb) (vf) (al)

Footnotes Link

  1. 1 https://www.smashingmagazine.com/2010/01/12/45-powerful-css-javascript-techniques/
  2. 2 https://www.smashingmagazine.com/2010/02/01/50-brilliant-css3-javascript-coding-techniques/
  3. 3 https://www.smashingmagazine.com/2009/11/23/6-useful-coding-solutions-for-designers-and-developers/
  4. 4 http://www.sohtanaka.com/web-design/facebook-style-footer-admin-panel-part-1/
  5. 5 http://www.sohtanaka.com/web-design/facebook-style-footer-admin-panel-part-2/
  6. 6 http://www.sohtanaka.com/web-design/facebook-style-footer-admin-panel-part-1/
  7. 7 http://www.jankoatwarpspeed.com/post/2009/07/07/Adaptable-view.aspx
  8. 8 http://www.jankoatwarpspeed.com/post/2009/07/07/Adaptable-view.aspx
  9. 9 http://designm.ag/tutorials/jquery-display-switch/
  10. 10 http://designm.ag/tutorials/jquery-display-switch/
  11. 11 http://buildinternet.com/2009/07/quick-tip-resizing-images-based-on-browser-window-size/
  12. 12 http://buildinternet.com/2009/07/quick-tip-resizing-images-based-on-browser-window-size/
  13. 13 http://css-tricks.com/one-page-resume-site/
  14. 14 http://css-tricks.com/one-page-resume-site/
  15. 15 http://ajaxian.com/archives/pegs-automate-display-fixed
  16. 16 http://ajaxian.com/archives/pegs-automate-display-fixed
  17. 17 http://www.tutwow.com/tips/quick-tip-css-100-height/
  18. 18 http://www.tutwow.com/tips/quick-tip-css-100-height/
  19. 19 http://www.webdesignerwall.com/demo/css3-dropdown-menu//
  20. 20 http://unstoppablerobotninja.com/entry/fluid-images/
  21. 21 http://unstoppablerobotninja.com/entry/fluid-images/
  22. 22 http://css-tricks.com/scrollfollow-sidebar/
  23. 23 http://css-tricks.com/scrollfollow-sidebar/
  24. 24 http://blog.themeforest.net/tutorials/vertical-centering-with-css/
  25. 25 http://blog.themeforest.net/tutorials/vertical-centering-with-css/
  26. 26 http://www.jankoatwarpspeed.com/post/2009/11/08/YouTube-adaptable-view-css-jquery.aspx
  27. 27 http://www.jankoatwarpspeed.com/post/2009/11/08/YouTube-adaptable-view-css-jquery.aspx
  28. 28 http://css-tricks.com/how-to-create-a-horizontally-scrolling-site/
  29. 29 http://css-tricks.com/how-to-create-a-horizontally-scrolling-site/
  30. 30 http://buildinternet.com/2009/10/purely-css-faking-minimum-margins/
  31. 31 http://buildinternet.com/2009/10/purely-css-faking-minimum-margins/
  32. 32 http://line25.com/articles/create-sidebars-of-equal-height-with-faux-columns
  33. 33 http://www.filamentgroup.com/lab/setting_equal_heights_with_jquery/
  34. 34 http://www.filamentgroup.com/lab/setting_equal_heights_with_jquery/
  35. 35 http://www.webresourcesdepot.com/6-flexible-jquery-plugins-to-control-webpage-layouts-easily/
  36. 36 http://www.webresourcesdepot.com/6-flexible-jquery-plugins-to-control-webpage-layouts-easily/
  37. 37 http://buildinternet.com/2009/07/four-methods-to-create-equal-height-columns/
  38. 38 http://buildinternet.com/2009/07/four-methods-to-create-equal-height-columns/
  39. 39 http://www.webdesignerwall.com/tutorials/how-to-css-large-background/
  40. 40 http://www.webdesignerwall.com/tutorials/how-to-css-large-background/
  41. 41 http://css-tricks.com/perfect-full-page-background-image/
  42. 42 http://css-tricks.com/perfect-full-page-background-image/
  43. 43 http://www.sohtanaka.com/web-design/smart-columns-w-css-jquery/
  44. 44 http://www.sohtanaka.com/web-design/smart-columns-w-css-jquery/
  45. 45 http://tutorialzine.com/2009/11/beautiful-apple-gallery-slideshow/
  46. 46 http://tutorialzine.com/2009/11/beautiful-apple-gallery-slideshow/
  47. 47 http://www.romancortes.com/blog/pure-css-coke-can/
  48. 48 http://www.romancortes.com/blog/pure-css-coke-can/
  49. 49 http://www.sohtanaka.com/web-design/greyscale-hover-effect-w-css-jquery/
  50. 50 http://www.sohtanaka.com/web-design/greyscale-hover-effect-w-css-jquery/
  51. 51 http://cssglobe.com/post/6089/3-easy-and-fast-css-techniques-for-faux-image
  52. 52 http://cssglobe.com/post/6089/3-easy-and-fast-css-techniques-for-faux-image
  53. 53 http://css-tricks.com/image-rollover-borders-that-do-not-change-layout/
  54. 54 http://css-tricks.com/image-rollover-borders-that-do-not-change-layout/
  55. 55 http://www.christinafowler.com/tutorial/horizontal-stripes
  56. 56 http://www.christinafowler.com/tutorial/horizontal-stripes
  57. 57 http://css-tricks.com/css-image-replacement/
  58. 58 http://css-tricks.com/css-image-replacement/
  59. 59 http://www.marcofolio.net/webdesign/pure_css3_bokeh_effect_with_some_jquery_help.html
  60. 60 http://www.marcofolio.net/webdesign/pure_css3_bokeh_effect_with_some_jquery_help.html
  61. 61 http://www.impressivewebs.com/stationary-logo-changes-page-scroll-css/
  62. 62 http://www.impressivewebs.com/stationary-logo-changes-page-scroll-css/
  63. 63 http://css-tricks.com/silhouette-fadeins/
  64. 64 http://css-tricks.com/silhouette-fadeins/
  65. 65 http://www.dinnermint.org/css/creating-triangles-in-css/
  66. 66 http://www.marcofolio.net/css/a_parallax_illusion_with_css_the_horse_in_motion.html
  67. 67 http://www.marcofolio.net/css/a_parallax_illusion_with_css_the_horse_in_motion.html
  68. 68 http://cssglobe.com/post/4175/pure-css-line-graph
  69. 69 http://cssglobe.com/post/4175/pure-css-line-graph
  70. 70 http://www.9lessons.info/2009/10/zooming-with-jquery-and-css.html
  71. 71 http://www.9lessons.info/2009/10/zooming-with-jquery-and-css.html
  72. 72 http://cssglobe.com/post/1305/create-resizing-thumbnails-using-overflow-property
  73. 73 http://cssglobe.com/post/1305/create-resizing-thumbnails-using-overflow-property
  74. 74 http://css-tricks.com/date-badges-and-comment-bubbles-for-your-blog/
  75. 75 http://css-tricks.com/date-badges-and-comment-bubbles-for-your-blog/
  76. 76 http://cssglobe.com/post/6984/ux-trick-display-form-data-as-tabular-data
  77. 77 http://cssglobe.com/post/6984/ux-trick-display-form-data-as-tabular-data
  78. 78 http://www.zurb.com/article/206/tables-not-as-evil-as-you-think
  79. 79 http://www.zurb.com/article/206/tables-not-as-evil-as-you-think
  80. 80 http://css-tricks.com/making-selects-printable/
  81. 81 http://css-tricks.com/making-selects-printable/
  82. 82 http://www.9lessons.info/2009/12/twitter-like-login-with-jquery-and-css.html
  83. 83 http://www.9lessons.info/2009/12/twitter-like-login-with-jquery-and-css.html
  84. 84 http://woork.blogspot.com/2008/06/clean-and-pure-css-form-design.html
  85. 85 http://woork.blogspot.com/2008/06/clean-and-pure-css-form-design.html
  86. 86 http://cssglobe.com/post/6295/cssg-collection-free-comment-styles
  87. 87 http://cssglobe.com/post/6295/cssg-collection-free-comment-styles
  88. 88 http://24ways.org/2009/have-a-field-day-with-html5-forms
  89. 89 http://24ways.org/2009/have-a-field-day-with-html5-forms
  90. 90 http://css-tricks.com/editable-invoice-v2/
  91. 91 http://css-tricks.com/editable-invoice-v2/
  92. 92 http://www.zurb.com/article/279/how-to-mask-passwords-like-the-iphone
  93. 93 http://www.zurb.com/article/279/how-to-mask-passwords-like-the-iphone
  94. 94 http://www.zurb.com/article/195/make-web-forms-suck-less-with-labels
  95. 95 http://www.zurb.com/article/195/make-web-forms-suck-less-with-labels
  96. 96 http://lipidity.com/fancy-form/
  97. 97 http://lipidity.com/fancy-form/
  98. 98 http://widowmaker.kiev.ua/checkbox/
  99. 99 http://widowmaker.kiev.ua/checkbox/
  100. 100 http://friedcellcollective.net/outbreak/2009/10/04/fluid-searchbox/
  101. 101 http://stewdio.org/pong/
  102. 102 http://stewdio.org/pong/
SmashingConf Oxford

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 Oxford, on March 15—16, with smart design patterns and front-end techniques.

↑ Back to top Tweet itShare on Facebook

The Smashing team loves high-quality content and cares about the little details. Through our online articles, Smashing Books, eBooks as well as Smashing Conferences, we are committed to stimulating creativity and strengthening the web design community’s creative forces.

Advertisement
  1. 1

    First! Really nice article, gonna bookmark this one for sure! Tnx SM :-)

    0
  2. 2

    Nice article and really useful.
    Thank you Smashing. ;-)

    2
  3. 3

    This is one heck of a collection. I could spend days seeing this. Lovely!!! I am in love with that rainbow color thing. It is super cool.. thanks for the round up :)

    1
  4. 4

    AWESOME article. Question, though. I would like to view the “CSS 100% Height” technique, but the text and image hyperlink goes to a page and domain with no content and source code. Anyone else with this problem?

    1
  5. 5

    Smashing Editorial

    February 18, 2010 6:39 am

    The site must be down at the moment – please try again later.

    -1
  6. 6

    very nice collection – good post, thanks

    0
  7. 7

    Nice article but they missed to include.. http://ib.im/dxfrH
    But will surely bookmark it :)

    -1
  8. 8

    we…e..e…this is awesome collection technique
    hoosshhh!!!

    1
  9. 9

    very nice collection… i would also interested to know the slider order form is done, where you add things and its calculated in bottom…

    0
  10. 10

    Smashing Compilation !!! This will come in handy for the redesign of my site. Thanks for all the effort.

    0
  11. 11

    Nice compilation :)

    -1
  12. 12

    Awesome article!!! Star to it!

    -1
  13. 13

    That Browser Pong is great!

    The twitter-style login demo is great too :D

    0
  14. 14

    Great! Thank you!

    0
  15. 15

    Amazing collection, bookmarked ! A lot of tricks that can be usefull and avoid headaches for sure. Thanks !

    0
  16. 16

    Definitely a great roundup with helpful demos. I still suck at styling forms and some of the demos will help me next time for sure.

    1
  17. 17

    Really Awesome!,
    Thank you.

    0
  18. 18

    The site must have gotten the Smashing Effect. :D

    -2
  19. 19

    I love it! Great post! Hope to see more things like these in the future! A+ to SM!!

    1
  20. 20

    Very nice round-up. I’ve seen a lot of these and there are actually a couple of new techniques that I’m not familiar with.

    By the way, I already subscribe to a lot of these blogs, Soh Tanaka, Janko at Warp Speed, AEXT, Tutorialzine and CSS-Tricks.

    1
  21. 21

    Fantastic set of resources…. as always. :)

    1
  22. 22

    Kartlos Tchavelachvili

    February 18, 2010 12:47 pm

    Tricks, Tricks and more Tricks! This kind of articles are very useful! Thanks :)

    1
  23. 23

    Great roundup, extremely useful.
    Thanks a lot :D

    1
  24. 24

    Not sure if you guys know this or not, but in IE 8, your site redirects to the mobile version of the site!

    2
  25. 25

    Fantastic! Every new day i see new powers of the CSS. you think that the unification of the way browsers read CSS would be good or inhibit creativity that you see here?

    1
  26. 26

    great article! Thx, its very useful for me :)

    2
  27. 27

    Once again. you made and awesome post!

    3
  28. 28

    Wow. What a great post a lot of really good stuff in here – thanks :)

    0
  29. 29

    This is just an amazing article!

    0
  30. 30

    Bravoooo….
    Nice collection of techniques.

    Thx Smash.

    0

↑ Back to top