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.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

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.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

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.

            
              <div class="wrapper">

  <!-- Header -->
  <header class="colorme" data-type="tertiary">
    <div class="big-container">
      <div class="inner">
        <h1 class="colorme" data-type="quaternary">
          Simple way to change theme colors
          <b class="colorme" data-type="primary">.</b>
        </h1>
      </div>
    </div><div class="lit-container">
      <div class="inner">
        <!-- Empty. -->
      </div>
    </div>
  </header>

  <!-- Main -->
  <div class="main">
    <div class="big-container">
      <div class="inner">
        <h2 class="colorme" data-type="primary">Playing with CSS variables</h2>
        <div class="deco colorme" data-type="secondary"></div>
        <p class="colorme" data-type="senary">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem quis ipsa a nisi quae hic repudiandae ut vero officiis consequatur. Culpa ducimus voluptatem aliquam dignissimos laborum, animi odit dolorem eligendi praesentium voluptate aliquid iusto perferendis cum velit. Repellendus voluptate laudantium voluptatum iste itaque atque qui rerum tempora reiciendis, sapiente quaerat ipsum doloribus vel vitae maiores obcaecati adipisci.</p>
        <div class="img-box colorme" data-type="tertiary"><img src="http://payload100.cargocollective.com/1/9/296422/4317770/2-%20Arquitectura%202.jpg" alt=""></div>
        <p class="colorme" data-type="senary">Dolores quasi nulla tempora voluptas unde suscipit debitis et inventore quas molestiae voluptatum ipsam, velit nostrum necessitatibus non eius ad eveniet quibusdam commodi, nam atque! Mollitia qui, dolor velit consectetur ea atque distinctio iusto magni minima sint veritatis illo vitae explicabo nisi porro fuga assumenda totam corrupti, debitis quaerat architecto.</p>
        <p class="colorme" data-type="senary">Et quibusdam odit quaerat ipsum rem corrupti deleniti est at ducimus voluptatibus blanditiis necessitatibus totam laboriosam eveniet, quos odio, temporibus iste hic numquam exercitationem tempore animi atque voluptate? Optio numquam placeat quibusdam omnis cum praesentium consequuntur nulla suscipit eaque veniam iure tenetur excepturi et voluptas nesciunt nobis ea sequi incidunt, ab, quia tempora earum quidem. Qui consectetur eius velit quasi, autem, eaque, explicabo harum sapiente possimus dolorem beatae consequuntur porro maxime itaque alias blanditiis dicta.</p>
        <div class="img-box colorme" data-type="tertiary"><img src="http://payload100.cargocollective.com/1/9/296422/4317770/2-%20Arquitectura%201.jpg" alt=""></div>
        <p class="colorme" data-type="senary">Neque, omnis atque consequuntur architecto ducimus ipsam aspernatur labore in. Ipsam neque omnis esse adipisci atque tempora voluptatem iste sed maiores dolore assumenda et voluptas in mollitia, ea quia iure hic quo molestias unde aspernatur, asperiores. Architecto unde sequi beatae illum ab distinctio saepe in, dolorem labore doloribus, laboriosam dolore. </p>
        <div class="img-box colorme" data-type="tertiary"><img src="http://payload100.cargocollective.com/1/9/296422/4317770/2-%20Arquitectura%2011.jpg" alt=""></div>
        <p class="colorme" data-type="senary">Necessitatibus natus consectetur modi, odio, quod accusamus magni labore repellat minus velit quaerat ab blanditiis doloremque quidem architecto molestias iusto dicta illum tenetur cumque dolor eius? Officiis molestiae quidem tempore quia ea maiores eligendi expedita delectus, obcaecati, ullam accusamus atque dolore alias sapiente adipisci quae ad veniam amet provident vitae nam quisquam optio odit. Laudantium blanditiis facere, dolor, voluptatum vel a enim aut nobis, sed alias doloremque! Praesentium quod sequi omnis nostrum, atque autem iste impedit id facere ad. Dolorum iure esse, possimus ipsum sint eum perspiciatis aspernatur, delectus, nihil at aut.</p>
      </div>
    </div><div class="lit-container">
      <div class="inner">
         <h3 class="colorme" data-type="tertiary">Just a visual selector.</h3>
        <!-- Type selector -->
        <ul class="type-selector">
          <li class="colorme" data-type="primary">
            <p class="colorme" data-type="senary">
              <i class="colorme active-color" data-type="primary"></i>
              Primary type selector
            </p>
          </li>
          <li class="colorme" data-type="secondary">
            <p class="colorme" data-type="senary">
              <i class="colorme active-color" data-type="secondary"></i>
              Secondary type selector
            </p>
          </li>
          <li class="colorme" data-type="tertiary">
            <p class="colorme" data-type="senary">
              <i class="colorme active-color" data-type="tertiary"></i>
              Tertiary type selector
            </p>
          </li>
          <li class="colorme" data-type="quaternary">
            <p class="colorme" data-type="senary">
              <i class="colorme active-color" data-type="quaternary"></i>
              Quaternary type selector
            </p>
          </li>
          <li class="colorme" data-type="quinary">
            <p class="colorme" data-type="senary">
              <i class="colorme active-color" data-type="quinary"></i>
              Quinary type selector
            </p>
          </li>
          <li class="colorme" data-type="senary">
            <p class="colorme" data-type="senary">
              <i class="colorme active-color" data-type="senary"></i>
              Senary type selector
            </p>
          </li>
        </ul>
        <!-- Hidden color widget -->
        <input type="color" class="colorpicker">
      </div>
    </div>
  </div>

  <!-- Footer -->
  <footer>
    <div class="big-container colorme" data-type="tertiary">
      <div class="inner">
        <p class="colorme" data-type="quaternary">Tobías Bogliolo 2017&copy;</p>
      </div>
    </div><div class="lit-container">
      <div class="inner">
        <!-- Empty. -->
      </div>
    </div>
  </footer>

</div>


<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700|Roboto|Roboto+Slab:400,700|Titillium+Web" rel="stylesheet">

            
          
!
            
              /* Default theme colors */
body {
  --primary-color: #673AB7;
  --secondary-color: #D1C4E9;
  --tertiary-color: #FFC107;
  --quaternary-color: #FFFFFF;
  --quinary-color: #CFD8DC;
  --senary-color: #263238;
}

div[data-type="primary"],
i[data-type="primary"],
span[data-type="primary"] {
  background: var(--primary-color);
}

p[data-type="primary"],
h1[data-type="primary"],
h2[data-type="primary"],
h3[data-type="primary"],
b[data-type="primary"] {
  color: var(--primary-color);
}

div[data-type="secondary"],
i[data-type="secondary"],
span[data-type="secondary"] {
  background: var(--secondary-color);
}

p[data-type="secondary"],
h1[data-type="secondary"],
h2[data-type="secondary"],
h3[data-type="secondary"],
b[data-type="secondary"] {
  color: var(--secondary-color);
}

div[data-type="tertiary"],
i[data-type="tertiary"],
span[data-type="tertiary"] {
  background: var(--tertiary-color);
}

p[data-type="tertiary"],
h1[data-type="tertiary"],
h2[data-type="tertiary"],
h3[data-type="tertiary"],
b[data-type="tertiary"] {
  color: var(--tertiary-color);
}

div[data-type="quaternary"],
i[data-type="quaternary"],
span[data-type="quaternary"] {
  background: var(--quaternary-color);
}

p[data-type="quaternary"],
h1[data-type="quaternary"],
h2[data-type="quaternary"],
h3[data-type="quaternary"],
b[data-type="quaternary"] {
  color: var(--quaternary-color);
}

div[data-type="quinary"],
i[data-type="quinary"],
span[data-type="quinary"] {
  background: var(--quinary-color);
}

p[data-type="quinary"],
h1[data-type="quinary"],
h2[data-type="quinary"],
h3[data-type="quinary"],
b[data-type="quinary"] {
  color: var(--quinary-color);
}

div[data-type="senary"],
i[data-type="senary"],
span[data-type="senary"] {
  background: var(--senary-color);
}

p[data-type="senary"],
h1[data-type="senary"],
h2[data-type="senary"],
h3[data-type="senary"],
b[data-type="senary"] {
  color: var(--senary-color);
}

/* Reset */
*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

html,
body {
  position: relative;
  margin: 0;
  padding: 0;
}

img {
  display: block;
  border: none;
}

/* Global */
:root {
  counter-reset: img-counter;
  font-family: 'Open Sans', sans-serif;
  color: #333333;
}

.colorme {
  cursor: pointer;
}

p {
  margin: 1em 0;
  line-height: 1.5em;
}

h1 {
  margin: 0;
}

h1, h2, h3 {
  font-family: 'Roboto Slab', serif;
}

/* LAyout */
*[class*="container"] {
  display: inline-block;
  margin: 0 auto;
  padding: 0 5%;
  vertical-align: top;
}

.big-container {
  width: 70%;
}

.lit-container {
  width: 30%;
}

.inner {
  max-width: 600px;
  margin: 0 auto;
}

@media screen and (max-width: 920px) {
  .big-container,
  .lit-container {
    display: block;
    width: 100%;
  }
}

/* Header */
header {
  position: relative;
  background: url('http://payload100.cargocollective.com/1/9/296422/4317770/1%20-%20Landscape%208_o.jpg') no-repeat center 75%;
  background-size: cover;
}

header:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  opacity: .6;
  background: var(--tertiary-color);
}

header:after {
  content: "";
  position: absolute;
  width: 85%;
  height: 100%;
  top: 0;
  left: 0;
  opacity: .4;
  background: var(--tertiary-color);
}

header .big-container {
  position: relative;
}

header .big-container:before {
  content: "d";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 15%;
  font-family: 'Roboto Slab', serif;
  font-size: 28em;
  font-weight: bold;
  color: var(--quaternary-color);
  opacity: .2;
}

h1 {
  position: relative;
  max-width: 520px;
  padding: 20% 0;
  font-size: 3.6em;
  z-index: 1;
}

h1 b {
  font-family: 'Open Sans', sans-serif;
  font-size: 2em;
  line-height: 0;
}

/* Main */
body:before {
  content: "A";
  position: absolute;
  right: 5%;
  bottom: 0%;
  margin: 0;
  padding: 0;
  color: var(--primary-color);
  font-family: 'Roboto Slab', serif;
  font-size: 22em;
  line-height: 75%;
  opacity: .1;
  overflow: hidden;
}

.main div .inner {
  padding: 90px 0;
}

h2 {
  font-size: 2em;
  letter-spacing: .02em;
}

.deco {
  width: 26px;
  height: 2px;
  margin: 2em 0;
}

.img-box {
  counter-increment: img-counter;
  position: relative;
  margin: 2.5em 0;
}

.img-box img {
  display: block;
  position: relative;
  width: 100%;
  filter: grayscale(65%) contrast(120%);
  transition: ease .4s;
}

.img-box:hover img {
  filter: grayscale(0%) contrast(100%);
}

.img-box:before {
  content: "";
  position: absolute;
  width: 67%;
  height: 79%;
  top: 0;
  left: 0;
  -webkit-transform: translate(-2%, -4%);
  -ms-transform: translate(-2%, -4%);
  -o-transform: translate(-2%, -4%);
  transform: translate(-2%, -4%);
  background: var(--quinary-color);
  transition: ease .6s;
  z-index: -1;
}

.img-box:hover:before {
  -webkit-transform: translate(0%, 0%);
  -ms-transform: translate(0%, 0%);
  -o-transform: translate(0%, 0%);
  transform: translate(0%, 0%);
  background: var(--secondary-color);
}

.img-box:after {
  content: counter(img-counter);
  position: absolute;
  right: 0;
  bottom: 0;
  -webkit-transform: translate(0.3em, 0.3em);
  -ms-transform: translate(0.3em, 0.3em);
  -o-transform: translate(0.3em, 0.3em);
  transform: translate(0.3em, 0.3em);
  padding: 1em 1.2em;
  background: var(--tertiary-color);
  color: var(--quaternary-color);
  font-family: 'Roboto Slab', serif;
  font-size: 2em;
  box-shadow:
    0 15px 30px rgba(0,0,0,0.25),
    0 10px 10px rgba(0,0,0,0.20);
  transition: ease .6s;
  /*z-index: 1;*/
}

.img-box:hover:after {
  -webkit-transform: translate(0.6em, 0.6em);
  -ms-transform: translate(0.6em, 0.6em);
  -o-transform: translate(0.6em, 0.6em);
  transform: translate(0.6em, 0.6em);
  color: var(--tertiary-color);
  background: var(--quaternary-color);
}

@media screen and (max-width: 920px) {
  .main div .inner {
    padding: 30px 0;
  }
}

/* Main: Sidebar */
.main .lit-container {
  position: relative;
  top: -90px;
  background: #EEEEEE;
  box-shadow:
    0 10px 20px rgba(0,0,0,0.05),
    0 6px 6px rgba(0,0,0,0.15);
}

.main .lit-container:before {
  content: "";
  position: absolute;
  width: 55%;
  height: 100%;
  top: 0;
  left: 0;
  -webkit-transform: translate(-5%, 2%);
  -ms-transform: translate(-5%, 2%);
  -o-transform: translate(-5%, 2%);
  transform: translate(-5%, 2%);
  background: var(--quinary-color);
  transition: ease .6s;
  z-index: -1;
}

.main .lit-container:hover:before {
  -webkit-transform: translate(0%, 0%);
  -ms-transform: translate(0%, 0%);
  -o-transform: translate(0%, 0%);
  transform: translate(0%, 0%);
  background: var(--secondary-color);
}

h3 {
  font-size: 1.5em;
}

.type-selector {
  padding: 20px 0;
  list-style: none;
}

.type-selector li {
  padding: 10px 0;
  box-shadow: none !important;
  overflow: hidden;
}

.type-selector li p {
  position: relative;
  font-size: .9em;
  text-transform: uppercase;
  letter-spacing: .08em;
  white-space: nowrap;
  transition: ease 1s;
}

.type-selector li p:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  right: 0;
  -webkit-box-shadow: inset -31px 0px 25px -15px rgba(238,238,238,1);
  -moz-box-shadow: inset -31px 0px 25px -15px rgba(238,238,238,1);
  box-shadow: inset -31px 0px 25px -15px rgba(238,238,238,1);
}

.type-selector li p:hover {
  letter-spacing: .2em;
}

.active-color {
  display: inline-block;
  width: 12px;
  height: 3px;
  margin-right: 5px;
  background: #FFFFFF;
}

.colorpicker {
  display: none; /* Hide. */
}

@media screen and (max-width: 920px) {
  .main .lit-container {
    top: 0px;
  }
}

/* Footer */
footer div .inner {
  padding: 30px 0;
}

footer div .inner p {
  letter-spacing: .16em;
}
            
          
!
            
              /*
===============================================================

Hi! Welcome to my little playground!

My name is Tobias Bogliolo. 'Open source' by default and always 'responsive',
I'm a publicist, visual designer and frontend developer based in Barcelona. 

Here you will find some of my personal experiments. Sometimes usefull,
sometimes simply for fun. You are free to use them for whatever you want 
but I would appreciate an attribution from my work. I hope you enjoy it.

===============================================================
*/

//Variables:
var sType;
var sColor;

//Capture element type:
$(".colorme").click(function(){
  //Get type:
  sType = $(this).attr("data-type");
  //Selection Glowing:
  $('.colorme').css({
    "box-shadow": "none"
  });
  $('*[data-type="'+sType+'"]').css({
    "box-shadow": "0 0 5px #51cbee"
  });
});

//Color value reasign:
$(".colorpicker").on("change",function(){
  //Get color:
  sColor = $(".colorpicker").val();
  //Set color:
  document.body.style.setProperty('--'+sType+'-color', sColor);
  //Selection Glowing:
  $('.colorme').css({
    "box-shadow": "none"
  });
  //Var reset:
  sType = "";
});

//Color picker trigger:
$(".colorme").click(function(){
    $(".colorpicker")[0].click();
});
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.
Loading ..................

Console