LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code

Demo of user-select: all; SVG Shape Cheatsheet

Click line to select all, in supporting browsers.

<line x1="0" y1="0" x2="10" y2="10" stroke="black"></line>
<rect x="0" y="0" width="10" height="10"></rect>
<circle cx="5" cy="5" r="5"></circle>
<ellipse cx="10" cy="5" rx="10" ry="5"></ellipse>
<polygon points="0,0 10,5 20,0 20,20 10,15 0,20"></polygon>
<polyline points="0,0 10,5 20,0 20,20 10,15 0,20" stroke="black"></polyline>
<path d="M65,10 a50,25 0 1,0 50,25"></path>
CSS
@import 'https://fonts.googleapis.com/css?family=Source+Code+Pro:400,700';

html, body {
  height: 100%;
  overflow: hidden;
}
body {
  font-family: 'Source Code Pro', monospace;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  background: #eee;
}
.area {
  background: white;
  padding: 20px;
}
pre, code {
  font-family: 'Space Mono', monospace;
}
pre {
  -webkit-user-select: all;
     -moz-user-select: all;
      -ms-user-select: all;
          user-select: all;
  margin: 0;
  padding: 10px 0;
  white-space: pre-wrap;
}
/* 

Probably don't do this... as the auto-selecting behavior is weird enough, a different selection color might make the user not understand what's happening at all.

pre::selection {
  background: yellow;
}
*/
p span {
  font-size: 0.8rem;
  background: #fff9c2;
  padding: 2px 5px;
}
h1 span {
  font-size: 1.0rem;
  display: block;
}
code {
  color: darkorange;
}
h1 {
  margin: 0 0 15px 0;
}
p {
  margin: 0 0 25px 0;
}
Term
Mon, 11/27/2017 - 21:24

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv