The CodePen Logo

Developer
Yogev Ahuvia
Size
4,259 Kb
Views
20,240
  1. The CodePen Logo Previews
  2. The CodePen Logo HTML Codes
  3. The CodePen Logo CSS Codes
  4. The CodePen Logo JS Codes

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,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
Name
Spinning Top
A Circular Form
Real-Time Love Meter
Bouncy Icon Select Menu
Tears Of Happiness
Ball Bouncing On Text
Thumbnail Animation Effects
CSS Only In-Place Translation
A Pen by Yogev Ahuvia
Subtle Buttons
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!