CSS 3D folding list with social buttons

CSS 3D transforms are just awesome. I’ve seen before some cool and inspiring implementations in the wild and still I can’t believe I didn’t had the chance to write an article on this topic ‘til now.

So, what’s the idea for this article? Let’s say you own a blog, I was thinking about having a nice looking 3D folding list that contains the main social buttons and when people reach at the end of an article, the initial folded list would smoothly unfold. This could be helpful if you want to draw users’ attention, something like: “Hey, did you like my article? Connect with me!”.

CSS 3D folding list with social buttons

Things you may not have known about HTML & CSS

I’ve recently watched a good video presentation by Mathias from Fronteers 2012 which I found both interesting and inspirational. I already had in mind some similar things, so I ended up writing this article down. It’s about some random things and facts you may (not) have known about HTML & CSS.

Things you may not have known about HTML & CSS

Thank you

The New Year is coming and I have wrote this short post to thank you all sincerely for reading my articles. I think I should say it more often as well.

Thank you (2012)

Tips on Sublime Text 2 - your favorite code editor

Unless you’ve lived under a rock lately, I’m sure you’ve heard of Sublime Text 2 and most likely that’s your favorite code editor.

In the past I used some other code editors like Komodo Edit or Aptana Studio, but now I use Sublime Text 2 on a daily basis and I’m pretty happy with it. It’s lightweight, easy to use and has a modern UI look. But by far, the best feature is the ability to extend its functionality with plugins, a.k.a packages.

Sublime Text 2

CSS3 tucked corners

I had one of those moments this week when I remembered I saw a while ago a tucked corners effect made by Joshua Hibbert. That was cool. While thinking about it, one of my first thoughts was to try finding an alternative solution which can allow you use a pattern as a background for the containing block.

For this alternative CSS3 tucked corners effect, I used the beveled corners technique by Lea Verou, a technique you’ve seen implemented before for my CSS3 tabs with beveled corners.

CSS3 patterned buttons

Nowadays, using subtle patterns is kinda cool so I thought why not using them also on buttons? The idea was to create some nice CSS3 patterned buttons and in this article you’ll see what I’ve been working on lately.

How to create triangle shapes

You’ve seen triangles everywhere: on tooltips, dropdowns and even on loading animations. Like it or not, these small elements are quite important when trying to build some relationships between various UI elements.

There are some different ways to build a triangle for your web designs and in this article you’ll see how you can actually do that.

Faking transitions on gradients

CSS transitions do not have any effect on background gradients. As far as I know, the thing is that something similar would be quite difficult to achieve considering the multitude of possible gradients that can be created using a color palette.

Though, there are some simple ways you can simulate smooth transitions on gradients and below you’ll see how to do that.

Transitions on gradients

Firefox doesn't allow cross-domain fonts

It would be just great if we could learn something new every day. I guess the best way to do it is by trying new stuff every time it’s possible.

While working on LeadConverter, I had a situation where it was needed to use an iconic font externally declared via @font-face. So, in this situation, my iconic font worked perfectly in all major supported browsers, excepting Firefox. It was such disappointing situation.

After I’ve pulled out half of my hair searching for a solution, I found out that Firefox doesn’t allow cross-domain fonts by default - unless you set an Access-Control-Allow-Origin header to the font.

Firefox does not allow cross domain fonts