Today's Question:  What's your opinion about Alibaba mooncake incident?        GIVE A SHOUT

  CONTRIBUTE


Share your geeky stuff now.
You make the world better, the world makes us better.

  WRITE ARTICLE

 CSS


  Guide to use Compass

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

4,435 0 0          TUTORIAL CSS SASS COMPASS


  Ways to make elements in HTML center aligned horizontally

In our daily HTML design,  it is an easy job to horizontally center align an element with known width. <div class="element">I am<a href="http://www.aiubug.com" target="_blank" rel="external" title=""> bug </a>!</div>  .element{width:960px;margin:0 auto;}  The above codes set the width of the div block and horizontally center align it. It's very easy to implement. However, if we have some elements we don;t know their width and we still want to ce...

3,207 0 1          HTML CSS CENTER ALIGN UNKNOWN WIDTH


  Short SASS tutorial

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

6,744 0 4          CONDITION CSS COMMENT VARIABLE SASS PROGRAMMABLE


  CSS filter effects in action

CSS filter effects in action Ever since CSS filter effects landed in WebKit, I thought about theirs practical implementation. How will they fit with the current web design trends? At this time, my initial impressions are that the best way to showcase the power of CSS filters is something like an image gallery. With so many CSS filters to choose from, it will be fun to create image galleries in the future. Further in this article we’ll create a...

2,066 1 0          CSS FILTER EFFECT


  Magic CSS shape

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

3,910 1 0          CSS TRIANGLE BOX MODEL BORDER


  Venn Diagram entirely in CSS

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

3,196 0 0          CSS IMPLEMENTATION VENN DIAGRAM


  New CSS3 Properties to Handle Text and Word Wrapping

About a year and a half ago, I wrote about CSS3′s word-wrap property. The angle of the article was the fact that it was a feature that was new in CSS3 that didn’t exist in CSS2.1 and it worked in just about every browser, including old IE. Well, now that’s all changed, which I discovered while researching additions to my CSS3 Click Chart. The word-wrap property has been removed from the CSS3 spec and other related properties have been added. Text-Wrap The text-wrap property “specifie...

12,194 0 0          CSS3 WORD WRAP OVERFLOW-WRAP LINE-BREAK


  CSS Tools: Reset CSS

The goal of a reset stylesheet is to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on. The general reasoning behind this was discussed in a May 2007 post, if you're interested. Reset styles quite often appear in CSS frameworks, and the original "meyerweb reset" found its way into Blueprint, among others. The reset styles given here are intentionally very generic. There isn't any default color or background set for the bod...

1,535 0 0          CSS CROSS BROWSER COMPATIBILITY RESET PARTIAL RESET