InsaneJournal

Tweak says, "ij rocks mad hard"

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

	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)