Latest posts

Making of The Treasure of Front-end Island – Chapter 3 – The rising smoke

Ahoy, front-end pirates!

Welcome to the Chapter 3 of the Making of The Secret of Front-end Island saga: the Rising Smoke.

Front-end Island Rising Smoke

In the layout the smoke was composed by 5 gray circles at different opacity. Oh joy! I could avoid using images using markup and border-radius, and animate every smoke ball using CSS 3 only. Challenging, then funny. :)
Continue reading

Making of The Treasure of Front-end Island – Chapter 2 – The blowing clouds

Ahoy, front-end pirates!

Welcome to the Chapter 2 of the Making of The Secret of Front-end Island saga: the Blowing Clouds.

As I described before, in the Photoshop layout I got from the designer (Diego Sessa) I had the finished 1280 pixel wide layout, and I had the discretion of choosing animations, responsive behavior, and so on.

For the blowing clouds I decided to make a “blow left and right” effect using CSS 3 only. I also wanted the clouds to move at different speeds.
Continue reading

Making of The Treasure of Front-end Island – Chapter 1 – The splashing title

Ahoy, front-end pirates!

Welcome to the Chapter 1 of the Making of The Secret of Front-end Island saga: the Splashing Title.

Let’s start saying that in the Photoshop layout I got from the designer (Diego Sessa) I had the finished 1280 pixel wide layout, and I had the discretion of choosing animations, responsive behavior, and so on.

For the splash image I decided to make a “splash” effect using CSS 3 only. So the image had to start small, become bigger than it had to become, bounce back a little, and finally become of the final size. It also had to be shown of the final size in browsers that don’t support CSS 3 transitions.

Here are the steps of what I did:

Continue reading

Making of The Treasure of Front-end Island

Ahoy, front-end pirates!

Today I’m starting a saga about the front-end development of the site of the 2012 edition of the From the Front conference which took place in Bologna, Italy on September the 20th.

The chapters of the saga will be:

  • Chapter 1 – The splashing title
  • Chapter 2 – The blowing clouds
  • Chapter 3 – The rising smoke (coming soon)
  • Chapter 4 – The swinging boat (coming soon)
  • Chapter 5 – The shady pirates (coming soon)

Every chapter will be about the libraries I used, the techniques I applies, the troubles I went through and the related workarounds.

Come back tomorrow to read Chapter 1 – The splashing title.

Respond.js vs css3-mediaqueries.js

Googling respond.js vs css3-mediaqueries.js I’ve found Techniques For Gracefully Degrading Media Queries, a Smashing Magazine post about Lewis Nyman which talks about how to apply the graceful degradation of media queries on browsers that don’t support them (IE 8, IE 7, IE 6).

The options are:

  • Use a separate style sheet to load conditionally on old Internet Explorer versions, or separate style rules to apply based on the body class
  • Use a javascript fallback (using respond.js or css3-mediaqueries.js)

In case of javascript fallback, the best may be respond.js, in the following case:

Continue reading

CSS 3 Transitions and Animation + graceful degradation with jQuery

On Tuesday, October the 30st, 2012, at 18:30, I’m speaking again about when, why and how to use CSS 3 transitions and animations, and when and how to apply the fallback animation with jQuery.

This event will be hosted by the company I currently work for, Gruppo Euris, in its office at Bologna, Via del Rondone 1 (see the map).

Continue reading

Unprefixed CSS 3 properties in Firefox 16, demo and how-to

I heard that Firefox 16 unprefixed CSS 3 transitions, animations and gradients, so I wanted to give it a try. In short, it’s true: starting from October 9th, no more -webkit- prefix in transition, animation, @keyframes and linear-gradient.

So here’s how to create a shaking button that transitions to another color when rolled over.

Continue reading