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 CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

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.

            
              <html>
  <body>    
    <div id="wrapper">
      <div id="left-panel">
        <h1>Properties</h1>
        <div id="properties"> 
          <section>
            <h2>Headings</h2>
            <h3>Size</h3>
            <ul class="selection-list">
              <li><a href="javascript:;" role="button" onclick="editor.updateHeading('size','small')">Small</a></li>
              <li><a href="javascript:;" role="button" onclick="editor.updateHeading('size','medium')">Medium</a></li>
              <li><a href="javascript:;" role="button" onclick="editor.updateHeading('size','large')">Large</a></li>
            </ul>
            <h3>Color</h3>
            <ul class="selection-list color-selector">
              <li><a class="blue" href="javascript:;" role="button" onclick="editor.updateHeading('color','#179FD1')">&nbsp;</a></li>
              <li><a class="green" href="javascript:;" role="button" onclick="editor.updateHeading('color','green')">&nbsp;</a></li>
              <li><a class="orange" href="javascript:;" role="button" onclick="editor.updateHeading('color','orange')">&nbsp;</a></li>
            </ul>
          </section>
          <section>
            <h2>Body text</h2>
            <h3>Size</h3>
            <ul class="selection-list">
              <li><a href="javascript:;" role="button" onclick="editor.updateBodyText('size','small')">Small</a></li>
              <li><a href="javascript:;" role="button" onclick="editor.updateBodyText('size','medium')">Medium</a></li>
              <li><a href="javascript:;" role="button" onclick="editor.updateBodyText('size','large')">Large</a></li>
            </ul>
            <h3>Color</h3>
            <ul class="selection-list color-selector">
              <li><a class="blue" href="javascript:;" role="button" onclick="editor.updateBodyText('color','#179FD1')">&nbsp;</a></li>
              <li><a class="green" href="javascript:;" role="button" onclick="editor.updateBodyText('color','green')">&nbsp;</a></li>
              <li><a class="orange" href="javascript:;" role="button" onclick="editor.updateBodyText('color','orange')">&nbsp;</a></li>
            </ul>
          </section>
          <section>
            <h2>Images</h2>
            <h3>Border Thickness</h3>
            <ul class="selection-list">
              <li><a href="javascript:;" role="button" onclick="editor.updateImageBorder('thickness','thin')">Thin</a></li>
              <li><a href="javascript:;" role="button" onclick="editor.updateImageBorder('thickness','normal')">Normal</a></li>
              <li><a href="javascript:;" role="button" onclick="editor.updateImageBorder('thickness','thick')">Thick</a></li>
            </ul>
            <h3>Color</h3>
            <ul class="selection-list color-selector">
              <li><a class="blue" href="javascript:;" role="button" onclick="editor.updateImageBorder('color','#179FD1')">&nbsp;</a></li>
              <li><a class="green" href="javascript:;" role="button" onclick="editor.updateImageBorder('color','green')">&nbsp;</a></li>
              <li><a class="orange" href="javascript:;" role="button" onclick="editor.updateImageBorder('color','orange')">&nbsp;</a></li>
            </ul>
          </section>
          <section>
            <h2>Links</h2>
            <h3>Underline style</h3>
            <ul class="selection-list">
              <li><a href="javascript:;" role="button" onclick="editor.updateLinks('underline','none')">None</a></li>
              <li><a href="javascript:;" role="button" onclick="editor.updateLinks('underline','single')">Single</a></li>
              <li><a href="javascript:;" role="button" onclick="editor.updateLinks('underline','double')">Double</a></li>
            </ul>
            <h3>Color</h3>
            <ul class="selection-list color-selector">
              <li><a class="blue" href="javascript:;" role="button" onclick="editor.updateLinks('color','#179FD1')">&nbsp;</a></li>
              <li><a class="green" href="javascript:;" role="button" onclick="editor.updateLinks('color','green')">&nbsp;</a></li>
              <li><a class="orange" href="javascript:;" role="button" onclick="editor.updateLinks('color','orange')">&nbsp;</a></li>
            </ul>
          </section>
        </div>
      </div>
      <div id="preview-panel">
        <h1>Preview</h1>
        <section>
          <article>
            <h1>My Spiffy Headline</h1>
            <img class="photo" src="http://placekitten.com/200/250?image=1"/>            
            </image>
            <p>
              Wants pawn term dare worsted ladle gull hoe hat search putty yowler coils debt pimple colder <a href="#">Guilty Looks</a>.  Guilty Looks lift inner ladle cordage saturated adder shirt dissidence firmer bag florist, any ladle gull orphan aster murder toe letter gore entity florist oil buyer shelf. 
            </p>
            <p>
              "Guilty Looks!"  crater murder angularly, "Hominy terms arena garner asthma suture stooped quiz-chin?  Goiter door florist? Sordidly NUT!" 
              "Wire nut, murder?  wined Guity Looks, hoe dint peony tension tore murder's scaldings. 
            </p>
            <p>
              "Cause dorsal lodge an wicket beer inner florist hoe orphan molasses pimple.  ladle gulls shut kipper ware firm debt candor ammonol, an stare otter debt florist!  Debt florist's mush toe dentures furry ladle gull!" 
            </p>
            <p><small>Image by <a href="http://flickr.com/photos/nicsuzor/">@nicsuzor</a> via <a href="http://placekitten.com">Place Kitten</a></small></p>
          </article>
        </section>
      </div>
    </div>
  </body>
</html>
            
          
!
            
              body {
  padding: 20px;
  margin: 0px;
  max-width: 850px;
  background-color: #333333;
  font-family: Helvetica, Verdana, Arial, sans-serif;
  font-size: 12pt;
}

ul.selection-list {
  list-style: none;
  padding-left: 0px;
  margin: 8px 0px;
}

ul.selection-list li {
  display: inline;
  text-transform: uppercase;
  font-size: 0.8em;
}

ul.selection-list li+li {
  padding-left: 5px;
}

ul.selection-list.color-selector a {
  display: inline-block;
  width: 30px;
  height:30px;
  font-size: 10px;
}

.orange {
  background-color: orange;
}

.blue {
  background-color: #179FD1;
}

.green {
  background-color: green;
}

#left-panel li>a {
  text-decoration: none;
}

#wrapper {
  background-color: white;
  border: 2px solid #222222;
}

#wrapper:after {
  content: '';
  display: block;
  clear: both;
}

#left-panel {
  background-color: #EEEEEE;
  float: left;
  width: 250px;
  border-right: 1px solid #B5B5B5;
}

#properties {
  padding: 10px;
}

#left-panel>h1, #preview-panel>h1 {
  color: #666666;
  margin: 0px;
  font-size: 1.1em;
  padding: 10px 10px;
  background-color: #D0D0D0;
  border-bottom: 1px solid #BFBFBF;
  text-transform: uppercase;
}

#left-panel h2 {
  font-size: 1.1em;
  color: #444444;
  text-transform: uppercase;
}

#left-panel section+section {
  border-top: 1px solid #C0C0C0;
}

#left-panel h3 {
  font-size: 1em;
  margin-bottom: 0px;
}

#preview-panel {
  margin-left: 250px;
}

#preview-panel section { 
  padding: 20px;
  background-color: white;
}

section h1 {
  margin-top: 0px;
}

img.photo {
  float:right;
  margin: 0px 0px 15px 15px;
}
            
          
!
            
              var dv = dv || {};

(function() {
  'use strict';
  
  var _sheet = null;
  
  // all selectors are scoped to this panel
  var SELECTOR_PREFIX = "#preview-panel article ";
  
  function createStylesheet() {   
    var styleEl = document.createElement('style');
    document.head.appendChild(styleEl);
    // some versions of Safari need this apparently
    styleEl.appendChild(document.createTextNode(''));
    _sheet = styleEl.sheet;
  }
  
  /* Finds or creates the given rule if not present */
  function findOrCreateRule(name) {
    var rules = _sheet.cssRules;
    var rule = null;
    var selectorText = SELECTOR_PREFIX + name;
    
    for(var i=0; i < rules.length; i++) {
      if(rules[i].selectorText === selectorText) {
        rule = rules[i];
      }
    }
    
    if(rule === null) {
      // not found so create
      _sheet.insertRule(selectorText + "{}", rules.length);
      rule = rules[rules.length -1]; // last item
    }
    return rule;
  }
    
  function updateRule(name, styleSet) {
    var rule = findOrCreateRule(name);
    var style = rule.style;
    
    for(var prop in styleSet) {
      if(styleSet.hasOwnProperty(prop)) {
        var val = styleSet[prop];
        style.setProperty(prop, val);
      }
    }
  }
  
  function updateSize(selector, size) {
    var val = null;
    switch(size) {
      case "small":
        val = "0.9em"; break;
      case "medium":
        val = "1.1em"; break;
      case "large":
        val = "1.5em"; break;
      default:
        val = "1.0em";
    }
    updateRule(selector, { "font-size": val });
  }
  
  function updateTextSelector(selector, prop, val) {
    switch(prop) {
      case "size":
        updateSize(selector, val);
        break;
      case "color":
        updateRule(selector, { color: val });
        break;
      default:
        break;
    }
  }

  function createDefaultRules() {
    updateRule("h1", {
      "font-size": "1.2em",
      "color": "#179FD1"
    });
    
    updateRule("p", {
      "font-size": "1.0em",
      "color": "#222222"
    });
    
    updateRule("img", {
      "border-width" : "5px",
      "border-color" : "#179FD1",
      "border-style" : "solid"
    });
    
    updateRule("a", {
      "color": "#D17817",
      "text-decoration" : "none",
      "border-bottom" : "1px solid"
    });
  }
  
  var Editor = function() {
    createStylesheet();
    createDefaultRules();
  };
  
  Editor.prototype.updateHeading = function(prop, val) {
    updateTextSelector("h1", prop, val);
  };
  
  Editor.prototype.updateBodyText = function(prop, val) {
    updateTextSelector("p", prop, val);
  };
  
  Editor.prototype.updateImageBorder = function(prop, val) {
    function updateThickness(val) {
      var width = "0px";
      
      switch(val) {
        case "thin":
          width = "2px"; break;
        case "normal":
          width = "5px"; break;
        case "thick":
          width = "10px"; break;
        default: break;
      }
      updateRule("img", { "border-width": width });
    }
    
    switch(prop) {
      case "thickness":
        updateThickness(val);
        break;
      case "color":
        updateRule("img", { "border-color": val });
        break;
      default:
        break;
    };
  };
  
  Editor.prototype.updateLinks = function(prop, val) {
    function updateBottomBorder(val) {
      var border = "none";
      
      switch(val) {
        case "none":
          border = "none";
          break;
        case "single":
          border = "1px solid"
          break;
        case "double":
          border = "3px double";
          break;
      }
      
      updateRule("a", { "border-bottom" : border });
    }
    
    switch(prop) {
      case "color":
        updateRule("a", { "color": val });
        break;
      case "underline":
        updateBottomBorder(val);
        break;
      default: break;
    }
  }
  
  // export
  dv.Editor = Editor;
  
})();

window.onload = function() {
  window.editor = new dv.Editor();
}
            
          
!
999px
Close

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console