cssAudio - ActiveCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - Activehtmloctocatspinnerstartv

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.

  header Blurb ★ Herd
    section November 14 2012
    header My Thoughts On Adapting Early
    p The web changes super fast these days, especially on the mobile side of the equation. One of the big questions web companies face, from start-up to established corporations is when and how they should adopt new technologies, workflows and design concepts.
    p I think, for the most part, larger companies that claim to be early adopters are really just have a “let’s wait and see what everyone else does” attitude then when it looks promising they can throw the influence and money behind it to build something with it. Start-ups are risky ventures anyway so they really are the new adopters, they are the ones that in some cases drive the new tech forward.
    p In either case, there are some pretty big risks and rewards for early adoption. As I see it, for any tech company the reward of early adoption does outweigh the risk – even in large companies.
    a href="http://www.blurbherd.com/2012/11/14/my-thoughts-on-adopting-early/" full article
              body{font: 15px 'Helvetica Neue', sans-serf;}
  .star(325, px, #f4f4f4, -15);
  position: fixed;
  z-index: -1;
 padding: 1% 15%; 
  text-align: center;
  color: #333;
  font-size: 72px;
  font-family: 'LeagueGothic', 'Arial Narrow', Impact, sans-serif;
  text-decoration: none;
  text-transform: uppercase;
  text-shadow: 0 1px 0 rgba(256, 256, 256, 0.1), 0 2px 0 #AAA, 0 3px 0 #AAA, 0 3px 5px rgba(0, 0, 0, 0.25);
  border-bottom: 1px solid #CCC;
  margin: 0 0 20px;
  padding: 0 0 20px;
article section{
  line-height: 12px;
  text-transform: uppercase;
  color: #A61010;
  color: #A61010;
    color: #730A0A;
article header{
  font-size: 48px;
  margin: 0 0 20px;
  text-shadow: 0 1px 0 rgba(256, 256, 256, 0.7), 0 1px 3px rgba(0, 0, 0, 0.4);
  text-align: left;
  border: none;

/*begin mixin*/
.star(@starSize: 1, @units: em, @starColor: red, @starRotation: 0){
   // to make the star be right side up at 0 we add 35 to the rotation.
   @realStarRotation: @starRotation + 35;
   @star-105: @starSize * -1.05;
   @star80: @starSize * 0.8;
   @star70: @starSize * 0.7;
   @star-65: @starSize * -0.65;
   @star60: @starSize * 0.6;
   @star-45: @starSize * -0.45;
   @star30: @starSize * 0.3;
   @star3: @starSize * 0.03;

   margin: ~"@{star60}@{units}" 0;
   display: block;
   color: @starColor;
   width: 0px;
   height: 0px;
  border-right: ~"@{starSize}@{units}" solid transparent;
   border-bottom: ~"@{star70}@{units}"  solid @starColor;
   border-left: ~"@{starSize}@{units}" solid transparent;
   transform: rotate(~"@{realStarRotation}deg");
  &:before {
   border-bottom: ~"@{star80}@{units}" solid @starColor;
   border-left: ~"@{star30}@{units}" solid transparent;
   border-right: ~"@{star30}@{units}" solid transparent;
   position: absolute;
   height: 0;
   width: 0;
   top: ~"@{star-45}@{units}";
   left: ~"@{star-65}@{units}";
   display: block;
   content: '';
   transform: rotate(-35deg);
  &:after {
   position: absolute;
   display: block;
   color: red;
   top: ~"@{star3}@{units}";
   left: ~"@{star-105}@{units}";
   width: 0px;
   height: 0px;
   border-right: ~"@{starSize}@{units}" solid transparent;
   border-bottom: ~"@{star70}@{units}" solid @starColor;
   border-left: ~"@{starSize}@{units}" solid transparent;
   transform: rotate(-70deg);
   content: '';

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.


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