If you learned CSS before, you should know that CSS is not a programming language. You can use it to design webpage style, but you cannot use it for programming, i.e, CSS is what designer uses, not what programmer uses. Programmer may think that CSS is very troublesome, it has no variables, no conditional statements, it just allows line-by-line description of HTML elementsLuckily, CSS preprocessor appear which makes CSS programmable. The general idea of CSS preprocessor is using a programming language to design the website style, and then convert it to CSS files.Among different CSS preprocesso...

In today's post, we'll be taking a look at how you can use CSS3 transitions to power your application's animations with jQuery's .animate() method as a fallback where transitions aren't supported. The benefit of transitions is that unlike JavaScript based animations, they're hardware accelerated in certain browsers and mobile devices, resulting in a potentially smoother overall animation than you would normally experience. In a lot of cases your code will work seamlessly with the solutions presented today, so the effort involved in applying them is minimal. Before we get started, if ...

The HTML5 Microzone is presented by DZone and Microsoft to bring you the most interesting and relevant content on emerging web standards.  Experience all that the HTML5 Microzone has to offer on our homepage and check out the cutting edge web development tutorials on Script Junkie, Build My Pinned Site, and the HTML5 DevCenter. A friend of mine alerted me this weekend to just how much I have a weird fascination with Venn diagrams. I decided to roll with it. So yeah, I have an irrational love of Venn diagrams. But that begs the question, can I make a Venn diagram with just...

Determining a unit of measurement to size our text can be a topic of heated debate, even in this day and age. Unfortunately, there are still various pros and cons that make the various techniques less desirable. It's just a matter of which less-desirable is most desirable.There are two main techniques that are extolled:Size with pxSize with emLet's review these two approaches before I reveal the magical third.Sizing with pxIn the early days of the web, we used pixels to size our text. It's reliable and consistent. Unfortunately, users of Internet Explorer—even in IE9—do not have ...

Sass is one kind of CSS Preprocessor, it can make CSS development simple and maintainable. But to show its real power we may need to have Compass.This article is to introduce Compass. Once you learn Compass, your CSS development efficiency will be largely improved.Here we assume you have mastered the major uses of CSS, if you know Sass, then it's better. It's still ok if you don't know Sass.1. What is Compass?In simple, Compass it the toolkit of Sass.Sass itself is only a compiler, Compass encapsulates some templates and modules based on Sass. The relationship between Sass and Compass is simil...

Used in casting shadows off block-level elements (like divs)..shadow { -moz-box-shadow: 5px 5px 5px #ccc; -webkit-box-shadow: 5px 5px 5px #ccc; box-shadow: 5px 5px 5px #ccc;}The horizontal offset of the shadow, positive means the shadow will be on the right of the box, a negative offset will put the shadow on the left of the box.The vertical offset of the shadow, a negative one means the box-shadow will be above the box, a positive one means the shadow will be below the box.The blur radius, if set to 0 the shadow will be sharp, the higher the number, the more blurred it will be.ColorExample...

There is a question on StackOverflow which states that someone finds a CSS sample on http://css-tricks.com/examples/ShapesOfCSS/  , the sample shows a triangle created with pure CSS. The source code is :#triangle-up {width: 0;height: 0;border-left: 50px solid transparent;border-right: 50px solid transparent;border-bottom: 100px solid red;}The question is how these few lines can create a triangle? Next we give the answer and the detail illustration to this question We need to consider the Box Model of HTML, here we see content and padding as content and we ignore margin, then the box model...

In the past two years, increased browser support has transformed CSS3 from a fringe activity for Safari geeks to a viable option for enterprise level websites.While cross-browser support is often too weak for CSS3 to hold up a site’s main design, front-end developers commonly look to CSS3 solutions for progressive enhancement in their sites. For instance, a developer might add a drop-shadow in Firefox, Safari and Chrome using -moz-box-shadow and -webkit-box-shadow, and then be comfortable with this design enhancement falling off for IE users.But wouldn’t it be great if...