InsaneJournal

Tweak says, "lmao!!!"

Ally -- are you already gone? (wastintime) wrote in rp_tutorials,
@ 2011-09-24 23:10:00

Entry tags:

resources: general, tools: html

This is SO FREAKING COOL
Do you use Scribbld styles for info pages? Well, I have the coolest trick ever to show you...

→ Click me! ←

The Code

<html>
<head>
<style type="text/css">
html { overflow-y: scroll; }

.tabs {
    position: relative;
    min-height: 100px; /* This part sucks */
    clear: both;
    margin: 25px 0 60px 0;
}
.tab {
    float: left;
}
.tab label {
    background: #eee;
    padding: 10px;
    cursor: pointer;
    width: 90px;
    text-align: center;
    display: block;
    border: 1px solid #ccc;
    margin-left: -1px;
    position: relative;
    left: 1px;
}
.tab label i {
    font-style: normal;
    font-size: 10px;
    color: #aaa;
}
.tab [type=radio] {
    display: none;
}
.content {
    position: absolute;
    top: 40px;
    opacity: 0;
    left: 0;
    background: white;
    right: 0;
    bottom: 0;
    padding: 0px 20px;
    border: 1px solid #ccc;
    height: 0;
    
-webkit-transition: all 400ms cubic-bezier(0.250, 0.460, 0.450, 0.940);
   -moz-transition: all 400ms cubic-bezier(0.250, 0.460, 0.450, 0.940);
    -ms-transition: all 400ms cubic-bezier(0.250, 0.460, 0.450, 0.940);
     -o-transition: all 400ms cubic-bezier(0.250, 0.460, 0.450, 0.940);
        transition: all 400ms cubic-bezier(0.250, 0.460, 0.450, 0.940);
    
}
[type=radio]:checked ~ label {
    z-index: 2;
}
[type=radio]:checked ~ label ~ .content {
    z-index: 1;
    opacity: 1;
    height: 100%;
    padding: 20px;
}

#close-tab {
    position: absolute;
    z-index: -1;
    top: 0px;
}

#close-tab label {
    background: white;
    border-bottom: 1px solid white;
}

[type=radio]:checked ~ label ~ #close-tab {
    z-index: 3;
}
</style>
</head>
<body>
Click these!
<form>
  <div class="tabs">

<div class="content">
            ...freaking...
        </div>
    </div>

</div>
</form>
</body>
</html>

Source

And the best part? People have made other awesome code with it. Like this javascript-free slideshow!

I AM FLAILING SO HARD YOU HAVE NO IDEA

(Post a new comment)

	lobelia 2011-09-25 04:28 am UTC (link)
	jgklldkfgjkldfg If this was Facebook I'd like that & this post twenty-eleven times over. (Reply to this)

	ex_thehunger562 2011-09-25 07:13 am UTC (link)
	this is the single dopest thing i have seen in a long time. thank you so much! (Reply to this)

	hammertech 2011-09-25 08:20 am UTC (link)
	WHOA HOLD THE MFING PHONE. YOU CAN USE JAVASCRIPT ON SCRIBBLD? (Reply to this) (Thread)

	hammertech 2011-09-25 08:21 am UTC (link)
	WAIT I READ THAT WRONG GODAMMIT. THIS IS STILL BRILLIANT. AND THAT DEFAULT USER PIC THING YOU POSTED EARLIER, TOO. (Reply to this) (Parent) (Thread)

	wastintime 2011-09-26 06:57 pm UTC (link)
	TY TY I WISH THEY ALLOWED JAVASCRIPT, THOUGH I UNDERSTAND WHY THEY DON'T. BECAUSE PEOPLE ARE SHITTY AND WANT TO STEAL YOUR INFO AND STUFFS. (Reply to this) (Parent)

	foreverglued 2011-10-12 11:23 pm UTC (link)
	I'm actually working with this code to revamp a page for one of the games I mod, and I was wondering if you might be able to help me. For some reason the background area when you open the tabs isn't expanding to fit the length of text I'd like to install. The page I'm working on can be found here. Any advice, suggestions, or insight would be greatly appreciated! (Reply to this)