tab: one

updates tab #1 by wizardring
 › please don't remove the credits/steal/copy
 › message me for support
 › made on 26.08


> ATTENTION: if you want it on the right, follow this tutorial: http://goo.gl/m2lGDM

> follow the guidelines on the code to customize it

> copy and paste the following code before </style>

/* UPDATES TAB #1 by http://wizardring.tumblr.com */

#tab {width:140px; position:fixed; top:20px; left:20px; z-index:3; transition:all .5s ease;}
#tab:hover {transition:all .8s ease;}

/* box */
#tab_box {position:relative; text-align:justify; opacity:0; transition:all .5s ease; margin:15px -200px 8px; width:140px;}
#tab:hover #tab_box {opacity:1; transition:all 1s ease; margin:15px 0px 8px;}

/* the navicon: change the color of it by putting other color code instead of #eee*/
.border1 {width:20px; height:1px; background:#eee; position:absolute; margin-top:0px; transition:all .5s ease;}
.border2 {width:20px; height:1px; background:#eee; position:absolute; margin-top:5px; transition:all .5s ease;}
.border3 {width:20px; height:1px; background:#eee; position:absolute; margin-top:10px; transition:all .5s ease;}

#tab:hover .border1 {margin-top:0px; width:50px; transition:all .9s ease;}
#tab:hover .border2 {margin-top:0px; width:50px; margin-left:50px; transition:all .9s ease;}
#tab:hover .border3 {margin-top:0px; width:40px; margin-left:100px; transition:all .9s ease;}

/* title: change the title/background color by changing the #COLORCODE; */
.updates_title {padding-right:5px; text-align:left; background:#fff; color:#000; text-transform:uppercase; font-size:7.5px; transition:all .5s ease; position:absolute; font-weight:bold; width:auto; display:inline-block; margin-top:-6.5px; margin-left:-200px; opacity:0; letter-spacing:3px;}
#tab:hover .updates_title {transition:all 1.5s ease; opacity:1; margin-left:0px;}

/* tab divisor: change the color of it by putting other color code instead of #eee; if you want it centered, change the margin to 'margin:8px auto 0px' */
#tab_border {height:1px; background:#eee; width:100px; position:relative; margin:8px 0px 8px;}

/* UPDATES TAB #1 by http://wizardring.tumblr.com */

> copy and paste the following code after <body>

<!-- UPDATES TAB #1 by http://wizardring.tumblr.com -->
<div id="tab">
        <!--navicon-->
        <div class="border1"></div>
        <div class="border2"></div>
        <div class="border3"></div>
        <!--navicon-->

<!--tab title-->
<div class="updates_title">updates</div>
<!--box-->
<div id="tab_box">
<!--write things here, break a line by using <br>-->

     "We lose ourselves in things we love. We find ourselves there, too."
<!--to use a divider just copy and paste this: <div id="tab_border"></div>-->
       <div id="tab_border"></div>
leo, xvi, brazil; The most confused we ever get is when we’re trying to convince our heads of something our heart knows is a lie.

<!--write things here-->
</div>
</div>
<!-- UPDATES TAB #1 by http://wizardring.tumblr.com -->

> enjoy!