Just because you can: GUI icons with pure CSS

// Inspired by an elegant piece of CSS code by +Lea Verou, creating the WiFi code (see it here http://bit.ly/wificss), I searched for other examples of this and found this little gem: A demo of 84 icons created with just CSS by +Nicolas Gallagher.

Nicolas calls it's a "technical exercise" but given that this was done back in 2010 and support for the methods used is much wider now, the code should be working in all modern browsers. 

You can see it in action and dig into the code here http://bit.ly/css-gui-icons

Guide to CSS Transitions

// A thorough step-by-step guide to #CSS transitions

Embedded Link

All you need to know about CSS Transitions | Alex MacCaw
CSS3 transitions bring simple and elegant animations to web applications, but there’s a lot more to the spec than first meets the eye. In this post I’m going to delve into some of the more complicated...

Like a website's palette? Colorfy it!

// As it has been said a thousand times, great artists steal :) If you like the color palette used on a website, you can use Colorfy it to easily find out exactly what it is.

Given a URL it will analyze the source code of the #HTML and #CSS and provide you with a list of all colors used, their frequency and on which files they are mentioned. 

Try it out here http://bit.ly/Sd4mmV

And if you have any app ideas, Colorfy it also provides an open API without any usage limits. 

The future of the web: Instagram

I can haz filterz?

All joking aside, the future of #HTML and #CSS certainly includes advanced graphical capabilities. Some of them are described in a recent presentation given by Vincent Hardy of +Adobe and you can examples of them in the images below.

Of course, in terms of specifications, all of this is in draft at the moment and and most of them currently only supported in under development versions of browsers like the nightly version of Webkit (get it here http://bit.ly/HQb1HR) with an -webkit-filter attribute. And some of the effects are making my Mac mini go wild :)

See the full presentation here (some effects will only work on the nightly Wekbit) http://bit.ly/IsK5D0
Thanks to +Chris Coyier for the link

Google+: View post on Google+

Responsive menus: one code to rule them all

If you haven't joined the mobile web yet, you should really start thinking about it. 66% of 24-35 year olds already own web-hungry smartphones in the United States. +Webdesigntuts shows us how you can have one piece #HTML / #CSS code for your menus for both your mobile and "full size" visitors.
Check it out here http://bit.ly/wlFH3i

Google+: View post on Google+

Advancing the HTML experience

www.mycookingdiary.com by +Mike Matas is great example of what you can do (and how to do it properly) with #HTML and #CSS today:
- A continuous user experience using AJAX to keep the user engaged. However, each "slide" has it's own URL. This means you can bookmark it, share it, etc.
- Animation - but on user action: Yes, animations can liven up a site. But it should be controllable by the user otherwise they end up being irritating. The user needs to feel he is in control of his experience of your site
- Flexible layout: the site looks great at 800px as well as 1200px
- CSS effects to enhance the visual result: #CSS3 blur is here used to bring the attention to the main content area not as a gimmick
- Keyboard navigation: a small issue for some but shows attention to detail and professionalism

Do you have any more example sites along these lines?

Google+: View post on Google+

CSS "Magic" :)

CSS "Magic" :)

Embedded Link

Experiments with background-clip: text
Experiments with background-clip: text - Background Image for Text

Google+: View post on Google+

Another victory for #HTML5 and #CSS3

The next version of the Kindle books format will support HTML5 and CSS3, moving away from the Mobi format. Of course it continues to be a shame (and a non-starter for me) that Kindle doesn't support #EPUB ...

Embedded Link

Kindle Format 8 Overview
Kindle Format 8 Overview

Google+: Reshared 1 times
Google+: View post on Google+

Drawing images with just #CSS

A new age for spam mails? :)

Embedded Link

How to draw the Windows logo with 100% CSS. No javascript! No images!
HTML. <div id="windows"> <div class="canvas"> <div class="icon"> <div class="window1"> <div class="window-e1"></div&g...

Google+: View post on Google+

Some really nice #CSS tips using the background-size property

Some really nice #CSS tips using the background-size property

Embedded Link

Take advantage of the CSS background-size property | Tutorial | .net magazine
Front-end developer Stephanie (Sullivan) Rewis, owner of W3Conversions, takes you through a variety of innovative uses for the new CSS3 background-size property. More control than you've ever had befo...

Google+: Reshared 1 times
Google+: View post on Google+