updates tab

(before </style> </head> <body> )

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

#tab {width:140px; position:fixed; top:60px; 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:100px -200px 10px; 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:#000000; position:absolute; margin-top:0px; transition:all .5s ease;}
.border2 {width:20px; height:1px; background:#000000; position:absolute; margin-top:5px; transition:all .5s ease;}
.border3 {width:20px; height:1px; background:#000000; 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:#fbfbfb; 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:-6px; margin-left:-200px; opacity:0; letter-spacing:3px;}
#tab:hover .updates_title {transition:all 1s 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 */


(after </style> </head> <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>-->

<b>"</b>Fairy tales are more than true: not because they tell us that dragons exist, but because they tell us that dragons can be beaten.<b>"</b>
<!--to use a divider just copy and paste this: <div id="tab_border"></div>-->

<div id="tab_border"></div>

jes, she/her, gemini: people want things they can't have

<div id="tab_border"></div>

this is my multifandom, aes etc. Main blog: <a href="http://www.k-ths.tumblr.com">@k-ths</a>

<div id="tab_border"></div>

<b>Updates:</b>

<p>- new updates tab</p>

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