Sublime Skin for CodePen Embeds

Developer
ZeroSpree
Size
6,333 Kb
Views
64,768
  1. Sublime Skin for CodePen Embeds Previews
  2. Sublime Skin for CodePen Embeds HTML Codes
  3. Sublime Skin for CodePen Embeds CSS Codes

How do I make an sublime skin for codepen embeds?

Your CodePen embeds can look really Sublime from now on. Because, why not?. What is a sublime skin for codepen embeds? How do you make a sublime skin for codepen embeds? This script and codes were developed by ZeroSpree on 13 July 2022, Wednesday.

Sublime Skin for CodePen Embeds Previews
IQ Test

Sublime Skin for CodePen Embeds - Script Codes HTML Codes

<!DOCTYPE html>
<html class="test-sublime">
<head> <meta charset="UTF-8"> <title>Sublime Skin for CodePen Embeds</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <!--
// Sublime skin for CodePen embeds. //
If you're a PRO codePen user, you can paste this custom css link into your embed builder:
http://codepen.io/zerospree/pen/GyiuE.css
#protip - stuff might break a little in the embed builder, but it's gonna be totally fine when you post the embed.
CodePen Statistics Embed included as example only.
Tested in Chrome, FireFox and IE11
EDIT changed original id (7120) to 7301.
-->
<p data-height="531" data-theme-id="7301" data-slug-hash="sjcoa" data-default-tab="result" class='codepen'></p>
<script async src="//codepen.io/assets/embed/ei.js"></script> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>

Sublime Skin for CodePen Embeds - Script Codes CSS Codes

.test-sublime{margin:20px} /*that's unrelated*/
/*Chrome supports scrollbar styling, so why not?*/
::-webkit-scrollbar{width:8px;height:8px;background:#272822;}
::-webkit-scrollbar-thumb{background:linear-gradient(#4A4A4A 0%, #454545 50%, #404040 100%);border-radius:10px;box-shadow:inset 1px 0 0 #585858, 0 0 0 1px #191919}
::-webkit-scrollbar-button{background:#272822;width:5px;height:5px;}
::-webkit-scrollbar-corner{background:#272822;}
/*Logo styling*/
.embed-nav .logo-wrap a{width:58px;padding:0;margin-top:9px;}
.cp-embed-logo:not(:last-child){display:none}
/*Rerun button*/
#rerun-button{background:#474745;color:#C1C1BF}
#rerun-button:hover{background:#171814;color:#fff}
/*Output windows*/
#output{background:#272822;border-top:1px solid #3C3D39;}
#output pre{font-size:12px;background:#272822;}
/*Tabs Styling*/
.embed-nav{background:#171814!important;box-shadow:inset 0 -1px 0 #0B0C0A;font-size:0;padding-top:6px}
.embed-nav ul a{margin:0 14px 0 13px;color:#C1C1BF!important;font-size:11px;background:#272822;text-transform:lowercase;position:relative;padding:6px 2px 7px;min-width:80px;cursor:default;line-height:15px;
box-shadow:inset 0 1px #646462, inset 0 -1px 0 #2E2F2C, inset 0 -2px 0 #343431;
background:linear-gradient(#4D4D4B 0%, #393937 50%);}
.embed-nav ul a.active{border-top:0;color:#fff!important;z-index:1;
box-shadow:0 1px #272822, inset 0 1px #464742, inset 0 2px #363732;
background:linear-gradient(#363732 0%, #272822 50%);}
.embed-nav ul a::after,
.embed-nav ul a::before,
.embed-nav ul a.active::after,
.embed-nav ul a.active::before{content:'';width:26px;height:29px;border:0;position:absolute;top:0;margin:0;left:auto;right:-26px;}
.embed-nav ul a::before,
.embed-nav ul a::after{background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAdCAIAAAA7LeshAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyFpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDIxIDc5LjE1NDkxMSwgMjAxMy8xMC8yOS0xMTo0NzoxNiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDozQUQ5RjNBQzA1QkExMUU0QjYzREYxNEYzQjU0Mzk3RSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDozQUQ5RjNBRDA1QkExMUU0QjYzREYxNEYzQjU0Mzk3RSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjNBRDlGM0FBMDVCQTExRTRCNjNERjE0RjNCNTQzOTdFIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjNBRDlGM0FCMDVCQTExRTRCNjNERjE0RjNCNTQzOTdFIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+nM8FZwAAAsVJREFUeNqsVttS4kAQDRNAYopLWJIVQ0CI+LBu7a4v+rz+xpaf7sta5aooibmR20z2hGiMEvBSnppKDd2nT3Un3TNUzs7+2I598ffi/Pw84ZJarVp5BLcRySOiKK5wFV3XtaHG6/p4q14fDkf6/sQ0Tdu2CSFZwAbFopaiKKenvwfqgFHK7+9PoihyXadarY7HY9dxDdPcrFjU0gbayclJFIaGMYdOlTGWkSzLEqL46OiX49hIs1qrQQnlv1CESmpNuDiKpU4n5dvOYuFlXkIpy5fjOGEYHh8fVwiP32lcaaVcAi84YIKPqFyBJAkrLsMw6vWtw8NvMWXLgpbpPCszfcILDpjgF8NJsoLr66vRcNRpt2hMi1q5IuzwggPmi1jCyuD7/vTggD4kmGSi+R52eMFZDYRcsrrm87nckztSh6WKxdQ4WGCHF5zVwPLsgMViMZnolNJlVhwsqW6aGoUd3tIokn6osmWahiLLDaGRdlKWIV41Y7DADm9p1NrsgDiOhpqGN8WSh27DHhbY14WQDVN5dzcfDDS0cdYEeGvYwwL7upCnqVgFXDzP7/T7/y4vCU/Qpjv9XViQ3boQsmzLtQufbzRCvTTrD01LU9vAL2njItBc4rYodSVMe6vdERoN319s4BPuNbiutzfawySouzuO467OybNiX5XDSSPLvXa7JQiCZd3nQ/JBOSAMo+l0alkOY+wT5NC0PbnneS4OyM2Kb5LDN8URKiuK7wefIAfc3Nx86XaxCYIgP2k+LoeceJ4MNDUIQprOXbniW+WAq6vrriSJ4rbneXFMS8dp7YlSutB36kDF9OKuieMYg/yCwKtqP3kzgsBvNluiKM5mtxDFXZpdczmB7/e/Ju8Brs1uV2o2m/O5gXqz/wu5t/Lj53fu/VBkhfD87WyG8hvC1tMB1Wo1PyDnBws8t0UBq2j/L8AAzqXgKAdYa5sAAAAASUVORK5CYII=);}
.embed-nav ul a.active::before,
.embed-nav ul a.active::after{background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAdCAIAAAA7LeshAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyFpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDIxIDc5LjE1NDkxMSwgMjAxMy8xMC8yOS0xMTo0NzoxNiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDowMEY3NjQxRDA1QjcxMUU0QkQ2NUU0MEJBMjMxN0FFMyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDowMEY3NjQxRTA1QjcxMUU0QkQ2NUU0MEJBMjMxN0FFMyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjAwRjc2NDFCMDVCNzExRTRCRDY1RTQwQkEyMzE3QUUzIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjAwRjc2NDFDMDVCNzExRTRCRDY1RTQwQkEyMzE3QUUzIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+PnE8AQAAAr1JREFUeNqkVV1vokAU5UsQEQWrtlXRtmb7sH3ZvujjJrv//yc02cdtsyIBZPic6RGioRZo657cjAbmnjl37gf8r98/oyjc/LOfX154jhMlkefxyxVrA9gBSZLyHL9cLq25JRGya7Va84U1mV49Pf1xXVfKGbGvgbHMNR6P1+uVIrd93xOvr8ZpkoaEiKI4Hg3DKAx2RBD4nKuasMxlzaz1ep3E8XZrJ0kiMY4Vm4IgSOXs9mYRh3FAArAXQb/nggcWiDAN4/Hxh+/5hATFW4GWEIYEJ9ze3eTPc0fGKtRxjGYZL4ir1SqOY9/3s4wWtncrm+t6kiTNphOwc7nwMmEe4n5NM/rw8F2Wle12yxg9msDewbbtwYXZUVWclqtjJ8FmaWb0e4v54vn574mvUOY+GkK4vLqE2oKKsTcZwDHf7u/DMKTvUKEO8DxX17WO1qH0jUD8pRk1TGM0HCGIk4uCVdMBURQNR0N6EHighbTs7m5JCKFVqKXzPK+n65IsU1akd58COLTV9ng0cpxtLvnUaunyO0ovBkYRb1FtuLW5ZaVpQmsgNHQlGs40TfQjZHH7Wtu33WxmbTZ2nYuU11c18Ar+fbPv2A4vcBB7PZmiW6CuzkVoHhtI8cDso+CL+rCsGRKaV3K1Nd0dgAJUFEXTtDRNDWNf28hpw/4P1AEo1+FwkKV0Op34/q5588d0u91O17vdroYVySlUnE8HYK5NZ5AWHJqE+y86jNl2W3FdBy1xvKbz6YphpaoqpmGzwE/RAZhrLVmCOgR+6BN2Pl3+JeK0bifvMFan8bN0AApYUVqiKGDY1An8Al1Rg1pXpTSNYzBmFRPlS3SoQayYrFEUExKiVXCbn50odTmRWlLf6IELYpGZrIQv0wGbzUYQuMFFXxAFEoZxkhxN4s6C4ziYXbreQ3nj83h8/irAAFghfRH9vALsAAAAAElFTkSuQmCC);}
.embed-nav li:last-child a::after,
.embed-nav li:first-child a::before{right:-23px;width:23px;background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABcAAAAdCAIAAADO02CRAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyFpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDIxIDc5LjE1NDkxMSwgMjAxMy8xMC8yOS0xMTo0NzoxNiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo4RjcxRTMxQTA1QkExMUU0OTAxN0RGNjdEQ0Y2Rjg1NCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo4RjcxRTMxQjA1QkExMUU0OTAxN0RGNjdEQ0Y2Rjg1NCI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjhGNzFFMzE4MDVCQTExRTQ5MDE3REY2N0RDRjZGODU0IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjhGNzFFMzE5MDVCQTExRTQ5MDE3REY2N0RDRjZGODU0Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+zeo7JQAAAghJREFUeNqclV9zmkAUxZddNDGtFCnYkAhUjXam6djmxY/TyRf3pXkIOlGILNUCu9uLNI3T8k/O3NFhHH9z7t2zF+n+/jtjLKDBw4+HxWIhkGi1ZOlFqJ6IbVtJEp+127btjG9Gvu8HQYAxzn6uCSKTyZhzHsdxGFJZlofDYUhDz/dPAmF+pO12SwN6d/etp6pJnAiBEHSYflVRGOPHRSmNomg+n0uYwDNA6nSEheD/lOd57fbZ7e3nhMFjaqXSDhZ5Wi5dx3bUdwpLWK2OeIH2+/1kOmV/7IhyFlBEbm02G0M31J7KU1BTL6DdbjcajSGTqGo6OD3MgvJ9r28Y551zIKKqjsoEsbYtK50OyuwUeinTer0ZDCyIL2TgxWMjL4SQS9OE6RzMFOYFlRccluPYhyPP7oOom7pjQXDeXFz0NO1gp9FcMoXhz4+OzYsTWIsCd13X9U6nA5PKtYNrbrMoii3bAjsI5SSwLgUSeH11BWssBTXrCARnBNvPdhyWty7qUkCr1coaXIMdlk4nRfzlnECB/0ICp58mWQKFeI3yCRSQ6y7NS1NVe0mScP566GV3OrcoDWGZtuRWugZ5FvCqe/S/np99mciz2QxeMVEMqzn1REzzgzhRlAaapunv9aendRLHSELS7OsX1Eh9o48JWbru46MrK0q3GWX/awefXeVtV7n5LcAA/IO9sfGOlTAAAAAASUVORK5CYII=);}
.embed-nav ul li:last-child a.active::after,
.embed-nav ul li:first-child a.active::before{right:-23px;width:23px;background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABcAAAAdCAIAAADO02CRAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyFpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDIxIDc5LjE1NDkxMSwgMjAxMy8xMC8yOS0xMTo0NzoxNiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpCMjlEMzIzODA1QkIxMUU0OUY4Mzk1NjNGQTI3NDIwMyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpCMjlEMzIzOTA1QkIxMUU0OUY4Mzk1NjNGQTI3NDIwMyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkIyOUQzMjM2MDVCQjExRTQ5RjgzOTU2M0ZBMjc0MjAzIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkIyOUQzMjM3MDVCQjExRTQ5RjgzOTU2M0ZBMjc0MjAzIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+6F5scwAAAeBJREFUeNqcletymkAcxWEXzQgSXVilUaeNfmkfox/a93+OZlpNIcBy2+0BmrS1XBbPMAjD8OP8r5pfvn6WUmWZ+PH9/O3pyTQMalHTxK/RnnVEN1uvqkrLsnzuB8EmTtI0FYSYk0B09xBIKcuiFGlKKd1uuMhEEqevIC2OpQz1dpMkSTmvjo8fcpEnaQJoa2iUQuS/EiItiuJ4emweKYWPKKVDUVdHGEZI02G/A9RonI5yiOrS+Xz2fGYvFlXV+DHUKEV2HnmeB+8CeGsJw3a6vUBRFLquYzu2lON2eilQlmV8w6WGnSFKFEX3rmvN57WZJsu3UCC0te+t34rVSxlOfhiGjDHTMBtmb+9YzXd6hacYgRVb/Xx+Rif39TEZ7UsUy2NrWf320elmJC8QGufubm4vh0pOdAZfCMF9b6ADtShxHC+Xzmw2k22S/7NDNLdZUZTMZ32l0KW8vETr1Qqbq3Nd6FLgAtuP83YgrteFLgW6XC7Ma+yo62JNoOBNdGDwsH0N6k9cEygQtheys7Cxvaq/Q5pGaXtnv9tRQuo1WK+zOrLJFPQOBupw2COcoqyaTa0mU9o0287ieHpPKCnLEtFRztkNIPyBOo5Tj4XCtTA/fjoZtwolc917nH8JMAASJP3IhrOSPAAAAABJRU5ErkJggg==);}
.embed-nav ul a::before,
.embed-nav ul a.active::before,
.embed-nav ul li:first-child a::before{-webkit-transform:scaleX(-1);-ms-transform:scaleX(-1);transform:scaleX(-1);right:auto;left:-26px;}
.embed-nav ul li:first-child a::before{left:-23px;}
.embed-nav ul li:first-child{margin-left:14px;}
Sublime Skin for CodePen Embeds - Script Codes
Sublime Skin for CodePen Embeds - Script Codes
Home Page Home
Developer ZeroSpree
Username zerospree
Uploaded July 13, 2022
Rating 4.5
Size 6,333 Kb
Views 64,768
Do you need developer help for Sublime Skin for CodePen Embeds?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

ZeroSpree (zerospree) Script Codes
Name
Waving Santa
Steve Jobs
Just another Button
Pure CSS Apple Logo
CSS3 Shadows Darth Vader
Programmer
TinyCop CSS Pixel Art
Hexagon exercise.
Suspecting Minion
Flip - card memory game.
Create amazing web content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!