Archive for the 'CSS' Category
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 [...]
February 24th, 2010 | Posted in CSS, Front Page, Miscellaneous | Comments Off
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. [...]
February 9th, 2010 | Posted in CSS, Front Page, Miscellaneous, css3, geo, jQuery, maps, rotation | Comments Off
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 [...]
February 8th, 2010 | Posted in Announcements, CSS, Front Page, Miscellaneous | Comments Off
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 [...]
February 5th, 2010 | Posted in CSS, Examples, Front Page, Miscellaneous | Comments Off
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;
[...]
January 27th, 2010 | Posted in CSS, Front Page, Miscellaneous, Showcase | Comments Off
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 [...]
January 18th, 2010 | Posted in CSS, Front Page, JavaScript, Library, Miscellaneous, Testing | Comments Off
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 [...]
January 15th, 2010 | Posted in CSS, Front Page, JavaScript, Miscellaneous, PHP, Performance, api, charts | Comments Off
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 [...]
December 31st, 2009 | Posted in CSS, Examples, Front Page, Fun, JavaScript, Miscellaneous | Comments Off
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 [...]
December 15th, 2009 | Posted in CSS, Front Page, Miscellaneous, Showcase | Comments Off
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 [...]
December 1st, 2009 | Posted in CSS, Examples, Front Page, Miscellaneous, Safari | Comments Off