Box Round

.box_round {
-moz-border-radius: 12px;
-webkit-border-radius: 12px;
border-radius: 12px;
}

Box shadow

.box_shadow {
-moz-box-shadow: 0px 0px 4px #ffffff; /* FF3.5+ */
-webkit-box-shadow: 0px 0px 4px #ffffff; /* Saf3.0+, Chrome */
box-shadow: 0px 0px 4px #ffffff; /* Opera 10.5, IE9 */
}

Box Gradient

.box_gradient {
background-color: #444444;
background-image: -moz-linear-gradient(top, #444444, #999999); /* FF3.6 */
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #444444),color-stop(1, #999999)); /* Saf4+, Chrome */
background-image: linear-gradient(top, #444444, #999999);
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#444444', EndColorStr='#999999'); /* IE6–IE9 */
}

Box RGBA

  .box_rgba {
  background-color: #B4B490;
  background-color: rgba(180, 180, 144, 0.6);  /* FF3+, Saf3+, Opera 10.10+, Chrome, IE9
  filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#99B4B490',EndColorStr='#99B4B490'); /* IE6–IE9
  }
  

Box Rotate

  .box_rotate {
  -moz-transform: rotate(7.5deg);  /* FF3.5+
  -o-transform: rotate(7.5deg);  /* Opera 10.5
  -webkit-transform: rotate(7.5deg);  /* Saf3.1+, Chrome
  -ms-transform: rotate(7.5deg);  /* IE9
  transform: rotate(7.5deg);
  filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', /* IE6–IE9
  M11=0.9914448613738104, M12=-0.13052619222005157,M21=0.13052619222005157, M22=0.9914448613738104);
  }
  

Box Transition

  .box_transition {
  -moz-transition: all 0.3s ease-out;  /* FF3.7+ */
  -o-transition: all 0.3s ease-out;  /* Opera 10.5 */
  -webkit-transition: all 0.3s ease-out;  /* Saf3.2+, Chrome */
  transition: all 0.3s ease-out;
  }
  

Box Text Shadow

  .box_textshadow {
  text-shadow: 1px 1px 3px #888; /* FF3.5+, Opera 9+, Saf1+, Chrome */
  }
  

Font Face

  @font-face {
  font-family: 'WebFont';
  src: url('myfont.eot');  /* IE6–8 */
  src: local('☺'),
  url('myfont.woff') format('woff'),  /* FF3.6, IE9 */
  url('myfont.ttf') format('truetype');  /* Saf3+, Chrome, FF3.5, Opera 10+ */
  }
  

Note that this is merely a fun, proof-of-concept that explores the possible applications of CSS3. If you intend to use this in production, you should be aware that what we will be creating uses W3C specifications that are not yet, or will never be, supported in many browsers (such as IE6 through IE8). Also, the markup must be updated in order to avoid empty div elements.

CSS Ingredients

Before we get started, let’s just quickly go over what we be using.

1. :before and :after pseudo-elements: Using pseudo-elements will help us in reducing the amount of unnecessary HTML we need to use. If you have worked with rounded corners in CSS2 before, you probably know that, in order to produce flexible rounded corners that accommodate various sizes of content, you had to use a lot of empty divs and such. By using these elements, we will have minimal markup. In this case, just one empty div per bauble, which, if you were enterprising, you would fill with some text content. Note that these pseudo-elements are in CSS2 specs.
2. CSS3 linear and radial gradients: To get the metallic color fills and shines of the baubles, we will use color gradients.
3. Box shadows, transformations, border radius, etc.: To create the shapes, we will be using a combination of box-shadow, transform, and border-radius (for rounded corners).

HTML

First, let us create the markup. As you can see below, the structure is quite minimal and contains only the minimum amount of markup necessary.

Since the globes need to be block elements, I chose to go with <div> instead of <span>, however, if you are not comfortable with that, you can use <span> tags and then use the display: block CSS property/value pair.

I have placed them in an unordered list because I decided that they are a group of items with no particular hierarchy (e.g. red-bauble is not greater than green-bauble), and so, to me, the metaphor of unordered lists is retained.

<ul id="bauble-container">
  <li>
    <div class="bauble red-bauble"></div>
  </li>
  <li>
    <div class="bauble blue-bauble"></div>
  </li>
  <li>
    <div class="bauble yellow-bauble"></div>
  </li>
  <li>
    <div class="bauble green-bauble"></div>
  </li>
</ul>

Explanation of the IDs/classes:

1. #bauble-container is our unordered list, which will be used for targeting the list items (<li>) with greater specificity.
2. .bauble is the main part of the ornament; the spherical shape.
3. .red-bauble, .blue-bauble, .yellow-bauble and .green-bauble are the classes used for adding color variations. It makes our work flexible so that, if you wanted various combinations, you’re not stuck with the color combinations I chose. For example, you could have two yellow baubles or no yellow baubles–that’s why we use classes, and not IDs, for these.

CSS

What follows are the style rules that will turn our boring unordered list above into a magical set of Christmas tree ornaments.

For discussion, I have commented the CSS below so that you can see how it works to highlight the major parts of the CSS.

Note that, in production, you would not want this much commenting in your stylesheet because it is over the top and because it can increase your stylesheet’s file size.

  /* General */
  html
  {
  background: #f2f5f6; /* Fallback background color if gradients are not supported */
  background: -moz-linear-gradient(top, #f2f5f6, #c8d7dc);
  background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #c8d7dc),color-stop(1, #f2f5f6));
  height: 100%;
  }

  #bauble-container
  {
  list-style: none; /* Remove bullets */
  width: 568px;
  margin: 150px auto; /* Center it */
  padding: 0;
  }

  #bauble-container li
  {
  margin: 0 20px; /* let's add some space */
  float: left; /* place them in line */
  }

  /* This is the part where the Christmas bauble string is added */
  #bauble-container li:before
  {
  content: "";
  background: #dadada; /* Fallback */
  background: -moz-linear-gradient(bottom, #9c9c9c, rgba(255,255,255,0) );
  background: -webkit-gradient(linear, left bottom, right top, from(#9c9c9c), color-stop(100%, rgba(255,255,255,0)));
  height: 50px;
  width: 2px;
  display: block;
  margin: 0 auto;
  }

  /* Alernatively rotate them */
  #bauble-container li:nth-child(odd)
  {
  -moz-transform: rotate(-5deg); /* Firefox */
  -webkit-transform: rotate(-5deg); /* Chrome and Safari */
  -o-transform: rotate(-5deg); /* Opera */
  -ms-transform: rotate(-5deg); /* Surprise! IE9 with its own prefix */
  }

  #bauble-container li:nth-child(even)
  {
  -moz-transform: rotate(5deg);
  -webkit-transform: rotate(5deg);
  -o-transform: rotate(5deg);
  -ms-transform: rotate(5deg);
  }

  /* Style the bauble */
  .bauble
  {
  -moz-border-radius: 100px;
  border-radius: 100px;

  -moz-box-shadow: 0 0 5px #777777;
  box-shadow: 0 0 5px #777777;
  -webkit-box-shadow: 0 0 5px #777777;

  border: 1px solid rgba(0,0,0,0.3);
  position: relative;
  height: 100px;
  width: 100px;
  }

  /* Style the bauble head */
  .bauble:before
  {
  content: "";

  background: #fff; /* Fallback */
  background: -moz-linear-gradient(left, #fff, #9c9c9c, #fff, #9c9c9c );
  background: -webkit-gradient(linear, left center, right center, from(#fff), color-stop(25%, #9c9c9c), color-stop(50%, #fff), color-stop(75%, #9c9c9c)); 

  -moz-border-radius: 2px;
  border-radius: 2px;

  -moz-box-shadow: 0 1px 0 rgba(0,0,0,0.2), 0 -1px 0 rgba(255,255,255,0.3) inset;
  box-shadow: 0 1px 0 rgba(0,0,0,0.2), 0 -1px 0 rgba(255,255,255,0.3) inset;
  -webkit-box-shadow: 0 1px 0 rgba(0,0,0,0.2), 0 -1px 0 rgba(255,255,255,0.3) inset;

  border: 1px solid #dadada ;
  height: 10px;
  width: 20px;
  position: absolute;
  left: 50%;
  top: -12px;
  margin-left: -10px;
  }

  /* Add bauble light reflection */
  .bauble:after
  {
  content: "";

  -moz-border-radius: 100px;
  border-radius: 100px;

  background: #fff; /* Fallback */
  background: -moz-linear-gradient(bottom, #fff, rgba(255,255,255,0.1) );
  background: -webkit-gradient(linear, left bottom, right top, from(#fff), color-stop(100%, rgba(255,255,255,0.1))); 

  position: absolute;
  top: 0;
  left: 50%;
  margin-left: -40px;
  opacity: 0.15;
  height: 80px;
  width: 80px;
  }

  /* Colorize them */
  .red-bauble
  {
  background: #c8171f;
  background: -moz-radial-gradient(center 45deg,circle cover, #f9d0be, #c8171f);
  background: -webkit-gradient(radial, 40% 40%, 0, 40% 40%, 50, from(#f9d0be), to(#c8171f));
  }

  .blue-bauble
  {
  background: #00a1ee; /* Fallback */
  background: -moz-radial-gradient(center 45deg,circle cover, #cde6f9, #00a1ee);
  background: -webkit-gradient(radial, 40% 40%, 0, 40% 40%, 50, from(#cde6f9), to(#00a1ee));
  }

  .yellow-bauble
  {
  background: #fcb83d; /* Fallback */
  background: -moz-radial-gradient(center 45deg,circle cover, #fcf3a6, #fcb83d);
  background: -webkit-gradient(radial, 40% 40%, 0, 40% 40%, 50, from(#fcf3a6), to(#fcb83d));
  }

  .green-bauble
  {
  background: #4d8d00; /* Fallback */
  background: -moz-radial-gradient(center 45deg,circle cover, #d1e5b2, #4d8d00);
  background: -webkit-gradient(radial, 40% 40%, 0, 40% 40%, 50, from(#d1e5b2), to(#4d8d00));
  }

View Demo

IE6 and IE7 couldn’t join our Christmas party for well-known reasons: they lack more than just CSS3 specifications support, but also the :before and :after pseudo-elements; so we would just have four squares with different colors in these two browsers.

I hope you were inspired to learn about CSS3 in this guide and that you have discovered a trick or two that you can use in your projects. I wish you a Merry Christmas and Happy Holidays!

Soucre Six Revisions

CSS3 Media Queries (demo)

Check my demo and resize your browser window to see it in action.

Max Width

The following CSS will apply if the viewing area is smaller than 600px.

@media screen and (max-width: 600px) {
  .class {
    background: #ccc;
  }
}

If you want to link to a separate stylesheet, put the following line of code in between the <head> tag.

<link rel="stylesheet" media="screen and (max-width: 600px)" href="small.css" />

Min Width

The following CSS will apply if the viewing area is greater than 900px.

@media screen and (min-width: 900px) {
  .class {
    background: #666;
  }
}

Multiple Media Queries

You can combine multiple media queries. The following code will apply if the viewing area is between 600px and 900px.

@media screen and (min-width: 600px) and (max-width: 900px) {
  .class {
    background: #333;
  }
}

Device Width

The following code will apply if the max-device-width is 480px (eg. iPhone display). Note: max-device-width means the actual resolution of the device and max-width means the viewing area resolution.

@media screen and (max-device-width: 480px) {
  .class {
    background: #000;
  }
}

For iPhone 4

The following stylesheet is specifically for iPhone 4 (credits: Thomas Maier).

<link rel="stylesheet" media="only screen and (-webkit-min-device-pixel-ratio: 2)" type="text/css" href="iphone4.css" />

For iPad

You can also use media query to detect orientation (portrait or landscapse) on the iPad (credits: Cloud Four).

<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css">
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">

Media Queries for Internet Explorer

Unfortunately, media query is not supported in Internet Explorer 8 or older. You can use Javascript to hack around. Below are some solutions:

• CSS Tricks – using jQuery to detect browser size
• The Man in Blue – using Javascript (this article is written 6 years ago)
• jQuery Media Queries Plugin

Sample Sites

You need to view the following sites with a browser that supports media queries such as Firefox, Chrome, and Safari. Go to each site and see how the layout responds base on the size of your browser winow.

Hicksdesign

• Large size: 3 columns sidebar
• Smaller: 2 columns sidebar (the middle column drops to the left column)
• Even smaller: 1 column sidebar (the right column shift up below the logo)
• Smallest: no sidebar (logo & right column shift up and the other sidebar columns move below)

Colly

The layout switches between one column, 2 columns, and 4 columns depend on the viewing area of your browser.

A List Apart

• Large size: navigation at the top, 1 row of pictures
• Medium size: navigation on the left side, 3 columns of pictures
• Small size: navigation at the top, no background image on logo, 3 columns of pictures

Tee Gallery

This one is very similar to previous example Colly, but the difference is the images of TeeGallery resize as the layout stretchs. The trick here is use relative percentage value instead of fixed pixel (ie. width=100%).

Conclusion

Keep in mind: having an optimized stylesheet for mobile devices doesn’t mean your site is optimized for mobile. To be truly optimized for mobile devices, your images and markups need to cut on the load size as well. Media queries are meant for design presentation, not optimization.

Source: Web Designer Wall

CSS3 Button Maker

The CSS3 Button Maker gives you a number of sliders and color pickers to style your own CSS3 button. Then you can grab the code to use in your own project.

CSS3 Generator

Select from a list of CSS3 properties, fill in a few parameters to fit your needs, and it spits out the generated code along with a live preview.

CSS3 Please!

CSS3 Please! is a CSS3 rule generator that acts as a sort of playground. It allows you make various CSS3 tweaks and see a live preview. Then you can copy and paste into your own file.

CSS3 Gradient Generator

The CSS3 Gradient Generator was created as a showcase of the power of CSS based gradients as well as a tool for developers and designers to generate a gradient in CSS.

CSS3 Transforms

CSS3 Transforms gives you a set of sliders to experiment with various transforms such as position, rotation, skew and more. It also generates the corresponding code on the fly.

CSS3 Selectors Test

CSS3 Selectors Test automatically runs a large number of small tests which determines if your browser is compatible with a large number of CSS selectors. If it is not compatible with a particular selector it is marked as such. You can click on each CSS selector to see the results, including a small example and explanation for each of tests.

Source: Web Design Ledger

If not for some of the differences in the way IE6 and IE7 handle certain areas of CSS (whether it be margins bugs, float bugs, or other problems), CSS development would be so much easier.

Of course, as I’ve said in past articles on this website and others, I believe IE-only styles can be kept to a bare minimum, and in some cases you may not need any, but it’s unlikely that developers will end up so fortunate. So how do you divide your IE-only CSS styles? The options we have are as follows:

Option #1

A single IE-only stylesheet inside of a conditional comment; inside that file, different versions of IE are targeted with hacks.

Drawbacks to #1

• Every version of IE will load the extra styles, even the unused ones
• Potentially adds an extra HTTP request
• Changing something in the main stylesheet may require that you hunt down IE-only styles in a separate file

Benefits to #1

• IE styles are in one file, so they’re easy to maintain

Option #2

Multiple IE-only stylesheets inside conditionals, each targeting a different version of IE.

Drawbacks to #2

• Changing something in the main stylesheet may require that you hunt down IE-only styles in as many as 2 or more extra files

Benefits to #2

• No unnecessary HTTP requests
• No unnecessary lines of code loaded in the main stylesheet

Option #3

A single stylesheet that targets all browser, but within that stylesheet, IE-only hacks are present.

Drawbacks to #3

• Unnecessary lines of code are loaded for all browsers

Benefits to #3

• No extra HTTP requests
• No need to open multiple CSS files to adjust something that’s hacked for IE

Option #4

One or more JavaScript files inside of conditional comments that target different versions of IE, dynamically adding or removing styles and/or class names.

Drawbacks to #4

• IE Browsers without scripting enabled will not see the corrected CSS
• A slow loading script could cause the styles to be applied late, making the layout temporarily look awkward
• Will be complicated to maintain, and could also require extra IE-only stylesheets, adding to the page bloat and slowness

Benefits to #4

• Could work on buggy elements that won’t behave with pure CSS (I’ve seen this happen and have used this method when time/budget was limited and the CSS was too messy to deal with normally)

Option #5

Ignore IE.

Drawbacks to #5

• Locking out a significant portion of your potential traffic/sales
• Client screaming at you because the website looks like crap in IE

Benefits to #5

• Only one hack-less stylesheet to maintain
• Peace of mind (but short-lived because of the screaming client)

Conclusion

In most cases, you’ll be using option #2 (multiple conditionals that target different versions of IE). But don’t rule out using #3. In situations where you’ve only got 2 or 3 lines of CSS to target a single version of IE, I think the best option is to just put those extra styles in the main stylesheet and allow it to load for every browser.

Remember that for most client projects, Internet Explorer is the most used browser. If you’re adding multiple extra files for all those users, that’s more HTTP requests, and so you’re making the pages unnecessarily slow for most of your users. I think a few lines of CSS in the main stylesheet is much better than adding one or more extra HTTP requests.

Feel free to offer your thoughts if there are any benefits/drawbacks (or even methods) I haven’t mentioned.

Source: impressivewebs

That’s why this post exists, we’re not going to talk about what HTML5 can do, but show live demos of magical things that HTML5 can achieve with other language like JavaScript, so get ready to be inspired.

Note: As HTML5 is not fully supported by certain web browser like Internet Explorer, you’re strongly recommended to use Firefox browser to view all HTML5 demos below.

Animation

The HTML5’s canvas element is the deciding factor for HTML5 to replace certain Flash animation. It allows you to build dynamic, scriptable rendering of 2D shapes and bitmap images with Javascript, which by other mean is, controllable animation.

Audioburst Animation

A comfortable and fantastic animation created with HTML5’s canvas and audio tag.

Ball Pool

Being showcased in the last Google I/O event, this demo shows you how dynamic can HTML5 be.

Blob Sallad

A HTML5-spawned creature that would please you.

Bomomo

With Bomomo, you can observe different atomic movement simulated with HTML5.

Browser Ball

Get amazed with this ‘cross-browser’ HTML5 ball.

Bubbles

Have fun by create endless floating bubbles with different color.

Canvas Cartoon Animation

A simple and funny HTML5 cartoon that helps you to understand what HTML5’s canvas element can do.

Coolclock

A nice, customizable analog clock built by HTML5 and JavaScript.

Flickr PS3 Slideshow

View your Flickr’s photos with PS3 style slideshow in the web browser.

Interactive Polaroid

An interactive demo that works pretty similar to multi touch interface.

JS Fireworks

Enjoy the fireworks moment with your preferred gravity and speed, powered by HTML5 and Javascript.

Kaleidoscope

A very beatiful and futuristic HTML5 kaleidoscope.

Liquid Particles

Sensitive particle animation that reacts based upon your mouse movement.

Mesmerizer

Another sensitive and outstanding HTML5 demo that shows how nearby elements react with you mouse movement.

Nebula Cloud

Get lost with this wondrous HTML5 nebula.

Parallax

View all 2D shapes in parallel perspective.

Particle Animation

An elegant HTML5 particle animation that can form into your preferred message.

Spread

Get lost with this endless spread animation.

Starfield

A very cool HTML5 starfield animation that would change direction and speed based on your mouse movement.

Video Destruction

One click to boom a playing video.

Waveform

Observe how HTML5’s canvas wave moves by altering its amplitude, wavelength, width, etc.

3D Effect

Impressed by canvas animation? That’s more HTML5’s canvas element can do, and it’s called 3D effect. Developer can rely on canvas element, DOM and JavaScript to create 3D effect, which can later be developed into 3D animation or game.

Canvas3D and Flickr

Have a whole new 3D experience with Flickr’s photostream.

Cloth Simulation

A realistic, HTML5-based cloth simulation.

Evolving Monster

Observe a monster evolving into a complicated creature, one of its creator is HTML5.

Google Giftbox

Giant search engine Google is presented in 3D, playable view.

JS Touch

A high quality and realistic ‘3D on 2D Canvas’ showcase.

Data Presentation

While HTML5’s canvas element can be used to create animation and 3D effect, it can also be implemented to present mathematical data.

Gnuplot

Gnuplot, a data plotting application in HTML5 version.

RGraph

RGraph provides a wide range of data presentation like bar chart, progress bar and traditional radar chart.

Web Application

Ultimately, using all possibilities combined by HTML5 and other langauge, one can create interactive application or game that’s close to Flash application.

CanvasPaint

Witness the brother of Microsoft Paint comes into your web browser, and his father is HTML5.

CanvasMol

A scientific application which is built to help you to understand certain earth element’s structure.

Cartoon Builder

Draw interesting cartoon image with this minimal and interactive cartoon builder.

Drag Anything Here

Drag anything you can drag in the demo to show details.

Gartic Sketch

An original HTML5 application that allows you to make some basic drawings that can be saved into different image format like jpeg or png.

PhysicSketch

Draw whatever you like and see how they react with simulated gravity.

Sketchpad

A powerful HTML5 drawing application that enables you to draw and edit your image in the precise manner.

Smalltalk

A web application that confirms geographical position of weather-related message acquired from Twitter, thus forming them into a canvas-based ’social weather’ map, quite trivial (as stated by author) but interesting.

Game

3Bored

You would never get bored if you can keep evading hundreds of HTML5 bullets in next second.

Breakout

Rebound the ball to break all bricks.

Canvascape

Not quite a game, but it demonstrates how HTML5 can be used to develop First Person Shooting browser game.

Catch It

How many balls can you dodge to get your winning HTML5 square?

Chain Reaction

Chain the explosion to achieve the goal, don’t get addicted.

Cubeout

Play Tetris in 3D, top-down view.

etchaPhysics

Draw item to move the ball to the star, don’t forget about the gravity.

Jigsaw Puzzle

Click, rotate and drop puzzle pieces to solve this HTML5-based jigsaw puzzle.

Slide Puzzle

Slide to the victory, another HTML5 game that’s built to squeeze your mind juice.

Same Game

Remove certain group to get another group paired in same color and you would eventually be awarded a victory.

Tetris

One of the most classic game brought back to life by HTML5.

Torus

Yet another Tetris game in pseudo-3D version.

Conclusion

What is the limitation of HTML5? At this point we cannot decide, but with the impressive video below we can know how far the HTML5 has been pushed:

Yes, it’s Quake II in web browser, so now it’s very clear that with HTML5, more groundbreaking web application would be born to serve billions of internet users. It’s fast, it’s evolving, and it’s changing the world wide web. The question is, how would you use this game-changing HTML5?

We do like to hear your idea!

Source: hongkiat

clearfix is a CSS technique used to contain floats with no structural markup.

What Does it Do?

clearfix works like this:

• In browsers that support the pseudo-element :after, it generates content (placed after the content in the element) that is styled to clear floats. In short, it works more or less the same as if you were inserting <div style="clear:both"></div> before the element’s closing tag.
• In IE, it gives the element a layout, hence it establishes a new block formatting context which will contain floats (see below).

So What?

The latter means that in IE, and in IE only, clearfix will trigger a different construct. This is because a "block formatting context":

• contains float
• prevent collapsing margins
• does not overlap any floats in the same block formatting context (see 9.5)

How Bad is That?

It really depends on the layout and the styling of elements. You might go from "uh oh!" to "WTF sacrebleu!"?. For example, in this simple demo (meant to illustrate #1 and #2 above) there are a few display issues between IE and so-called modern browsers:

• In Mozilla, WebKit, etc.:
  • The three headings are not vertically aligned,
  • The gap above the wrapper (which contains the background image) is more than 20px high.
  • The floated box appears outside of the wrapper.
• In IE:
  • The three headings are vertically aligned,
  • The gap above the wrapper is half the size it is in modern browsers.
  • The background image is painted behind the floated box.

What Gives?

The explanation is simple:

• In IE:
  • The wrapper has a layout (because of its width), so it creates a new block formatting context. This prevents the margin of the <p> (the black box) from collapsing with the margin of the heading in the last container. In short, the gap above the wrapper is the bottom margin of the black box (the <p>).
  • The wrapper contains the float because – as per the spec – block formatting contexts always contain floats.
• In modern browsers:
  • All elements belong to the same block formatting context so adjacent margins collapse. The heading’s margin "sticks out" of the wrapper to butt against the P. Unlike in IE, it is that margin (not the one on the black box) that creates the gap above the wrapper.
  • For the same reason, the floated box is not contained inside the wrapper.

There is no bug involved here. If the visual rendering is different between IE and modern browsers it is simply because we are styling the wrapper differently across the board.

If you check this new demo page, where the wrapper creates a new block formatting context in IE as well as in modern browsers, things look much better (yes, the space in IE below the floated box is a bug, it is there because the wrapper has a layout).

What has this got to do with clearfix?

Let’s assume we do not know much about block formatting contexts and instead of styling the wrapper as we did in the previous demo page we apply the clearfix method to the div that contains the floated box.

As I write this, I wonder if you would be able to guess what clearfix is about to do to our layout. Anyway, the result can be seen in this demo page where clearfix is applied.

What Happened?

The floated box is contained, but the layout breaks in IE, the middle column is now below the side bars. This is because as per section 9.5 of the spec (see above), a block formatting context does not overlap floats in the same block formatting context.

The middle column gained layout (via clearfix), hence it creates a new block formatting context which cannot fit between the two floats, so it drops below them.

At this point, most authors find out that removing the padding declarations fixes what they believe is a bug, so they use a Conditional Comment and reset the padding values for IE.

Not once have they questioned clearfix, and as far as they know their construct is more or less the same across browsers (apart the padding they had to zero out and the collapsing margin they had to fix somehow).

What can I Do?

Making sure that elements are styled the same across browsers is styling 101. It is the first step toward achieving cross-browser compatibility.

Styling both the wrapper and the middle column to create block formatting contexts (e.g.: styling the wrapper with "display:inline-block" and the middle column with "overflow:hidden") does the trick, as this last demo shows.

Wrap Up

Weak constructs are most often due to the fact that people do not know what block formatting contexts are and what they do.

Too often, authors trigger hasLayout without thinking of adding the necessary styling to create the same rendering across all browsers. Because of this, they end up adding IE specific declarations to "patch" their styling.

This does not mean we should avoid clearfix at all costs though. It is a great tool which is safe to use as long as we remember that besides containing floats, it may also prevent collapsing margins and will "escape" surrounding floats in IE.

I’ve been using clearfix myself to style modal windows and the like, usuallly when I know there is no float in the same block formatting context as the element I am styling. Hey, I even rely on it for my CSS framework.

Note: throughout this article, when I use the term "IE", it means IE version 5, 6, and 7.

Source: Think Vitamin

All designers at some point in their career go through the process of encountering a weird display issue, searching for a resolution, and discovering a trick, technique, or hack could have saved them hours of frustration—if they had only known when they started.

We’ve put together a list of the most frustrating and time-consuming CSS headaches and, more importantly, their solutions (along with examples and further resources). I hope this list will help you save some gray hairs. As for me, I think I feel some coming in right now…

Resets & Browser Inconsistencies

Not all browsers are created equal. In fact, every browser is different. What is the default margin, padding, or font-size of a <p> element? You might be surprised at the wide range of values. To handle the differences between browsers, many of us want to level the playing field and start from scratch, by using CSS reset styles.

The early stages of resets, designers dealt with differing margin and padding values, using a global reset:

* { margin: 0; padding: 0; }

But, as more people used and discussed resets, it became clear that resetting only margin & padding wasn’t enough (and, applying the above rule to every element is taxing on the rendering engine). Thanks to the work of Eric Meyer and other CSS pioneers, a better, more complete collection of reset rules was created:

html, body, div, span, applet, object, iframe,  h1, h2, h3, h4, h5, h6, p, blockquote, pre,  a, abbr, acronym, address, big, cite, code,  del, dfn, em, font, img, ins, kbd, q, s, samp,  small, strike, strong, sub, sup, tt, var,  dl, dt, dd, ol, ul, li,  fieldset, form, label, legend,  table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
}

/* remember to define focus styles! */
  :focus {
	outline: 0;
}

body {
	line-height: 1;
	color: black;
	background: white;
}

ol, ul {
	list-style: none;
}

/* tables still need 'cellspacing="0"' in the markup */
  table {
	border-collapse: separate;
	border-spacing: 0;
}

caption, th, td {
	text-align: left;
	font-weight: normal;
}

blockquote:before, blockquote:after,  q:before, q:after {
	content: "";
}

blockquote, q {
	quotes: "" "";
}
  

As important as it is to note which elements are included in the most popular CSS reset available today .It’s also important to note some of the elements that are deliberately excluded from this list:

• input
• button
• hr

These elements were excluded because their cross-browser differences are so vast that you would have to completely unstyle them to create a "bulletproof" element. They’re so weird, that even then, there’s no guarantee.

Resources for Resets

• Eric Meyer’s Resets and the reasoning behind them
• Smashing article: “Design from Scratch”
• Google BluePrint CSS & Resets
• Yahoo YUI CSS Resets

Box Model — Margin, Padding & Borders

The box model is the basis for all layouts. It governs the dimensions & spacing of the elements on a page. To understand it, we have to understand the difference between block-level elements and inline elements.

Block-level elements, by default, take up the entire width of their containing element and the height of the default line-height. They will stack up underneath each other, top-to-bottom. Therefore, by default, they will take up their own line on a page. Some block-level elements are: <div>, <pre>, <p>, <ul>, <ol>, <li>, etc.

Inline elements are, just as their name implies, in-line. They will stack up next to each other, left-to-right. When given content, they will take up the exact width and height of that content. Given no content, they will collapse down and have no width or height. Some in-line elements are: <img>, <em>, <strong>, <a>, <span>, etc.

All HTML block-level elements have five spacing properties: height, width, margin, padding, and border (inline elements have them too, they just work a bit differently). Width and height are tricky attributes, as they require a bit of calculation. When measuring an element’s width, designers must consider the entire box.

In the example below, the box has a total width of 260px. The margin, padding, and border are 30px each (remember, that’s 30px on top, 30 on bottom, 30 right, and 30 left). So, in this example, the margin takes up 60 pixels of the box’s width. Likewise, the border and padding consume 60px each. All together, the margin, border, and padding amount to 180 pixels of the box’s total width.

We know that the box’s total width is 260px, but in CSS the width attribute refers to the content area on the inside of the box. So, for this example, we have to subtract 180 pixels (for margin, border, and padding) from 260 (total box width), leaving us with a content area of 80px. Therefore, our CSS looks like this:

div {
	margin:30px;
	border:30px solid yellow;
	padding:30px;
	width:80px;
	height:80px;
    }

Extras

1. All of the examples and rules we’re discussed for the width property also apply to height.
2. margin can support negative values. Use them cautiously but they can prove to be very strong design elements.
3. Don’t forget the units with the box model. Only a zero-value (margin:0;) can be written without a unit specified.

Resources for CSS Box Model

• W3C CSS Specifications
• HTMLsource Box Model tutorial by Ross Shannon
• “Beginner’s Guide to Margins and Paddings” at Web Designer Notebook

Dimensions — Width, Height, Min & Max

Now that we understand how to use width and height in unison with the box model, let’s look at some of the flexibility of CSS dimensions. Modern browsers support min- and max-width (and the same for height), allowing us to get creative with dimensions and create flexible layouts.

Width/height specify the space an object should occupy. They can be measured in pixels (10px), ems (10em) and percentages (10%), as well as a few other units. Defining a width or height for an element will force that element to keep those dimensions, regardless of the content inside it. So, if our content is too big for its container, it will be cut off, hiding the bottom of our content (or just look really messed up).

Min-width & min-height

Giving an element a min-width or min-height will set the element to our exact dimension by default. But, since we only provided a minimum dimension, as the content grows, the containing element will allowed to stretch and all of our content will remain visible.

Min-width & min-height can he useful for form elements like <input /> and <textarea>. We can define them with a minimum width/height and let them expand as the user types.

In IE6, "height" acts the same way "min-height" does in modern browsers as a container will grow with content (something to be aware of when using building for IE6).

Max-width & max-height

If we give an element a max-width or max-height, it will collapse down to the size of our content by default. As our content grows, the container will stretch—until it reaches our maximum. Then our remaining content will be cut off or look really weird hanging of the bottom of a content block.

Max-width & max-height can be useful for browsing long lists (if you correctly manage your overflow – create scrolling if the list goes too long).

Using Max & Min width in IE6

Min & Max width are both great tools to have in your design arsenal, but unfortunately they don’t work in IE6, so what do we do? We usually lock down the width of our site instead of creating the ideal fluid layout we want, sacrificing user experience for out of date browsers.

Luckily, we can use a short JavaScript command targetting IE to accomplish a nice fluid layout with max & min widths in IE6:

#page-wrap{
	min-width:800px;
	max-width:1000px;
	width:expression(document.body.clientWidth < 800? "800px" : document.body.clientWidth > 1000? "1000px" : "auto");
}

In the above example, you can see that the smallest width for this page is 800px, and the largest is 1000px; not much of a flex, but the concept can be applied to any element.

And if you only wanted to use min-width:

#page-wrap{
	min-width:800px;
	width:expression(document.body.clientWidth < 800? "800px": "auto" );
}

Resources for dimensions

• Top 10 CSS Tricks from SitePoint
• Cross Browser Min-height
• Min-width for Internet Explorer
• CSS Dimension Properties

Floats & Clearing

A float will place an element outside the normal flow of elements and moves the element right or left until it reaches the margin or padding of another block-level element. Float and clear are some of the most powerful—and the most misunderstood—properties in CSS. To understand it, we must refer back to block-level vs. inline elements.

Applying float to an element will automatically make it a block-level element. This means two things: 1) by default, all floated elements (even <span> and <strong>) will behave like block-level elements, 2) Giving an element both float:left; and display:block; is redundant and unnecessary. Also, using display:inline on a floated image is actually a very popular method of fixing many cross-browser quirks.

Floating a div to clear a div

Floating a div to clear a div is one of those things you stumble upon with some experimenting and frustration. What basically happens is that you can apply a float to a parent element that contains other floated elements and they will all equalize and clear properly:

HTML

<div class="parent-element">
     <div class="floating-element"></div><!--/.floating-element-->
     <div class="floating-element"></div><!--/.floating-element-->
     <div class="floating-element"></div><!--/.floating-element-->
</div><!--/.parent-element-->

CSS

.floating-element   { float:left;width:33%; }
.parent-element     { float:left; }

And, of course you’ll need some content in there to fill out the divs.

There are a lot of clearing techniques you can use to clear floated divs. Some require extra markup, some don’t work in IE 6 and some are great, but don’t apply to every situation. What did I wish I knew about clearing floats when I started? Everything.

Resources for clear and float

• CSS Float Theory
• CSS Float Property
• Clearing Floats
• Using Floats for Layout

Conditional Comments

Back in 2004, when I really got into full-time Web design I used a lot of IE hacks and techniques to patch together sites in an attempt to achieve some level of cross browser compatibility. This can cause very bloated and slow loading style sheets. Everyone was doing it, heck, there were even articles about how to best organize your IE hacks.

Little by little the design community discovered a hidden gem buried within the functionality of the Triton rendering engine (Internet Explorer). You could use IE specific HTML to target specific versions of the browser and then load a special style sheet just to deal with those issues.

<!--[if IE]>
Target all versions of IE
<![endif]-->

<!--[if lte IE 7]>
Target all versions of IE that are less than or equal to "7"
<![endif]-->

<!--[if IE 6]>
Target IE 6
<![endif]-->

Using conditional comments to target IE and cut out your hacks, will slim down your main style sheet, and help load the page quicker in browsers that don’t need the correction code.

Resources for Conditional Comments

• Conditional Comments
• How to: CSS Conditional Comments
• About Conditional Comments from Microsoft

Overflow & Zoom

Like many designers, if there’s time to be wasted on a project, it usually gets wasted dealing with IE 6 and some of it’s weirder quirks. This is where overflow and zoom have helped me a great deal.

Overflow

Many-a-times when I’ve encountered a serious layout issue, a simple application of overflow:hidden on the offensive div would solve the problem. It’s difficult to pin point specific issues for this, but it can happen in any browser (I just had it happen in Safari a couple weeks ago) and the overflow property can provide a quick solution to your cross browser woes.

Zoom

To my surprise, the zoom property is not very well know, but a very powerful tool in dealing with cross browser issues; particularly IE 6/7. Zoom is a proprietary IE property that actually does effect the zoom level of a page (if you set the zoom to 2 you’ll see everything get bigger). As a site effect it also triggers hasLayout on the offending element, and fixes a lot of layout issues. Try it out, it actually saves a lot of time.

body { zoom:1; }

Since hasLayout won’t trigger in any other browser, it’s generally thought to be safe to put zoom in your main style sheet, but it you’re doing IE specific work anyway, I’d advise putting it in with the rest of the IE CSS just in case there are any problems in the future, "future proofing".

Resources for Overflow & Zoom

• Web Master World Forum
• The Power of Zoom
• About Overflow from QuirksMode

When CSS isn’t the Answer

Believe it or not, CSS is not always the answer. Especially now when we live on a Web that is in the middle of the biggest browser war to date. Sometimes CSS just doesn’t do everything we want on as many platforms as we need it to.

Spending hours searching for a CSS solution to a non-critical element that can be easily fixed with JavaScript usually just isn’t worth it. Now that we have great libraries like jQuery readily available to us, anyone well versed in CSS can quickly pick up JavaScript. And let me tell you… if I new more about JavaScript when I started it would have saved me a lot of time and frustration.

Conclusion

There are a lot of little idiosyncrasies with CSS that you’ll encounter over time with experience and frustration, but we’re looking for ways to minimize that frustration. The best advice I can give someone in dealing with CSS is the same advice someone gave me when I was in college: go to class. If you read the blogs, keep up with all the information and learn everything you can you’ll save a lot of time when you do encounter the inevitable rendering problem. To be honest, half the battle is knowing what a bug is called so you can Google it.

But of course an article like this always poses the question: What do you YOU wish you knew when you started?

Source: Noupe

Maybe those new features aren’t yet supported fully, but it’s a very good thinking to learn new technologies now so you would be able to use them fully when they are supported. Be modern designer!

1. CSS3 Selectors Test

After starting the testsuite it will automatically run a large number of small tests which will determine if your browser is compatible with a large number of CSS selectors. If it is not compatible with a particular selector it is marked as such. You can click on each selector to see the results, including a small example and explaination for each of tests.

2. CSS3 Please!

CSS3 Please!, produced by Paul Irish and Jonathon Neal, aims to simplify the design process by allowing designers to enter one value, and have this instantly synced and normalised for each vendor-specific prefix, with the corresponding code generated automatically.

3. CSS3 Generator

Allows you to create and costumize multiple CSS3 effects.

4. CSS3 Transforms

You can rotate, scale, skew, and otherwise transform HTML elements with CSS 3. Explore CSS3 CSS Transforms (supported in Opera 10.5, Firefox 3.5 and Safari 4 and higher).

5. CSS3 Gradient Generator

The CSS3 Gradient Generator was created as showcase of the power of CSS based gradients as well as a tool for developers and designers to generate a gradient in CSS. CSS gradients generate an image result, meaning the result of a CSS gradient can be used anywhere an image can be used, be it a background-image, mask,border, or list item bullet.

6. Border Radius

Allows you to create rounded edge rectangles.

7. Modernizr

Modernizr is a small and simple JavaScript library that helps you take advantage of emerging web technologies (CSS3, HTML 5) while still maintaining a fine level of control over older browsers that may not yet support these new technologies.

8. CSS3 Generator

This simple CSS generator helps you to understand capabilities of CSS3 introduced by WebKit.

9. CSS3 Previews

Many new CSS3 feature previews and demos.

10. CSS Template Layout Module

Learn about popular CSS3 modules and opportunities CSS3 offers.

11. 5 Techniques to Acquaint You With CSS 3

Learn some of the most popular new CSS3 features.

12. Web Browser CSS Support

This document is a section of the web browser standards support document. It includes detailed information about CSS support in major web browsers.

13. Font Drag

Font Dragr is a HTML5/CSS3 powered web app for testing custom web fonts. The app allows you to drag and drop your truetype (ttf), opentype (otf), scalable vector graphics (svg) or Web Open Font Format (WOFF) fonts into the webpage for an instant preview of how the font will be rendered in the browser, you can even edit the example text.

14. CSS3 Cheat Sheet

Downloadable PDF file containing complete listing of all the properties, selectors types and allowed values in the current CSS 3 specification from the W3C.

15. Sizzle

A pure-JavaScript CSS selector engine designed to be easily dropped in to a host library.

16. Web Designers’ Browser Support Checklist

Displays web browser support on HTML5 and CSS3.

17. CSS3 Color Names

CSS3 supports 147 different colors by name (the 17 standard colors plus 130 more). This lists them all, along with their RGB and hexadecimal values.

18. HTML5 Visual Cheat Sheet

HTML 5 Visual Cheat Sheet is an useful cheat sheet for web designers and developers designed by Woork. This cheat sheet is essentially a simple visual grid with a list of all HTML tags and of their related attributes supported by HTML versions 4.01 and/or 5.

19. HTML5 Demos And Previews

You can watch HTML5 demos, new features and check out browser support.

20. The Power Of HTML5 and CSS3

Article covering HTML5 and CSS3 combination advantages.

21. HTML5 Cheat Sheet

HTML5 features and useful info at one place.

22. HTML5 Gallery

A showcase of sites using HTML5 markup

Source: 1stwebdesigner

In this post, we’ll explain the difference between padding and margins, how the box model effects browsers and some tips and tricks dealing with cross-browser issues.

What are margins?

Beginning developers often use margins and padding interchangeably, but there’s actually a difference between the two.

Margins are the spaces around an element. In order for margins to work properly, the element must be floated or positioned relative. This style is often used to move the element it’s applied to, or to move other elements around it.

An element can have equal margins on all sides of it, which is simply written as:

element { margin: 5px; }

This gives an equal 5px to every side of an element. (Every element is a “block” or 4 sided square or rectable, regardless of it’s visible shape.) An element can also have different margins, or no margins at all on some or all of its sides. This can be written in the short-hand or long-hand style:

element {margin: 5px 10px 2px 4px;}
/*margin: Top, Right, Bottom, Left*/

element {
	margin-left: 4px;
	margin-right: 10px;
	margin-top: 5px;
	margin-bottom: 2px;
} /*if you don't want margins on a side, just leave it out of your CSS*/

There are a few IE issues with margins that probably cause most of all IE layout problems.

• Double margins – The double margin bug in IE6 is probably the hardest bug developers struggle with. If any element is floated and has a margin in the same direction, IE6 will double that margin. So if you have an element that is floated left and also has a margin of 5px to the left, IE6 will give it a left margin of 10px.
• Bottom margins – All IE versions like to ignore bottom margins, so it’s better to use padding for bottom spacing instead.

What is Padding?

Like margins, padding is the space around an element. However unlike margins, which deal with the space around the outside of an element, padding can effect either the outside or inside of an element.

Padding can also be written in the shorthand or longhand version of CSS:

element {padding: 10px;}

element {padding: 5px 10px 2px 4px;} /*padding: Top, Right, Bottom, Left*/

element {
	padding-left: 4px;
	padding-right: 10px;
	padding-top: 5px;
	padding-bottom: 2px;
} /*if you don't want padding on a side, just leave it out of your CSS*/

The way padding is handled in the browser is called the box model. IE6+ (in standards mode), Firefox, Safari and Chrome all handle the calculations of padding the same, while versions of IE5 and lower calculate it completely different.

So how does the box model and padding work? Let’s say the element below is 100px in width and height.

Now, let’s say we give it an equal padding of 10px because we have some nice text inside of it and we don’t want it touching the element’s edges. However as you can see below, the padding didn’t push the text inside the element, it just made the element itself bigger! This is when padding is most similar to margins, as it affects the outside of the element.

This is where the idea of the box model comes in. Adding 10px of padding to an 100px element will increase it’s dimensions to 120px. (100px element + 10px top + 10px bottom = 120px).

So if we wanted to keep the element only 100px in height and width, but push the contents inside the element by 10px, we’d need to adjust the actual dimensions to 80px in height and width. Then our element would look like:

Unlike margins, an element with padding does not need to be floated or positioned relatively for it to work, if it’s dealing with padding on the inside of the element. However, if you’re using padding to move the element (or another element around it), it does need to be floated or positioned.

IE5 and below calculate padding opposite of the rest of the browsers. IE5 simply assumes that when you apply padding, you want it affect the inside of the element. Therefor, if you gave an element of 100px a padding of 10px, it would simply push the inside contents 10px in, so there’s no need to adjust dimensions.

Plenty of space

Margins and padding can be tricky when dealing with cross-browser compatibility, but once you get the hang of it, it becomes much easier to anticipate the reactions of browsers.

spy restudios