The CodePen Logo

Developer
Size
4,259 Kb
Views
20,240

How do I make an the codepen logo?

The CodePen logo in nothing but CSS!. What is a the codepen logo? How do you make a the codepen logo? This script and codes were developed by Yogev Ahuvia on 11 September 2022, Sunday.

The CodePen Logo Previews

The CodePen Logo - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>The CodePen Logo</title> <link href='https://fonts.googleapis.com/css?family=Molengo' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ /* This changes the global font-size, try other values */
/* From this point, everything is relative to the above $box-width */
.cp-icon { position: relative; display: inline-block; margin-right: 0.4em; width: 102px; height: 70.34483px; animation: cp-rotate 5s infinite linear; -moz-transform: rotateX(-42deg) rotateY(45deg); -ms-transform: rotateX(-42deg) rotateY(45deg); -webkit-transform: rotateX(-42deg) rotateY(45deg); transform: rotateX(-42deg) rotateY(45deg); -moz-transform-style: preserve-3d; -webkit-transform-style: preserve-3d; transform-style: preserve-3d;
}
.cp-icon:hover { animation-play-state: paused;
}
.cp-cube { position: relative; width: 102px; height: 70.34483px; -moz-transform-style: preserve-3d; -webkit-transform-style: preserve-3d; transform-style: preserve-3d;
}
.cp-cube > .cp-cube-side { position: absolute; top: 0; left: 0; width: 102px; height: 70.34483px; font-size: 51px; border: 0.25em solid white; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; -moz-transform-origin: 50% 50%; -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%;
}
.cp-cube > .cp-cube-side:nth-child(1) { /* front */ -moz-transform: translateZ(51px); -ms-transform: translateZ(51px); -webkit-transform: translateZ(51px); transform: translateZ(51px);
}
.cp-cube > .cp-cube-side:nth-child(2) { /* back */ -moz-transform: rotateY(180deg) translateZ(51px); -ms-transform: rotateY(180deg) translateZ(51px); -webkit-transform: rotateY(180deg) translateZ(51px); transform: rotateY(180deg) translateZ(51px);
}
.cp-cube > .cp-cube-side:nth-child(3) { /* top */ -moz-transform: rotateX(90deg) translateZ(50px); -ms-transform: rotateX(90deg) translateZ(50px); -webkit-transform: rotateX(90deg) translateZ(50px); transform: rotateX(90deg) translateZ(50px); height: 102px;
}
.cp-cube > .cp-cube-side:nth-child(4) { /* bottom */ -moz-transform: rotateX(90deg) translateZ(-16px); -ms-transform: rotateX(90deg) translateZ(-16px); -webkit-transform: rotateX(90deg) translateZ(-16px); transform: rotateX(90deg) translateZ(-16px); height: 102px;
}
.cp-cube > .cp-cube-side:nth-child(5) { /* left */ -moz-transform: rotateY(-90deg) translateZ(51px); -ms-transform: rotateY(-90deg) translateZ(51px); -webkit-transform: rotateY(-90deg) translateZ(51px); transform: rotateY(-90deg) translateZ(51px);
}
.cp-cube > .cp-cube-side:nth-child(6) { /* right */ -moz-transform: rotateY(90deg) translateZ(51px); -ms-transform: rotateY(90deg) translateZ(51px); -webkit-transform: rotateY(90deg) translateZ(51px); transform: rotateY(90deg) translateZ(51px);
}
@keyframes cp-rotate { from { -moz-transform: rotateX(-42deg) rotateY(-45deg); -ms-transform: rotateX(-42deg) rotateY(-45deg); -webkit-transform: rotateX(-42deg) rotateY(-45deg); transform: rotateX(-42deg) rotateY(-45deg); } to { -moz-transform: rotateX(-42deg) rotateY(315deg); -ms-transform: rotateX(-42deg) rotateY(315deg); -webkit-transform: rotateX(-42deg) rotateY(315deg); transform: rotateX(-42deg) rotateY(315deg); }
}
body { background: #222; font-family: 'Molengo', sans-serif; color: white; font-size: 102px;
}
p { width: 960px; margin: 120px auto; text-align: center; letter-spacing: 0.1em; -moz-transition: text-shadow 0.3s; -o-transition: text-shadow 0.3s; -webkit-transition: text-shadow 0.3s; transition: text-shadow 0.3s;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <p>CODEPEN</p> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

The CodePen Logo - Script Codes CSS Codes

/* This changes the global font-size, try other values */
/* From this point, everything is relative to the above $box-width */
.cp-icon { position: relative; display: inline-block; margin-right: 0.4em; width: 102px; height: 70.34483px; animation: cp-rotate 5s infinite linear; -moz-transform: rotateX(-42deg) rotateY(45deg); -ms-transform: rotateX(-42deg) rotateY(45deg); -webkit-transform: rotateX(-42deg) rotateY(45deg); transform: rotateX(-42deg) rotateY(45deg); -moz-transform-style: preserve-3d; -webkit-transform-style: preserve-3d; transform-style: preserve-3d;
}
.cp-icon:hover { animation-play-state: paused;
}
.cp-cube { position: relative; width: 102px; height: 70.34483px; -moz-transform-style: preserve-3d; -webkit-transform-style: preserve-3d; transform-style: preserve-3d;
}
.cp-cube > .cp-cube-side { position: absolute; top: 0; left: 0; width: 102px; height: 70.34483px; font-size: 51px; border: 0.25em solid white; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; -moz-transform-origin: 50% 50%; -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%;
}
.cp-cube > .cp-cube-side:nth-child(1) { /* front */ -moz-transform: translateZ(51px); -ms-transform: translateZ(51px); -webkit-transform: translateZ(51px); transform: translateZ(51px);
}
.cp-cube > .cp-cube-side:nth-child(2) { /* back */ -moz-transform: rotateY(180deg) translateZ(51px); -ms-transform: rotateY(180deg) translateZ(51px); -webkit-transform: rotateY(180deg) translateZ(51px); transform: rotateY(180deg) translateZ(51px);
}
.cp-cube > .cp-cube-side:nth-child(3) { /* top */ -moz-transform: rotateX(90deg) translateZ(50px); -ms-transform: rotateX(90deg) translateZ(50px); -webkit-transform: rotateX(90deg) translateZ(50px); transform: rotateX(90deg) translateZ(50px); height: 102px;
}
.cp-cube > .cp-cube-side:nth-child(4) { /* bottom */ -moz-transform: rotateX(90deg) translateZ(-16px); -ms-transform: rotateX(90deg) translateZ(-16px); -webkit-transform: rotateX(90deg) translateZ(-16px); transform: rotateX(90deg) translateZ(-16px); height: 102px;
}
.cp-cube > .cp-cube-side:nth-child(5) { /* left */ -moz-transform: rotateY(-90deg) translateZ(51px); -ms-transform: rotateY(-90deg) translateZ(51px); -webkit-transform: rotateY(-90deg) translateZ(51px); transform: rotateY(-90deg) translateZ(51px);
}
.cp-cube > .cp-cube-side:nth-child(6) { /* right */ -moz-transform: rotateY(90deg) translateZ(51px); -ms-transform: rotateY(90deg) translateZ(51px); -webkit-transform: rotateY(90deg) translateZ(51px); transform: rotateY(90deg) translateZ(51px);
}
@keyframes cp-rotate { from { -moz-transform: rotateX(-42deg) rotateY(-45deg); -ms-transform: rotateX(-42deg) rotateY(-45deg); -webkit-transform: rotateX(-42deg) rotateY(-45deg); transform: rotateX(-42deg) rotateY(-45deg); } to { -moz-transform: rotateX(-42deg) rotateY(315deg); -ms-transform: rotateX(-42deg) rotateY(315deg); -webkit-transform: rotateX(-42deg) rotateY(315deg); transform: rotateX(-42deg) rotateY(315deg); }
}
body { background: #222; font-family: 'Molengo', sans-serif; color: white; font-size: 102px;
}
p { width: 960px; margin: 120px auto; text-align: center; letter-spacing: 0.1em; -moz-transition: text-shadow 0.3s; -o-transition: text-shadow 0.3s; -webkit-transition: text-shadow 0.3s; transition: text-shadow 0.3s;
}

The CodePen Logo - Script Codes JS Codes

// Replacing 'O's and 'o's with the CodePen icon structure
var codepenized = $('p').html().replace(/o/ig, '\ <figure class="cp-icon">\ <div class="cp-cube">\ <div class="cp-cube-side"></div>\ <div class="cp-cube-side"></div>\ <div class="cp-cube-side"></div>\ <div class="cp-cube-side"></div>\ <div class="cp-cube-side"></div>\ <div class="cp-cube-side"></div>\ </div>\ </figure>');
$('p').html(codepenized);
The CodePen Logo - Script Codes
The CodePen Logo - Script Codes
Home Page Home
Developer Yogev Ahuvia
Username kindofone
Uploaded September 11, 2022
Rating 3
Size 4,259 Kb
Views 20,240
Do you need developer help for The CodePen Logo?

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!

Yogev Ahuvia (kindofone) Script Codes
Create amazing Facebook ads 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!