Simple CSS float basic implementation

What is CSS float ? CSS float is one of the trickier CSS concept to understand. Once grasped we can build awesome websites with float based layout. Before diving into the concept, lets understand common usage of float property. Where it will be used? CSS float plays a major role in building website layouts. It … Continue Reading

Browser specific CSS rules you Must Memorize Part-2

As we have already discussed about Selector hack in browser-specific-css-rules-you-must-memorize-part-1 now we are going to focus on Attribute hack.  ATTRIBUTE HACK : Focusing a particular attribute of an element to write CSS is called as Attribute hack. In a <div> Element ID, name, class…etc are all attributes it applies for all HTML elements. Below Example shows how to … Continue Reading

Browser specific CSS rules you Must Memorize Part-1

This tutorial is intended for those who know about basic CSS rules and selectors. If you are a beginner to CSS it would be better to learn about basic CSS rules and follow this tutorial. Writing a single CSS rule for an element to support in all major browsers is a big headache. So we must memorize few … Continue Reading

Create rounded corners div in 2 steps with CSS3

  • January 20, 2012
  • CSS
  • SG

Building a site with an attractive UI is so simple hereafter. Creating a Rounded corner div in a website, was quite tedious.There are lots of ways to create a rounded corner DIV. The below mentioned method is compatible with all high end browsers. See below the output of the rounded corner CSS. Before that, we … Continue Reading

Jquery rounded corner image with CSS3

  • January 22, 2011
  • CSS
  • SG

Nick La was trying to style CSS3 border-radius to image element and he realized that Firefox doesn’t display border-radius on images. Then he figured a way to work around it – wrap a span tag around with the original image as a background-image. And also, Darcy Clarke has written a piece of  jQuery code which … Continue Reading

User-Agent Specific CSS Classes with CssUserAgent

CssUserAgent allows you to applies User-Agent specific CSS classes to the tag to allow browser-specific CSS variation without resorting to CSS hacks. Since these are performed once at startup, CSS may be statically defined without the need to mix browser-specific logic into the presentation. Multiple classes are created for each user-agent, allowing the web developer … Continue Reading

CSS Compressor to Save Your Bandwidth

We can use this CSS Compressor made by CSS Drive to compress the CSS to increase loading speed and save on bandwidth as well. You can choose from three levels of compression, depending on how legible you want the compressed CSS to be versus degree of compression. The “Normal” mode should work well in most … Continue Reading

How to Create CSS3 Christmas Tree Ornaments

In this guide, we will display the power of CSS3 in drawing complex shapes. We will magically create Christmas tree ornaments using only CSS3 and HTML (no images). In particular, we will be drawing baubles, which are the hallmark ornamentation of Christmas trees. Note that this is merely a fun, proof-of-concept that explores the possible … Continue Reading