How the New Sublime Text Logo Was Made

Developer
Jon Kantner
Size
3,213 Kb
Views
12,144
  1. How the New Sublime Text Logo Was Made Previews
  2. How the New Sublime Text Logo Was Made HTML Codes
  3. How the New Sublime Text Logo Was Made CSS Codes

How do I make an how the new sublime text logo was made?

When I saw the new logo for Sublime Text 3 it reminded me of the Netflix “N” logo because it had very similar characteristics, so I created a CSS morph to joke about how it was made.. What is a how the new sublime text logo was made? How do you make a how the new sublime text logo was made? This script and codes were developed by Jon Kantner on 06 January 2023, Friday.

How the New Sublime Text Logo Was Made Previews
IQ Test

How the New Sublime Text Logo Was Made - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>How the New Sublime Text Logo Was Made</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="icon"> <div class="parts"> <div class="a"></div> <div class="b">	<div class="b-inner"></div> </div> <div class="c"></div> <div class="d"></div> </div>
</div>
</body>
</html>

How the New Sublime Text Logo Was Made - Script Codes CSS Codes

*, *:before, *:after { box-sizing: border-box; margin: 0; padding: 0;
}
:root { --dur: 2s;
}
body { background-color: #aad; display: flex; height: 100vh;
}
.icon { animation: darken var(--dur) linear infinite alternate; background-color: #000; border-radius: 16px; margin: auto; overflow: hidden; width: 256px; height: 256px;
}
.parts { animation: turn var(--dur) linear infinite alternate; position: relative; width: 100%; height: 100%; transform: rotate(90deg);
}
.parts > * { position: absolute;
}
.a, .b, .c { width: 188px; height: 36px; will-change: transform;
}
.a, .c { background-color: #be0004;
}
.b, .d { z-index: 1;
}
.a { animation: a var(--dur) linear infinite alternate; transform: translate(34px, 144px) skewY(0);
}
.b { animation: b var(--dur) linear infinite alternate; background-color: #f50006; box-shadow: 0 0 8px 0 #000; transform: translate(34px, 111px) skewY(-19deg);
}
.b-inner { animation: bInner var(--dur) linear infinite alternate; background-image: linear-gradient(#000, transparent 10px); background-position: 0 -10px; background-repeat: no-repeat; border-radius: 0 8px 0 0; opacity: 0; position: absolute; top: 100%; right: -6px; width: 94px; height: 30px; transform: scale(1, 0) skewX(-90deg); transform-origin: 100% 0;
}
.c { animation: c var(--dur) linear infinite alternate; transform: translate(34px, 78px) skewY(0);
}
.d { animation: d var(--dur) linear infinite alternate; background-color: #000; border-radius: 50% 0 0 50%; top: 12%; right: 0; width: 37px; height: 76%;
}
@keyframes a { from, 25% { background-color: #be0004; border-radius: 0; transform: translate(34px, 144px) skewY(0); width: 188px; height: 36px; } 75%, to { background-color: #ff9228; border-radius: 4px; transform: translate(54px, 58px) skewY(-16deg); width: 148px; height: 54px; }
}
@keyframes b { from, 25% { background-color: #f50006; border-radius: 0; box-shadow: 0 0 8px 0 #000; transform: translate(34px, 111px) skewY(-19deg); width: 188px; height: 36px; } 75%, to { background-color: #ff9228; border-radius: 4px; box-shadow: none; transform: translate(54px, 102px) skewY(16deg); width: 148px; height: 54px; }
}
@keyframes bInner { from, 25% { background-position: 0 -10px; opacity: 0; transform: scale(2.9, 0) skewX(-90deg); } 75%, to { background-position: 0 0; opacity: 0.2; transform: scale(1, 1) skewX(-61deg); }
}
@keyframes c { from, 25% { background-color: #be0004; border-radius: 0; transform: translate(34px, 78px) skewY(0); width: 188px; height: 36px; } 75%, to { background-color: #ff9228; border-radius: 4px; transform: translate(54px, 148px) skewY(-16deg); width: 148px; height: 54px; }
}
@keyframes d { from, 25% { background-color: #000; } 75%, to { background-color: #4b4b4b; }
}
@keyframes darken { from, 25% { background-color: #000; border-radius: 0; } 75%, to { background-color: #4b4b4b; border-radius: 16px; }
}
@keyframes turn { from, 25% { transform: rotate(90deg); } 75%, to { transform: rotate(0); }
}
How the New Sublime Text Logo Was Made - Script Codes
How the New Sublime Text Logo Was Made - Script Codes
Home Page Home
Developer Jon Kantner
Username jkantner
Uploaded January 06, 2023
Rating 4.5
Size 3,213 Kb
Views 12,144
Do you need developer help for How the New Sublime Text Logo Was Made?

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!

Jon Kantner (jkantner) Script Codes
Name
Club Command Line
Responsive Morphing Apple Product
Black Hole Illusion
3D Half Word and Shadow
Spinning Letter Illusion
Nintendo GameCube
Impossible Staircase
Roll-Up US Constitution
PAL TV Test Pattern
K-2SO
Create amazing blog posts 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!