The CodePen Logo
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 - 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);
Developer | Yogev Ahuvia |
Username | kindofone |
Uploaded | September 11, 2022 |
Rating | 3 |
Size | 4,259 Kb |
Views | 20,240 |
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!
Name | Size |
CSS Only In-Place Translation | 3,336 Kb |
Bouncy Icon Select Menu | 6,673 Kb |
3D Cube of 3D Balls | 4,507 Kb |
Thumbnail Animation Effects | 10,393 Kb |
Tears Of Happiness | 3,667 Kb |
Playing At Sunset | 12,065 Kb |
Real-Time Love Meter | 5,493 Kb |
Subtle Buttons | 4,010 Kb |
A Pen by Yogev Ahuvia | 1,941 Kb |
Playing with fixed header | 7,296 Kb |
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!
Name | Username | Size |
Simple animated hover effect | Pobee-norris | 3,044 Kb |
Website Concept | Sagoza | 3,104 Kb |
CSS Donut Charts | Seanstopnik | 2,908 Kb |
3D-box | Parthviroja | 2,346 Kb |
Pure CSS Torch Light | Juliendargelos | 2,727 Kb |
Drop Cap | Gsaiki | 1,571 Kb |
HTML5 Breakout | Jaysalvat | 4,873 Kb |
Flexbox Grid - equal height | DaveOrDead | 2,855 Kb |
A Pen by Kenny Mark | Kennymark | 5,574 Kb |
Fun form with currentColor | Bnthor | 2,713 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!