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 |
CSS Filter Glass | 7,188 Kb |
Living Interfaces - Talk | 7,280 Kb |
Spinning Top | 6,037 Kb |
Subtle Buttons | 4,010 Kb |
Ball Bouncing On Text | 5,553 Kb |
Bouncy Icon Select Menu | 6,673 Kb |
Real-Time Love Meter | 5,493 Kb |
A Circular Form | 8,003 Kb |
A Pen by Yogev Ahuvia | 1,941 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 |
TigerWoods Freecodecamp Page | Baileytj | 2,869 Kb |
Tree growth tests | Orchard | 3,818 Kb |
Starting out with Ember.JS | Cfleschhut | 4,808 Kb |
Flex layout example | Mofny | 1,663 Kb |
Pure CSS Spinners | Jlong | 2,043 Kb |
CSS Link Icons with jQuery Titles | Nicwinn | 2,312 Kb |
Underlined form fields | Mitchdot | 2,323 Kb |
Mesmerizing octopus | Jllodra | 3,549 Kb |
Mosaic transition effect between two photos using jQuery | Stathisg | 2,518 Kb |
Zip Button test | Lje7462 | 1,932 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!