Dec 8, 2015
Card Menu Animation
Use this code snippet to add fullscreen tab animation to your website. Designed by Bennett Feely.
seen from Malaysia
seen from Germany
seen from Germany
seen from Saudi Arabia
seen from United States
seen from United States
seen from Singapore
seen from China
seen from China
seen from China
seen from Belarus
seen from China
seen from Suriname
seen from Brazil
seen from United States
seen from Malaysia
seen from United States
seen from United States
seen from Malaysia
seen from China
Card Menu Animation
Use this code snippet to add fullscreen tab animation to your website. Designed by Bennett Feely.
New Tabs Codes
Here is a new tabs code i made.
It has a glitter border, and cool flip animation with an eclipse shape. and a custom font included
This work is licensed under the Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.
This means no redistrubition of this code, and must have a credit to me if you use it. Do not claim code as your own.
Insert this code under your <head> tag
<style> @font-face { font-family: 'Dandelion'; src: url('http://static.tumblr.com/blpgwiz/hgJm8ckkk/dandelion_in_the_spring-webfont.ttf') format('truetype'); font-weight: normal; font-style: normal; } .Chandler { font-family: 'Dandelion'; height: 105px; width: 30px; color: #FF69B4; background-color: #fff; /* background color of tab*/ border: 10px solid black; -moz-border-image:url(http://static.tumblr.com/blpgwiz/Naqmiqlkv/tumblr_mhls9gdhn11riyn3ko1_400.gif) 30 30 stretch; /* Firefox */ -webkit-border-image:url(http://static.tumblr.com/blpgwiz/Naqmiqlkv/tumblr_mhls9gdhn11riyn3ko1_400.gif) 30 30 stretch; /* Safari */ -o-border-image:url(http://static.tumblr.com/blpgwiz/Naqmiqlkv/tumblr_mhls9gdhn11riyn3ko1_400.gif) 30 30 stretch; /* Opera */ border-image:url(http://static.tumblr.com/blpgwiz/Naqmiqlkv/tumblr_mhls9gdhn11riyn3ko1_400.gif) 30 30 stretch; position: fixed; margin-top: 160px; /*How far from the top*/ Left: 5px; z-index:999999999; -webkit-transition: 0.6s ease-in-out; padding: 10px; -moz-box-shadow: 0px 0px 5px 2px black; /*Glow color, Delete this line and the two below if you do not want glow */ -webkit-box-shadow: 0px 0px 5px 2px black; /*Glow color, Delete this line and the two below if you do not want glow */ box-shadow: 0px 0px 5px 2px black;/*Glow color, Delete this line and the two below if you do not want glow */ } .Monica { font-family: 'Dandelion'; width: 300px; /*If you adjust with width, make sure you adjust the margin left as well*/ height: 250px; overflow: auto; text-shadow: 0 0 0.1em #000; border-top-left-radius: 50px; border-bottom-right-radius: 50px; background: #fcf; /*content background color*/ border: 3px #fcf solid; /*Border color and style of the box */ position: fixed; margin-top: -10px; /*If you have a border, at the border number onto this number*/ Left: -350px; /*This must be negative whatever the width is plus 10px */ z-index:999999999; -webkit-transition: 0.6s ease-in-out; -moz-transition: 0.6s ease-in-out; -o-transition: 0.6s ease-in-out; -ms-transition: 0.6s ease-in-out; transition: 0.6s ease-in-out; padding: 10px; -moz-box-shadow: 0px 0px 5px 2px black; /*Glow color, Delete this line and the two below if you do not want glow */ -webkit-box-shadow: 0px 0px 5px 2px black; /*Glow color, Delete this line and the two below if you do not want glow */ box-shadow: 0px 0px 5px 2px black;/*Glow color, Delete this line and the two below if you do not want glow */ } .Chandler:hover .Monica { z-index:1000; left: 90px; -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -o-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); -webkit-transition: 0.6s ease-in-out; -moz-transition: 0.6s ease-in-out; -o-transition: 0.6s ease-in-out; -ms-transition: 0.6s ease-in-out; transition: 0.6s ease-in-out; overflow: auto; } .Monica::-webkit-scrollbar { width: 10px; background-color: #fcf; } .Monica::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); border-radius: 10px; background-color: #fff; } .Monica::-webkit-scrollbar-thumb { border-radius: 10px; -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); background-color: #fcf; } .Monica::-webkit-scrollbar-corner { background: #transparent; } .Monica:hover { z-index:1000; left: 100px; -webkit-transition: 0.6s ease-in-out; overflow: auto; } .rachel{ -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -o-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); margin-top: 30px; font-size: 30px; position: absolute; margin-left: -15px; text-align: center; } </style>
Now insert this code under your <body> tag
<div class="Chandler" style="margin-top: 25px;"> <div class="rachel"> Tab Name </div> <div class="Monica"> <center> INSERT YOUR TAB CONTENT HERE, To find this, pretty ctrl+f and search lewport </div> </div>
Customizing the colors and images
Customizing the tab
All these are to customize the tab (where it says tab, before you hover) MUST MAKE SURE YOU ARE UNDER THE .Chandler TAB
Blue- The color the the tab text Pink- The background color Green- The image of the border Yellow- how far from the tob the tab is
Customizing the Slide Out Box
This is to customize the box that has your content on it, that appears when you hover over the tab
MUST MAKE SURE YOU ARE UNDER THE .Monica DIV CSS
Pink- The width of the box Purple- The height of the box Blue- The background of the box Green- The border color the box
Customize the scroll bar
This customizes the colors of the scrollbar that appears in the box if your content is more than the height
Pink- The background color of the actual scrollbar Green- The color of the track, or the background of the scrollbar