Web front-end engineer & team manager
Ahoy, front-end pirates!
Welcome to the Chapter 3 of the Making of The Secret of Front-end Island saga: the 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
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
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:
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:
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.
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:
In case of javascript fallback, the best may be respond.js, in the following case:
On Saturday, November 24th 2012, I spoke again about web design at the event Wordcamp Bologna.
This time my speech was about agile web page styling (CSS) with Compass/SASS.
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).
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.
If you are a front-end developer and make mobile websites / mobile web apps, you know that debugging on mobile devices is a pain.
Although you might not know that you can remotely inspect your mobile web app or website using Weinre. Here’s how:
We used GIF images to create animations for years, but they aren’t pretty to be used over gradients or pictures (no alpha channel, no anti-aliasing) of which modern web sites are full. There are many workarounds to animate PNG images instead, but…
I want to show you a solution I found to create a “loading” animation from scratch, using only CSS 3, without images.
Recent Comments