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

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.

New responsive design for RTD

It’s been almost a month already since I launched this new responsive design and unfortunately I didn’t had much time to properly introduce it to you. This improved design is something I wanted to do for a long time and I’m glad I finally managed it. It’s simpler, minimal, responsive and I like to think that now the content is much easier to read (scan).

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

Thoughts on upcoming CSS parent selector

I wrote a while ago about the future CSS4 Selectors, namely about CSS Selectors Level 4 Working Draft release. It was such a good news to see that things are continuously moving on. I’m saying that because it’s a long way until CSS3 will reach final recommendation phase and yet we’re seeing news about the future CSS4. Isn’t that cool?

Meanwhile, I thought a little bit about the upcoming CSS parent selector. At this time, if you ask me, I think it will be the most awesome feature and definitely is at the top of my CSS wishlist.

Google Play's minimal tabs with CSS3 & jQuery

The tab navigation is an element you often meet in your daily browsing. There are so many ways, so many styles, but the idea is the same: you click a tab and see its content without a page refresh.

In this article you’ll learn how to build some new CSS3 & jQuery tabs inspired by Google Play’s design.

CSS filter effects in action

Ever since CSS filter effects landed in WebKit, I thought about theirs practical implementation. How will they fit with the current web design trends? At this time, my initial impressions are that the best way to showcase the power of CSS filters is something like an image gallery.

With so many CSS filters to choose from, it will be fun to create image galleries in the future. Further in this article we’ll create a simple image gallery using CSS filters and the CSS3 :not selector.

CSS filters

Interactive menu with CSS3 & jQuery

I’ve had this example in mind for a while now and seeing something similar in the wild, made me want to write this article down.

So, in this article you’ll learn how to create an interactive menu using CSS3 goodness and jQuery’s power.