Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- #candywrapper {/*the container for all 3 boxes (this is why the other boxes get pushed down when you hover one of them)*/
- position:fixed;
- width:130px;
- top:10px;
- left:10px;
- z-index:9999999999999999;
- -webkit-transition: all 0.5s ease-in-out;
- -moz-transition: all 0.5s ease-in-out;
- -o-transition: all 0.5s ease-in-out;
- }
- /* tutorial by kimsjongin.tumblr.com and inspired by thisis-mydesign (please leave this note!)
- if you only want one updates tab, erase anything that says #tab2 or #tab3; for instance, on the line that says #tab1, #tab2, #tab3 { change it to just #tab1 { */
- #titletab {
- display:inline-block;
- color:#999;/*color of the titles on the updates boxes*/
- background:#fff;/*background color of the title tab (just make sure it's the same color as your theme background is)*/
- letter-spacing:0px;
- font-family:calibri;
- font-size:8px;
- text-transform:uppercase;
- margin-left:10px;
- padding:4px 5px 3px 5px;
- -webkit-transition: all 0.5s ease-in-out;
- -moz-transition: all 0.5s ease-in-out;
- -o-transition: all 0.5s ease-in-out;
- }
- #tab2, #tab1, #tab3 {
- margin-bottom:5px;/*space between the tabs*/
- }
- #tab1:hover #titletab, #tab2:hover #titletab, #tab3:hover #titletab {
- margin-left:70px;/*how far the title moves after you hover*/
- letter-spacing:1px;
- -webkit-transition: all 0.5s ease-in-out;
- -moz-transition: all 0.5s ease-in-out;
- -o-transition: all 0.5s ease-in-out;
- }
- #titletab:after{/*the top border (the one that extends first)*/
- content:'';
- position:fixed;
- width:0px;
- height:1px;
- margin-top:5px;
- left:15px;
- background:#999;/*color of the border*/
- -webkit-transition: all 0.5s ease-in-out;
- -moz-transition: all 0.5s ease-in-out;
- -o-transition: all 0.5s ease-in-out;
- }
- #tab1:hover #titletab:after, #tab2:hover #titletab:after, #tab3:hover #titletab:after{
- width:65px;/*width of top line after hover*/
- -webkit-transition: all 0.5s ease-in-out;
- -moz-transition: all 0.5s ease-in-out;
- -o-transition: all 0.5s ease-in-out;
- }
- #titletab:before{
- z-index:999999999999;
- content:'';
- position:fixed;
- width:8px;/*width of lil box*/
- height:8px;/*height of lil box*/
- margin-top:1px;
- left:10px;
- background:#999;/*color of the lil box*/
- border:1px solid #999;/*border color of the lil box*/
- -webkit-transition: all 0.5s ease-in-out;
- -moz-transition: all 0.5s ease-in-out;
- -o-transition: all 0.5s ease-in-out;
- }
- #tab1:hover #titletab:before, #tab2:hover #titletab:before, #tab3:hover #titletab:before {
- background:#fff;/*background color of the lil box after hover*/
- border:1px solid #999;/*border color of the lil box after hover*/
- -webkit-transition: all 0.5s ease-in-out;
- -moz-transition: all 0.5s ease-in-out;
- -o-transition: all 0.5s ease-in-out;
- }
- #in {/*here, you can style the text on the inside as well as the color of the second border*/
- font-size:9px;/*font size*/
- font-family:calibri;/*font; can be arial, baskerville, whatever*/
- padding:0px 10px;
- height:0px;
- width:100px;
- margin-top:-2px;
- margin-left:5px;
- border-left:1px solid #999;/*color of the second border; just change #999 to whatever color you want (pick one at colorpicker.com)*/
- color:transparent;
- overflow:hidden;
- -webkit-transition: all 0.5s ease-in-out;
- -moz-transition: all 0.5s ease-in-out;
- -o-transition: all 0.5s ease-in-out;
- }
- #tab1:hover #in, #tab3:hover #in, #tab2:hover #in{
- color:#999;/*color of the text on the inside*/
- height:95px;/*height of border/text after hovering; if your text doesn't fit in the box, make this bigger*/
- padding:10px;
- margin-top:-9px;
- -webkit-transition: all 0.5s ease-in-out;
- -moz-transition: all 0.5s ease-in-out;
- -o-transition: all 0.5s ease-in-out;
- transition-delay: 0.4s;/*this and the line below are how long you wait before the second line starts to extend down */
- -webkit-transition-delay: 0.4s;
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement