We are in December, looking closely at Christmas and saying goodbye to another year in which we can only say thank you. Thanks for reading, commenting, sharing us … Being together every week through our posts and projects. Without you, everyone who puts his two cents (or snowflake) Silo Creativo would not exist.
Therefore we have to say thank you:
For reading even when it’s cold and when it’s hot and you are on a deserted island…
For commenting us sometimes just to say a few encouraging words …
For sharing our content in unimaginable places …
For using our resources, improving our projects…
For being there … THANK YOU!
As you already know us, this month is full of novelties. First of all, we wanted to wish you a merry Christmas, and to celebrate it we have designed a special card and many surprises.
We have prepared two Christmas gifts to thank you for following us. Are you going to miss them? Just subscribe to discover them!
Enjoy the Card and Download our gifts
If you are already one of our subscribers, I am sure that you have already enjoyed them. (If you have not seen them, do not forget to check your inbox.)
Remember! The gifts will be available until 10th January 2016. Do not miss the opportunity!
We wish you a Merry Christmas and a great 2016, in which we expect to continue together! We wish that all your projects and dreams come true and a year full of great ideas.
How our Christmas greeting card is made?
Everybody loves Christmas: snow, excitement, presents, parties… It is the best moment to play with new things and to explore new places. We have designed this Christmas card in a different way from classic printed greeting cards. How we have done it ? Let’s see it:
In the website we find two main elements. On one hand, we added a letter with a greeting message focused on the screen that uses the transform CSS property. Easy,right? But the most interesting thing here is the red and blue dotted borders. Do you remember airmail envelopes? We have used them as inspiration for top and bottom borders to give a vintage layout to the letter. And it looks great! Look at the code if you are interested in knowing how the repeating-linear-gradient works.
Moreover the user can close the letter clicking on the cancel icon. The letter will be hidden, but you can open it again clicking on the tiny envelope that will appear at the top right of the screen. This is made using a JS function.
On the other hand, we have designed some funny nonstop illustrations using images and CSS. Yes, all animations you can see are made setting the @keyframes feature of CSS. This lets us move images from left to right or from top to bottom. Duration and delay are important here to control when and how animations start. This is a great feature to create cool web designs.
About the images format: it knows that svg is lighter than png but svg has less browser compatibility than png. For that, we decided to use png format with transparency property for this design. But it was the last time. We are absolutely convinced that svg is the most flexible format for illustrations and web designs.
Finally let’s have a look at the responsive behaviour. As you can see, some elements disappear if you resize your browser or if you access to the site via mobile devices. So we decided to hide some elements like mountains for small screens. For this, we added the mountains images as background-images in the CSS. Then we set a media query element that only loads these images if the user is using a tablet or a desktop computer. That is how the mobile first works.
We hope you learned something new with this project! Share with your friends, and of course Merry Christmas!
