InsaneJournal
Tweak says, "No ossifer, I'm not drunk!"
Username:
Password:
Remember Me
Create Account
IJ Login
OpenID Login
Search by
:
Username
E-mail
Region
Interest
AOL IM
ICQ Number
Yahoo! ID
MSN Username
Jabber
View
Create Account
IJ Login
OpenID Login
Journal
Post
Edit Entries
Customize Journal
Comment Settings
Recent Comments
Manage Tags
Account
Manage Account
Viewing Options
Manage Profile
Manage Notifications
Manage Pictures
Manage Schools
Account Status
Friends
Edit Friends
Edit Custom Groups
Friends Filter
Nudge Friends
Invite
Create RSS Feed
Asylums
Post
Asylum Invitations
Manage Asylums
Create Asylum
Site
Support
Upgrade Account
FAQs
Search By Location
Search By Interest
Search Randomly
Ally -- are you already gone? (
wastintime
) wrote in
rp_tutorials
,
@
2011
-
09
-
24
23:10:00
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="tab"> <input type="radio" id="tab-1" name="tab-group-1"> <label for="tab-1">List 1 <i>▼</i></label> <div class="tab" id="close-tab"> <input type="radio" id="tab-close" name="tab-group-1"> <label for="tab-close">List 1 <i>▲</i></label> </div> <div class="content"> This is so...</a> </div> </div> <div class="tab"> <input type="radio" id="tab-2" name="tab-group-1"> <label for="tab-2">List 2 <i>▼</i></label> <div class="tab" id="close-tab"> <input type="radio" id="tab-close" name="tab-group-1"> <label for="tab-close">List 2 <i>▲</i></label> </div> <div class="content"> ...freaking... </div> </div> <div class="tab"> <input type="radio" id="tab-3" name="tab-group-1"> <label for="tab-3">List 3 <i>▼</i></label> <div class="tab" id="close-tab"> <input type="radio" id="tab-close" name="tab-group-1"> <label for="tab-close">List 3 <i>▲</i></label> </div> <div class="content"> cool! </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
(
Read comments
)
Post a comment in response:
From:
( )
Anonymous
- this user has disabled anonymous posting.
( )
OpenID
InsaneJournal user
Username:
Password:
Login?
Don't have an account?
Create one now
.
Subject:
No HTML allowed in subject
Don't auto-format:
Message:
Check spelling during preview