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.

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.

Designing an effective pricing table

Having an effective pricing table can help you a lot to increase the conversion rate for your product sales page. It’s very important to make things clear from the beginning because this way you’ll help your visitors to take the best decision for choosing the plan that suits them.

The pricing table’s design also plays an important role here. So, in today’s article you’ll learn how to create a nice and effective pricing table using CSS3.

Notification bubble with CSS3 keyframe animation

The other day, while working on a web project, I had to emphasize somehow a dynamic notification bubble. Basically, every time the notification value changes, a visual effect was needed in order to get user’s attention. So I made that using CSS3 keyframe animation.

Simple notification bubble

CSS generated content on replaced elements

Using pseudo-elements like :before and :after helps you specifying which content should be inserted before (or after) the content of an element. Replaced elements like input or img have no content, therefore, you shouldn’t be able to use generated content for them.

But, there’s almost always a but, it seems that you can use generated content on a number of replaced elements that varies from browser to browser. This is something that has intrigued me lately and that’s why I decided to write down this article.

CSS generated content on replaced elements preview