Archive for the ‘CSS Techniques’ Category

Fundamental CSS3 Resources for Designers


Here are useful CSS3 resources for designers including, new features Selectors introduced, design enhancement, alternative rounded corners,CSS3 with jQuery, other useful tips, tricks, techniques, tutorials and plenty of quality articles and many more. We hope you will find this post helpful as it contains the best resources you may need to use these useful CSS3 techniques for your next project.

If you don’t want to miss out our next posts, you can Subscribe to the 2Experts Design Blog or follow us on twitter

A Look at Some of the New Selectors Introduced in CSS3

css3 resources

5 CSS3 Design Enhancements That You Can Use Today

70 Must-Have CSS3 and HTML5 Tutorials and Resources

CSS3 rounded corners for every browser? An alternative quick solution without headache

Rounded Corner Boxes the CSS3 Way

Using Rounded Corners with CSS3

jQuery DJ Hero – CSS3 and jQuery fun

Nice And Simple Toolbar For Your Website With CSS3 And jQuery

Creating a polaroid photo viewer with CSS3 and jQuery

Old School Clock with CSS3 and jQuery

CSS3 Resource: Preview Custom Web Fonts with Font Dragr

CSS 3 Cheat Sheet (PDF)

HTML 5 and CSS 3: The Techniques You’ll Soon Be Using

CSS3 Unleashed – Tips, Tricks and Techniques

Introducing the CSS3 Multi-Column Module

Browser support for CSS3 properties

Super Awesome Buttons with CSS3 and RGBA

20 Very Useful CSS3 Tutorials

CSS3 Exciting Functions and Features: 30+ Useful Tutorials

CSS3 Embedding a Font Face

Six Questions: Eric Meyer on CSS3

30 Essential CSS3 Resources


10 Astonishing CSS Hacks And Techniques

1 – Cross browser inline block

    li {
        width: 200px;
        min-height: 250px;
        border: 1px solid #000;
        display: -moz-inline-stack;
        display: inline-block;
        margin: 5px;
        zoom: 1;
        *display: inline;
        _height: 250px;

                        <h4>This is awesome</h4>
                        <img src="" alt="lobster" width="75" height="75"/>
                <!-- etc ... -->

Source: Cross browser inline-block property

2 – Disable Textarea resizing for Safari

/ * Supports: car, both, horizontal, none, vertical * /
textarea }
      resize: none;

3 – Cross browser rounded corners

    -moz-border-radius: 5px; /* Firefox */
    -webkit-border-radius: 5px; /* Safari */

Source: Border-radius: create rounded corners with CSS!

4 – Cross browser min-height property

selector {
  height:auto !important;

Source: Min-height fast hack

5 – Image Rollover Borders That Do Not Change Layout

#example-one a img, #example-one a {
    border: none;
    overflow: hidden;
    float: left;

#example-one a:hover {
    border: 3px solid black;

#example-one a:hover img {
    margin: -3px;

Source: Image rollovers that do not change layout

6 – Cross browser transparency

.transparent_class {
	-khtml-opacity: 0.5;
	opacity: 0.5;

Source: CSS transparency settings for all browsers

7 – Lighbox in pure CSS: No Javascript needed!

Source: Lightbox effect in pure CSS: No javascript needed!

8 – Cross browser pure css tooltips

<style type="text/css">
a:hover {
    text-decoration:none;} /*BG color is a must for IE6*/

a.tooltip span {
    padding:2px 3px;

a.tooltip:hover span{
    border:1px solid #cccccc;

Easy <a href="#">Tooltip<span>This is the crazy little Easy Tooltip Text.</span></a>.

Source: Easy CSS Tooltip

9 – Set color of selected text (Firefox/Safari only)

::selection {
    background: #ffb7b7; /* Safari */

::-moz-selection {
    background: #ffb7b7; /* Firefox */

Source: Use CSS to Override Default Text Selection Color

10 – Add File Type Icons next to your links

    a[href^="http://"] {
    background:transparent url(../images/external.png) center right no-repeat;

Source: Add File Type Icons next to your links with CSS

Best of CSS Design 2009

Since 2007, every year I do a round up of best of CSS from Best Web Gallery (check out 07 and 08 collection). Well, it is the time of the year again — Best of CSS Design 2009. This year I’ve selected another 50 nicely designed web sites. Among the list, I notice a lot of them are minimalistic design with beautiful serif fonts. The grungy and sketchy styles are still strong. However, the large background is no longer as hot as in 2008, instead, texturized background is popular in 2009.

Sushi and Robots




A Way Back




For a Beautiful Web


Black Estate




Mark Dearman




Trent Walton


Area 17






Square Space


Gap Medics






Book Cover Archive


Search Inside Video


Red Nose Day




Fajne Chlopaki




Mail Chimp




Squared Eye


Clear Left


White House


45 Royale


Work at Play




Legwork studio




Project 365


72 Ave




We Heart


Jeff Finley


Elliot Jay Stocks




Corking Design








Jeremy Charles


Brite Revolution


Go Media


31 Three


AN idea


Mission Bicycle



47 Amazing CSS3 Animation Demos

Here is a compilation of 47 jaw-dropping CSS3 animation demos. They demonstrate the possibilities of the CSS3 transform and transition property. Some are very useful and can be used as Javascript alternatives. Most of them are simply to look cool. In order to veiw these effects, you need a webkit browser such as Safari and Chrome (sorry to the Internet Explorer users). Enjoy!

CSS3 Clock With jQuery

css3 clock

Analogue Clock

analogue clock

3D Cube That Rotates Using Arrow Keys

3d cube

Multiple 3D Cubes (Slide In/Out)

multiple 3d cubes

CSS3 Accordion

css3 clock

Auto-Scrolling Parallax

auto scrolling parallax



Image Gallery

image gallery



7 Javascript-effect Alternatives Using CSS3

javascript effect alternatives

Image Hover Effects

css3 clock

Turning Coke Can (Control With Scrollbar)

coke can

3D Meninas

3d meninas

Polaroid Gallery

polaroid gallery


Note: this one is graphic intense and takes a while to load, but the result is crazy!


Mac Dock

css3 clock

Drop-In Modals

drop in modals

Sliding Vinyl

sliding vinyl

Zooming Polaroids

zooming polaroids

Animated Rocket

animated rocket

Poster Circle

poster circle

Morphing Cubes

morphing cubes

Falling Leaves

falling leaves

Animated Polaroid Gallery

polaroid gallery

Spotlight Cast Shadow

spotlight cast shadow

Colorful Clock

colorful clock

Lightbox Gallery (Draggable)

css3 clock

Elastic Thumbnail Menu

elastic thumbnail menu





jQuery DJ Hero

dj hero

Dynamic Stacking Cards

stacking cards

Another Image Gallery

image gallery

Snow Stack (Control With Arrow Keys)

snow stack

Animated Pricing Column

animated pricing column

Slick jQuery Menu

slick jquery menu


sticky notes

CSS Tabs Without Javascript

css tabs

Tab Menus Without Javascript

tab menus

SVG Fisheye Menu

fisheye menu

Dynamic Presentation Without Flash

dynamic presentation

Rotating Gallery

rotating gallery

Dropdown Menu

dropdown menu

Another Fisheye


Frame-by-Frame Animation (Hover to Play)

css3 animation

Another Accordion

another accordion

AT-AT Walker (No Flash or Javascript)

css3 animation walker


10 Best CSS Practices to Improve Your Code

It’s really easy to find yourself wondering how your CSS got to be such a mess.

Sometimes it’s the result of sloppy coding from the start, sometimes it’s because of multiple hacks and changes over time.

Whatever the cause, it doesn’t have to be that way. Writing clean, super-manageable CSS is simple when you start off on the right foot and make your code easier to maintain and edit later on.

Here are 11 tips for speeding up the process, writing CSS that is slimmer, faster and less likely to give you a headache.

1. Stay Organized

Just like anything else, it pays to keep yourself organized. Rather than haphazardly dropping in id’s and classes in the order in which they come to mind, use a coherent structure.

It will help you keep the cascading part of CSS in mind and sets your style sheet up to take advantage of style inheritance.

Declare your most generic items first, then the not-so-generic and so on. This lets your CSS properly inherit attributes and makes it much easier for you to override a specific style when you need to. You’ll be faster at editing your CSS later because it will follow an easy to read, logical structure.

Use a structure that works best for you while keeping future edits and other developers in mind.

  • Resets and overrides
  • Links and type
  • Main layout
  • Secondary layout structures
  • Form elements
  • Miscellaneous


2. Title, Date and Sign

Let others know who wrote your CSS, when it was written and who to contact if they have questions about it. This is especially useful when designing templates or themes.


Wait a minute… what’s that bit about swatch colors? Over the years, I’ve found that adding a simple list of common colors used in my style sheets is extremely helpful during initial development and when making edits later on.

This saves you from having to open up Photoshop to sample a color from the design, or look up colors in the site’s style guide (if it has one). When you need the HTML code for that specific blue, just scroll up and copy it.

3. Keep a Template Library

Once you’ve settled on a structure to use, strip out everything that isn’t generic and save the file as a CSS template for later use.

You can save multiple versions for multiple uses: a two-column layout, a blog layout, print, mobile and so on. Coda (the editor for OSX) has an awesome Clips feature that lets you do this easily. Many other editors have a similar feature, but even a simple batch of text files will work nicely.

It’s insane to re-write each and every one of your style sheets from scratch, especially when you’re using the same conventions and methodologies in each.


4. Use Useful Naming Conventions

You’ll notice above where I declared a couple of column id’s and I called them col-alpha and col-beta. Why not just call them col-left and col-right? Think of future edits, always.

Next year you may need to redesign your site and move that left column to the right. You shouldn’t have to rename the element in your HTML and rename the id in your style sheet just to change its position.

Sure, you could just reposition that left column to the right and keep the id as #col-left, but how confusing is that? If the id says left, one should expect that it will always be on the left. This doesn’t leave you much room to move things around later on.

One of the major advantages of CSS is the ability to separate styles from content. You can totally redesign your site by just modifying the CSS without ever touching the HTML. Sodon’t muck up your CSS by using limiting names. Use more versatile naming conventions and stay consistent.

Leave position or style specific words out of your styles and id’s. A class of .link-blue will either make more work for you, or make your style sheet really messy when your client later asks you to change those blue links to orange.

Name your elements based on what they are, not what they look like. For example, .comment-blue is much less versatile than .comment-beta, and .post-largefont is more limiting than .post-title.

5. Hyphens Instead of Underscores

Older browsers like to get glitchy with underscores in CSS, or don’t support them at all. For better backward compatibility, get into the habit of using hyphens instead. Use #col-alpha rather than #col_alpha.

6. Don’t Repeat Yourself

Re-use attributes whenever possible by grouping elements instead of declaring the styles again. If your h1 and h2 elements both use the same font size, color and margins, group them using a comma.



You should also make use of shortcuts whenever possible. Always be on the lookout for opportunities to group elements and use declaration shortcuts.

You can accomplish all of this:


with only this:


It’s very important that you understand the order in which CSS interprets these shortcuts: top, right, bottom, left. A big clockwise circle, starting at noon.

Also, if your top and bottom, or left and right attributes are the same, you only need to use two:


This sets the top and bottom margins to 1em, and the left and right margins to 0.

7. Optimize for Lightweight Style Sheets

Using the above tips, you can really cut down the size of your style sheets. Smaller loads faster, and smaller is easier to maintain and update.

Cut out what you don’t need and consolidate wherever possible by grouping. Use caution when using canned CSS frameworks as well. You’re likely to inherit lots of bulk that won’t be used.

Another quick tip for slim CSS: you don’t need to specify a unit of measure when using zero. If a margin is set to 0, you don’t need to say 0px or 0em. Zero is zero regardless of the unit of measure, and CSS understands this.

8. Write Your Base for Gecko, Then Tweak for Webkit and IE

Save yourself troubleshooting headaches and write CSS first for Gecko browsers (Firefox, Mozilla, Netscape, Flock, Camino). If your CSS works properly with Gecko, it’s much more likely to be problem free in Webkit (Safari, Chrome) and Internet Explorer.

9. Validate

Make use of W3C’s free CSS validator. If you’re stuck and your layout isn’t doing what you want it to do, the CSS validator will be a big help in pointing out errors.

10. Keep a tidy house

Separate browser-specific CSS to its own individual style sheet, and include as needed with Javascript, server-side code or conditional comments. Use this method to avoid dirty CSS hacks in your main style sheets. This will keep your base CSS clean and manageable.


Cross Browser Pure CSS3 Horizontal Accordion

Just few days ago, I shared pure CSS3 vertical accordion that works in all modern browsers, including Internet Explorer. Now it is time to share its twin – a pure CSS3 horizontal accordion. It uses same markup enabling you to switch from vertical to horizontal accordion and vice versa by simply changing the class name.

We will continue to use “:hover” instead of “:target” pseudo class to cater Internet Explorer and other usability issues (You should read “Cross Browser Pure CSS3 Vertical Accordion” article to find out why we are not using “:target” pseudo class).

Lets Start

In order to support text based panel heads, we will need to rotate entire panel head to create horizontal accordion. Interestingly, we have the ability to rotate elements in Internet Explorer (using Microsoft’s BasicImage filter) for a while. Other browsers are only able to do this with CSS3 transform. Rest of the structure and behavior will be written in cross-browser CSS that will work in IE7+ and all other modern browsers.

View Demo Now Download Files

01 <div class="horizontalaccordion">
02 <ul>
03 <li>
04 <h3>Heading 1</h3>
05 <div>Content For Panel 1.</div>
06 </li>
07 <li>
08 <h3>Heading 2</h3>
09 <div>Content For Panel 2</div>
10 </li>
11 <li>
12 <h3>Heading 3</h3>
13 <div>Content For Panel 3.</div>
14 </li>
15 <li>
16 <h3>Heading 4</h3>
17 <div>Content For Panel 4</div>
18 </li>
19 </ul>
20 </div>
01 .horizontalaccordion>ul>li:hover {
02 overflow: hidden;
03 width: 380px;
04 }
06 .horizontalaccordion:hover>ul>li:hover>div {
07 display:block;
08 }
10 .horizontalaccordion:hover>ul>li:hover>h3 {
11 /* Decorative CSS */
12 color:#fff;
13 background:#000000;
14 }
16 .horizontalaccordion>ul>li>h3:hover {
17 cursor:pointer;
18 }

51 Form Element Resources and Tutorials Using CSS And Javascript

1. How create good looking form without table

This tutorial explains how to design a good form using a clean CSS design with only label and input tags to simulate an HTML table structure. You can use all CSS/HTML elements to design your custom form for your web projects.


View demo & source

2. Simple Form Example

Very well explained tutorial showing crucial points you should give attention to.


View demo & source

3. Prettier Accessible Forms


View demo & source

4. Adding Style with CSS: A Beautiful Form

Forms don’t have to be ugly and boring, and certainly don’t have to be inside tables to look nice and aligned.


View demo & source

5. NiceForms

Niceforms is a script that will replace the most commonly used form elements with custom designed ones. You can either use the default theme that is provided or you can even develop your own look with minimal effort.


View demo & source

6. Turn postcard photo into a stunning comment form using CSS

This tutorial will teach you how to make a stunning comment form using an old postcard photo.


View demo & source

7. Enhance your input fields with simple CSS tricks

The example you are going to see is something that you use every day: blog comment form.


View demo & source

8. Fun with forms – customized input elements

Ever wanted to match the look of your HTML forms with the rest of your website? This article demonstrates how to apply customized backgrounds to HTML forms, while preserving stucturally clean markup and accesibility.


View demo & source

9. Forms markup and CSS – Revisited


View demo & source

10. Semantic horizontal Forms

Semantically correct web forms with fieldsets, legends, labels and some CSS styling. It’s been tested in FF1.x, IE6 and Opera8. (looks a little quirky in IE5.x but still usable).


View demo & source

11. Style:Phreak’s Standard Form Layout Revisited


View demo & source

12. Tableless forms

Create beautiful web forms using just CSS, very good tutorial!


View demo & source

13. A form with style

7 different style examples, where you can study code and creat good looking forms.


14. A Simple Tableless Form

Use CSS to build your form without any use of tables. Code examples are written in good-old-fashioned HTML instead of ASP.NET and do not contain validation, ID’s, etc. Continue with second part on their website, to learn how to send and receive that data – Staying in Touch – How to Build a Contact Form.


15. Fancy Form Design Using CSS


View demo & source

16. Make your forms beautiful with CSS

In this tutorial, you’ll learn how to take a standard form and then make it special with some simple CSS tricks and techniques. You will improve the usability, aesthetics and layout, while picking up design cues from the existing design elements.


Download tutorial files

17. How to create perfect form markup and style it with CSS

This post will explain choices when marking up the forms, and the CSS styling involved in making them cross-browser compatible.


View demo & source

18. Background Images into Form Fields with CSS

Adding some expressive background images to your HTML form can be considered sometimes as a relevant point. This can be done easily with pure CSS.


Download link

19. Formy – CSS Form Framework

This is universal CSS for forms who will interact in the simple natural way with HTML form and HTML form will work decently well even without CSS.


View demo & source

20. Changing Form Input Styles on Focus with jQuery

A lot of forms can be boring and plain, don’t let yours blend in. This tutorial will show you how to spice them up with CSS classes and default values that change according to which form item is selected. All with just a splash of jQuery.


View demo & source

21. Form field hints with CSS and JavaScript

It’s a basic example of how helpful a little JavaScript and CSS can be in a form. Instead of the input hints always showing and potentionally cluttering a very simple form, only the hint for the currently focused input will show. This article will show a way to do this.


View demo & source

22. Improve form usability with auto messages

Animated auto messages are useful to improve FORM usability and Scriptaculous is a great framework to use in this case.


Download source

23. Nice & Clean Sliding Login Panel built with jQuery


View demo & source

24. “Select” Something New

With a little DOM scripting and some creative CSS, you too can make your <select>s beautiful… and you won’t have to sacrifice accessibility, usability or graceful degradation.


View demo & source

25. 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.


26. CSS-Only, Table-less Forms

Modern and comprehensive web form example. It works in Win/IE6, Firefox v1.0+, Win/Opera v8.0, has minor layout differences in Mac/Safari v1.0.3 and Mac/Safari v1.2, and is usable but fairly buggered in Mac/IE5.2.


27. FancyForm

FancyForm is a powerful checkbox replacement script used to provide the ultimate flexibility in changing the appearance and function of HTML form elements. It’s accessible, easy to use and degrades gracefully on all older, non-supporting browsers.


View demo & source

28. Showing Good Form

The function of the interface is to input information, so semantically this is a form, so way of building it will be using form elements: fieldset, legend, label and input.


View demo & source

29. jQuery checkbox

Lightweight custom styled checkbox implementation for jQuery 1.2.x and 1.3.x.


30. AutoSuggest: An AJAX auto-complete text field

The AutoSuggest class adds a popdown menu of suggested values to a text field. The user can either click directly on a suggestion to enter it into the field, or navigate the list using the up and down arrow keys, selecting a value using the tab key. The values for the suggestion list are to provided as XML (by a PHP script, or similar).


View demo & source

31. LiveValidation

LiveValidation is a small open source javascript library for making client-side validation quick, easy, and powerful. It comprises of two main parts. Firstly, it provides developerswith a rich set of core validation methods, which can also be used outside the context of forms. Secondly, it provides your visitors with real-time validation information as they fill out forms, helping them to get it right first time, making the forms easier, quicker and less daunting to complete.


View demo & source

32. PrettyForms


View demo & source

33. Pretty Checkboxes, a solution to checkboxes

This script is for people who wants to have a consistent look for checkboxes across browser or those who simply want them to look better. By using this script you wont loose any of the regular inputs usability.


34. Validation Hints for your form


View demo & source

35. Building a better web forms: Context highlighting using jQuery


View demo & source

36. Control.SelectMultiple

Unobtrusive select multiple input alternative for Prototype.


37. Really Easy Field validation with Prototype

Here’s a form validation script that is very easy to use.


View demo & source

38. Autotab: jQuery auto-tabbing and filter plugin

Autotab is a jQuery plugin that provides auto-tabbing and filtering on text fields in a form. Once the maximum number of characters has been reached within a defined text fields, the focus is automatically set to the defined target of the element.


39. Grow a textarea

Just make a form, and this script will add the ability to resize each textarea…if you want to, based on MooTools.


40. Checkboxes, Radio Buttons, Select Lists, Custom HTML Form Elements

This JavaScript and CSS will allow you to use custom images for checkboxes, radio buttons and select lists.


41. Password field with strength meter

These forms do not do anything and have very little validation. They solely demonstrate how you can use Ext Forms to build and layout forms on the fly.


42. Clean and pure CSS FORM design

This tutorial illustrates a proposal about how to design a pure CSS form without using HTML tables.


43. CSS Tableless Form

This is a tableless CSS form which you can use as a template for implementing your own lightweight form. It uses a combination of float and negative margins to create a two column layout for the form.


44. Form Highlighting Redux


View demo & source

45. Styling form controls

36 simple documents, each containing twelve controls of the same kind, but with a different CSS rule for each element. Due to the various controls having different properties to style, there are two three slightly different sets of rules. Check out also follow-up article.


46. cforms II WordPress Plugin

cforms is a powerful and feature rich form plugin for WordPress, offering convenient deployment of multiple Ajax driven contact forms throughout your blog or even on the same page.


47. A CSS Stylesheet Collection for Web Forms

You can view and download 13 different css stylesheets, great for study!


48. Styling form controls with CSS, revisited

224 screenshots showing the effects of various CSS rules applied to form controls. The screenshots are taken from 8 browsers on 4 operating systems, for a total of 14 different browser + OS combinations. Huge article!


49. 5 uniquely designed and coded web form styles

CSSGlobe is giving away 5 really good web form style designs, which can be used freely and studied as well.


View demo & source

50. 10 Tips for Incredible Web Forms!

In this great article from DesignReviver you will be walked through web form building with explained basic code examples, several tools to help you build up your form as well as incredible contact pages found over the web for inspiration. Must read!


51. Tips For Creating Great Web Forms

Excellent article from CSS-Tricks with 7 tips how to create better web forms.