The main goal of the article is to present powerful new CSS techniques, encourage experimentation in the design community and push CSS forward. Please notice that we feature both experimental demos and practical techniques in this article.
In this demo the 3D text is created from multiple offset shadows that increase in darkness with no blur applied. The text is then made isometric by applying a 2D transform to skew the text in the Y axis to an angle of -26.6°. (OK, true isometric art is set at -30°, however pixel-based isometric art is set at -26.6° as this produces the smoothest lines).
One of the most popular articles on Marcofolio.net in 2010 was the 3d animation using pure CSS3. In my opinion, it was one of the best articles for myself as well, since I learned some pretty neat stuff about CSS3 and 3d capibilities.
First and foremost, is the solution I’m about to share with you the best solution? Probably not. I may revisit this at a later time when I have more than fifteen minutes to spend thinking about it, but for now it works and is accessible.
Welcome to the World’s Highest Website! Currently, it’s 18.939 kilometers high (that’s about 11.77 miles), and an enormous pleasure to scroll. Enjoy.
An experiment that uses pseudo-elements to create 84 simple GUI icons using CSS and semantic HTML. Shared as an exercise in creative problem solving and working within constraints. This is not a “production ready” CSS icon set.
The idea for this came to me this morning after being greeted first thing this morning by another Twitter outage. I’d been looking for something to stretch my CSS muscles on, and the Fail Whale seemed perfect.