CSS3 comes up and you can replicate fancy effects you thought you can only do in Photoshop. Now people create logos and icons within only lines of code and what’s more no images! Effects are stunning and unbelievably realistic. In this article, we have handpicked some awesome css3 experiments so far which will make you say wow.

Olympic Logo

Name: Doug Neiner
Purely css, ems based and dynamically scallable. It also requires a browser capable of rendering border-radius. For now that includes recent versions of Chrome, Safari, Firefox and Internet Explorer 9.

jQuery Logo

Name: Doug Neiner
We all know jQery. Probably most of us, favorite javascript framework. Logo rendered mainly using border-radius property.

jQuery UI Logo

Name: Doug Neiner
jQery UI icon. Not as popular as framework brother, but worth being interested in. Similairly, made using border-radius property.

Impressive CSS logo replications

Name: Justin Sepulveda
Nice piece of icon set. All made with pure css and use border-radius, gradient, transform properties. It’s nice to see people come up with such amazing replicas. Awesome!

Opera Logo

Name: David DeSandro
Nicely made Opera icon. Extensive usage of border-radius, gradient could provide this extensively awesome effect. Logo doesn’t look the same on all browsers, especially on IE.

iOS icons

Name: Louis Harboe
Great work. Advanced css3 involved.

Simple css icons

Name: Zander Martineau
I didn’t know making triangles out of css2 was possible, till this article research. Here you can find some pretty and simple stuff like rss icon, heart icon or triangle.

Pure CSS animated 3D Super Mario Icon

Name: Andreas Jacob
Made by with CSS3 & the CSS 4D Framework by Andreas Jacob. Animation work is decent but for now only works in Safari 5.

Some nice icon made with pure CSS

Name: Andrew Kelly
Gradients, Shadows and rounded borders used. Nice final effect.

Adobe Photoshop Logos in CSS3

Name: Radu Chelariu
Great use of gradients and amazing footer. No images used!

Ten amazing social media icons!

Name: Nicolas Gallagher
All examples use simple, semantic HTML. No empty elements, no unnecessary extra elements, no JavaScript, no images.

Peculiar CSS icon set

Name: Lucian Marin
Peculiar is icon package made only in CSS. It was created for sites and web applications that depend on fewer HTTP requests as possible or don’t need to use any image at all.

Twitter icon in only CSS3

Name: Giacomo Bartoli
Obviously used @font-face with little shadow and rounded borders.

Go Transit CSS Logo

Name: Collin Henderson
CSS only logo of Canadian Transporter. Simply done with use of border-radius.

Internet Explorer CSS icon

Name: Andreas Jacob
Best viewed with Firefox 3.6+ & Safari 5. Radial, linear gradients, shadows and lots of empty elements.

Nintendo icons

Name: Drew
Mario mushroom, the Triforce, a Pokéball, and Kirby made with pure css.

Back to the future CSS Logo

Name: Lucas Garron
This logo and the original one. Unbelievably alike. Best viewed in webkit browser.

Raindrop CSS Logo

Name: Sean Martell
Amazing replication of Mozilla’s project i like.

Bahamas CSS Logo

Name: ForestMist
Impressive replica made with use of border-radius.

Reddit CSS Alien

Name: Matthew James Taylor
Nice css logo made with use of “O O _ ( ) ( ) O O O O / – o O O O O O O O O • • ( ) ( )” and some font-styling.

Social Media Pure CSS icons

Name: insicdesigns
Just another social media icons with use of css3.

Bonus: iPhone in CSS3

Name: Jeff Batterton
Well, that’s not an icon, but work involved in this one is really insane. Extensive use of css3.

Bonus: Twitter Fail Whale

Name: Jeff Batterton
Well, that’s not an icon, neither logo. It’s really good illustration made only with css. No images whatsoever!

Bonus: LOST – Animated CSS3 Logo

Name: Marcos Esperon
This example animation plays nerdy title in the introduction of the series Lost (a tribute to its completion). Best viewed in webkit browser.

Final thoughts

There are many amazingly done css icons and logos. People achieved those effects using only lines of code. Sounds unbelievable, but it’s true. Well, this may not be what CSS is for, but it’s fun way to learn and play with it. So, learn css3, experiment for yourself and remember to check out The Ultimate Roundup of 55+ CSS3 Tutorials.

All the hype recently has been about Html5, and the new elements it brings to the table for us to use. However, the way I see it, we currently don’t even utilise all that the current version of html has to offer. There are several really useful elements available to use, that make our code more semantic, our website more usable, and in general, everything easier for both us, the coder, and the end-user of our site.

1. label

Description

The tag defines a label for an input element in forms. The tag itself doesn’t render any differently to people who don’t wrap their descriptors in the tag, but it does however, provide usability improvements. Clicking a form inputs label will focus you on the input, and for inputs such as check boxes and radio buttons, clicking the label will toggle them.

Usage

The <label> tag should be placed next to their relevant form controls in your code. The only real requirement of the <label> tag is that it’s “for” attribute should be equal to the id attribute of the form control it is related to. This allows them to be linked together by the browser for the usability enhancements. Here is an example

 <label for="name">Your Name</label> <input type="text" id="name" /> 

Styling

The label element has become quite popular recently, and while it still isn’t used by everyone, it’s styling, and some creative uses have been conjured up. Check these links out below for further ideas.

• Fancy form design with css
• In-line form labels
• A better Jquery in-field label plugin

2 & 3. fieldset & legend

Description

The <fieldset> tag is used to logically group together elements in a form. Basically, the <fieldset> tag draws a box around the form elements it contains to separate them from other elements or <fieldset>’s in the form. The <legend> tag is then used to define a caption for its specific fieldset.

Usage

The <fieldset> and <legend> tags can, and really should be used in any form. They allow you to describe, and split up forms into relevant sections.

 <form>   <fieldset>     <legend>Personal Details</legend>     <label for="firstname">First Name</label>     <input type="text" id="firstname" />     <label for="lastname">Last Name</label>     <input type="text" id="lastname" />   </fieldset> </form> 

Styling

There are plenty css tutorials out there for styling forms, and the vast majority of them, as they should, make use of the <fieldset> and <label> tags. Check out these links for styling ideas.

• Styling Form Fieldsets, Legends and Labels
• Semantic Horizontal Form
• Prettier Accessible Forms

4. optgroup

Description

The <optgroup> tag is used to group together related options in a select (dropdown) list. This can often make long lists of options easier for users to navigate, and handle.

Usage

The <optgroup> tag simply wraps the options within it, with the title being added to it via an attribute called “label”. Here is some sample markup for a <select>.

 <select>   <optgroup label="Swedish Cars">     <option value="volvo">Volvo</option>     <option value="saab">Saab</option>   </optgroup>   <optgroup label="German Cars">     <option value="mercedes">Mercedes</option>     <option value="audi">Audi</option>   </optgroup> </select> 

Styling

As is usual with form element styling in browsers, support is fairly limited, and nowhere near being standard across browsers. The default seems to be bold headers within your dropdown.

5. dl

Description

The <dl> tag defines a definition list. Basically the <dl> tag is uses with <dt> which defines the item in the list, and <dd> which described the current item in the list. This makes it useful for a lot of things, such as dictionary style lists, and other things such as contact details, and so on.

Usage

This example usage I am going to show is an example for how I’d used the definition list on a contact page.

 <dl>   <dt>Email</dt>   <dd>email@domain.com</dd>   <dt>Location</dt>   <dd>Here</dd>   <dt>Phone</dt>   <dd>+0123456789</dd>   <dt>Skype</dt>   <dd>myname</dd> </dl> 

Styling

Definition lists are quite flexible and can be used for plenty things. This article shows some of these.

• Definition lists – misused or misunderstood?

6. cite

Description

The <cite> tag contains a citation or a reference to other sources. It is usually used to wrap the name of the source of a quote, or resource.

Usage

The <cite> tage is basically used to provide a reference, usually with a title attribute to provide full source information such as below.

 According to <cite title="HTML & XHTML: The Definitive Guide. Published by O'Reilly Media, Inc.; fifth edition (August 1, 2002)">Chuck Musciano and Bill Kennedy</cite>, the HTML cite tag actually exists! 

Styling

<cite> tags are generally styled as italics, and most browsers normally do this automatically. The title attribute is shown on hover.

7. blockquote

Description

The <blockquote> tag defines a long quotation. It can be used with the <cite> tag, and is usually used for testimonials, and pull quotes.

Usage

The <blockquote> tag basically wraps the quote, and can be used along with <p>, and <cite> as well as other tags for further styling.

 <blockquote> This is an example of a blockquote which is not inline, and is long! </blockquote> 

Styling

There are two universally accepted styles for blockquotes, but there are plenty other ideas out there as well. Here they are below.

• Six ways to style blockquotes
• Simple and nice blockquote styling

8. code

Description

The <code> tag is used to display computer code text. This is usually displayed in a different font with characters that are all the same size.

Usage

You should pretty much always use your <code> tag wrapped in the <pre> tag. This basically preserves all spacing, and tabbing in your code.

 <pre>   <code>     .classname {       /** Code goes here **/       /** Code goes here **/       /** Code goes here **/     }   </code> </pre> 

Styling

• Styling pre tags with css code block
• Demystifying pre and code tags

9. colgroup

Description

The <colgroup> tag is used to group columns in a table for easy formatting. Instead of applying styles to each individual column cell, you can simply apply it to the <col> in the <colgroup> and it will be applied to the entire column.

Usage

This below example shows how <colgroup> and <col> should be used in the markup of a table. You can then apply class’s to each <col> rather than every <td> in that column to style that column.

 <table>   <colgroup>     <col />     <col />     <col />   </colgroup>   <tr>     <td>One</td>     <td>Two</td>     <td>Three</td>   </tr>   <tr>     <td>A</td>     <td>B</td>     <td>C</td>   </tr> </table> 

10. acronym

Description

The <acronym> tag, funnily enough, defines an acronym. An acronym can be spoken as if it were a word, example NATO, NASA, ASAP, GUI. By marking up acronyms you can give useful information to browsers, spell checkers, screen readers, translation systems and search-engines.

Usage

The acronym tag works in pretty much the same way as the <cite> tag does, in that you simply hover over it to see the full acronym.

 Can I get this <acronym title="As soon as possible">ASAP</acronym>?