Apr 21 2008

Using CSS to Do Anything: 50+ Creative Examples and Tutorials

Advertisement

CSS can powerfully open the doors to a lot of rich and unique techniques. Today we are presenting a round-up of CSS coding, creative approaches and techniques. Definitely worth taking a very close look at! We also included some basic techniques you can probably use in every project you are developing. This is just the third article in this series , the forth part will be coming soon, stay tuned and Enjoy!

You can also take a look at other 2 articles in this series :

So let’s get started and don’t forget to subscribe to our RSS-Feed to keep track on our next post in this series.

Styling Lists

The Amazing <li>- With a little CSS, the <li> becomes one of the most powerful and versatile tags in a web designer's arsenal. This article is a tutorial and a tribute to the amazing <li>.

So let’s get started and don’t forget to subscribe to our RSS-Feed to keep track on our next post in this series.

Better Ordered Lists (Using Simple PHP and CSS)- Here is an example where you ditch the traditional ordered list and create your own!

Style Your Ordered List- Here is a quick CSS tutorial on how you can use the ordered list <ol> and paragraph <p> element to design a stylish numbered list.

List Based Calendar- A simple way to add multiple views to a calendar, so you can view your events in a simple list, or in a month based calendar format.

Forms and Form Elements

Datasheet-style form using HTML and CSS- Make a datasheet-style web form using HTML, CSS and JavaScript with multiple similar records,

Styling File Inputs with CSS and the Dom - File inputs (<input type="file" />) are the bane of beautiful form design. No rendering engine provides the granular control over their presentation designers desire. This simple, three-part progressive enhancement provides the markup, CSS, and JavaScript to address the long-standing irritation.

Better Web Forms: Redesigning eBay’s Registration- Is a detailed walkthrough of simple changes that have a dramatic positive impact.

Uni-Form- Uni-Form is an attempt to standardize form markup (xhtml) and css, “modularize” it, so even people with only basic knowledge of these technologies can get nice looking, well structured, highly customizable, semantic, accessible and usable forms

Footers

A CSS sticky footer that just works- In just a few simple CSS classes with minimal extra HTML markup, you can get a sticky footer that even beginners can get a handle on. It’s been tested in IE 5 and up, Firefox, Safari and Opera.

MAKING YOUR FOOTER STAY PUT WITH CSS- How to make your footer dock to the bottom of the screen.

New ideas for Image Replacement

Create Custom Search Bars - With Image Replacement using CSS

HR Image Replacement with CSS- How to replace the HR tag with an image that works cross browser.

Image Sprite

Image Sprite Navigation With CSS- Creating a navigation using an image sprite, you can have a complete navigation, rollovers and all, by only using one image.

CSS image techniques

Create Resizable Images With CSS- A new technique to resize images when the user increases their browser’s text size. Images are resized along with the text rather than staying constant in size.

CSS Stamps- Using the CSS property border and outline to achieve the stamp look.

Image Captions Generated with CSS and JavaScript- The names are not part of the image – they are stored in the img’s title attribute.

Cross-browser semi-transparent backgrounds- Semi-transparent backgrounds are nice. They would be more popular, but Internet Explorer doesn’t support .png transparency. There are a few clunky workarounds. Here’s another that’s a little less clunky.

CSS Rollovers- Learn how to create a simple rollover image using CSS.

Text and Links Effects

“Checkmark” Your Visited Links with Pure CSS- The goal of this tutorial is to get a check mark preceding visited links for a nice visual indicator.

Simple Round CSS Links - Now you can style both (a) and (button) in this super easy and light-weight solution

Pure CSS Popups- Using pure CSS causing text to appear and disappear.

Navigation

Perfect pagination style using CSS- This tutorial explains how to design a pagination for search results or more in general to split a long list of records in more pages.

VISTA style toolbar- How to create VISTA style toolbar with CSS,

Digg-like navigation bar using CSS- This tutorial explains how to design a digg-like navigation bar using a liquid design with rounded corners for links.

Menu circular en CSS- A circular menu with nice hover effect showing text description for each item in the menu.

Further readings on Navigation

4 Reasons to Use CSS-Based Navigation- By using CSS to create a navigational menu you can achieve both accessibility and a professional, attractive appearance. Vandelay Design listed the benefits of using CSS for navigational menus, Worth reading.

CSS Image Galleries

CSS Image Gallery- A purely CSS based image gallery that displays larger versions of thumbnail images dynamically when the mouse hovers over them. A rich HTML caption can be added to the enlarged image.

Not so simple photograph gallery- A CSS image gallery that have a default image, a line or two of descriptive text and the ability to click an image to hold it on the screen.

A sliding list click gallery- A demonstration to show a sliding tabs gallery, with a click to open action rather than a hover. Also the facility to add some descriptive text to accompany the large image.

Drop Caps

Nice Drop caps with CSS- Using the :first-letter pseudo-element, you can easily create nice drop caps with CSS. No extra HTML or Javascript required and IE5+ browser support.

Drop Caps- This small snippet of CSS utilises the :first-letter pseudo class to apply a particluar style to the first letter of each paragraph, giving the look of an illuminated initial.

Rounded Corners in a simple New approach

3 Simple Steps in Coding a Rounded Corners Layout- A simple approach to coding fixed width, rounded corners layout in 3 simple steps.

One pixel notched corners- as used by Google Analytics.

Auto-Cropping Rounded Corners- A new solution for rounded corners, what it does is: it crops the content below it, so that anything with a background color or image (headers, paragraphs, even images) automatically get the rounded corner treatment with no extra work.

Blockquotes

Simple Double Quotes- This CSS tutorial will show you how to display two double-quote images using one blockquote tag.

Blockquotes with Image Quotes- Adding an image to the blockquote style.

Worth Checking

Pure CSS Animated Progress Bar- A simple demonstration of how you can create animated progress bar using pure css. The trick is very simple. We need 3 elements, one container and 2 nested elements.

Add a “loading” icon to your larger images- Using CSS to embed a “loading” image, to let visitors know that an image is loading.

The CSS Text Wrapper - The CSS Text Wrapper allows you to easily make HTML text wrap in shapes other than just a rectangle. You can make text wrap around curves, zig-zags, or whatever you want.

Adding a magnifier to images with CSS and JavaScript

SAC Simple Accessible Charts.

Cross-browser transparent columns- How to create transparent columns that can work in all browsers. By using the opacity property and still having the content opaque. Floats work too – which makes it possible to create multi-column transparent-column layouts.

A Cool CSS Effect – Dashboard [Updated x2]- A very simple tutorial on how to create an attractive dashboard-like dimmer for your webpage and draw your user’s attention to a certain object. Very cool web effect.

Text-Shadow Exposed- Make cool and clever text effects with css text-shadow.

CSS Speech Bubbles- Easy to customize speech bubbles coded in CSS and valid XHTML 1.0 STRICT.

The Highly Extensible CSS Interface- Cameron Moll’s first series of articles after three years looks to have been well worth the wait. Introducing “The Highly Extensible CSS Interface”, a four-part series of how-to’s and savvy conversation. Code samples are available for viewing and downloading with each article.

You might also be interested in the following articles:

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

  • emendelski, 21 April 2008

    Marvelous. I am amazed.

  • Gelay, 21 April 2008

    You never fail to amaze me. Thanks again.

  • Remy Overkempe, 21 April 2008

    Super read!

  • pete, 21 April 2008

    Excellent collection of CSS links. I’ve been looking for a few things regarding CSS navigation and styling, all of which I found here. Thanks!

  • Oliver, 21 April 2008

    Nice collection. SOme of these will come in handy.

    btw. the picture of “Uni-Form” isn’t linked correectly.

  • Steven Snell, 21 April 2008

    Thanks for the link Noura. This is a great collection.

  • Brian Yerkes, 21 April 2008

    wow….excellent collection. one of my main bookmarks forever!

    by the way, this comment form is not displaying in IE 7. and the footer is all off to the right hand side. Had to open firefox to add comment.

    Thanks

  • Sarah Neuber, 22 April 2008

    Thanks for the list. Excellent!

    P.S You might want to have someone check the site in IE7. The links don’t work for the examples starting with “Navigation”, your right column drops below the main and the footer “run away to the right” oops!!

  • BTM, 22 April 2008

    “Styling File Inputs with CSS and the Dom” this example will stop working as soon as Firefox 3 goes out of beta. Firefox sticks to the the W3C rules that specify that input type=”file” dosn’t support the click() method.

  • empe, 22 April 2008

    nice…

    hey.. i love your site, with a great number of useful collection

  • Mithun, 22 April 2008

    Fantastic, Thanks a lot!

  • Noupe, 22 April 2008

    Thank you all for the wonderful feedback. Your kind inputs are what drives us to spend time developing and expanding Noupe.

    @Sarah and Brian: Thank you for pointing this out, the problem in ie7 was due to unclosed tag in this post. Its fixed now :)

    Thanks Steven, Vandelaydesign.com not only inspires but also provides very useful information.

  • Tim, 22 April 2008

    Docking the footer is something I have struggled with for quite sometime…w/o any luck. The Uni-forms, and digg menu were slick too:)Nice work!

  • Siddharth, 22 April 2008

    Neat and very informative tutorials. I have digged this post. :-)

  • Ilia Goranov, 23 April 2008

    Most of the examples requires extra markup which is extremely stupid and not necessary!

  • David, 23 April 2008

    Ya! Lets see more of this! ;)

    These are some great resources!

  • Mika Tuupola, 23 April 2008

    There is also jQuery plugin for styling file inputs:

    http://www.appelsiini.net/projects/filestyle

  • Siva, 25 April 2008

    very amazing…. thx nice works…

  • Juanu, 29 April 2008

    Sencillamente excelenteeeee!

  • Noupe, 02 May 2008

    @Ilia Goranov,
    We don’t encourage poor practices, extra markup or non-compliant XHTML, but we all could be inspired to use these techniques and modify it to suite our needs.

  • Romano, 04 May 2008

    Very impressive!
    Many thanks…

  • dharma, 09 May 2008

    I thought smash mag was the only gallery where they have live CSS techniques, man this one rocks. Good job guys!

  • Masim man, 10 June 2008

    Excellent,
    I found something that I have never seen before.
    Thanks for sharing…

  • thoma, 17 June 2008

    Cool tricks…

  • tasarhane, 21 June 2008

    these are great thanks a lot..

    selamlar..

  • Mike, 26 June 2008

    very good resource for web dev. thanks

  • KARTHIK, 27 June 2008

    EXCELLENT WORK DONE BY U GUYS ..KUDOS TO U GUYS….THANK U VERY MUCH…U MADE OUR WORK VERY EASY

  • Sumaira, 20 July 2008

    Ahan.. Its awesum .. Reallie reallie nice designs
    um amazed :) Gud works

  • Haggis, 29 July 2008

    I… I think I love you.

  • action figure, 31 July 2008

    wow awesome! usable checklist! thanx 4 share

  • Leandro Jorge, 01 August 2008

    Very very good Thank you ..

  • United Voices, 01 August 2008

    I love experimenting with CSS and looking for more resources for CSS. Thanks for these example and tutorials.

  • soim, 18 August 2008

    great site,,,
    i learn much from this site

  • Neo, 20 August 2008

    greate

  • dainix, 30 August 2008

    Totally love this article – real force of CSS revelead :) Thanks ;)

  • Danh ba web 2.0, 30 August 2008

    Thanks for share. It’s great for me !

  • nishant, 01 September 2008

    this is a really amazing post. I didnt know many of these things..

  • joomlapanel, 02 September 2008

    many thank..finally I found the good trick using css for my joomla site.

    • Steffi, 04 May 2011

      That?s not just logic. That?s really senislbe.

  • styletime, 13 October 2008

    Great composition Thanks!

  • Sandie Sørensen, 20 October 2008

    Very inspiring resources!
    Especially the one with the text-wrap generator!

  • Nikon D300, 01 November 2008

    great! :)

  • md junaid akhter, 19 November 2008

    great! and fantastic!

  • Tan Nguyen, 20 November 2008

    very nice work..ty

  • yudz, 01 December 2008

    great resource! :)

  • lutvia, 13 December 2009

    This website like heaven to me, all about what is needed for webmaster … keep posting dude

  • s-etoiliste, 20 February 2010

    I was very pleased to find this site. I wanted to thank you for this great read!!

  • balaji, 08 April 2010

    nice collection yaar!!!!!

  • Deepak Rajpal, 11 June 2010

    super syling ..

  • Diseño Web Toledo, 28 June 2010

    Increible colección de temas de calidad indiscutible.

    para todos los que creen que el trabajo de calidad no puede compartirse desinteresadamente.

    chapeau

    • Jonetta, 04 May 2011

      At last! Smoeone who understands! Thanks for posting!

  • Alegria, 20 August 2010

    Pretty good!

  • www.yesilcamizle.net, 31 October 2010

    si than admin

  • ravi, 16 December 2010

    hi very very thanks for ur code.i got time

  • Baju Bayi, 11 January 2011

    You are very creative, pretty good.

  • IWT, 20 January 2011

    Great thanks for the great collection :)

  • cryoffalcon, 08 March 2011

    well these are really marvelous i checked about 70% of them.
    thanks for sharing.

  • Tatenda Horinda, 17 March 2011

    Thanks guys, Im just a rookie in CSS but i can already find my foot around with your examples. Nice work

  • A++, 02 April 2011

    this is just amazing.

  • izle, 13 April 2011

    thank you very nice themes

  • Mehboob Talukdar, 27 April 2011

    Amazing it’s totally amazing !!!
    Looking for more…
    Thanks.

  • shreshtt, 22 August 2011

    nice collection really really lot of help giving me this tutorial

  • Robin L. Bassett, 06 January 2012

    I commend this tutorial. I learned a lot. It was like i was toured around CSS. Thanks.

  • Carol Tree, 14 January 2012

    Wow, excellent collection. I like in special A Cool CSS Effect and Perfect pagination style using CSS.
    Actually with CSS we can do spectacular sites.
    Thanks

  • Sumanth, 29 January 2012

    Wow, good collection.
    Thanks

  • Paul T, 03 February 2012

    Thanks for including the css integration with images. I’ve always wanted to make my posts flow in a more beautiful manner and it looks like this should do the trick.

  • javedbinyousaf, 04 March 2012

    HI DEAR

    THIS BEAUTIFUL WORK .I HAVE NO WORD TO EXPLAIN YOUR SITE THEM WHAT IS BEAUTIFUL

  • Picky, 26 April 2012

    Most of the download link is dead …errrrr

  • Raghavendra.Padasalgi, 26 April 2012

    Great work.Thanks.I want to know is there any code to open the webpage and images in FULL SCREEN just like the function of F11.If it possible please advise me the code.

  • kabeer khan, 07 June 2012

    thanx for sharing ! Great list

  • anand, 02 August 2012

    Great Collection of links. Thx for sharing

  • David, 18 September 2012

    Some of these examples are difficult to implement ,especially when considering cross browser compatibility however there are a few that work well.

  • bagito, 23 March 2013

    MAGALING….
    (in english word: Very Good! thanks for this useful reference…
    btw, i’m not a web developer nor a programmer but i want to learn on how to create a website…
    THANK YOU…)

Leave a Reply

Comments are moderated - and rel="nofollow" is in use. Please no link dropping, no keywords or domains as names; do not spam, and do not advertise!

comments form

search form
 
image description image description