Dec 02 2009

50+ Fresh CSS Techniques, Tutorials and Resources

Advertisement

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)

About the Author

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.

Homepage

Comments and Discussions
  • esranull, 02 December 2009

    very nice thanks post

    • Vishal, 29 March 2010

      Very Nice Tips….

  • Lam Nguyen, 02 December 2009

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

  • John | New Media Produce, 02 December 2009

    Great list of CSS tutorials, very useful.

  • BooshMedia, 02 December 2009

    Excellent stuff,keep it up

  • Maestro Geek, 02 December 2009

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

  • designfollow, 02 December 2009

    very useful

    thank you.

  • Ravi, 02 December 2009

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

  • César, 02 December 2009

    Exelente!!

  • Chandan, 02 December 2009

    excellent collection….and nice articles too

  • Tchupa, 03 December 2009

    very nice thanks post.

  • Kenneth Knudsen, 03 December 2009

    Just what i needed ! Thanks!

  • othman, 03 December 2009

    Good job ! Thank you for this list.

  • michael, 03 December 2009

    Nice post!
    Thank you for that!
    Cheers

  • Bill, 03 December 2009

    Fantastic post! Thanks!!

  • Patrick, 03 December 2009

    Love the list — thank you!

  • Beau, 03 December 2009

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

  • Dave C, 03 December 2009

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

  • Ajay, 03 December 2009

    Thanks for including our tutorial! Great round-up.

  • axel, 03 December 2009

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

  • Magentoua, 04 December 2009

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

  • Aboobacker Sihdiqe, 04 December 2009

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

  • DesignFellow, 04 December 2009

    Nice Post :)
    Keep up…

  • Nikolaos Dimopoulos, 04 December 2009

    Excellent post! This one goes into my bookmarks.

    Thank you for sharing!

  • Riccardo, 04 December 2009

    Great job, a lot of useful articles.

    Thanks.

  • Kartlos Tchavelachvili, 05 December 2009

    wow, cool list! :)

  • maurohead, 05 December 2009

    Great”" thank you very much..from Chile

  • Bryan, 05 December 2009

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

  • Timee, 06 December 2009

    good website,i love it .

  • Charmaine, 06 December 2009

    Great lists

  • lim, 06 December 2009

    Thanks for the tutorials

  • theComplex, 08 December 2009

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

  • Waasys, 08 December 2009

    Buttons, soo cute =)

  • Alex Flueras, 08 December 2009

    Nice wrap-up. Thanks for putting this together.

  • Trung Chu, 10 December 2009

    Thanks Author,

    Great Article :)

  • adi, 12 December 2009

    awesome

  • André, 23 December 2009

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

  • Eko Setiawan, 25 December 2009

    Very useful for me, thanks for share

  • Kadi, 19 January 2010

    Thanks for the tutorials

  • SohoInteractive, 25 January 2010

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

    Thank you

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

  • Tiendas Madrid, 21 June 2010

    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!!

  • Manali, 23 July 2010

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

  • Escorts Barcelona, 30 July 2010

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

  • Adam Dean, 14 September 2010

    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!

  • Coreen Coach, 01 October 2010

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

  • sanuk, 12 November 2010

    Love the work, keep it up!

  • Aaron Kay, 24 November 2010

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

  • Web Tutorials, 11 February 2011

    Thanks for this info, very good blog.

  • CSS Web Tutorials, 11 February 2011

    Thanks for this info, very good blog.

  • Web Lessons, 11 February 2011

    Nice blog, thanks

  • syxt, 15 March 2011

    Thanks for this info, very good blog.

  • Jimmy Leone, 10 January 2012

    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 :)

  • Thien Tran, 10 October 2012

    Nice sharing. It’s useful. Thanks.

  • pre140, 06 December 2012

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

  • Prometheus1618, 11 December 2012

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

search form
 
image description image description