Currently browsing: Tutorials (Page 6)

Adding transparent text areas to images is very popular in design and useful in many situations, such as, when an image is very ‘full’ and you need to add text. In this tutorial we will be adding text, that is fully transparent, which means you will be able to see the image below, and around …

Mask overlaying is a very powerful feature in CSS. In our example we will present the content of website (made from a screenshot) in a laptop with a nice smooth animation that will slowly reveal the content of the whole website. I have used this for a preview of our latest WordPress WooCommerce Theme, called …

In today’s tutorial we will create a set of featured boxes that will create a nice text flying effect when you move your mouse over them. We will take advantage of the CSS3 custom animations and create a set of our own animations. I recommend that you download the source files first and check the live …

Recently we developed a simple Twitter widget for WordPress. I wanted to bring a little life into it so I created an animated Bird that moves each time you hover over the certain Tweet in the widget. This is a very simple CSS3 trick and doesn’t need any advanced knowledge of HTML or CSS. I recommend …

In previous article of our CSS3 Tricks column I showed you how to create rounded buttons and then animate them with CSS3 only. In today’s tutorial we will make animated hover effects on images without any help of javascript. In our last example we will even make a simple 3D flip. I recommend that you …