LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code
				
/* 
   Just another pure CSS code editor design.
   Designed based on @roybarberuk's amazing Dribbble shot.
   Dribbble shot: http://dribbble.com/shots/1022371-Landing-Page-Element 

   Lea Verou's Prism syntax highlighter is used along with 
   the line number plugin and the Tomorrow-Theme.
*/

body {
	background: #e16a3f;
}

.code-editor:before,
.code-editor:after,
.code-editor span.control:before,
.code-editor span.after:after {
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	content: '';
	position: absolute;
	z-index: 1;
	-webkit-transition: all .5s ease-in-out;
    -moz-transition: wall .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
}

.code-editor {
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	margin: 40px auto 0 auto;
   	width: 750px; 
   	text-align: left;
   	background-color: #473431;
   	border-radius: 0 0 5px 5px;
   	overflow: auto;
   	-webkit-transition: all .5s ease-in-out;
    -moz-transition: wall .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
}

.code-editor:before {
	content: 'Code Editor';
	font-family: 'Consolas';
	color: #222;
	padding-top: 6px; 
	text-align: center;
	top: 25px;
	width: 750px;
	height: 30px;
	background-color: #fafafa;
	border-radius: 5px 5px 0 0;
	-moz-border-radius: 5px 5px 0 0;
	-o-border-radius: 5px 5px 0 0;
	-webkit-border-radius: 5px 5px 0 0;
}

.code-editor span.control:before {
	content: '';
	top: 34px;
	z-index: 2;
	padding: 6px;
	border-radius: 20px;
	-moz-border-radius: 20px;
	-o-border-radius: 20px;
	-webkit-border-radius: 20px;
}

.code-editor span.control:nth-child(1):before {
	margin-left: 15px;
	background-color: #df6963;
	
}

.code-editor span.control:nth-child(2):before {
	margin-left: 35px;
	background-color: #f5e18a;
	
}

.code-editor span.control:nth-child(3):before {
	margin-left: 55px;
	background-color: #97c38a;
}

/* -- iPad Screen -- */
@media only screen and (min-width: 480px) and (max-width: 768px) {
	.code-editor {
   		width: 500px; 
	}

	.code-editor:before {
		width: 500px;
	}
}

/* -- iPhone Screen -- */
@media only screen and (max-width: 479px) {
	.code-editor {
		width: 300px;
	}	

	.code-editor:before {
		width: 300px;
	}
}
CSS
body {
	background: #e16a3f;
}

.code-editor:before,
.code-editor:after,
.code-editor span.control:before,
.code-editor span.after:after {
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	content: '';
	position: absolute;
	z-index: 1;
	-webkit-transition: all .5s ease-in-out;
    -moz-transition: wall .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
}

.code-editor {
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	margin: 40px auto 0 auto;
   	width: 750px; 
   	text-align: left;
   	background-color: #473431;
   	border-radius: 0 0 5px 5px;
   	overflow: auto;
   	-webkit-transition: all .5s ease-in-out;
    -moz-transition: wall .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
}

.code-editor:before {
	content: 'Code Editor';
	font-family: 'Consolas';
	color: #222;
	padding-top: 6px; 
	text-align: center;
	top: 25px;
	width: 750px;
	height: 30px;
	background-color: #fafafa;
	border-radius: 5px 5px 0 0;
	-moz-border-radius: 5px 5px 0 0;
	-o-border-radius: 5px 5px 0 0;
	-webkit-border-radius: 5px 5px 0 0;
}

.code-editor span.control:before {
	content: '';
	top: 34px;
	z-index: 2;
	padding: 6px;
	border-radius: 20px;
	-moz-border-radius: 20px;
	-o-border-radius: 20px;
	-webkit-border-radius: 20px;
}

.code-editor span.control:nth-child(1):before {
	margin-left: 15px;
	background-color: #df6963;
	
}

.code-editor span.control:nth-child(2):before {
	margin-left: 35px;
	background-color: #f5e18a;
	
}

.code-editor span.control:nth-child(3):before {
	margin-left: 55px;
	background-color: #97c38a;
}

/* -- iPad Screen -- */
@media only screen and (min-width: 480px) and (max-width: 768px) {
	.code-editor {
   		width: 500px; 
	}

	.code-editor:before {
		width: 500px;
	}
}

/* -- iPhone Screen -- */
@media only screen and (max-width: 479px) {
	.code-editor {
		width: 300px;
	}	

	.code-editor:before {
		width: 300px;
	}
}

/**
 * prism.js tomorrow night eighties for JavaScript, CoffeeScript, CSS and HTML
 * Based on https://github.com/chriskempson/tomorrow-theme
 * @author Rose Pritchard
 */

code[class*="language-"],
pre[class*="language-"] {
  color: #ccc;
  font-family: Consolas, Monaco, 'Andale Mono', monospace;
  direction: ltr;
  text-align: left;
  white-space: pre;
  word-spacing: normal;

  -moz-tab-size: 4;
  -o-tab-size: 4;
  tab-size: 4;

  -webkit-hyphens: none;
  -moz-hyphens: none;
  -ms-hyphens: none;
  hyphens: none;

}

/* Code blocks */
pre[class*="language-"] {
  padding: 1em;
  margin: 0em 0;
  height: 500px;
  overflow: auto;
}

:not(pre) > code[class*="language-"],
pre[class*="language-"] {
  background: #473431;
}

/* Inline code */
:not(pre) > code[class*="language-"] {
  padding: .1em;
  border-radius: .3em;
  -moz-border-radius: .3em;
  -o-border-radius: .3em;
  -webkit-border-radius: .3em;
}

.token.comment,
.token.block-comment,
.token.prolog,
.token.doctype,
.token.cdata {
  color: #999;
}

.token.punctuation {
  color: #ccc;
}


.token.tag,
.token.attr-name,
.token.namespace {
  color: #e2777a;
}

.token.function-name {
  color: #6196cc;
}


.token.boolean,
.token.number,
.token.function {
  color: #f08d49;
}

.token.property,
.token.class-name,
.token.constant,
.token.symbol {
  color: #f8c555;
}

.token.selector,
.token.important,
.token.atrule,
.token.keyword,
.token.builtin {
  color: #cc99cd;
}

.token.string,
.token.attr-value,
.token.regex,
.token.variable {
  color: #7ec699;
}

.token.operator,
.token.entity,
.token.url
{
  color: #67cdcc;
}


.token.important {
  font-weight: bold;
}

.token.entity {
  cursor: help;
}

pre.line-numbers {
	position: relative;
	padding-left: 3.8em;
	counter-reset: linenumber;
	padding-bottom: 1px;
}

pre.line-numbers > code {
	position: relative;
}

.line-numbers .line-numbers-rows {
	position: absolute;
	pointer-events: none;
	top: 0;

	font-size: 100%;
	left: -13em;
	width: 3em; /* works for line-numbers below 1000 lines */
	letter-spacing: -1px;
	background-color: #322422;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;

}

.line-numbers-rows > span {
	pointer-events: none;
	display: block;
	counter-increment: linenumber;
}

.line-numbers-rows > span:before {
	content: counter(linenumber);
	color: #999;
	display: block;
	padding-right: 0.8em;
	text-align: right;
}
Host Instantly Drag and Drop Website Builder

 

Description

Just another code editor made in pure CSS. It is based on an amazing Dribbble shot by Roy Barber. Said Dribbble shot here: http://dribbble.com/shots/1022371-Landing-Page-Element
Term
Mon, 11/27/2017 - 21:45

Related Codes

Pen ID
Pen ID
Pen ID