Color Wheel Animation with CSS Filters

A few months ago I ran into the NSConf Argentina website by Aerolab and I instantly fell in love with those crazy gradients. My animation monster told me to animate them, so I set to work!!

First of all, how was the gradient in those buttons applied? A short trip to Dev Tools answered, it was border-image with a gradient. GREAT!

So I made a simple demo of those buttons: Continue reading

2015 Review and 2016 Fast Foward

This 2015 year was so incredible that I found it imperative to thank everyone involved in it, at least with a simple post.

First of all, a little review of 2015:

  • 9 subjects done at University (only 25 left until I graduate!!), with an average grade of 7
  • 12 books read, see the list here!
  • 3 blog posts (4 with this one)
  • 85 students brought into the world of web development (Yay!)
  • 8 talks
    • CSSConf, Melbourne, Australia
    • BA Front End (May), Buenos Aires, Argentina
    • WordCamp, Buenos Aires, Argentina
    • Chicas Poderosas, Buenos Aires, Argentina
    • GDG Devfest, Buenos  Aires, Argentina
    • BA Front End (October), Buenos Aires, Argentina
    • SassSummit, Online talk
    • Front In Sampa, São Paulo, Brazil
  • 1 workshop
    • SassConf, Austin, Texas

It was, for me, an incredible year. So here are the proper thanks to everyone involved: Continue reading

Color Schemes with Sass

Sass is awesome, no doubt. But one of the most interesting features in my opinion is the possibility of helping an user to choose its color scheme (just think of a customizable e-commerce web, whose users design their own website for selling their products). Usually, I’d recommend to visit websites such as Paletton (also known as Color Scheme Designer), a place where you can pick a color and combine it using different design criteria (adjacent and complimentary color, triad and tetrad) in order to get your color palette. But the customization through those websites can get tricky if you wish to use two colors, one main and one alternative. Continue reading

Storyboard Template… For your peace of mind

/* This is a side note of my story with animation, you can jump to the article instead.
I don’t think I ever… tweeted about this, but I’m currently studying for a BA in Multimedia and Interaction Design. That said, animation has grown on me since I was little, and at the age of 15/16 I finally began some out-of-school workshops on Stop Motions and… Web Design. Life took me into the later and I’m thankful for it, but lately I’ve been missing the Art of Animation, feeling that I was unable to fully put that into my daily web development activities. Until… Newton happened. It took me about one month to create that CSSConf AU talk and it opened my mind. I can do animations in the web, no more crying about it.
—————– */

In case you are not familiar with them, storyboards are a wonderful way of planning a recording session of any kind. Most of the time, our ego goes up to the sky and we believe that because the idea is inside our heads, the recording will be great. Our ideas are indeed great, but sometimes they don’t work out, why? Because ideas must be put to paper before realization, specially since recording can be expensive and/or take too much time out of our lives. That it’s the reason of storyboards, avoiding mistakes before they happen.

An storyboard is composed of a few keyframes of the animation/recording, in which we draw the type of shot (long shot, medium shot, close-up, etc.), the camera angle and the most important action that is going to happen in that take. Continue reading

Clues to teach & learn Web Design

I began teaching Web Design two years ago at private and public universities of Argentina and it became my second passion (front-end being the first one ❤). Most of my students have no idea of web development until they go through the classroom doors, and it is up to me to give them the tools to build a functioning website in about four months. These are my clues to teach and learn web design (from the basics):

  1. (First things, first.) Never say something is obvious: It isn’t. Not for them! You may have years of experience but they have just walked through your door, the most important thing is not to scare them away, make them comfortable. Nope, not even you were born being Sir Tim Berner’s Lee.

    Back to the Future - Remember old days!

    Recap of the past

  2. A nice recap of the past: Why don’t you tell them how you began? Designing in frames? Tables? Flash? FrontPage?! (I designed my first webpage in Word, just sayin’) How crazy and cool it was to change the user’s cursor into a flaming arrow? Continue reading

CSSConf & USA recap

Eva Ferreira at The Wizarding World of Harry Potter

That Harry Potter crazy fan…

First of all, I must admit I never understood miles nor fahrenheit measures. After spending a week in the US… I still don’t get them. It’s been almost a month and I was unable to write my recap on my CSSConf experience and my first journey to the United States. So here it is:

My plans for this journey began in late february, when inflation in Argentina was about 30%, it is now turning out to be 40%… I got hold of my savings and decided to travel. As I was planning on attending CSSConf on Amelia Island I also made arrangements to visit Universal Studios in Orlando (yup, I’m one of those Harry Potter crazy fans). On May 21st I took off to Orlando. Continue reading

Pivot/Anchor point in CSS

Pivot point

Pivot or Anchor point. Default in Adobe Illustrator.

Everytime we use CSS we create elements, these elements always have a hidden middle point. This is known as anchor point or pivot. It is a reference on how the element will rotate, scale and move around the screen. In most cases the anchor point is located either at the top left of the element or at its centre.
Along with CSS transform property a way of modifying the anchor point appeared. It is called “transform-origin”. This can be seen, for example, in a rotation:

Both examples activate the same transform properties on hover:

rotate(40deg) and scale(0.6)

but the difference is set when we apply the following to the second element:

transform-origin: 300px center;

Continue reading

Coffee cups counter

Designer's Coffee, or... How many a day?Rumor has it that designers and programmers live out of coffee, it is part of their blood. But is it true? Among current statics the average USA inhabitant drinks 3.8 cups of coffee a day, does the programmer or the designer drink more than that? Here’s the deal to find out:

The reason behind this project was also to try out a semi-serious project with Sass. Therefore, this was my first real approach to it and I must say I definitely enjoyed it! I hope you have fun and remember you can tweet your score and find out how many coffees you drink per year and the amount you proudly spend on them 🙂

On Contrast Ratio

Contrast Ratio

A good and bad contrast

Contrast ratio is the difference between the brightest whites and the blackest blacks of any display. High contrast ratios deliver whiter whites and blacker blacks and a greater degree of gray values in between. If the contrast ratio is low, even if the image is bright, your image will look washed out.

Contrast Ratio on web design is of major importance due to Web Accesibility. You may fin the specification of W3C over here. This Guideline has three Conformance Level for testings:

  • A (lowest), contrast ratio of
  • AA
  • AAA (highest)

Continue reading

Hover effects over images

This week I’ve been working on a few hovering effects on images, using box-shadows and transitions. Hope you like it!