Essentials

50+ Fresh CSS Techniques, Tutorials and Resources

December 2nd, 2009

By Paul Andrew

Learning CSS and how to use it effectively can be a reasonably easy thing to do for a beginning web developer. In the hands of a seasoned professional, CSS can be stretched and pushed it to its limits where it can seem complicated and yet perfect at the same time.

Being able to adapt to new ideas and different techniques, as well as seeking new solutions to old problems is part and parcel of being a web designer. And with the speed at which CSS development is constantly moving, keeping up with new developments can be challenging.

In this article, we’ll bring you up to date with the latest in CSS development through a collection of fresh CSS tutorials, techniques, and resources. We hope this extensive list will teach you something new, or else remind you of some methods you haven’t used for a while.

Menus, Buttons and Forms

Create a Button with Hover and Active States using CSS Sprites
Some designers neglect the click state (active: property in CSS) in web design, either because they’re unaware of it, underestimate the importance of it, or are just lazy. It’s a simple effect that improves usability by giving the user feedback as to what they’ve clicked on, and can add depth to a design.

Fresh CSS Tutorials, Tips and Resources

CSS Absolute Positioning: Create A Fancy Link Block
Absolute positioning is a well-known CSS technique supported by all web browsers. If you position an element (an image, a table, or whatever) absolutely on your page, it will appear at the exact position you specify. In this tutorial, you’ll use absolute positioning to create a fancy link block.

Fresh CSS Tutorials, Tips and Resources

Simply-Buttons v2
Cross-browser, custom HTML <button> elements with inactive, active, and hover states.

Fresh CSS Tutorials, Tips and Resources

Create A Sexy Vertical Sliding Panel Using jQuery And CSS3
In this post you will learn how to create a flexible vertically-positioned sliding panel that simulates a drawer effect. Normally, this technique would be used for a horizontally-positioned sliding panel that would push everything else down, but with this technique, the panel overlays the content.

Fresh CSS Tutorials, Tips and Resources

Style a List with One Pixel
Using a one-pixel background image in CSS (repeat-x for a horizontal line, repeat-y for vertical, and repeat for a fill color) you’ll learn how to style a depth-chart looking unordered list.

Fresh CSS Tutorials, Tips and Resources

Pushing Your Buttons With Practical CSS3
“Calls to action are critical for any website, and a compelling, attention-grabbing, clickable button goes a long way toward driving that engagement. In the past, really awesome buttons needed extra markup, sliding doors or other trickery. We’ll show you here how to create nice button styles without any hacks or cheats.”

Fresh CSS Tutorials, Tips and Resources

Multi-level Multi-column Multi Menus with pure CSS
Have you ever successfully built a multi-level, multi-column, multi-menu, light-weight, and cross browser menu or navigation with pure CSS and without JavaScript? This tutorial will teach you how.

Fresh CSS Tutorials, Tips and Resources

Elegant Drop Menu with CSS only
If you have a clean web site that’s become cluttered with extra content, categories, and pages, this clean and elegant menu offers a great space-saving solution.

Fresh CSS Tutorials, Tips and Resources

Create a Beautiful Dropdown Blogroll Without JavaScript
This tutorial demonstrates how to style a drop-down menu to hold your blogroll content (instead of using the typically-ugly HTML <select> element). Done with pure CSS, but requires hacks to work with IE6.

Fresh CSS Tutorials, Tips and Resources

Build a Simple Button with CSS Image Sprites
In this tutorial you’ll learn how to create a simple button using CSS sprites. The tutorial covers creation of the image in Photoshop and finishes with the coded example.

Fresh CSS Tutorials, Tips and Resources

CSS3 Hover Tabs without JavaScript
Using some new CSS3 techniques you’ll learn how to create a basic tabbed content area that changes on hover using pure CSS

Fresh CSS Tutorials, Tips and Resources

Use Pure CSS To Style a Web Form Dynamically
Form elements are normally styled by changing the border color or background color properties via CSS. This tutorial shows you how to style text field and textarea elements of varying widths with rounded-corner background images.

Fresh CSS Tutorials, Tips and Resources

Horizontal Sub-nav with CSS & jQuery
In this tutorial, Soh Tanaka teaches you how to create an elegant horizontal sub-nav using CSS and a little jQuery for IE6 compatibility.

Fresh CSS Tutorials, Tips and Resources

CSS3 Speech Bubble
Learn how to create a speech bubble with HTML and CSS3.

Fresh CSS Tutorials, Tips and Resources

Create Nice Scalable CSS Based Breadcrumbs
This tutorial shows you how to create a scalable CSS-based breadcrumb navigation using a single graphic, some basic CSS, and an unordered list.

Fresh CSS Tutorials, Tips and Resources

Fluid Searchbox
Creating a search box that adjusts to the size of the browser window is simple, but becomes difficult when you add elements to the left and right of it, some being fixed width (width in px or em) and some fluid width (width in %). This article demonstrates a solution to this problem.

Fresh CSS Tutorials, Tips and Resources

Using Rounded Corners with CSS3
As CSS3 gets closer to becoming the new standard for mainstream design, the days of rounded corners through elaborate background images is fading. In this tutorial you’ll learn how to create rounded corners using vendor-specific CSS3 techniques supported by Firefox and Safari.

Fresh CSS Tutorials, Tips and Resources

Web Page Layout Techniques

The Ultimate Guide to Creating a Design and Converting it to HTML and CSS
This in-depth screencast tutorial is the third part of a series that demonstrates how to create an iPhone app web site. This tutorial demonstrates the final step: converting the Photoshop design into HTML and CSS.

Fresh CSS Tutorials, Tips and Resources

How to Code a Clean Portfolio Design with jQuery Slider
This tutorial will teach you how to slice and code a web page from a Photoshop design, plus teach you how to implement a jQuery image slider.

Fresh CSS Tutorials, Tips and Resources

Minimal and Modern Layout: PSD to XHTML/CSS Conversion
This is the second part of a two-part series of creating a minimal and modern website layout in Photoshop. The part focuses on converting the design to styled markup.

Fresh CSS Tutorials, Tips and Resources

Create YouTube-like adaptable view using CSS and jQuery
Have you ever noticed the "change view" feature on YouTube that allows you to switch between normal and wide mode and thus expand/shrink the movie area? In this tutorial you’ll learn how to duplicate this feature using CSS and jQuery.

Fresh CSS Tutorials, Tips and Resources

How to distribute elements horizontally using CSS
This article shows you how to resolve the problem of extra margin settings on first and last children that are distributed horizontally within a main container using CSS.

Fresh CSS Tutorials, Tips and Resources

Sticky (Fixed) SideNav Layout with CSS
This tutorial teaches you how to build a frame-like fixed sidebar navigation menu that stays in place when the page is scrolled.

Fresh CSS Tutorials, Tips and Resources

CSS: Design Out Of The Box
In this informative post, the author discusses a number of example website designs that break away from typical columned and boxed layout. The article includes a number of tips and best practices that can help designers accomplish a similar style.

Fresh CSS Tutorials, Tips and Resources

5 Simple, But Useful CSS Properties
Another article from Web Designer Wall, this time discussing five well-supported, practical, but rarely-used, CSS properties

Fresh CSS Tutorials, Tips and Resources

25 Incredibly Useful CSS Tricks You Should Know
This article describes 25 useful CSS tips and techniques to help you design great web interfaces.

Fresh CSS Tutorials, Tips and Resources

11 Classic CSS Techniques Made Simple with CSS3
You shouldn't limit yourself to old techniques when there's a new age coming. This new age includes the use of CSS3. In this tutorial, you’ll learn eleven different effects that can be achieved quite easily with CSS3 but would normally be quite time-consuming with standard CSS methods.

Fresh CSS Tutorials, Tips and Resources

5 Rules To Write More Readable CSS Files
This article describes five practical rules that can help you write well-structured and more readable CSS files.

Fresh CSS Tutorials, Tips and Resources

Text and Typography

6 Ways To Improve Your Web Typography
Because of the many options available, not to mention cross-browser differences, improving typography on the web is not always simple. In this post you’ll learn six different ways to improve typography on your web projects.

Fresh CSS Tutorials, Tips and Resources

Create a Letterpress Effect with CSS Text-Shadow
The letterpress effect is becoming hugely popular in web design, and with a couple of modern browsers now showing support for the text-shadow CSS3 property it’s now simple and easy to create the effect with pure CSS.

Fresh CSS Tutorials, Tips and Resources

Images, Galleries and Sprites

3 Easy and Fast CSS Techniques for Faux Image Cropping
This article is a summary of 3 fast and easy CSS techniques you can use to display only a portion of an image in your content. Because the images aren’t literally cropped, the method is termed “Faux Image Cropping”.

Fresh CSS Tutorials, Tips and Resources

Use CSS to build a map with hoverable regions
In this article you will learn how to how to build a map with hoverable regions, using CSS and a single image.

Fresh CSS Tutorials, Tips and Resources

Date Display Technique with Sprites
This article on CSS-Tricks demonstrates how to display the date on WordPress blog posts using image sprites — the same method that’s used on the Learning jQuery website.

Fresh CSS Tutorials, Tips and Resources

Building Faster Websites with CSS Sprites
In this tutorial you’ll learn how to take advantage of CSS sprites to greatly increase your website’s speed.

Fresh CSS Tutorials, Tips and Resources

Perfect Full Page Background Image
Another technique from CSS-Tricks, this time demonstrating how to implement a full-page background image that fills the entire page, will scale the image as needed, retain image proportions, does not cause scrollbars, and is cross-browser compatible.

Fresh CSS Tutorials, Tips and Resources

A Beautiful Apple-style Slideshow Gallery With CSS & jQuery
Learn how to build an Apple-like slideshow gallery, similar to what Apple uses to showcase their products.

Fresh CSS Tutorials, Tips and Resources

How To Create a Pure CSS Polaroid Photo Gallery
Magical things can be created by combining various CSS properties, especially when some of the new CSS3 tricks are thrown into the mix. In this tutorial you’ll learn how to build a Polaroid photo gallery with a re-stacking hover effect using pure CSS.

Fresh CSS Tutorials, Tips and Resources

Editable CSS3 Image Gallery
A screencast from CSS-Tricks that demonstrates how to create a fancy image gallery with some HTML5, CSS3, and jQuery. Works best in a WebKit browser.

Fresh CSS Tutorials, Tips and Resources

Turn Your Images Into Polaroids with CSS3
In the first part of this tutorial you’ll create a grid of images that’s linked to a Flickr account. In the second part, you’ll spice it up by giving the images a pure CSS Polaroid effect.

Fresh CSS Tutorials, Tips and Resources

CSS Sprites: What They Are, Why They’re Cool, and How To Use Them
This is a comprehensive discussion of the technique of CSS image sprites, by Chris Coyier. The article has been recently updated to include more up-to-date information and methods.

Fresh CSS Tutorials, Tips and Resources

Fresh CSS Frameworks

CSScaffold Framework
CSScaffold is a a new type of CSS Framework, built with PHP, that helps speed up your development time by doing the hard work for you. Its power lies in its ability to extend CSS and generate CSS found in other CSS frameworks.

xCSS – Object Oriented CSS Framework
xCSS is a lightweight framework, still in beta, that allows you to take advantage of an object-oriented workflow, which means a dramatic cut-down in development time through the use of variables and other handy features.

Fresh CSS Tutorials, Tips and Resources

eCSStender.org
eCSStender is a JavaScript library that lets you write CSS without having to use browser-specific properties and hacks. Extensions built with eCSStender greatly simplify the design process because you can author modern CSS using advanced selectors, properties such as border-radius, and custom font faces, all of which work in IE6.

Fresh CSS Tutorials, Tips and Resources

Cross Browser Hacks, Fixes and Guides

Render alternate layouts in IE6 with only CSS
Although this may not be something you would do on a client project, this article shows you how to create an alternate layout IE6 users using CSS and a conditional comment.

Fresh CSS Tutorials, Tips and Resources

Definitive Guide to Taming the IE6 Beast
A useful collection of IE6 hacks and fixes that will, as the title implies, help you tame the beast that is IE6.

Fresh CSS Tutorials, Tips and Resources

Ultimate IE6 Cheatsheet: How To Fix 25+ Internet Explorer 6 Bugs
The author of this article 'has scoured the web' for resources and fixes for IE6 and put them all together in this cheatsheet/reference manual as a resource for anyone who has to deal with Internet Explorer 6 on a regular basis.

Fresh CSS Tutorials, Tips and Resources

ie6fixer
ie6fixer is a tool specifically designed to ease the pain of the IE6 CSS debugger. The tool was conceived to decrease the monkey work when starting an ie6 CSS fix file by applying a series of basic fixes that are known to conquer many problems and cause as little harm as possible. It should fix 40-60% of all IE6 issues and problems, with just one click, outputting rough CSS that can be placed in a separate section and can be used as a solid start for debugging IE6 issues.

Fresh CSS Tutorials, Tips and Resources

Useful CSS Resources

CSSG Collection: Free Comment Styles
Designing the dreaded comments section of a web page can be a pain. To help you with this, CSS Globe is giving away a collection of comment styles that you can use on your own projects to save you a lot of time and agony.

Fresh CSS Tutorials, Tips and Resources

CSS 3 Cheat Sheet (PDF)
This printable CSS 3 Cheat Sheet (PDF), first published on SM in July 2009, offers a complete listing of all the properties, selector types, and allowed values in the current CSS 3 specification from the W3C. Each property is provided in a section that attempts to match it with the section (module) that it is most actively associated within the W3C specification. Next to each property is a listing of the expected values that that property takes.

Fresh CSS Tutorials, Tips and Resources

Cascading Style Sheet Level 2 Visual Cheat Sheet
This cheat sheet (3 pages) contains an essential reference to CSS2 properties with detailed descriptions and some sample code. The simple visual style used to design this sheet allows you to find, at a glance, everything you’re looking for.

Fresh CSS Tutorials, Tips and Resources

CSS Specificity – Cheat Sheet
A common difficulty with CSS is determining what CSS rule will be applied on the page. This cheat sheet can help you better understand CSS specificity.

Fresh CSS Tutorials, Tips and Resources

Best Web-Frameworks – Find and compare PHP, Ruby, Python, Java, JS and CSS Frameworks
This useful resource helps you compare almost all CSS, PHP, Ruby, Python, Java and JavaScript frameworks, so you can make the right choice for your project.

Fresh CSS Tutorials, Tips and Resources

Visual Cheat Sheet: CSS Compatibility with Internet Explorer 6, 7 and 8
This Visual Cheat Sheet will help you understand CSS behavior in the three commonly-used versions of Internet Explorer. It includes information on @rules, element selectors, attribute selectors, pseudo-classes, border and layout properties, and more.

Fresh CSS Tutorials, Tips and Resources

SlickMap CSS – A Visual Sitemapping Tool for Web Developers
SlickMap CSS is a simple stylesheet for displaying finished sitemaps directly from HTML unordered list navigation. It’s suitable for most web sites – accommodating up to three levels of page navigation and additional utility links – and can easily be customized to meet your own individual needs, branding, or style preferences.

Fresh CSS Tutorials, Tips and Resources

CSS Basics
CSS Basics is divided into 18 chapters, covering all aspects of CSS, from CSS classes and IDs to the more difficult pseudo elements and positioning. CSS basics covers a wide range of information so it’s valuable for those learning the basics of CSS as well as experienced CSS developers. Each chapter is downloadable and printable and you also have the option to download the entire series in a single PDF file.

Fresh CSS Tutorials, Tips and Resources

Further Reading

HTML, CSS, and Web Development Practices: Past, Present, and Future

CSS Best Practices for Modern Designs

Guidelines for Writing Accessible CSS

CSS Selectors – A Guide To The Common & The Rare

5 CSS3 Design Enhancements That You Can Use Today

Trick Out Your CSS With Server Side Code

About the author

Paul Andrew is a freelance web designer. He is chief admin for Speckyboy – Design Magazine, a web design, web development and graphic design resource blog. Follow him on Twitter here: twitter.com/speckyboy.

(ll)

The jungle is alive: Be it a collaboration between two or more authors or an article by an author not contributing regularly. In these cases you find the Noupe Editorial Team as the ones who made it. Guest authors get their own little bio boxes below the article, so watch out for these.

Tags: ,

56 comments for „50+ Fresh CSS Techniques, Tutorials and Resources
  1. esranull on December 2nd, 2009 at 1:08 pm

    very nice thanks post

    • Vishal on March 29th, 2010 at 3:44 am

      Very Nice Tips….

  2. Lam Nguyen on December 2nd, 2009 at 1:48 pm

    Surprisedly that I have 2 articles featured here. By the way, that’s a great collection!

  3. John | New Media Produce on December 2nd, 2009 at 1:53 pm

    Great list of CSS tutorials, very useful.

  4. BooshMedia on December 2nd, 2009 at 2:55 pm

    Excellent stuff,keep it up

  5. Maestro Geek on December 2nd, 2009 at 3:18 pm

    Good job ! You pick the best of the web i see ;)

  6. designfollow on December 2nd, 2009 at 3:49 pm

    very useful

    thank you.

  7. Ravi on December 2nd, 2009 at 3:51 pm

    Probably one of the posts I’ve seen on this site thus far.

  8. César on December 2nd, 2009 at 6:48 pm

    Exelente!!

  9. Chandan on December 2nd, 2009 at 9:26 pm

    excellent collection….and nice articles too

  10. Tchupa on December 3rd, 2009 at 2:38 am

    very nice thanks post.

  11. Kenneth Knudsen on December 3rd, 2009 at 2:38 am

    Just what i needed ! Thanks!

  12. othman on December 3rd, 2009 at 3:20 am

    Good job ! Thank you for this list.

  13. michael on December 3rd, 2009 at 4:40 am

    Nice post!
    Thank you for that!
    Cheers

  14. Bill on December 3rd, 2009 at 5:55 am

    Fantastic post! Thanks!!

  15. Patrick on December 3rd, 2009 at 7:38 am

    Love the list — thank you!

  16. Beau on December 3rd, 2009 at 7:40 am

    Wow, what an extensive list. Some great resources for designers. Nice work Paul!

  17. Dave C on December 3rd, 2009 at 9:49 am

    We are looking for super talented CSS designers. Anyone interested?

  18. Ajay on December 3rd, 2009 at 9:52 am

    Thanks for including our tutorial! Great round-up.

  19. axel on December 3rd, 2009 at 11:32 am

    Excellent list. Will be using a couple of the techniques in the project I’m working on.

  20. Magentoua on December 4th, 2009 at 3:25 am

    Wow, men. I was looking for such cool article. thanks a lot!

  21. Aboobacker Sihdiqe on December 4th, 2009 at 4:13 am

    Wow, what an extensive list. Some great resources for designers. Nice work Sidhiqe!

  22. DesignFellow on December 4th, 2009 at 4:13 am

    Nice Post :)
    Keep up…

  23. Nikolaos Dimopoulos on December 4th, 2009 at 7:24 am

    Excellent post! This one goes into my bookmarks.

    Thank you for sharing!

  24. Riccardo on December 4th, 2009 at 9:42 am

    Great job, a lot of useful articles.

    Thanks.

  25. Kartlos Tchavelachvili on December 5th, 2009 at 5:36 am

    wow, cool list! :)

  26. maurohead on December 5th, 2009 at 5:50 am

    Great”” thank you very much..from Chile

  27. Bryan on December 5th, 2009 at 6:16 am

    The simple scalable breadcrumbs above is a rip from Veerle’s Blog:
    http://veerle.duoh.com/blog/comments/simple_scalable_css_based_breadcrumbs/

  28. Timee on December 6th, 2009 at 1:14 am

    good website,i love it .

  29. Charmaine on December 6th, 2009 at 11:49 am

    Great lists

  30. lim on December 6th, 2009 at 11:52 am

    Thanks for the tutorials

  31. theComplex on December 8th, 2009 at 12:21 pm

    Amazing round-up! Some of these will be of great use.

  32. Waasys on December 8th, 2009 at 1:41 pm

    Buttons, soo cute =)

  33. Alex Flueras on December 8th, 2009 at 10:03 pm

    Nice wrap-up. Thanks for putting this together.

  34. Trung Chu on December 10th, 2009 at 7:08 pm

    Thanks Author,

    Great Article :)

  35. adi on December 12th, 2009 at 4:03 am

    awesome

  36. André on December 23rd, 2009 at 8:54 am

    Wow, impressive collection, thank you. This will definitively take some time to check out all sites …

  37. Eko Setiawan on December 25th, 2009 at 6:53 pm

    Very useful for me, thanks for share

  38. Kadi on January 19th, 2010 at 4:46 am

    Thanks for the tutorials

  39. SohoInteractive on January 25th, 2010 at 8:33 am

    Awesome tutorials and cheat-sheets.
    Very useful stuff.
    Bookmarked

    Thank you

  40. free microsoft points codes on March 1st, 2010 at 5:20 pm

    Hello there, how do i subscribe to your RSS Feed? Thanks

  41. Tiendas Madrid on June 21st, 2010 at 2:46 am

    Muy util, de veras. Hay que dedicarle un tiempo a probar todas estas cosas. Y desde luego que alguna de ellas las pondre en practica. Gracias!!

  42. Manali on July 23rd, 2010 at 5:00 am

    Awesome tutorials and cheat-sheets.impressive collection, thank you. Some great resources for designers.

  43. Escorts Barcelona on July 30th, 2010 at 9:42 am

    Que cantidad de recursos, y que buenos. Me guardo esta pagina en favoritos. Gracias

  44. Adam Dean on September 14th, 2010 at 2:19 am

    I have so many tabs open now I think my browser is gonna crash! Loads of superb tutorials there it’s going to take a while to read through but thanks very much!

  45. Coreen Coach on October 1st, 2010 at 4:21 am

    wow i love this, good work! amazing amazing i love those, great job!

  46. sanuk on November 12th, 2010 at 7:21 pm

    Love the work, keep it up!

  47. Aaron Kay on November 24th, 2010 at 1:47 am

    I think i check out this post at least once a week, great resources thank you!

  48. Web Tutorials on February 11th, 2011 at 6:33 pm

    Thanks for this info, very good blog.

  49. CSS Web Tutorials on February 11th, 2011 at 6:39 pm

    Thanks for this info, very good blog.

  50. Web Lessons on February 11th, 2011 at 6:47 pm

    Nice blog, thanks

  51. syxt on March 15th, 2011 at 5:21 pm

    Thanks for this info, very good blog.

  52. Jimmy Leone on January 10th, 2012 at 5:26 pm

    Great collection. Thanks for this. Btw, I found this great animation of moving clouds (all made in CSS3) and replicating the parallax effect! I loved it :)

  53. Thien Tran on October 10th, 2012 at 5:33 am

    Nice sharing. It’s useful. Thanks.

  54. pre140 on December 6th, 2012 at 4:04 am

    Thanks a lot:) can even imagine there could be so great a collection of css resources.

  55. Prometheus1618 on December 11th, 2012 at 4:20 pm

    Love the design and Thank You for the post.
    Will follow you closely
    Great stuff