Today's Question:  What does your personal desk look like?        GIVE A SHOUT

 CSS


  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 simple image gallery using CSS filters and the CSS3 :not selector.View demoWhilst at the beginning we had just WebKit nightlies sup...

3,671 1       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 Box Model of HTML, here we see content and padding as content and we ignore margin, then the box model...

6,215 1       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, I have an irrational love of Venn diagrams. But that begs the question, can I make a Venn diagram with just...

7,516 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-WrapThe text-wrap property “specifies the mode for text wrapping”. Well, that description doesn’t tell us a whol...

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

3,783 0       CSS CROSS BROWSER COMPATIBILITY RESET PARTIAL RESET


  CSS3 animated dropdown menu

It’s a sure thing that CSS3 features like transitions, animations and transforms can add extra spice to your designs.In this article you will see how you can build an awesome CSS3 animated dropdown menu with some of these cool features.View demoHere’s a quick preview for the CSS3 animated dropdown menu that we’re going to create today:Remember the previous CSS3 dropdown menu? That menu is awesome, and thanks to you is the most popular tutorial around here (at this time).Perhaps the best title for this article would have been: CSS3 dropdown menu – Revisited...

3,323 0       ANIMATION CSS3 DROP DOWN MENU ANIMATED MENU


  CSS box-shadow Can Slow Down Scrolling

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

4,216 0       CSS PERFORMANCE BOX-SHADOW TIMELINE CHROMEBOOK


  FONT SIZING WITH REM

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

6,556 0       CSS3 FONT SIZE REM FONT HTML5