HTML is the most used Internet application. html and can not do anything alone. then joined with the CSS program will only add to the beauty. Web pages can be easily designed with CSS taxes. Palakuvatarku CSS programs are all very difficult. Let’s see how to create a menu with CSS column. Using this menu transition, transform, such as the use of selector-can create a menu.
.tg-title
{
margin: 4px;
font-size: 1.2em;
letter-spacing: 1px;
width: 980px;
}
.tg-Label
{
display: inline-block;
width: 6em;
float: left;
padding: 8px;
}
.atitle
{
display: inline-block;
width: 7em;
margin-left:10px;
float: left;
padding: 8px;
background-color: #eee;
opacity: 0.75;
border-radius: 4px;
border: 1px solid #d49090;
border-color: rgba(123,2,2,0.1);
-webkit-transition: -webkit-transform 0.5s ease-out, background-color 1s ease-in;
-moz-transition: -moz-transform 0.5s ease-out, background-color 1s ease-in; -o-transition: -o-transform 0.5s
ease-out, background-color 1s ease-in;
}
.atitle:hover
{ -webkit-transform: rotate(6deg) scale(1.2); background-color: rgba(241, 43, 61, 0.7);
-moz-transform: rotate(2deg) scale(1.2); -o-transform: rotate(2deg) scale(1.2);
border-color: #d49999;
}
.atitle:nth-child(even):hover { -webkit-transform: rotate(-6deg) scale(1.2); -moz-transform: rotate(-2deg) scale(1.2);
-o-transform: rotate(-2deg) scale(1.2);
}
.atitle a:link { text-decoration: none; }
.atitle a:hover { text-decoration: none; } scale(1.2);
}
HTML Code:
<div class="tg-title"> <!-- <div class="tg-Label">Home page</div> --> <div class="atitle"><a href="link">text here</a></div> <div class="atitle"><a href="link">text here</a></div> <div class="atitle"><a href="link">text here</a></div> <div class="atitle"><a href="link">text here</a></div> <div class="atitle"><a href="link">text here</a></div> </div>
DEMO: http://demo.tutorialspots.com/css/transform-transition-menu.htm
