Pen Settings

HTML

CSS

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. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ add another resource

JavaScript

Babel includes JSX processing.

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

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

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.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                div Background colors are generated randomly by SASS, a mixin then calculates if black or white text offers better readability. Click anywhere to let Javascript assign random background colors and recalculate the text color.
div »Es ist ein eigentümlicher Apparat«, sagte der Offizier zu dem Forschungsreisenden und überblickte mit einem gewissermaßen bewundernden Blick den ihm doch wohlbekannten Apparat. Der Reisende schien nur aus Höflichkeit der Einladung des Kommandanten gefolgt zu sein, der ihn aufgefordert hatte, der Exekution eines Soldaten beizuwohnen, der wegen Ungehorsam und Beleidigung des Vorgesetzten verurteilt worden war.
div Das Interesse für diese Exekution war wohl auch in der Strafkolonie nicht sehr groß. Wenigstens war hier in dem tiefen, sandigen, von kahlen Abhängen ringsum abgeschlossenen kleinen Tal außer dem Offizier und dem Reisenden nur der Verurteilte, ein stumpfsinniger breitmäuliger Mensch mit verwahrlostem Haar und Gesicht, und ein Soldat zugegen, der die schwere Kette hielt, in welche die kleinen Ketten ausliefen, mit denen der Verurteilte an den Fuß- und Handknöcheln sowie am Hals gefesselt war und die auch untereinander durch Verbindungsketten zusammenhingen.
div Übrigens sah der Verurteilte so hündisch ergeben aus, daß es den Anschein hatte, als könnte man ihn frei auf den Abhängen herumlaufen lassen und müsse bei Beginn der Exekution nur pfeifen, damit er käme.
div Der Reisende hatte wenig Sinn für den Apparat und ging hinter dem Verurteilten fast sichtbar unbeteiligt auf und ab, während der Offizier die letzten Vorbereitungen besorgte, bald unter den tief in die Erde eingebauten Apparat kroch, bald auf eine Leiter stieg, um die oberen Teile zu untersuchen. Das waren Arbeiten, die man eigentlich einem Maschinisten hätte überlassen können, aber der Offizier führte sie mit einem großen Eifer aus, sei es, daß er ein besonderer Anhänger dieses Apparates war, sei es, daß man aus anderen Gründen die Arbeit sonst niemandem anvertrauen konnte.
div »Jetzt ist alles fertig!« rief er endlich und stieg von der Leiter hinunter. Er war ungemein ermattet, atmete mit weit offenem Mund und hatte zwei zarte Damentaschentücher hinter den Uniformkragen gezwängt. »Diese Uniformen sind doch für die Tropen zu schwer«, sagte der Reisende, statt sich, wie es der Offizier erwartet hatte, nach dem Apparat zu erkundigen. 
div »Gewiß«, sagte der Offizier und wusch sich die von Öl und Fett beschmutzten Hände in einem bereitstehenden Wasserkübel, »aber sie bedeuten die Heimat; wir wollen nicht die Heimat verlieren. – Nun sehen Sie aber diesen Apparat«, fügte er gleich hinzu, trocknete die Hände mit einem Tuch und zeigte gleichzeitig auf den Apparat. »Bis jetzt war noch Händearbeit nötig, von jetzt aber arbeitet der Apparat ganz allein.«
div Der Reisende nickte und folgte dem Offizier. Dieser suchte sich für alle Zwischenfälle zu sichern und sagte dann: »Es kommen natürlich Störungen vor; ich hoffe zwar, es wird heute keine eintreten, immerhin muß man mit ihnen rechnen. Der Apparat soll ja zwölf Stunden ununterbrochen im Gang sein. Wenn aber auch Störungen vorkommen, so sind sie doch nur ganz kleine, und sie werden sofort behoben sein.«
              
            
!

CSS

              
                @mixin readable-text-bg($bgcolor, $darkcolor: 'black', $lightcolor: 'white') {
	  $contrast: (red($bgcolor) * 0.299 + green($bgcolor) * 0.587 + blue($bgcolor) * 0.114);
  @if $contrast >= 128 {
    color: $darkcolor;
  } @else {
    color: $lightcolor;
  }
	background-color: $bgcolor;
}

@for $i from 1 through 8 {
	div:nth-child(#{$i}) {
		@include readable-text-bg(rgb(random(255),random(255),random(255)));
	}	
}

//stuff...
html, body {
	padding:0;
	margin:0;
}
body {
	width:100%;
	font-family:'Lora';
	font-size:1.25em;
	user-select:none;
	cursor:default;
}
div {
	padding:25px 50px;
}
div:first-child {
	font-size:1.5em;
}
              
            
!

JS

              
                //takes an object with r, g and b properties that are from 0 to 255
function readable_text(bgcolor) {
		if ((bgcolor.r * 0.299 + bgcolor.g * 0.587 + bgcolor.b * 0.114) >= 128)
				return 'black';
		else
				return 'white';
}

$('body').click(function(){
	$('div').each(function(){
		var color={
			r:Math.round(Math.random()*255),
			g:Math.round(Math.random()*255),
			b:Math.round(Math.random()*255)
		};
		$(this).css('background-color','rgb('+color.r+','+color.g+','+color.b+')');
		$(this).css('color',readable_text(color));
	});
});
              
            
!
999px

Console