I have seen sites using flat menus, they are simple and crisp. But those icons can do more by applying effects on it. Today, here is a very easy trick (supposedly) but following the instruction is not enough, we need to understand them. I'm not that good but I try my best to teach. Anyway, we call the trick as "flat flipping menus/ buttons". And we will be introduced to CSS icon fonts. Please check the demo.
1. Going straight, paste the following into the <head>, this is from the demo. (<head> tips here)
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
<style>
ul.flatflipbuttons{
margin:0;
padding:0;
list-style:none;
-webkit-perspective: 10000px; /* larger the value, the less pronounced the 3D effect */
-moz-perspective: 10000px;
perspective: 10000px;
}
ul.flatflipbuttons li{
margin:0;
display: inline-block;
width: 100px; /* dimensions of buttons. */
height: 100px;
margin-right: 15px; /* spacing between buttons */
background: white;
text-transform: uppercase;
text-align: center;
}
ul.flatflipbuttons li a{
display:table;
font: bold 36px Arial; /* font size, pertains to icon fonts specifically */
width: 100%;
height: 100%;
margin-bottom: 4px;
color: black;
background: #3B9DD5;
text-decoration: none;
outline: none;
-webkit-transition:all 300ms ease-out; /* CSS3 transition. Last value is pause before transition play */
-moz-transition:all 300ms ease-out;
transition:all 300ms ease-out;
}
ul.flatflipbuttons li:nth-of-type(1) a{
color: white;
background: #3B9DD5;
}
ul.flatflipbuttons li:nth-of-type(2) a{
background: #A1CD3A;
}
ul.flatflipbuttons li:nth-of-type(3) a{
background: #80C5EC;
}
ul.flatflipbuttons li:nth-of-type(4) a{
color: white;
background: #635746;
}
ul.flatflipbuttons li:nth-of-type(5) a{
background: #F2C96D;
}
ul.flatflipbuttons li:nth-of-type(6) a{
color: white;
background: #8A0808;
}
ul.flatflipbuttons li a span{
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
display: table-cell;
vertical-align: middle;
width: 100%;
height: 100%;
-webkit-transition: all 300ms ease-out; /* CSS3 transition. */
-moz-transition: all 300ms ease-out;
transition: all 300ms ease-out;
}
ul.flatflipbuttons li b{ /* CSS for text beneath button */
display: block;
position: relative;
width: 100%;
opacity: 0;
-webkit-transition: all 300ms ease-out 0.2s; /* CSS3 transition. 0.2s delay */
-moz-transition: all 300ms ease-out 0.2s;
transition: all 300ms ease-out 0.2s;
}
ul.flatflipbuttons li a img{ /* CSS for image if defined inside button */
border-width: 0;
vertical-align: middle;
}
ul.flatflipbuttons li:hover a{
-webkit-transform: rotateY(180deg); /* flip horizontally 180deg*/
-moz-transform: rotateY(180deg);
transform: rotateY(180deg);
background: #c1e4ec; /* bgcolor of button onMouseover*/
-webkit-transition-delay: 0.2s;
-moz-transition-delay: 0.2s;
transition-delay: 0.2s;
}
ul.flatflipbuttons li:hover a span{
color: black; /* color of icon font onMouseover */
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg); /* flip horizontally 180deg*/
transform: rotateY(180deg);
-webkit-transition-delay: 0.2s;
-moz-transition-delay: 0.2s;
transition-delay: 0.2s;
}
ul.flatflipbuttons li:hover b{
opacity: 1;
}
/* CSS for 2nd menu below specifically */
ul.second li a{
background: #eee !important;
}
ul.second li a:hover{
background: #ddd !important;
}
</style>
<style>
ul.flatflipbuttons{
margin:0;
padding:0;
list-style:none;
-webkit-perspective: 10000px; /* larger the value, the less pronounced the 3D effect */
-moz-perspective: 10000px;
perspective: 10000px;
}
ul.flatflipbuttons li{
margin:0;
display: inline-block;
width: 100px; /* dimensions of buttons. */
height: 100px;
margin-right: 15px; /* spacing between buttons */
background: white;
text-transform: uppercase;
text-align: center;
}
ul.flatflipbuttons li a{
display:table;
font: bold 36px Arial; /* font size, pertains to icon fonts specifically */
width: 100%;
height: 100%;
margin-bottom: 4px;
color: black;
background: #3B9DD5;
text-decoration: none;
outline: none;
-webkit-transition:all 300ms ease-out; /* CSS3 transition. Last value is pause before transition play */
-moz-transition:all 300ms ease-out;
transition:all 300ms ease-out;
}
ul.flatflipbuttons li:nth-of-type(1) a{
color: white;
background: #3B9DD5;
}
ul.flatflipbuttons li:nth-of-type(2) a{
background: #A1CD3A;
}
ul.flatflipbuttons li:nth-of-type(3) a{
background: #80C5EC;
}
ul.flatflipbuttons li:nth-of-type(4) a{
color: white;
background: #635746;
}
ul.flatflipbuttons li:nth-of-type(5) a{
background: #F2C96D;
}
ul.flatflipbuttons li:nth-of-type(6) a{
color: white;
background: #8A0808;
}
ul.flatflipbuttons li a span{
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
display: table-cell;
vertical-align: middle;
width: 100%;
height: 100%;
-webkit-transition: all 300ms ease-out; /* CSS3 transition. */
-moz-transition: all 300ms ease-out;
transition: all 300ms ease-out;
}
ul.flatflipbuttons li b{ /* CSS for text beneath button */
display: block;
position: relative;
width: 100%;
opacity: 0;
-webkit-transition: all 300ms ease-out 0.2s; /* CSS3 transition. 0.2s delay */
-moz-transition: all 300ms ease-out 0.2s;
transition: all 300ms ease-out 0.2s;
}
ul.flatflipbuttons li a img{ /* CSS for image if defined inside button */
border-width: 0;
vertical-align: middle;
}
ul.flatflipbuttons li:hover a{
-webkit-transform: rotateY(180deg); /* flip horizontally 180deg*/
-moz-transform: rotateY(180deg);
transform: rotateY(180deg);
background: #c1e4ec; /* bgcolor of button onMouseover*/
-webkit-transition-delay: 0.2s;
-moz-transition-delay: 0.2s;
transition-delay: 0.2s;
}
ul.flatflipbuttons li:hover a span{
color: black; /* color of icon font onMouseover */
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg); /* flip horizontally 180deg*/
transform: rotateY(180deg);
-webkit-transition-delay: 0.2s;
-moz-transition-delay: 0.2s;
transition-delay: 0.2s;
}
ul.flatflipbuttons li:hover b{
opacity: 1;
}
/* CSS for 2nd menu below specifically */
ul.second li a{
background: #eee !important;
}
ul.second li a:hover{
background: #ddd !important;
}
</style>
2. Drag one "embed code" to your page and paste any the following:
Using Icon Fonts
<ul class="flatflipbuttons">
<li><a href="http://www.myweeblytricks.com" title="Home"><span class="icon-home"></span></a> <b>Home</b></li>
<li><a href="http://www.myweeblytricks.com"><span class="icon-sort"></span></a> <b>Sort</b></li>
<li><a href="http://www.myweeblytricks.com"><span class="icon-question"></span></a> <b>Question</b></li>
<li><a href="http://www.myweeblytricks.com"><span class="icon-search"></span></a> <b>Search</b></li>
</ul>
</br>
<li><a href="http://www.myweeblytricks.com" title="Home"><span class="icon-home"></span></a> <b>Home</b></li>
<li><a href="http://www.myweeblytricks.com"><span class="icon-sort"></span></a> <b>Sort</b></li>
<li><a href="http://www.myweeblytricks.com"><span class="icon-question"></span></a> <b>Question</b></li>
<li><a href="http://www.myweeblytricks.com"><span class="icon-search"></span></a> <b>Search</b></li>
</ul>
</br>
Using photos
<ul class="flatflipbuttons second">
<li><a href="http://www.myweeblytricks.com"><span><img src="http://myweeblytricksdemo.weebly.com/files/theme/rss.png" /></span></a></li>
<li><a href="http://www.myweeblytricks.com"><span><img src="http://myweeblytricksdemo.weebly.com/files/theme/facebook.png" /></span></a></li>
<li><a href="http://www.myweeblytricks.com"><span><img src="http://myweeblytricksdemo.weebly.com/files/theme/twitter.png" /></span></a></li>
<li><a href="http://www.myweeblytricks.com"><span><img src="http://myweeblytricksdemo.weebly.com/files/theme/yahoo.png" /></span></a></li>
</ul>
<li><a href="http://www.myweeblytricks.com"><span><img src="http://myweeblytricksdemo.weebly.com/files/theme/rss.png" /></span></a></li>
<li><a href="http://www.myweeblytricks.com"><span><img src="http://myweeblytricksdemo.weebly.com/files/theme/facebook.png" /></span></a></li>
<li><a href="http://www.myweeblytricks.com"><span><img src="http://myweeblytricksdemo.weebly.com/files/theme/twitter.png" /></span></a></li>
<li><a href="http://www.myweeblytricks.com"><span><img src="http://myweeblytricksdemo.weebly.com/files/theme/yahoo.png" /></span></a></li>
</ul>
3. Ok, I cannot explain all the things above but I wanna add some details about it. On the code you add in the <head>, find these lines:
ul.flatflipbuttons li:nth-of-type(1) a{
color: white;
background: #3B9DD5;
}
color: white;
background: #3B9DD5;
}
This is where you're going to customize each boxes background, the icon color and the arrangement of boxes. You can add more boxes by adding that whole short tag and just replace the values.
4. Now on the code we insert in the page, lets pull out one line from the first example and study:
<li><a href="http://www.myweeblytricks.com"><span class="icon-sort"></span></a> <b>Sort</b></li>
The red line will be the link you're pointing to, the green part is the unique name for the icon font and the blue will be the text for the icon.
To add more boxes just copy and insert the whole line above and change the values. So where are we getting this icon fonts? It is actually in FontAwesome. You can check their sets of icons on their site. They use "fa-sort" for the icon's identity, just pick the word/s after "fa-" and place it in your icon name.
You're done. Experiment with the code.
0 comments: