Menu Search
Jump to the content X X
Smashing Conf New York

You know, we use ad-blockers as well. 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. our upcoming SmashingConf New York, dedicated to smart front-end techniques and design patterns.

50 New CSS Techniques For Your Next Web Design

CSS is almost certainly one of the best developments in web design since the first graphical web browsers were adopted on a wide scale. Where tables created clunky, slow-loading pages, CSS created much more streamlined and usable web pages. Plus, CSS has allowed designers to achieve a number of different styles that used to only be possible with images.

One of the best parts of CSS is that it’s so simple once you know the basics. Where tables used to make incredibly complex and sometimes impossible-to-decipher code, CSS keeps things clean and simple. Add a few comments to keep everything organized and it becomes an absolute dream to work with.

Below are 50 fresh CSS tricks, techniques and tutorials that will help you to improve the quality of your next web design. Be sure to check out our previous articles:

1. Security and Performance Link

While CSS is often thought of as merely a styling language, there are ways you can use it to add security to your site. There are also ways you can optimize your CSS to improve page load times. Both are discussed below.

Make your pages load faster by combining and compressing javascript and css files Link

This tutorial5 shows you how to create a PHP script to compress and combine multiple CSS and/or JavaScript files with gzip when they’re called for by a browser. It speeds up the page load times while making it possible to still edit the individual CSS or JavaScript files without having to combine and re-compress everything each times.

Informal testing showed that a group of JavaScript files were reduced from 168Kb (and 1905 ms to transfer) to 37Kb (and 400 ms). There wasn’t any data available for the effect it had on CSS files, but I’d guess it’s probably pretty similar.

Screenshot6

The Definitive Post on Gzipping Your CSS Link

This post7 covers the best and most recent methods for using GZIP to compress your CSS. It currently covers two different methods, both equally effective. One involves adding a bit of PHP to your CSS file (and renaming the file with a PHP extension instead of CSS) while the other method involves using the same PHP code with some additions but in a separate file.

Screenshot8

Clickjane.css: A CSS User Style Sheet to Help Detect and Avoid Clickjacking Attacks Link

This post9 covers how to use clickjane.css to prevent clickjacking, a class of security vulnerabilities kind of like phishing scams and more formally referred to as user interface redressing. It’s cross-browser compatible but, admittedly, probably only covers a small range of potential clickjacking vulnerabilities. It’s still a good place to start, though.

Screenshot10

5 Step Style Sheet Weight Loss Program Link

This post shows five different ways to trim the size of your style sheets. Techniques range from learning how to group selectors to using CSS shorthand. Each technique is thoroughly explained and includes related resources.

Screenshot

2. Page Layout Link

This is what CSS was built for. The options are almost endless, especially as CSS3 becomes the new standard.

Aligning Inline Images with the Vertical-Align Property Link

The default vertical alignment for inline images in text sometimes looks not-so-great. This tutorial11 shows you how to better align inline images with your site’s type. It goes over the different types of vertical alignment and what they mean in relation to type.

Screenshot12

CSS Centering Link

This post13 includes instructions for centering liquid layouts with CSS. It’s very simple and straight-forward and works in virtually all browsers. Basically, it just uses left and right margins combined with some additional code to make it cross-browser compatible.

Screenshot14

Keeping footers at the bottom of your pages can be a real hassle with CSS, depending on how the rest of your page is set up. This tutorial15 shows exactly how to keep your footer where it should be—below the rest of your content! It’s a very thorough post, with complete, step-by-step instructions.

Screenshot16

Vertical Centering with CSS Link

This post covers five excellent ways to center your content vertically. It includes the good and bad for each method along with complete instructions for implementing them. The methods range from using divs that act like tables to using absolute positions.

Screenshot

Handy Tips for Creating a Print CSS Stylesheet Link

This post17 is filled with great tips for creating better print stylesheets. It includes instructions for everything from including link destinations after the link text to splitting comments onto a new page. Pick and choose from the techniques offered or copy the whole stylesheet.

Screenshot18

Fluid Images Link

Fluid layouts are great. They generally look and function just fine until you start introducing fixed-width elements within them—like images. This post19 shows how to make your images fluid, too. And it works for most embedded video. And while the basic technique includes just one CSS property, there is a workaround necessary to make it work on Windows machines.

Screenshot20

Flexible Equal Height Columns Link

This tutorial21 shows how to create completely versatile equal height columns using valid and semantic markup. It’s cross-browser compatible and works with both fixed, fluid, and even elastic designs. It’s a very complete tutorial but not at all complicated.

Screenshot22

CSS Columns with Borders Link

This is a technique23 for creating equal-height columns with CSS that have borders. It uses a series of nested divs to achieve the effect instead of images. The end result is fantastic.

Screenshot24

Creating a Polaroid Photo Viewer with CSS3 and jQuery Link

The photo gallery created with this technique25 is absolutely awesome. The HTML and CSS aren’t super-complicated, and everything is explained really well. While CSS3 isn’t supported by every browser, this does appear to degrade gracefully, making it perfectly fine to use as long as you don’t mind some visitors not getting the full effect.

Screenshot26

A Killer Collection of Global CSS Reset Styles Link

An incredibly complete collection27 of global resets, this post covers pretty much every reset you could possibly need. Some are short and sweet, consisting of only a couple of properties, while others are very complete and reset everything you might consider resetting.

Screenshot28

Making Module Layout Systems Link

This tutorial29 gives complete instructions for creating modular layout systems using CSS. This makes it practical to use different grid-based divs as needed for individual content elements. The end result provides tons of flexibility for dealing with everything from images to text while keeping everything uniform and balanced.

Screenshot30

Multiple Backgrounds (CSS3) Link

This tutorial shows how to implement multiple backgrounds using CSS3. It’s currently only supported by Safari, but the tutorial includes tricks to make it work in non-supported browsers. Currently, it doesn’t validate, but once the CSS3 standard is completed it’s likely it will.

Screenshot

CSS3 Multiple Columns Link

Here’s a tutorial for creating multi-column layouts with CSS3. The CSS is pretty simple and straight-forward, much easier than most current solutions to multi-column layouts. Unfortunately, this only works with Firefox, Safari and Chrome at the moment.

Screenshot

Smart Columns with CSS and jQuery Link

This tutorial shows how to create smart columns inside liquid layouts using a combination of CSS and jQuery. Basically, it fits as many columns into the base column size as possible and then distributes any leftover white space among the columns there. A very elegant solution if you want to allow for a variable number of columns without ending up with a bunch of leftover white space in your design.

Screenshot

CSS Hack for Chrome, Safari and Internet Explorer Link

This tutorial31 shows how to apply different style sheets based on the browser your visitors are using (at least in IE5-8, Google Chrome, and Safari 1-4). A very valuable technique if you want to use styles only supported in certain browsers without making your site look bad in unsupported browsers.

3. Menu and Navigation Customizations Link

Menu and navigation styles can really set your site apart if done well. Just remember, menus need to remain usable and functional no matter how they look.

Overlap That Menu! Link

Have you ever wanted to create menu items that overlap? This relatively-simple tutorial shows you how to do just that using unique classes for your menu items. It also tells how to reorder the navigation items using the z-index. It’s a nice effect that isn’t difficult to achieve.

Screenshot

Super Awesome Buttons with CSS3 and RGBA Link

With a little CSS3 magic, you can created a scalable set of sexy buttons32 with nearly half the CSS it would have taken with hex colors. Give it a go in your next project and see how it can help add that extra polish you want without huge impact on your code.

 Super Awesome Buttons with CSS3 and RGBA33

Custom Buttons 3.0 Link

This page34 shows a variety of rounded-corner (1px radius) buttons that don’t use images (other than for the optional background gradient). Just look at the source code for the page to see how it’s done.

Screenshot35

Centered Tabs with CSS Link

This tutorial36 provides an alternative to the sliding doors method of creating tabs in CSS that allows tabs to be centered instead of only right- or left-aligned. It’s a multi-step tutorial but isn’t complicated.

Screenshot37

Styling the Button Element with CSS Sliding Doors Link

An updated tutorial on sliding doors buttons that now includes creating them with CSS image sprites. It’s also been simplified to work with a single block of CSS in all the major browsers (including IE 6-8). The markup is simple and straight-forward and the end result is perfect.

Screenshot

Sometimes you have to use a button (like with forms), but realize your design would look so much better with just a simple text link. This tutorial gives a complete overview of how to make your buttons look like text links using CSS.

Screenshot

Simple, Scalable CSS Based Breadcrumbs Link

Breadcrumbs can be a great addition to your site’s navigation and can really improve your site’s usability. This tutorial38 shows you how to create breadcrumbs with CSS. The code used is simple (the HTML portion is just an unordered list) and there are only six CSS styles defined.

Screenshot39

Recreating the Button Link

This article40 covers how to make a button that look very similar to regular HTML input buttons but can handle multiple types of interaction (like dropdowns or toggle functions). These buttons were originally developed at Google and are skinnable with just a few lines of CSS. The buttons created are entirely CSS-based, including the gradient background.

Screenshot41

This page offers a good overview of different effects you can use for links, including color and underline, backgrounds, and animations. It’s a good starting place if you’re trying to figure out exactly how your links should look and act to make them more user-friendly.

Screenshot

Create Vimeo-Like Top Navigation Link

Here’s a tutorial42 to create a drop-down top navigation bar similar to the one Vimeo.com43 uses. It’s all done with images, CSS and HTML and isn’t particularly difficult, though it is a bit complex. It’s explained really well, with images illustrating the structure and very well-written CSS.

Screenshot44

Beautifully Horizontal Centered Menus/Tabs/List Link

This tutorial45 explains how to create cross-browser compatible, centered menus or other items in CSS with no hacks and no JavaScript It’s compatible with liquid layouts, too. Not only does it give the code to achieve the effect, but it also fully explains exactly how and why it works.

4. Typography Link

Here are a few tutorials and tricks for creating advanced typographic styles using CSS. There’s everything from line-wrap functions to faux anti-aliasing to adding gradients and shadows.

Wrapping Text Inside Pre Tags Link

This tutorial46 shows how to wrap text within pre html tags. It’s useful for displaying code on your site, especially when lines of code are quite long and end up breaking your site’s layout (especially in IE). It’s a relatively simple and there are a few different options presented.

Screenshot47

Make Cool and Clever Text Effects with CSS Text-Shadow Link

Creating text effects without the use of images is a big advantage in terms of both file size and the time required for maintenance. This tutorial48 shows how to take advantage of the text-shadow property in CSS to style your text. While this effect doesn’t work in IE, it does in most other browsers. And it looks incredibly cool if done well (I’m a big fan of the “milky text” example).

Screenshot49

Safari’s Text-Shadowing Anti-Aliasing CSS Hack Link

This tutorial50 shows how to use the text-shadow CSS property to create an anti-aliasing effect on your text. It only works in browsers that support text-shadow (so not IE), but the look is pretty awesome. It can definitely make text more readable, just don’t overdo it or you end up with text that’s blurry.

Screenshot51

Safari’s Text-Shadowing Anti-Aliasing CSS Hack Revision Link

This is a revised version of the technique above to create a slightly different anti-aliasing effect, especially useful for light text on dark backgrounds. It uses an extremely transparent black background to force Safari to render the text more legibly.

Screenshot

Snazzy Pullquotes for Your Blog Link

If you have a blog or other site that’s text-heavy, using pull quotes to highlight important bits can look really awesome while also making your content more scannable. This tutorial52 shows how to format those pull quotes with CSS. It shows how to create both left and right aligned pull quotes while also preserving your regular blockquote style.

Screenshot53

Codename Rainbows Link

Here’s a technique for creating two-color gradients for text using a combination of JavaScript and CSS. It also works to apply shadows and highlights to text. The possibilities for the use of this technique are pretty endless. Of course, this is also one of those things where a little bit goes a long way (ie, limit gradients to your headers, titles, and other text you want to stand out—not your site’s body copy).

Screenshot

Build Better CSS Font Stacks Link

This article gives some great guidelines for creating better CSS font stacks. It includes information on the most common font stacks currently used and then goes on to cover Tuck’s Definitive Font Stacks and Ford’s Better Font Stacks. It’s a great resource when you’re determining a site’s typography, with the information presented in a very scannable, well-organized format.

Screenshot

CSS3 Embedding a Font Face Link

Here’s a great tutorial on how to embed fonts using CSS3. While it’s still not widely supported, this technique makes it much easier to embed special fonts into a site without having to resort to images.

Screenshot

CSS Gradient Text Effect Link

This little trick54 makes it easy to create gradient text by applying a 1 pixel gradient PNG to it. It’s a quick and easy way to create gradient text pretty much anywhere on your site. There’s even a fix to make it work in IE6 included.

Screenshot55

5. Other Cool Techniques, Tips, and Tricks Link

Below are a ton of other techniques and tricks you can use to really make your CSS stand out.

3D Cube Using CSS Transformations Link

This is probably one of the coolest CSS techniques I’ve seen. This tutorial56 shows how to build a 3D cube with text or other content on each side of the cube. It does it entirely with CSS; there’s no canvas, SVG, imagery, or JavaScript. There’s even instructions for creating multiple shaded cubes on a single page. The only real drawback is that it’s only supported in recent WebKit and Gecko browsers.

Screenshot57

Nine Ways to Obfuscate E-mail addresses compared Link

This article58 gives two different methods for obfuscating email addresses with CSS. One involves using the display:none attribute while the other involves reversing the code. Both supposedly cut the amount of spam received to zero.

Screenshot59

Forms Markup and CSS – Revisited Link

Here is a CSS template for form styling. The markup of the form is based on the Accessible Forms Markup from Derek Featherstone. The template is semantically correct, flexible and accessible.

Screenshot

iPhone CSS Link

A very short and simple tutorial60 on how to make certain elements of you CSS render differently on the iPhone. It’s surprisingly simple and easy to implement.

Screenshot61

Improving Your Process: Faster Front End Development Link

While this post offers plenty of information on things other than CSS, it also offers some great advice for improving your efficiency with CSS: mainly, write your CSS in blocks. This technique is usually done progressively as you get used to coding in this manner. The steps are simple, though, and it’s sure to make you a much faster designer.

Screenshot

Image-Free CSS Tooltip Pointers – A Use for Polygonal CSS? Link

This tutorial explains how to create triangles (to be used for pointers) using CSS, without the need for any images. The end result is great, though it only works for single-color images. The CSS used is incredibly simple while still being really versatile. You can create a triangle of almost any size using just a single div.

Screenshot

While not strictly a CSS trick, this post shows how to create a cookie-based CSS theme switcher for WordPress. It allows users to choose to use a different theme when they visit the blog while allowing new users to see a nice, simple, easy-to-read theme that puts the primary focus on the content.

Screenshot

CSS Swap Hover Effect Link

This great technique will replace any image with another image when you hover over it. The tutorial shows it applied to a portfolio site, but the possibilities are endless. It’s very slick and cross-browser compatible (though IE6 does require a bit of a workaround, as usual).

Screenshot

CSS Stacked Bar Graphs Link

Here’s a tutorial for creating stacked bar graphs using CSS and some images. It’s a pretty in-depth process, but the result looks fantastic.

Screenshot

Changing HTML Images on Hover / A Quick CSS Trick Link

Here’s a quick and easy CSS technique62 for swapping out images on hover. It’s pure CSS, no JavaScript required. The biggest issue this technique solves is that when the page is printed, the base image is the only one that shows up.

Screenshot63

10 Properties that Were Impossible to Implement in IE6 Link

This collection64 of CSS tricks shows how to implement a number of styles that were supposedly impossible in Internet Explorer 6. It includes tricks for opacity, fixed positions, and text shadow, among others.

Screenshot65

10 Challenging But Awesome CSS Techniques Link

Sometimes the coolest things just take a bit more effort. This collection of tutorials66 covers ten different CSS techniques that aren’t exactly easy to achieve, but the end results are well worth the extra effort. Techniques include pull quotes, dynamic variables, and style changes based on the time of day or even the weather, among other awesome examples.

Screenshot67

Footnotes Link

  1. 1 https://www.smashingmagazine.com/2008/02/powerful-css-techniques-for-effective-coding/
  2. 2 https://www.smashingmagazine.com/2010/10/50-new-useful-css-techniques-tutorials-and-tools/
  3. 3 https://www.smashingmagazine.com/2007/01/19/53-css-techniques-you-couldnt-live-without/
  4. 4 https://www.smashingmagazine.com/2011/07/responsive-web-design-techniques-tools-and-design-strategies/
  5. 5 http://rakaz.nl/item/make_your_pages_load_faster_by_combining_and_compressing_javascript_and_css_files
  6. 6 http://rakaz.nl/item/make_your_pages_load_faster_by_combining_and_compressing_javascript_and_css_files
  7. 7 http://www.fiftyfoureleven.com/weblog/web-development/css/the-definitive-css-gzip-method
  8. 8 http://www.fiftyfoureleven.com/weblog/web-development/css/the-definitive-css-gzip-method
  9. 9 http://maymay.net/blog/2008/12/29/clickjanecss-a-css-user-style-sheet-to-help-detect-and-avoid-clickjacking-attacks/
  10. 10 http://maymay.net/blog/2008/12/29/clickjanecss-a-css-user-style-sheet-to-help-detect-and-avoid-clickjacking-attacks/
  11. 11 http://www.maxdesign.com.au/2008/10/05/vertical-align/
  12. 12 http://www.maxdesign.com.au/2008/10/05/vertical-align/
  13. 13 http://www.maxdesign.com.au/presentation/center/
  14. 14 http://www.maxdesign.com.au/presentation/center/
  15. 15 http://fortysevenmedia.com/blog/archives/making_your_footer_stay_put_with_css/
  16. 16 http://fortysevenmedia.com/blog/archives/making_your_footer_stay_put_with_css/
  17. 17 http://line25.com/tutorials/handy-tips-for-creating-a-print-css-stylesheet
  18. 18 http://line25.com/tutorials/handy-tips-for-creating-a-print-css-stylesheet
  19. 19 http://unstoppablerobotninja.com/entry/fluid-images/
  20. 20 http://unstoppablerobotninja.com/entry/fluid-images/
  21. 21 http://www.socialgeek.be/blog/read/flexible-equal-height-columns
  22. 22 http://www.socialgeek.be/blog/read/flexible-equal-height-columns
  23. 23 http://www.onderhond.com/blog/onderhond/css-columns-with-borders
  24. 24 http://www.onderhond.com/blog/onderhond/css-columns-with-borders
  25. 25 http://www.marcofolio.net/webdesign/creating_a_polaroid_photo_viewer_with_css3_and_jquery.html
  26. 26 http://www.marcofolio.net/webdesign/creating_a_polaroid_photo_viewer_with_css3_and_jquery.html
  27. 27 http://perishablepress.com/press/2007/10/23/a-killer-collection-of-global-css-reset-styles/
  28. 28 http://perishablepress.com/press/2007/10/23/a-killer-collection-of-global-css-reset-styles/
  29. 29 http://24ways.org/2008/making-modular-layout-systems
  30. 30 http://24ways.org/2008/making-modular-layout-systems
  31. 31 http://www.giantisland.com/Resources/LitePacificHackforSafariAndIE7.aspx
  32. 32 http://www.zurb.com/article/266/super-awesome-buttons-with-css3-and-rgba
  33. 33 http://www.zurb.com/article/266/super-awesome-buttons-with-css3-and-rgba
  34. 34 http://stopdesign.com/eg/buttons/3.0/code.html
  35. 35 http://stopdesign.com/eg/buttons/3.0/code.html
  36. 36 http://24ways.org/2005/centered-tabs-with-css
  37. 37 http://24ways.org/2005/centered-tabs-with-css
  38. 38 http://veerle.duoh.com/blog/comments/simple_scalable_css_based_breadcrumbs/
  39. 39 http://veerle.duoh.com/blog/comments/simple_scalable_css_based_breadcrumbs/
  40. 40 http://stopdesign.com/archive/2009/02/04/recreating-the-button.html
  41. 41 http://stopdesign.com/archive/2009/02/04/recreating-the-button.html
  42. 42 http://www.jankoatwarpspeed.com/post/2009/01/19/Create-Vimeo-like-top-navigation.aspx
  43. 43 http://www.vimeo.com
  44. 44 http://www.jankoatwarpspeed.com/post/2009/01/19/Create-Vimeo-like-top-navigation.aspx
  45. 45 http://matthewjamestaylor.com/blog/beautiful-css-centered-menus-no-hacks-full-cross-browser-support
  46. 46 http://www.longren.org/2006/09/27/wrapping-text-inside-pre-tags/
  47. 47 http://www.longren.org/2006/09/27/wrapping-text-inside-pre-tags/
  48. 48 http://www.kremalicious.com/2008/04/make-cool-and-clever-text-effects-with-css-text-shadow/
  49. 49 http://www.kremalicious.com/2008/04/make-cool-and-clever-text-effects-with-css-text-shadow/
  50. 50 http://sam.brown.tc/entry/348/safaris-text-shadow-anti-aliasing-css-hack
  51. 51 http://sam.brown.tc/entry/348/safaris-text-shadow-anti-aliasing-css-hack
  52. 52 http://www.pearsonified.com/2006/09/snazzy_pullquotes_for_your_blo.php
  53. 53 http://www.pearsonified.com/2006/09/snazzy_pullquotes_for_your_blo.php
  54. 54 http://www.webdesignerwall.com/tutorials/css-gradient-text-effect/
  55. 55 http://www.webdesignerwall.com/tutorials/css-gradient-text-effect/
  56. 56 http://www.fofronline.com/2009-04/3d-cube-using-css-transformations/
  57. 57 http://www.fofronline.com/2009-04/3d-cube-using-css-transformations/
  58. 58 http://techblog.tilllate.com/2008/07/20/ten-methods-to-obfuscate-e-mail-addresses-compared/
  59. 59 http://techblog.tilllate.com/2008/07/20/ten-methods-to-obfuscate-e-mail-addresses-compared/
  60. 60 http://squaregirl.com/blog/2009/6/1/iphone-css.html
  61. 61 http://squaregirl.com/blog/2009/6/1/iphone-css.html
  62. 62 http://www.onderhond.com/blog/work/changing-html-images-on-hover
  63. 63 http://www.onderhond.com/blog/work/changing-html-images-on-hover
  64. 64 http://www.productivedreams.com/properties-that-were-impossible-to-implement-in-ie6/
  65. 65 http://www.productivedreams.com/properties-that-were-impossible-to-implement-in-ie6/
  66. 66 http://net.tutsplus.com/tutorials/html-css-techniques/10-challenging-but-awesome-css-techniques/
  67. 67 http://net.tutsplus.com/tutorials/html-css-techniques/10-challenging-but-awesome-css-techniques/

↑ Back to top Tweet itShare on Facebook

Cameron Chapman is a professional Web and graphic designer with over 6 years of experience. She writes for a number of blogs, including her own, Cameron Chapman On Writing. She’s also the author of The Smashing Idea Book: From Inspiration to Application.

  1. 1

    Nice list!

    1
  2. 2

    Jonny Pioww

    July 20, 2009 1:37 am

    That’s a hugely extensive list. Excellent post and a lot of new things in there.

    1
  3. 3

    Awesome post! great collection of extremely usefull css techniques!

    -1
  4. 4

    one of the best articles I’ve seen here.
    definitely going to add this to delicious ;)

    -1
  5. 5

    Thanks SM
    the “Build Better CSS Font Stacks” was just what I needed!

    -1
  6. 6

    Great resources..
    iPhone CSS tutorial is something I was really looking for..
    Thanks SM!

    5
  7. 7

    Łukasz Adamczuk

    July 20, 2009 1:04 am

    Some of them are really usefull.

    0
  8. 8

    Very nice! Thanks.

    0
  9. 9

    nice. bookmarked

    0
  10. 10

    Chris Green

    July 20, 2009 1:12 am

    Amazing. How do you guys get so much content rammed into 1 blog post. You really are putting a lot of design blogs to shame now.

    1
  11. 11

    Dainis Graveris

    July 20, 2009 1:12 am

    amazing, just amazing..such huge post..:)

    0
  12. 12

    Wow thanx. Some of those techniques are very useful.

    -1
  13. 13

    Phoenixheart

    July 20, 2009 1:51 am

    I definitely love CSS 3, but as it’s only (and partially) supported by FF3.5+, Chrome and Safari (for now), I would consider sticking with CSS 2 a wise decision.

    1
  14. 14

    This is really cool collection of the CSS tricks

    0
  15. 15

    very useful list!

    Thanks a lot!

    0
  16. 16

    Do not use PHP to output CSS. It’s a serious overhead and it will kill your server sooner or later. Generate them beforehand and always serve them static.

    0
  17. 17

    Great post. So many interesting things.

    0
  18. 18

    Simply amazing. There few things here i never knew about. lots of thanks for his post. cheers!

    1
  19. 19

    Dhaval Shah

    July 20, 2009 3:11 am

    Really great stuff !!! thanks a ton for this !! I love smashing !!

    0
  20. 20

    Very, very informative. I enjoyed reading it very much and a big thanks to smashing for putting this up

    0
  21. 21

    That’s a really useful collection of tips, thanks Cameron.

    1
  22. 22

    Thanks for sharing Cameron. Usefull tips…!

    0
  23. 23

    this article makes sm be the best

    -1
  24. 24

    I will always look site like this I very love it and I will put this ideas to my joomla site soon. Thanks so much.

    0
  25. 25

    Great job – I give this 5 cowbells…

    0
  26. 26

    Nikesh Ponnen

    July 20, 2009 5:00 am

    Thank u Smaasheee….

    Awesome post….

    0
  27. 27

    Wow…. these stuff are helpful
    thanks for smashin’ it in one post.

    0
  28. 28

    Very good, will be having a try when I have a little time. Cheers

    0
  29. 29

    Wow, Pure gold! Thanx guys!

    0
  30. 30

    Excellent overview. :)

    0
  31. 31

    Thanks, this is definitely very useful for me as a freelance xhtml/css coder.
    Bookmarked this page.. I love it! =D

    0
  32. 32

    Thanks for including mine

    Gopal Raju
    productivedreams

    0
  33. 33

    George Egonut

    July 20, 2009 7:04 am

    Excellent list. There’s some really useful articles here, particularly the email obfuscation comparisons and the two-color gradients.

    0
  34. 34

    gamma-normids

    July 20, 2009 7:12 am

    Thanks a lot, although now I feel I want to try them ALL…!

    0
  35. 35

    Joel Stransky

    July 20, 2009 7:15 am

    Easily one of the best CSS posts ever.

    0
  36. 36

    Concerning css shorthands and compression: Do you know of any tool that optimizes css by regrouping the selectors and automatically transforming long expressions into their shorthand equivalents, and eliminating those values, which already would have the same value via inheritation, etc. A tool which compresses CSS not by only eliminating whitespace and semicolons, but actually rewriting the css?

    0
  37. 37

    Phillipe Calmet

    July 20, 2009 7:50 am

    This is definitely a great resource list. Thanks for sharing it. :D

    0
  38. 38

    great resource, thank you!

    0
  39. 39

    wow fantastic stuff. gonna keep me busy, thats for sure

    0
  40. 40

    Matt Lindley

    July 20, 2009 9:23 am

    On the multiple backgrounds tutorial – you mention that some workarounds are mentioned for browsers that do not currently support the property. However, when I go to that site, I do not see any workarounds. Just an FYI.

    0
  41. 41

    A Website Designer

    July 20, 2009 10:02 am

    Great to see a Smashing Mag article covering CSS again. I feel people do not understand the importance of CSS. With the addition of new CSS techniques it is inhteresting to see how different website designers have implemented the changes.

    1
  42. 42

    Neat collection here, but hardly ‘new’…

    1
  43. 43

    Awesome Post.
    Great Work !!!

    0
  44. 44

    CSS3 … causing more problems than bringing benefits at the moment… doesnt it?

    0
  45. 45

    Analise Smith

    July 20, 2009 11:25 am

    What I don’t understand is examples like the css bar graph. Why not just use an image? This is a serious question

    0
  46. 46

    Talk about Christmas in July! Thanks, SM!

    0
  47. 47

    That’s great!

    I need more time to study this and test lot things. Time to study, it’s all about that… =(

    0
  48. 48

    Very cool. So much for my _spare_ time this week.

    0
  49. 49

    Great collection of tips! Lot’s of good stuff in there!

    0
  50. 50

    nice list. i been searching for this for a long period of time. great help. t.y.

    0
  51. 51

    Sam Frysteen

    July 20, 2009 5:17 pm

    Well… there goes the rest of my day… brilliant stuff… thanks

    0
  52. 52

    Brilliant!!!!!

    0
  53. 53

    really awesome =) nice post

    0
  54. 54

    Wow !
    This is what I was looking for….

    1
  55. 55

    Hey, css3 rocks the house. Thas fo’ sure! But … can I really develop a Website with CSS3 by now?

    0
  56. 56

    this is the most valuable post i’ve ever seen for css. all the things i’ve always wondered how to do are in here… thanks a lot!

    0
  57. 57

    Dude! Really nice post, awesome stuff to look at, thanks :)

    0
  58. 58

    Css Rounded Corner Code Generator

    0
  59. 59

    This will be very useful !
    Thanks a lot :)

    0
  60. 60

    Wow very nice round up! thanks

    0
  61. 61

    Great technique…more knowledge for my CSS technique..Awsome..!!! keep up the good work

    0
  62. 62

    Oh my! What a useful resource. Thanks so much.

    0
  63. 63

    Ardhian Satrya

    July 21, 2009 8:09 pm

    Wow! What a crazy list! Thanks a lot :)

    0
  64. 64

    Webstandard-Team

    July 21, 2009 11:18 pm

    Nice collection, but “new techniques”? They are all known.

    0
  65. 65

    Ashely Adams : Sticker Printing

    July 21, 2009 11:32 pm

    Thanks Cameron, it’s a nice list! I really found some of them very useful. I think I should try the CSS Gradient Text Effect, although I am not much into web designing. These CSS techniques will help the web designers to implement various creative and unique changes and are sure to grab the attention.

    0
  66. 66

    Wicked collection! Thanks a lot.

    0
  67. 67

    Wonderful list!

    0
  68. 68

    really helping article. thanks

    0
  69. 69

    Even managed to use the Polaroid Photo Viewer for Friends of the site. Thank you.

    0
  70. 70

    Kevin Althaus

    July 22, 2009 4:35 pm

    Thank you for this! Bookmarked to review later!

    0
  71. 71

    wonderfull collection .. thanks for sharing .. go to learn a lot !

    0
  72. 72

    very nice~~~

    0
  73. 73

    “A Killer Collection of Global CSS Reset Styles” is the worst possible suggestion you can make when it comes to CSS resets. the * { } selector has long been recognised as slow, plus it is less precise and lacks the control you need as a designer.

    If you need a reset, I’d suggest Eric Meyer’s reset instead.

    0
  74. 74

    Jaspal Singh

    July 24, 2009 9:12 am

    Really helpful css techniques.
    Thanks for sharing.
    .

    0
  75. 75

    Frederick Luna

    July 24, 2009 1:36 pm

    nice article

    0
  76. 76

    Mehrdad Nassiri

    July 26, 2009 11:38 am

    Very useful article,
    thank you,

    0
  77. 77

    This is probably one of the best submissions I’ve read on Smashing. HIghly useful in a number of situations, thanks a lot!

    0
  78. 78

    so wonderful!
    thank you!

    0
  79. 79

    Awesome collection here. It is really very useful. Thanks for sharing such nice information here. It will be useful for iphone css tutorial. I like this site and it is nice to post here.

    jeux ps2

    0
  80. 80

    Very very nice tricks

    0
  81. 81

    Thanks for sharing..

    0
  82. 82

    Sumeet Chawla

    October 28, 2009 6:09 am

    Awesome CSS resource collection… It has almost everything to fine tune one’s CSS skills… Great Job!

    0
  83. 83

    Matthew Simmons

    October 30, 2009 7:52 pm

    Good read. I’m not sure I’m ready to use CSS3 and HTML5. It doesn’t seem to me like they are supported by enough browsers to bother with. Soon though…

    0
  84. 84

    It’s great! I really want to improve my CSS skill!

    0
  85. 85

    ~ bookmarked ;)

    0
  86. 86

    ya … this good css tutorial ..
    thank for helping
    and have more creativity

    0
  87. 87

    Good post! I specially found the embedding of ttf fonts to be helpful! I tested it on FF 3.5/ IE7/IE8 and will be using it on a project.

    0
  88. 88

    Great post. very nice tutorials.

    0
  89. 89

    Wow… that is a damn fine list.

    0
  90. 90

    Satish Borkar

    April 19, 2010 2:49 am

    Hey!!
    I found this litle late but still it is very nice post
    thanks for sharing

    Cheers
    Satish

    1
  91. 91

    vijay Nemade

    May 16, 2010 9:17 pm

    April 19th, 2010 2:49 am
    It’s great!

    0
  92. 92

    JavaScriptBank

    May 28, 2010 5:22 pm

    that’s all cool & great css techniques, thank you very much for sharing.

    Can you give me favor to share this post on my JavaScript library?

    Awaiting your response. Thank

    0
  93. 93

    Nice collection. Learned a lot

    0
  94. 94

    that’s cool & useful css techniques, nice to read your your blog thanks for sharing. Could you give me favor to share some basic CSS coding?
    Awaiting your response.

    0
  95. 95

    Great List, bookmarked for use in several projects.

    0
  96. 96

    Posicionamiento

    August 30, 2010 1:51 pm

    Dude! Really nice post, awesome stuff to look at, thanks :)

    0
  97. 97

    Why haven’t I seen this before? -_-

    THANKS! *bookmarks*

    0
  98. 98

    Ramesh Vishwakarma

    September 20, 2010 4:25 am

    nice…

    0
  99. 99

    Brett Widmann

    October 22, 2010 4:09 pm

    There are a lot of really nice techniques here. Thanks for sharing so many quality resources.

    0
  100. 100

    Thanks for sharing dear buddy keep it up and say all is well.
    cna certification

    0
  101. 101

    Great Collection of Css techniques. Thanks for sharing… keep it up

    0
  102. 102

    Thanks for posting such a great list of CSS techniques.

    0
  103. 103

    Thanks for sharing. I will be using some of the tips in my future projects

    0
  104. 104

    Mike Fitzpatrick

    August 3, 2012 6:56 am

    There are some pretty neat ideas on the website http://www.jeyjoo.com
    They make use diagonal lines and slanted texts. Simple, but not seen very often, which makes the website stand out.

    0

↑ Back to top