<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<meta name="description" content="banana" />
</head>
<body>
<div class="banana"></div>
<div class="banana peeled"></div>
<div class="banana peel"></div>
</body>
</html>
body { background: #999; }
.banana,
.banana::before,
.banana::after {
border-radius: 50%;
display: block;
position: absolute;
box-sizing: border-box;
}
.banana::before,
.banana::after {
content: '';
}
.banana {
top: 10em;
left: 20em;
background: transparent;
border-bottom: 3em solid rgba(237,192,67,0.5);
height: 12em;
width: 28em;
transform: rotate(5deg);
transform-style: preserve-3d;
} /* shadow */
.banana::before {
top: 4.2em;
left: -1.8em;
background: padding-box linear-gradient(to left, #eddd7c 20%, #d7d666 80%);
border-left: 0.5em solid transparent;
height: 1.75em;
width: 3em;
border-radius: 50%/30%;
transform: rotate(40deg) translateZ(-1em);
} /* stalk */
.banana::after {
background: padding-box linear-gradient(to right, #eddd7c 20%, #f9cf44 40%, #e09d26 140%);
border-top: 5em solid rgba(0,0,0,0);
height: 12em;
width: 28em;
transform: translateZ(-1em);
} /* main body */
/* peeled banana */
.banana.peeled {
top: 28em;
left: 5em;
transform: rotate(90deg);
height: 11em;
width: 28em;
background: padding-box linear-gradient(to right, #fff -60%, #eddd7c 53%, #edc043 53%, #edc043 65%, #e09d26 115%);
border: none;
border-top: 5em solid rgba(0,0,0,0);
} /* main body */
.banana.peeled::before,
.banana.peeled::after {
border-radius: 50%;
border: 0.5em solid transparent;
background: none;
box-shadow: 0 -5em 0 -1em #edc043;
}
.banana.peeled::before {
height: 13em;
width: 13em;
transform: rotate(-60deg);
top: 4em;
left: 15em;
} /* peel */
.banana.peeled::after {
height: 14em;
width: 14em;
transform: rotate(-130deg);
top: -10.5em;
left: 14em;
} /* peel */
/* banana peel */
.banana.peel {
height: 18em;
width: 19em;
top: 20em;
left: 22em;
box-shadow: 0 5.5em 0 -1em #f9cf44, -0.5em 6.5em 0 -1.4em #eddd7c;
border: none;
transform: rotate(-30deg);
transform-style: preserve-3d;
}
.banana.peel::after {
height: 17em;
width: 14em;
left: 18em;
top: 9.5em;
background: none;
border-radius: 50% 45%;
box-shadow: 0 5.5em 0 -1em #edc043;
transform: rotate(65deg) translateZ(-1em);
}
.banana.peel::before { display: none; }
Output
You can jump to the latest bin by adding /latest
to your URL
Keyboard Shortcuts
Shortcut | Action |
---|---|
ctrl + [num] | Toggle nth panel |
ctrl + 0 | Close focused panel |
ctrl + enter | Re-render output. If console visible: run JS in console |
Ctrl + l | Clear the console |
ctrl + / | Toggle comment on selected lines |
ctrl + ] | Indents selected lines |
ctrl + [ | Unindents selected lines |
tab | Code complete & Emmet expand |
ctrl + shift + L | Beautify code in active panel |
ctrl + s | Save & lock current Bin from further changes |
ctrl + shift + s | Open the share options |
ctrl + y | Archive Bin |
Complete list of JS Bin shortcuts |
JS Bin URLs
URL | Action |
---|---|
/ | Show the full rendered output. This content will update in real time as it's updated from the /edit url. |
/edit | Edit the current bin |
/watch | Follow a Code Casting session |
/embed | Create an embeddable version of the bin |
/latest | Load the very latest bin (/latest goes in place of the revision) |
/[username]/last | View the last edited bin for this user |
/[username]/last/edit | Edit the last edited bin for this user |
/[username]/last/watch | Follow the Code Casting session for the latest bin for this user |
/quiet | Remove analytics and edit button from rendered output |
.js | Load only the JavaScript for a bin |
.css | Load only the CSS for a bin |
Except for username prefixed urls, the url may start with http://jsbin.com/abc and the url fragments can be added to the url to view it differently. |