This article will show some techniques to create effects using CSS3 on the example of the menus. The beauty of my idea is that it would simply compose elements, such as icons of the main title and secondary title, which will be animated by the cursor moving using only CSS transitions and CSS animation. We will consider a few different effects for the elements.

Icons that are being used in the demo are the typeface of Web symbols. The typeface is created by Just Be Nice studio.

HTML Layout

HTML menu structure will be as an unordered list where each element is a link, which includes the span with an icon and div with the main and secondary title:

<ul class="ca-menu">

<span class="ca-icon">A</span>
<div class="ca-content">
<h2 class="ca-main">Articles</h2>
<h3 class="ca-sub">Web development articles</h3>
</div>

...
</ul>

As we use the font for the icons, we will write the corresponding letter for the icon.

CSS

The general styles will have a symbolic font for all the examples:

@font-face {
font-family: 'WebSymbolsRegular';
src: url('websymbols/websymbols-regular-webfont.eot');
src: url('websymbols/websymbols-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('websymbols/websymbols-regular-webfont.woff') format('woff'),
url('websymbols/websymbols-regular-webfont.ttf') format('truetype'),
url('websymbols/websymbols-regular-webfont.svg#WebSymbolsRegular') format('svg');
font-weight: normal;
font-style: normal;
}
The path to the files is relative to CSS file, therefore, they will be in a folder css/websymbols /.

The big advantage to use the symbolic font is that we can use a variety of beautiful effects to it; for example, a text with shadow. We can also extend it to our needs.

The style for a labeled list would be almost the same for each example, we simply adapt its width:

.ca-menu{
padding: 0;
margin: 20px auto;
width: 500px;
}
The following example will show the style elements with the effects. In the first example, we consider the styles of all elements, and in other respects, we will focus on the differences.

Note: The following examples will not have the prefixes for each browser, but you will find all the prefixes in the demo files.

Example 1



We will consider a vertical menu in this example, where we will change the size of the elements and the background color of each item.

Let us define the style of the list:

.ca-menu li{
width: 500px;
height: 100px;
overflow: hidden;
display: block;
background: #fff;
box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
margin-bottom: 4px;
border-left: 10px solid #000;
transition: all 300ms ease-in-out;
}
.ca-menu li:last-child{
margin-bottom: 0px;
}

The transition will be for all properties, as we want to change the border color and background color.

Link element will have the following style:

.ca-menu li a{
text-align: left;
display: block;
width: 100%;
height: 100%;
color: #333;
position:relative;
}

Let us define a style for individual items. Span icon will have the following style:

.ca-icon{
font-family: 'WebSymbolsRegular', cursive;
font-size: 20px;
text-shadow: 0px 0px 1px #333;
line-height: 90px;
position: absolute;
width: 90px;
left: 20px;
text-align: center;
transition: all 300ms linear;
}

As you can see, we use the web symbols as a font family. Each letter will be an icon.

Wrapper for the content elements will have the following style:

.ca-content{
position: absolute;
left: 120px;
width: 370px;
height: 60px;
top: 20px;
}

Content of elements will vary depending on the font size and will have a linear transition:

.ca-main{
font-size: 30px;
transition: all 300ms linear;
}
.ca-sub{
font-size: 14px;
color: #666;
transition: all 300ms linear;
}
Now we will change the font size and color:

.ca-menu li:hover{
border-color: #fff004;
background: #000;
}
.ca-menu li:hover .ca-icon{
color: #fff004;
text-shadow: 0px 0px 1px #fff004;
font-size: 50px;
}
.ca-menu li:hover .ca-main{
color: #fff004;
font-size: 14px;
}
.ca-menu li:hover .ca-sub{
color: #fff;
font-size: 30px;
}

As we have defined a transition for each of these elements, the changes will be "animated."

Example 2



We will add some animation to the content elements in the second example. We need to animate their top and bottom:

.ca-menu li:hover{
background: #e1f0fa;
}
.ca-menu li:hover .ca-icon{
font-size: 40px;
color: #259add;
opacity: 0.8;
text-shadow: 0px 0px 13px #fff;
}
.ca-menu li:hover .ca-main{
opacity: 1;
color:#2676ac;
animation: moveFromTop 300ms ease-in-out;
}
.ca-menu li:hover .ca-sub{
opacity: 1;
animation: moveFromBottom 300ms ease-in-out;
}

Let us define two animations. The first will begin with the insertion of the corresponding element of 200% down endwise Y, which means that it will be shifted down. In addition, it will have opacity 0. Then it will be animated by changing translateY to 0%:

@keyframes moveFromBottom {
from {
opacity: 0;
transform: translateY(200%);
}
to {
opacity: 1;
transform: translateY(0%);
}
}
The second animation will move the top element in the same way:

@keyframes moveFromTop {
from {
opacity: 0;
transform: translateY(-200%);
}
to {
opacity: 1;
transform: translateY(0%);
}
}
Example 3



In this example, we want to change the background and color of text by the cursor pointing. We will be rotating and zooming an icon. This we can do using transition by increasing the font size of icons:

.ca-menu li:hover{
background-color: #000;
}
.ca-menu li:hover .ca-icon{
color: #f900b0;
font-size: 120px;
opacity: 0.2;
left: -20px;
transform: rotate(20deg);
}
.ca-menu li:hover .ca-main{
color: #f900b0;
opacity: 0.8;
}
.ca-menu li:hover .ca-sub{
color: #fff;
opacity: 0.8;
}
Example 4



Examples 4 to 8 will use a different layout for the menus. Elements will be placed next to each other:

.ca-menu li{
width: 200px;
height: 300px;
overflow: hidden;
position: relative;
float: left;
border: 5px solid #fff;
background: #e2f0ff;
box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
margin-right: 4px;
transition: all 300ms linear;
}
.ca-menu li:last-child{
margin-right: 0px;
}
Icon will be placed at the top of the center of the item:

.ca-icon{
font-family: 'WebSymbolsRegular', cursive;
color: #c5e4f4;
font-size: 90px;
text-shadow: 1px 0px 1px rgba(255,255,255,0.7);
line-height: 150px;
position: absolute;
width: 100%;
height: 50%;
left: 0px;
top: 0px;
text-align: center;
transition: all 200ms linear;
}

Content wrapper will be placed on the bottom part of the element:

. .ca-content{
position: absolute;
left: 0px;
width: 100%;
height: 50%;
top: 50%;
}

Main and secondary headers will have the following style:

.ca-main{
font-size: 30px;
color: #005382;
opacity: 0.8;
text-align: center;
transition: all 200ms linear;
}
.ca-sub{
text-align:center;
font-size: 14px;
color: #666;
line-height: 40px;
opacity: 0.8;
transition: all 200ms linear;
}
When moving, we will blur the icon, change the background color and move the content elements above and below:

.ca-menu li:hover{
background-color: #fff;
}
.ca-menu li:hover .ca-icon{
text-shadow: 0px 0px 20px #c5e4f4;
color: transparent;
animation: moveFromTop 400ms ease;
}
.ca-menu li:hover .ca-main{
color: #000;
animation: moveFromTop 300ms ease;
}
.ca-menu li:hover .ca-sub{
color: #000;
animation: moveFromBottom 500ms ease;
}
Blurring of an icon happens, when we set its color as opacity and create the text shadow with a lot of blurriness for it.

Animation will be the same as the one we have used in the earlier example, except for translation values for the animation moveFromTop. Here we set translateY to -300%.

Example 5



In the fifth example, we move out the icon to the left, title to the right and the secondary title below:

.ca-menu li:hover{
background:#fff;
}
.ca-menu li:hover .ca-icon{
color: #afa379;
font-size: 90px;
opacity: 0.1;
animation: moveFromLeft 400ms ease;
}
.ca-menu li:hover .ca-main{
color: #afa379;
animation: moveFromRight 300ms ease;
}
.ca-menu li:hover .ca-sub{
color: #000;
animation: moveFromBottom 500ms ease;
}
We already know moveFromBottom animation, let us look at moveFromLeft, which moves the corresponding element to the left, setting translateX to 100%, and then moves it back to its original position:

@keyframes moveFromLeft{
from {
transform: translateX(-100%);
}
to {
transform: translateX(0%);
}
}

We will set translateX to 100% at beginning in animation moveFromRight.

Example 6



In this example, we want the title to slide to the left and rotate at the same time:

.ca-menu li:hover{
background-color: #000;
}
.ca-menu li:hover .ca-icon{
color: #fff;
font-size: 90px;
}
.ca-menu li:hover .ca-main{
color: #00ccff;
animation: moveFromLeftRotate 300ms ease;
}
.ca-menu li:hover .ca-sub{
color: #fff;
animation: moveFromBottom 500ms ease;
}
moveFromLeftRotate animation will move and turn the item:

@keyframes moveFromLeftRotate{
from {
transform: translateX(-100%) rotate(-90deg);
}
to {
transform: translateX(0%) rotate(0deg);
}
}
Example 7



In this example, we will install a secondary title on the bottom of the element:

.ca-sub{
text-align:center;
font-size: 14px;
color: #666;
line-height: 40px;
opacity: 0.8;
position: absolute;
bottom: 0;
width: 100%;
transition: all 200ms linear;
}
We want the title to slide at the bottom and change the color of its background. Icon will move from the bottom, while the main title will be zoomed:

.ca-menu li:hover{
background-color: #000;
}
.ca-menu li:hover .ca-icon{
color: #ff2020;
animation: moveFromBottom 300ms ease;
}
.ca-menu li:hover .ca-main{
color: #ff2020;
animation: smallToBig 300ms ease;
}
.ca-menu li:hover .ca-sub{
color: #000;
background-color: #ff2020;
animation: moveFromBottom 500ms ease;
}

smallToBig animation is an example how to use the transformation:

@keyframes smallToBig{
from {
transform: scale(0.1);
}
to {
transform: scale(1);
}
}
Example 8



In this example, we want to zoom the entire list item with by pointing the cursor. We will do this by ranging it up to 1.1.

We also have a special span with an icon ID # heart. This span will be red and when you move it, we will use smallToBig animation in a special way: we will endlessly rotate the animation, creating the effect of the beating heart.

.ca-menu li:hover{
background-color: #000;
z-index:999;
transform: scale(1.1);
}
.ca-menu li:hover .ca-icon{
color: #ccff00;
font-size: 90px;
opacity:0.3;
}
.ca-menu li:hover .ca-icon#heart{
animation: smallToBig 900ms alternate infinite ease;
}
.ca-menu li:hover .ca-main{
color: #ccff00;
animation: smallToBig 300ms ease;
}
.ca-menu li:hover .ca-sub{
color: #ccff00;
animation: moveFromBottom 500ms ease;
}
Example 9



The last two examples will be in the circles, so we change the style for the list of elements:

.ca-menu li{
width: 230px;
height: 230px;
border: 10px solid #f6f6f6;
overflow: hidden;
position: relative;
float:left;
background: #fff;
margin-right: 4px;
box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
border-radius: 125px;
transition: all 400ms linear;
}
In order to create a circle, we need to set border-radius to the outer half of the width / height of the element.

We will do the following when moving the cursor:

. ca-menu li:hover{
background: #f7f7f7;
border-color: #fff;
transform: rotate(360deg);
}
.ca-menu li:hover .ca-icon{
color: #555;
font-size: 60px;
}
.ca-menu li:hover .ca-main{
display: none;
}
.ca-menu li:hover .ca-sub{
opacity: 0.8;
}
Item will be rotated at 360 degrees, and the main title will disappear, allowing the secondary title to appear (its opacity was originally set to 0).

Example 10



In the last example, list elements will have the left margin of 48px. This will allow making the overlapping. Then when moving, we will range them and rise z-index, so that the active item will be on the top:

.ca-menu li:hover{
border-color: #333;
z-index: 999;
transform: scale(1.1);
}
.ca-menu li:hover .ca-icon{
color: #000;
font-size: 60px;
text-shadow: 0px 0px 1px #000;
animation: moveFromBottom 300ms ease;
}
.ca-menu li:hover .ca-main{
color: #000;
animation: moveFromBottom 500ms ease;
}

Please note that the animation and transitions will only work with the recent versions of modern Web browsers, such as Google Chrome, Apple Safari, Opera and Mozilla Firefox.

Here can be downloaded the example files.