I was kind of tired yesterday night to do any more work on Bringr or Redsmin. So while procrastinating on the internet I discovered the picture below of my old graduate school (EPSI Nantes) where I now teach JavaScript and NoSQL from time to time.


...  I wondered how fast I could write this logo in CSS/HTML, so I started to do it. Then once it I was done, I wondered how I could animate it while scrolling. In order to do that I used skrollr and skrollr-stylesheet and here we are:

I find the result kind of neat for a small one night project like that!

Notes:

• It was only tested on Chrome 31+
• The animation is really slow on iPhone 4 but works well on later version.

Just another experiment with CSS2/CSS3. This time I've redesign my DoYouBuzz CV (best rendered in Google Chrome). I couldn't edit the HTML so every modifications was done using pure css.

I've done some work lately on the Gam3r's design adding some CSS3 goodness. Here is a quick video summary.

(Disclaimer: I've tried in an entirely week-end to animate birds using only CSS3 but without great success... sorry about that).

1) animate the clouds (#clouds):

2) animate the hills (#hill2 & #hill1):
@-webkit-keyframes animHill2{
from {background-position: 0px 258px; }
to {background-position: -1110px 258px; }
}

@-webkit-keyframes animHill1{
0% {background-position: 0px 104px; }
100% {background-position: -2220px 104px; }
}

#hill2{
-webkit-animation: animHill2 25s linear 0s infinite;
}

#hill1 {
-webkit-animation: animHill1 25s linear 0s infinite;
}

Voici le diaporama de ma conférence "Découverte HTML5/CSS3" avec une introduction aux bonnes pratiques dans le développement web:


N'hésitez pas à commenter, mettre en favoris le diaporama sur la page slideshare.