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

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

The Analogies Are WrongOriginally, web pages were static documents, and web browsers were static document viewers; there was text, some formatting, and images—if you could pay for the bandwidth to serve them. Hyperlinks were the really big thing, because they were the main point of user interaction—but what a powerful thing they were, and still are.Then along came CGI and Java, and the web was transformed: all of a sudden, a web browser became a way to serve interactive content to users. A web page was no longer just a document, but a portal to a living, breathing world. You your...

We all know that feeling: some time after we launch a site, new designers and developers come in and make adjustments. They add styles that don’t fit with the content, use typefaces that make us cringe, or chuck in bloated code. But if we didn’t leave behind any documentation, we can’t really blame them for messing up our hard work. To counter this problem, graphic designers are often commissioned to produce style guides as part of a rebranding project. A style guide provides details such as how much white space should surround a logo, which typefaces and colours a brand u...

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 body element, for example. I don't particularly recommend that you just use this in its unaltered state in you...

This is a list of best practices for creating websites that do not break when browsers are updated. It's not always possible to follow all of these, but following as many of them as possible will help future-proof your website. This is especially important for intranet applications and other non-public websites where problems are likely to not be noticed during testing by browser vendors.JavaScriptPrefix all global variable access in onfoo attributes with “window.”When an event handler content attribute (onclick, onmouseover, and so forth) is used on HTML element, al...

Working on one of the Chromebooks Google lets you borrow on Virgin America flights, I noticed scrolling down the page on my airbnb.com dashboard was much slower than on my normal laptop. I chalked it up to weak Chromebook hardware, but other sites were scrolling just fine. box-shadow had caused slow scrolling on our search results page before, so I did some investigation.I used Chrome's Timeline tab to see the duration of paint events on the page. Before each test I forced a garbage collection and scrolled to the same window position using window.scroll(0, 140). Then I clicked the down arrow i...

Here is the list of websafe fonts that I use in my own personal web development. Websafe (or "web safe", "safe for the web") fonts are supposedly fonts that are common among all versions of Windows, Mac, Linux, etc. Fonts that you expect everyone viewing your webpage to have. Please contact me if you know of any other web-safe fonts that should be added to this list. These font names are in typical font-family CSS format, in other words (first choice font), (second choice font), (third choice font), etc. I made them that way so you could easily copy and paste them into your...