Archive for the 'CSS' Category

Custom checkbox and radio buttons using CSS

In my never ending quest to find weird and wonderful ways to abuse CSS and all its little intricacies, I have come up with a pretty good way of using CSS to create custom radio and checkbox inputs without JavaScript, that are accessible, keyboard controlled, don’t use any hacks and degrade nicely in non supporting [...]

Rotating maps with CSS3 and jQuery

One of the things I always want to do with online maps is rotate them – I am used to that with real, physical maps. As physical maps become a lot more clever these days (for example have you seen the zoomable map?) it is time we can do this with the online ones, too. [...]

Román Cortés and Ajaxian make up with amazing CSS demos

We have been long term fans of Román and the fantastic demos and samples that he puts together, usually involving CSS goodness. We messed up the other week though when we linked to his work on a scrolling coke can. I do these postings as a labor of love, and since Ajaxian isn’t my day [...]

AT AT Walking with CSS

Anthony Calzadilla has a fun Friday example for us. He has a tutorial on how he animated an AT AT using CSS.
He goes over the different areas and how he uses animation and transforms.
For example, the head of the beast:
PLAIN TEXT
CSS:

 

@-webkit-keyframes rotate-head{

  0% {-webkit-transform:rotate(0deg) translate(0px,0px);}

  40% {-webkit-transform:rotate(10deg) translate(15px,5px);}

  80% {-webkit-transform:rotate(-5deg) translate(8px,5px);}

  100% {-webkit-transform:rotate(0deg) translate(0px,0px);}

}

#atat #head [...]

Rolling a coke can around with pure CSS

Román Cortés is having a lot of fun with CSS tricks these days. He just built an example rolling CSS coke can that uses background-attachment, background-position, and a few other tricks to get the effect. No fancy CSS3 needed here!

The key pieces used:
PLAIN TEXT
CSS:

 

p {

        background-image: url(coke-label.jpg);

        background-attachment: fixed;

  [...]

Helium CSS: JavaScript Library to test your CSS usage

Geuis Teses has released an enjoyable library called Helium that has the goal of testing your stylesheets for unused style.
You inject helium into your site (e.g. put it in an included footer) and then when you hit the first page you will have a popup asking for the pages you want to test. Helium will [...]

Pure CSS bar charts as a simple API

I am right now working on a high-traffic project that will run in a sandbox that doesn’t allow me to pull third party JavaScript or use canvas/Flash. Yet I need to generate bar charts from a set of data.

The solution to me was to create the charts from HTML using CSS. There have been some [...]

Web 2.Snow

When I talked about some snow related CSS3 experiment, I could not imagine @Natbat was already preparing something like snowflakes, an almost fully CSS3 featured snow FX created for clearleft, specially suited for Chrome and Safari.
And what about @zacharyjohnson? He put snow all over the network via its Winternetizer, the first snow proxy I have [...]

3D CSS Parallax Effect

Roman Cortes has a fun parallax effect using just CSS and HTML. Scroll over the bad boy above and see it at work.
Then view the source and have your eyes bleed :) PLAIN TEXT
HTML:

 

<style type=”text/css”>

                a#a96:hover img {left: 224px}a#a96:hover b.d1 {background-position: 224px 0; width: 224px}a#a96:hover b.d2 {background-position: -449.6px 18px;}a#a96:hover [...]

Star Wars HTML and CSS: A NEW HOPE

There are a lot of CSS transitions experiments going on right now. Yesterday I discovered another HTML and CSS experiment which went “far far away”, compared with my simple CSS gallery.
Guillermo Esteves presented a piece of history translated for tomorrows browsers:  the Star Wars Episode IV opening crawl in HTML and CSS:

Unfortunately, the live experiment [...]