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!

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”.

So imagine you want to do something after a popover is opened. To add a callback function do the following. Notice that you can call it whatever you want:

Once you have done that, you can call the callback function when initialising your popover object:

Look at the demo here.

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.

jQuery allows you to manipulate elements in a page normally identified by an unique id or a class name:

HTML:

jQuery:

 
But what about adding some extra information of these elements? Let’s stick with the example and imagine the case you also need the nationality of the players to be saved in a DB.

One solution could be adding a descriptive id or class to each player, something along these lines:

 
Then you find out that you will also need their ages… and the teams they play for… and….  Worry no more!

The solution you were dreaming for already exists: “HTML5 Custom Data Attributes”. They’re a custom way of adding attributes with any string value you need. And the best part: they can be added to ANY HTML element.

Following the example above, you can then do something like:

…and get the attributes values using jQuery:

Update: You can also use $(‘this’).data(‘attribute-name’) to get the attribute’s value, like my friend Irving suggested on his comment below.

Enjoy!

PS.- Yes, that is a picture of Messi

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”…

… so here it is: a little demo I’ve created myself. It’s a 3D effect using CSS3 transformation and jQuery.

I’m pretty sure there must be so many ways to do this, probably more efficiently. I didn’t really do any research, it’s entirely an experiment.

So, what I’ve done?

First of all. A “3D” rectangle, using CSS3 transformation. Have a look at this link which will show you how much you can do using transformation. The rectangle is simply divs in top of each other: the front, the bottom and right side (and some extra for positioning).

Absolute positioning and z-index will help you to draw a perfect rectangle with a 3D effect. This is the code I used:

Some CSS to position and hide the “depth” divs so will only be displayed when animated. Here’s my CSS:

And finally, the little jQuery script. It will animate the divs when the mouse enters in the content area, displaying the “depth” divs which will make the 3D effect and when the mouse leaves will do the opposite.

And voila!

See the demo here.

by Silvia Rebelo

Next Wednesday 27 Portugal will be playing Spain at the Euro 2012. Exciting! Not only because there is a sense of revenge after Portugal being defeated by their neighbours in the World Cup two years ago, but personally because these two teams are REALLY special to me.

I’m half portuguese so Portugal means a lot to me, but Spain have the players I follow along the whole year and most importantly, they have a lot of Barcelona players, the team of my heart. I actually started supporting Barcelona because of the well known portuguese player Figo, so there it is…

So, if you ask me to name ONE team to go through I will say Portugal, definitely! But I won’t be too sad if Spain goes instead.

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?

<canvas> is a HTML5 element used to draw graphics using JavaScript (most of the times). Imagine a blank paper where you can draw shapes, images and text. When adding  it to your page it exposes one or more rendering contexts which are used to create and manipulate the content that will be displayed. The demo uses the 2d context.

Canvas are mostly used for creating graphics, animations, games and images compositions.

The basic code for using and initialising a canvas will look like this:

HTML code

The id wil be used to initialise the canvas using JavaScript, the width and height to set the size of it and the text inside will be used as a callback when the browser doesn’t support it (check this useful link to see the list of browsers and versions that support canvas).

JavaScript code

Start drawing!
If you want to learn more about canvas check out this link. It’s from the Mozilla developer’s website and it helped me a lot with the theory behind canvas and all the things you can create. As you will see, there is a lot of possibilities and all depends in what you want to achieve.

Check out the demo
To see the memory card demo click here and its javaScript code here. Bear on mind this is a basic example only for practice purposes =)

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)

But 140px doesn’t fit in your layout! (that’s why you set it to be 100px in first place!) You will need then to re-mesure all over again and start decreasing widths all around your CSS…. in short: a bit of a nightmare!

But hey! did you know there is a MAGIC property that allows you to add padding and borders to your elements without even bothering about the expanding issue explained above?

It’s called box-sizing, and what it does is to subtract pixels from the original size (instead of adding them). To use it just add these lines to the element you want to keep the size you are specifically setting:

There is a great article by Paul Irish suggesting the idea of using the property to the universal selector, meaning all elements will have it. I personally find it brilliant, but it’s up to you to use it that way.

Unfortunately, as you may have already guessed, this only works for new browsers (IE8+) but that’s not that bad, isn’t?

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.