JavaScript preprocessors can help make authoring JavaScript easier and more convenient. For instance, CoffeeScript can help prevent easy-to-make mistakes and offer a cleaner syntax and Babel can bring ECMAScript 6 features to browsers that only support ECMAScript 5.
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.
You can apply a script from anywhere on the web to your Pen. Just put a URL to it here and we'll add it, in the order you have them, before the JavaScript in the Pen itself.
If the script you link to has the file extension of a preprocessor, we'll attempt to process it before applying.
You can also link to another Pen here, and we'll pull the JavaScript from that Pen and include it. If it's using a matching preprocessor, we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.
HTML Settings
Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
<div class="group group1">
<div class="demo1">to top</div>
<div class="demo2">to right</div>
<div class="demo3">to bottom</div>
<div class="demo4">to left</div>
<br>
<div class="demo9">0deg</div>
<div class="demo10">90deg</div>
<div class="demo11">180deg</div>
<div class="demo12">270deg</div>
<br>
<div class="demo5">to top right</div>
<div class="demo6">to bottom right</div>
<div class="demo7">to bottom left</div>
<div class="demo8">to top left</div>
<br>
<div class="demo13">45deg</div>
<div class="demo14">135deg</div>
<div class="demo15">225deg</div>
<div class="demo16">315deg</div>
</div>
<div class="group group2">
<div class="demo1">BLACK</div>
<div class="demo2">#000000</div>
<div class="demo3">RGBA</div>
<div class="demo4">HSLA</div>
<br>
<div class="demo5">RED</div>
<div class="demo6">RED</div>
<div class="demo7">RED</div>
<div class="demo8">RED</div>
<br>
<div class="demo9">GREEN</div>
<div class="demo10">GREEN</div>
<div class="demo11">GREEN</div>
<div class="demo12">GREEN</div>
<br>
<div class="demo13">BLUE</div>
<div class="demo14">BLUE</div>
<div class="demo15">BLUE</div>
<div class="demo16">BLUE</div>
</div>
body, html
margin: 0
padding: 0
text-align: center
font-size: 0
.group
display: inline-block
background-color: #999
border: 1px solid #333
margin: 10px
div
display: inline-block
width: 100px
height: 100px
font-size: 10px
line-height: 100px
text-shadow: 1px 0 0 #fff, -1px 0 0 #fff, 0 -1px 0 #fff,0 1px 0 #fff
&:nth-child(n + 5)
margin-top: 10px
&+div
margin-left: 10px
$start = white
$startRGBA = rgba(255,255,255,1)
$end = black
$endSL = #000
$endRGBA = rgba(0,0,0,1)
$endHSLA = hsla(0,0,0,1)
.group1
.demo1
background-image: linear-gradient(to top, $start, $end)
.demo2
background-image: linear-gradient(to right, $start, $end)
.demo3
background-image: linear-gradient(to bottom, $start, $end)
.demo4
background-image: linear-gradient(to left, $start, $end)
.demo5
background-image: linear-gradient(to top right, $start, $end)
.demo6
background-image: linear-gradient(to bottom right, $start, $end)
.demo7
background-image: linear-gradient(to bottom left, $start, $end)
.demo8
background-image: linear-gradient(to top left, $start, $end)
.demo9
background-image: linear-gradient(0deg, $start, $end)
.demo10
background-image: linear-gradient(90deg, $start, $end)
.demo11
background-image: linear-gradient(180deg, $start, $end)
.demo12
background-image: linear-gradient(270deg, $start, $end)
.demo13
background-image: linear-gradient(45deg, $start, $end)
.demo14
background-image: linear-gradient(135deg, $start, $end)
.demo15
background-image: linear-gradient(225deg, $start, $end)
.demo16
background-image: linear-gradient(315deg, $start, $end)
.group2
.demo1
background-image: linear-gradient(90deg, transparent 40%, $end 60%)
.demo2
background-image: linear-gradient(90deg, #fff 40%, $endSL 60%)
.demo3
background-image: linear-gradient(90deg,rgba(0, 0, 0, 0) 40%,$endRGBA 60%)
.demo4
background-image: linear-gradient(90deg,hsla(0, 0, 0, 0) 40%,$endHSLA 60%)
.demo5
background-image: linear-gradient(90deg, red 40%, $end 60%)
.demo6
background-image: linear-gradient(90deg, #ff0000 40%, $endSL 60%)
.demo7
background-image: linear-gradient(90deg,rgba(255, 0, 0, 0) 40%,$endRGBA 60%)
.demo8
background-image: linear-gradient(90deg,hsla(0, 100%, 50%, 0) 40%,$endHSLA 60%)
.demo9
background-image: linear-gradient(90deg,lime 40px,$end 60px)
.demo10
background-image: linear-gradient(90deg, #00ff00 40px, $endSL 60px)
.demo11
background-image: linear-gradient(90deg,rgba(0, 255, 0, 0) 40px,$endRGBA 60px)
.demo12
background-image: linear-gradient(90deg,hsla(120, 100%, 50%, 0) 40px,$endHSLA 60px)
.demo13
background-image: linear-gradient(90deg,blue 40px,$end 60%)
.demo14
background-image: linear-gradient(90deg, #0000ff 40px, $endSL 60%)
.demo15
background-image: linear-gradient(90deg,rgba(0, 0, 255, 0) 40px,$endRGBA 60%)
.demo16
background-image: linear-gradient(90deg,hsla(240, 100%, 50%, 0) 40px,$endHSLA 60%)
Also see: Tab Triggers