Drop caps have been around for years in the print industry, but they are still pretty rare in the web world despite the :first-letter selector having been around for a fair few years. Let’s take a look at how we can create a cool drop cap for our web designs and spice it up with some stylish CSS3 text-shadow effects.
When designing a pricing table for a product or service, your job as a web designer/developer is to make sure that the table is easy to understand, intuitive and clear. This way, you will help users to choose the best plan for theirs needs.
So, in this article you’ll learn how to build an awesome CSS3 pricing table, with no images and minimal HTML markup.
Today we will create a set of nice typography effects for big headlines using CSS3 and jQuery. There are many things we can do with CSS3 animations and transitions and we’ll explore some of the possibilities.
When I saw that simple but yet amazing effect, when you hover over title in “Unitasking” post by Trent Walton, I was immediately in love.
So, in this post we will see how to achieve that effect with a little help of lettering.js and css3 transition property.
Still hyped by the possibilities of CSS3, I want to share some CSS3 button experiments with you. The idea is to create some animated link elements with different styles, hover effects and active states.
There are so many great things we can do with the additional properties and possibilities that CSS3 brings along. Today I want to show you how to experiment with text shadows and with transitions in order to achieve a blur effect that we’ll apply to a menu on hovering over the elements. The main idea is to blur the other items while enhancing the one we are currently hovering.
Being in the mood for experimenting with CSS3, I’d like to show you some creative menu hover effects in today’s tutorial. The idea is to have a simple composition of elements, an icon, a main title and a secondary title, that will be animated on hover using only CSS transitions and animations. We’ll be exploring some different effects for the elements.
This is a pretty simple tutorial where we will build the skill animation bar for your about page. I remember this animations are only visible in Firefox, Safari and Chrome. Let’s see how to create it.