Rubik’s Cube animated

Something I’ve been playing with lately is CSS3, exploring its capabilities to create animations and transitions.

During my research I’ve seen truly jaw-dropping demos and it seems like people is taking advantage of those capabilities to do really cool stuff. I thought I might try something myself, so I ended up doing this simple example of a Rubik’s cube, showing a mix of transitions, perspective, rotations and a pinch of jQuery (to update some of those values).

It is a bit disappointing that some of those capabilities only exist in some browsers, but hopefully one day that will change.

(1) See the demo here

(2) Demo & Code here - Please note I’ve used the “Prefix Free” js which allows you to write CSS not bothering about all the different browser’s prefixes (-moz, -webkit, -o). Really handy!

Adding callbacks to Twitter Bootstrap’s Javascript plugins

09 Mar 13 by Silvia Rebelo

The minute I first saw Twitter’s Bootstrap I knew I was going to use it continuously. Either for prototyping or building a site in a short period of time, Twitter Bootstrap has an incredible amount of features/plugins that will ensure your website/app will look great under any browser/device.

However, after using some of the Javascript plugins, I notice some of them don’t have a callback function, which is pretty handy when you want to do more custom stuffs. Luckily, after doing some research I found out that in Javascript a callback function can be added through the function property “prototype”.

Continue reading →

Simetría – Symmetry

20 Jan 13 by Silvia Rebelo

Using Photoshop, this little work has been inspired by my days at Uni and the snow outside.

HTML5 custom data attributes will save your life

30 Oct 12 by Silvia Rebelo

I know. I’m exaggerating a bit with that title. However, If you are a jQuery fan (like me) I can assure you it will save you some valuable time and code. Continue reading →

The jump of Felix (the cat)

20 Oct 12 by Silvia Rebelo

I hope this make you smile like it did to me.

3D effect using CSS3 + jQuery

08 Jul 12 by Silvia Rebelo

I saw this effect in a blog the other day (which unfortunately didn’t save on my bookmarks) but what caught my attention was the way some pieces of content popped up over the page, making a 3D effect.

I believe it was made on Flash and when I saw it I thought “I should try and replicate it using jQuery”…

Continue reading →

Portugal vs Spain. 2 years later.

24 Jun 12 by Silvia Rebelo

by Silvia Rebelo

Continue reading →

HTML5 canvas and the memory game

14 Apr 12 by Silvia Rebelo

This week I finally had the chance to start looking at this book I bought a few months ago, it’s called The essential guide to HTML5. The book is based on a bunch of exercises (games really) using JavaScript and HTML5 Canvas, ready to put into code and test. It doesn’t get into theory but for those looking to get things working quickly, this is definitely a good one.

So I decided to make the “Memory Game” to learn about the basics of canvas:

So, what is canvas? and what you can do with it? Continue reading →

CSS: box-sizing, so glad I’ve found you!

19 Feb 12 by Silvia Rebelo

So you’re writing some CSS for your website. You are about to “theme” an element, let’s say a DIV, you set a width to it in order to look as you want. Then you add some content inside and most likely you will add some padding (to add some space).

In the CSS “box-model” what will happen is that the width of the element (and the height) will be increased due to the padding applied. If the width was set to 100px and you added 20px padding, the rendered element will measure 140px (100px + 20px padding left + 20px padding right)

Continue reading →

Romina Amaro Photography

18 Feb 12 by Silvia Rebelo

Hello everybody! It’s been a while since my last post. Just wanted to share this website, it’s a beautiful portfolio from a very talented friend. I helped her putting the site together but the photos stand out by themselves.

If you like the photos, feel free to share them using the social buttons inside of each gallery or pinning them on Pinterest! Big Thanks!

This is the link: www.rominaamaro.com

If you are interested in the WordPress theme used in the website, check it out here.