cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

Quick-add: + add another resource

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              
<h1>Updated for multi-gender dark action, oorah!</h1>


<div class="lightpage">
  
<div class="sexytabs">
  
  <ul>
    <li><a href="#Beyonce">
      <span>Bootylicious</span></a></li>
    <li><a href="#Fergie">
      <span>Fergalicious</span></a></li>
    <li><a href="#Rihanna">
      <span>Umbrella?</span></a></li>
  </ul>
  
  <div class="contents">
  <div id="Beyonce">
    <h2>Beyonce</h2>
    <img src="http://thumbs.hotnewhiphop.com/public/article/600_1359954424_17651c4dc1a8d1c5ba1c472544c51114.jpeg">
    <p>American Apparel locavore iPhone wayfarers put a bird on it.  Whatever McSweeney's Banksy letterpress Marfa.  Drinking vinegar PBR synth, tote bag kale chips typewriter shabby chic mlkshk.  Twee Wes Anderson semiotics Blue Bottle Tumblr, locavore ennui squid.  Blog tofu paleo try-hard mustache bicycle rights DIY.  Forage quinoa DIY master cleanse.  Freegan tote bag squid keffiyeh, sriracha try-hard tousled gentrify McSweeney's pickled pork belly Neutra literally.</p>

    <p>Actually synth Thundercats, pug direct trade wayfarers Schlitz. Gluten-free beard pickled wolf, vinyl cliche paleo authentic brunch Blue Bottle chambray keffiyeh Marfa 8-bit post-ironic. Lo-fi fixie occupy small batch. Salvia keytar cliche, occupy Brooklyn disrupt Helvetica gluten-free art party stumptown freegan gastropub cred. Freegan Truffaut keffiyeh Terry Richardson lo-fi, hoodie ennui. Readymade deep v selvage, tote bag church-key authentic flexitarian craft beer four loko biodiesel. VHS hashtag small batch drinking vinegar, wolf distillery YOLO post-ironic narwhal sustainable.</p>
    
  </div>
    
  <div id="Fergie">
    <h2>Fergie</h2>
    <img src="https://si0.twimg.com/profile_images/3282720177/1cfde8d5260721552f31a26cff5ccc22.png">
    <p>Bushwick semiotics meh artisan, whatever gastropub pop-up narwhal Cosby sweater stumptown VHS synth kogi art party McSweeney's.  Helvetica locavore actually cray paleo.  +1 PBR gentrify, direct trade  narwhal tattooed polaroid Helvetica readymade wolf Tumblr authentic try-hard hella.  Try-hard 90's gentrify art party.  Helvetica Intelligentsia +1, banjo try-hard tote bag organic fashion axe gluten-free chambray stumptown Echo Park beard.  Craft beer DIY beard, roof party tofu plaid sustainable Tonx.  Small batch letterpress salvia sartorial deep v ugh, High Life aesthetic hoodie Neutra Vice freegan flannel.</p>
    
  </div>
    
  <div id="Rihanna">
    <h2>Rihanna</h2>
    <img src="http://s1.evcdn.com/images/block/I0-001/001/867/008-9.jpeg_/rihanna-08.jpeg">
    <p>Chambray typewriter Odd Future, cliche Wes Anderson High Life Banksy cred bespoke Intelligentsia ethnic. YOLO gluten-free blog kale chips. Cliche Shoreditch church-key direct trade banjo ugh, forage pug meh typewriter yr chillwave wayfarers small batch. Trust fund Carles forage disrupt photo booth. Truffaut lo-fi Schlitz, Blue Bottle hoodie synth Thundercats. Actually cliche put a bird on it kitsch, ethical Thundercats synth drinking vinegar gluten-free lomo try-hard direct trade. Chambray viral you probably haven't heard of them salvia, ugh Pitchfork Terry Richardson selvage master cleanse.</p>
 
  </div>
  </div>
</div>

</div>






<div class="darkpage">

<div class="sexytabs dark">
  
  <ul>
    <li><a href="#Gosling">
      <span>Jottings</span></a></li>
    <li><a href="#Timberlake">
      <span>Benefits</span></a></li>
    <li><a href="#Lautner">
      <span>Furry?</span></a></li>
  </ul>
  
  <div class="contents">
  <div id="Gosling">
    <h2>Gosling</h2>
    <img src="http://imworld.aufeminin.com/story/20130805/ryan-gosling-56940_s96cx345cy200.jpg">
    <p>American Apparel locavore iPhone wayfarers put a bird on it.  Whatever McSweeney's Banksy letterpress Marfa.  Drinking vinegar PBR synth, tote bag kale chips typewriter shabby chic mlkshk.  Twee Wes Anderson semiotics Blue Bottle Tumblr, locavore ennui squid.  Blog tofu paleo try-hard mustache bicycle rights DIY.  Forage quinoa DIY master cleanse.  Freegan tote bag squid keffiyeh, sriracha try-hard tousled gentrify McSweeney's pickled pork belly Neutra literally.</p>

    <p>Actually synth Thundercats, pug direct trade wayfarers Schlitz. Gluten-free beard pickled wolf, vinyl cliche paleo authentic brunch Blue Bottle chambray keffiyeh Marfa 8-bit post-ironic. Lo-fi fixie occupy small batch. Salvia keytar cliche, occupy Brooklyn disrupt Helvetica gluten-free art party stumptown freegan gastropub cred. Freegan Truffaut keffiyeh Terry Richardson lo-fi, hoodie ennui. Readymade deep v selvage, tote bag church-key authentic flexitarian craft beer four loko biodiesel. VHS hashtag small batch drinking vinegar, wolf distillery YOLO post-ironic narwhal sustainable.</p>
    
  </div>
    
  <div id="Timberlake">
    <h2>Timberlake</h2>
    <img src="http://imalbum.aufeminin.com/album/D20121228/894767_Z5RAJN1HEXWRQGYCFUTKD8AVQ8ZMXS_justin-timberlake_H124540_S.jpg">
    <p>Bushwick semiotics meh artisan, whatever gastropub pop-up narwhal Cosby sweater stumptown VHS synth kogi art party McSweeney's.  Helvetica locavore actually cray paleo.  +1 PBR gentrify, direct trade  narwhal tattooed polaroid Helvetica readymade wolf Tumblr authentic try-hard hella.  Try-hard 90's gentrify art party.  Helvetica Intelligentsia +1, banjo try-hard tote bag organic fashion axe gluten-free chambray stumptown Echo Park beard.  Craft beer DIY beard, roof party tofu plaid sustainable Tonx.  Small batch letterpress salvia sartorial deep v ugh, High Life aesthetic hoodie Neutra Vice freegan flannel.</p>
    
  </div>
    
  <div id="Lautner">
    <h2>Lautner</h2>
    <img src="https://fbexternal-a.akamaihd.net/safe_image.php?d=AQBvPhI8Zh8E1VfV&w=155&h=114&url=http%3A%2F%2Ffiles-cdn.formspring.me%2Fprofile%2F20110812%2Fn4e45d53be5a76_medium.jpg">
    <p>Chambray typewriter Odd Future, cliche Wes Anderson High Life Banksy cred bespoke Intelligentsia ethnic. YOLO gluten-free blog kale chips. Cliche Shoreditch church-key direct trade banjo ugh, forage pug meh typewriter yr chillwave wayfarers small batch. Trust fund Carles forage disrupt photo booth. Truffaut lo-fi Schlitz, Blue Bottle hoodie synth Thundercats. Actually cliche put a bird on it kitsch, ethical Thundercats synth drinking vinegar gluten-free lomo try-hard direct trade. Chambray viral you probably haven't heard of them salvia, ugh Pitchfork Terry Richardson selvage master cleanse.</p>
 
  </div>
  </div>
</div>
  
  
</div>
            
          
!
            
              @import "compass/css3";

@import url(https://fonts.googleapis.com/css?family=Lato:100,300,400);

$color: rgba(22, 195, 255,0.5);
$border: rgba(0,0,0,0.2);
$background: #fafafa;

$darkcolor: rgba(175,227,100, 0.6);
$darkborder: rgba(255,255,255, 0.3);
$darkbackground: #333;

.sexytabs > ul {
  
  text-align: center; font-weight: 500;
  margin: 50px 0 0; padding: 0; position: relative;
  border-bottom: 1px solid $border; z-index: 1;
  
  > li {
    
    display: inline-block; background: $background;
    padding: 0.6em 0; position: relative; width: 33%; margin: 0 0 0 -4px;
    
    &:before,
    &:after { opacity: 0; transition: 0.3s ease; }
    
    &.ui-tabs-active:before, &.ui-tabs-active:after,
    &.ui-state-hover:before, &.ui-state-hover:after,
    &.ui-state-focus:before, &.ui-state-focus:after{ opacity: 1; }
    
    // this is the shadow under the text/mask
    &:before,
    &.ui-state-active.ui-state-hover:before,
    &.ui-state-active.ui-state-focus:before{
      content: "";
      position: absolute;
      z-index: -1;
      box-shadow: 0 2px 3px $color;
      top: 50%; bottom: 0px; left: 5px; right: 5px;
      border-radius: 100px / 10px; 
    }
    
    // this is the "diamond" mask that creates the
    // nice indent effect.
    &:after,
    &.ui-state-active.ui-state-hover:after,
    &.ui-state-active.ui-state-focus:after{
      content: ""; background: $background;
      position: absolute;
      width: 12px; height: 12px;
      left: 50%; bottom: -6px; margin-left: -6px;
      transform: rotate(45deg);
      box-shadow: 
        inset 3px 3px 3px $color, 
        inset 1px 1px 1px opacify($border,0.1);
      
    }
    &.ui-state-hover:before,
    &.ui-state-focus:before{
      box-shadow: 0 2px 3px $border;
    }
    &.ui-state-hover:after,
    &.ui-state-focus:after{
      box-shadow: 
        inset 3px 3px 3px $border, 
        inset 1px 1px 1px opacify($border,0.1);
    }
    &.ui-state-focus a {
      text-decoration: underline;  
    }
    
    &:focus { outline: none; }
    
    a {
      
      color: #444; text-decoration: none;
      
      &:focus { outline: none; }
      span { position: relative; top: -0.5em; }
      
    }
  }
}


.sexytabs.dark > ul {
  
  border-bottom-color: $darkborder;
  
  > li {
    
    background: $darkbackground;
    
    
    // this is the shadow under the text/mask
    &:before,
    &.ui-state-active.ui-state-hover:before,
    &.ui-state-active.ui-state-focus:before {
      box-shadow: 0 2px 3px $darkborder;
    }
    
    // this is the "diamond" mask that creates the
    // nice indent effect.
    &:after,
    &.ui-state-active.ui-state-hover:after,
    &.ui-state-active.ui-state-focus:after{
      background: $darkbackground;
      box-shadow: 
        inset 3px 3px 3px $darkborder, 
        inset 1px 1px 1px opacify($darkborder,0.2);
    }
    &.ui-state-hover:before,
    &.ui-state-focus:before{
      box-shadow: none;
    }
    &.ui-state-hover:after,
    &.ui-state-focus:after{
      box-shadow: inset 1px 1px 0px opacify($darkborder,0.1);
    }
    
    a {
      color: white;
    }
  }
}




// misc setup CSS.

img { 
  width: 60px; float: left; 
  margin: 0 1em 1em 0; border-radius: 3px; }

body{ 
  font-size: 1em; background: $background; 
  font-family: Lato; font-weight: 300;
}

h1 { text-align: center; font-size: 20px;  }

.sexytabs { width: 90%; min-width: 360px; margin: auto; }
.contents { padding: 20px 50px; min-height: 200px; }

.darkpage { 
  
  background: #333; 
  color: white;
  
}

.darkpage,
.lightpage { padding: 50px 0; }


@media screen and (min-width: 1000px) {
  .darkpage,
  .lightpage { width: 50%; float: left; padding: 0; }
}
            
          
!
            
              // just some interesting CSS
// for tabbed content :)
// 
// inspired by: 
// https://www.google.com/intl/en-GB/chrome/devices/chromecast


$(".sexytabs").tabs({ 
  show: { effect: "slide", direction: "left", duration: 200, easing: "easeOutBack" } ,
  hide: { effect: "slide", direction: "right", duration: 200, easing: "easeInQuad" } 
});
            
          
!
999px
Loading ..................

Console