the singularity of being and nothingness
Posts tagged CSS3
CSS3 Infographic
Jan 22nd
There’s something with me, the weekend, and CSS3…hmm…
On Saturday, Google Politics & Elections posted an interesting infographic about search trends over the last week related to the four remaining GOP Presidential candidates.
Here’s the infographic:
From Google Politics & Elections
Overall, pretty nice. It makes good use of color, highlights the important details, and avoids loading the graphic with needless frills, pointless content, etc.
The one problem, though, is that it’s simply an image. While it’s nice to look at, it’s kind of boring.
Some CSS3 Up In HereSo as I was internally complaining about how boring the image qua image is, it occurred to me that some simple CSS3 flourishes could really make this nice.
Check Out the Example (note: you’ll need a more recent version of Webkit or Firefox for this to work…)
In this experiment, I’m using a few things I’ve not messed with much in the past: keyframes and the flex-box model.
Flex-Box ModelIf you’re a web designer, you’ve no doubt spent endless hours trying to coax HTML and CSS to do simple things like expand “columns” a particular percentage in width and height. This is a horrible nightmare to endure, and it usually ends in a lot of hacks and more cursing, just to More >
Chunky Checker: Some CSS3 Fun
Jan 16th
In keeping with my New Year’s resolution to not get involved in “black-hole” projects so that I have more flexibility to pursue fun stuff on a whim, I whipped up a fun experiment in CSS3.
The Main IdeaIf you design a lot of forms, you know that radio and checkbox lists are hard to style. And no matter how perfectly you lay them out, they are still just plain boring. I thought it would be fun to make checkbox and radio lists a bit more fun by going an entirely different route, and by getting a bit more 3D.
Enter “Chunky Checker.” This set of styles takes an ordinary list of checkboxes or radio buttons and converts them into a super-chunky 3D list. As the radios/checkboxes are activated, the particular segment of the list transforms, creating a “depressed” look, sort of as if a button was physically pressed.
The MarkupThis approach is completely, 100% CSS and HTML–no JavaScript whatsoever. Moreover, it uses a pretty standard markup. The following is all that’s needed to recreate the demos:
<fieldset> <legend>Favorite Color:</legend> <input type="checkbox" name="color" value="Red" id="red" class="red"/> <label for="red">Red</label> <input type="checkbox" name="color" value="Orange" id="orange" class="orange" /> More >
