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

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

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

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!

On my way to CSSConf

CSSConf - May 27th

CSSConf – May 27th

30% inflation is no reason for not travelling and enjoying. I, therefore, have decided to enjoy a few days abroad and visit for the very first time the United States.

My name is María Evangelina Ferreira and I’m a web design professor at the Argentinian’s National Technological University. I began to design websites at the age of 16 and luckily, this profession grew on me. I am passionate about the web, the standards and mainly, about CSS.

As I will be travelling to Florida I said to myself I might as well go to Hogwarts. Yes, Harry Potter’s Hogwarts. And after drinking butter beer and riding an hippogriff I will be attending the CSSConf. This conference if the most important to me mainly because CSS is my favourite programming language (as if you could choose a favourite programming language) and I will definitely be able to transmit everything I learn to my students. Continue reading