The CodePen Logo

Developer
Yogev Ahuvia
Size
4,259 Kb
Views
20,230

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
IQ Test

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,230
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
Name
A Circular Form
Spinning Top
Humble Progress
Bouncy Icon Select Menu
3D Cube of 3D Balls
Playing At Sunset
Natural Language Accordion Form
CSS Only In-Place Translation
A Pen by Yogev Ahuvia
Playing with fixed header
Create amazing SEO 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!