Two Element Typeface

Developer
Chris Ota
Size
4,942 Kb
Views
20,230
  1. Two Element Typeface Previews
  2. Two Element Typeface HTML Codes
  3. Two Element Typeface CSS Codes

How do I make an two element typeface?

An experiment where I tried to recreate a chiseled typeface with two HTML elements or less. The rest of my name has been commented out to keep the overall design shorter.. What is a two element typeface? How do you make a two element typeface? This script and codes were developed by Chris Ota on 15 September 2022, Thursday.

Two Element Typeface Previews
IQ Test

Two Element Typeface - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Two Element Typeface</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="c"><span>C</span></div>
<div class="h"><span>H</span></div>
<div class="r"><span>R</span> </div>
<div class="i">I</div>
<div class="s"><span>S</span> </div>
<!--
.t <span>T</span>
.o <span>O</span>
.p <span>P</span>
.h <span>H</span>
.e <span>E</span>
.r <span>R</span>
-->
<div class="o"><span>O</span></div>
<div class="t"><span>T</span></div>
<div class="a"><span>A</span></div>
</body>
</html>

Two Element Typeface - Script Codes CSS Codes

html { background: #252527; height: 100%; width: 100%;
}
body { text-align: center; height: 112px; top: 0; bottom: 0; left: 0; right: 0; margin: auto; position: absolute;
}
body *:before,
body *:after { display: block; content: ''; height: 0; width: 0; border-style: solid; position: absolute;
}
div { position: relative; font-size: 0; display: inline-block;
}
div,
span { border-style: solid;
}
.c { margin: 0 0 0 -60px; width: 70px; height: 70px; border-radius: 100%; border-width: 10px; border-color: #79BD9A transparent #79BD9A #79BD9A;
}
.c:before { display: block; content: ""; height: 0; width: 0; border-style: solid; position: absolute; width: 90px; height: 90px; border-radius: inherit; border-width: 10px; border-color: #CFF09E transparent #3B8686 #A8DBA8; top: -20px; left: -20px;
}
.c:after { border: none;
}
.c span { display: block; position: absolute; right: -3px; top: -3px; border-width: 13px 13px 0 0; border-color: #3B8686 transparent transparent transparent;
}
.c span:before { top: 50px; right: -13px; border-width: 13px 0 0 13px; border-color: transparent transparent transparent #CFF09E;
}
.c span:after { border: none;
}
.h { height: 90px; top: -80px; width: 0; margin: 0 12px 0 10px; border-color: #CFF09E #79BD9A #3B8686 #A8DBA8; border-width: 10px;
}
.h:before { height: 90px; width: 0px; border-color: #CFF09E #79BD9A #3B8686 #A8DBA8; border-width: 10px; top: -10px; right: -80px;
}
.h:after { width: 50px; left: 0; border-color: #3B8686 transparent transparent transparent; border-width: 10px; top: 45px;
}
.h span { z-index: 1; position: relative; display: block; height: 0px; width: 50px; top: 25px; left: 0; border-color: transparent transparent #CFF09E transparent; border-width: 10px;
}
.h span:before, .h span:after { border: 0;
}
.r { top: -80px; margin-left: 90px; margin-right: 20px; margin-top: 10px; width: 35px; height: 25px; border-radius: 0 40px 40px 0; border-width: 10px; border-color: #3B8686 #3B8686 #A8DBA8 #79BD9A; box-shadow: 0px 0 0 10px #CFF09E; z-index: 1;
}
.r:before { left: -20px; top: -20px; height: 90px; width: 0px; border-color: #CFF09E transparent #3B8686 #A8DBA8; border-width: 10px;
}
.r:after { width: 18px; height: 44px; left: -10px; top: 35px; z-index: -2; border-color: #3B8686 transparent transparent #79BD9A; border-right: 0; border-width: 10px 10px 0 10px;
}
.r span { display: block; top: 80px; left: 34px; position: relative; width: 0; height: 0; border-style: solid; border-width: 0 16px 10px 6px; border-color: transparent transparent #3B8686 transparent;
}
.r span:before { z-index: -1; top: -44px; left: -28px; height: 50px; width: 0; border-color: transparent #A8DBA8 transparent transparent; border-width: 7px 10px 0 10px; -webkit-transform: rotate(-25deg); transform: rotate(-25deg); z-index: -1;
}
.r span:after { z-index: -1; top: -38px; left: -9px; height: 37px; width: 0; border-color: transparent transparent transparent #79BD9A; border-width: 4px 0 2px 13px; -webkit-transform: rotate(18deg) skew(44deg); transform: rotate(18deg) skew(44deg);
}
.i { top: -90px; margin: 0 25px 0 10px; height: 90px; width: 0px; border-color: #CFF09E #79BD9A #3B8686 #A8DBA8; border-width: 10px;
}
.i:before, .i:after { border: 0;
}
.s { top: -46px; margin-right: 40px; margin-top: 10px; width: 34px; height: 26px; border-radius: 40px 0 0 40px; border-width: 10px 0 10px 10px; border-color: #3B8686 transparent #CFF09E #79BD9A; z-index: 1;
}
.s:before { top: -20px; left: -20px; height: 46px; width: 44px; border-radius: 40px 0 0 40px; border-width: 10px 0 10px 10px; border-color: #CFF09E #3B8686 #3B8686 #A8DBA8;
}
.s:after { left: 30px; top: -20px; width: 20px; height: 0px; border-width: 10px 10px 10px 0; border-color: #CFF09E #79BD9A #3B8686 transparent;
}
.s span { display: block; position: absolute; top: 36px; left: 10px; width: 34px; height: 26px; border-radius: 0 40px 40px 0; border-width: 10px 10px 10px 0; border-color: #3B8686 #A8DBA8 #CFF09E transparent;
}
.s span:before { top: -20px; height: 46px; width: 44px; border-radius: 0 40px 40px 0; border-width: 10px 10px 10px 0; border-color: #CFF09E #79BD9A #3B8686 transparent;
}
.s span:after { left: -25px; top: 26px; width: 20px; height: 0px; border-width: 10px 0 10px 10px; border-color: #CFF09E transparent #3B8686 #A8DBA8;
}
.t { width: 60px; height: 0px; top: -90px; margin: 0 0 0 5px; border-width: 10px; border-color: #CFF09E #79BD9A #3B8686 #A8DBA8;
}
.t:before { height: 80px; border-color: transparent #79BD9A #3B8686 #A8DBA8; left: 20px; top: 10px; border-width: 10px; border-top: transparent;
}
.t:after { border: none;
}
.t span:before { left: 20px; border-width: 0 0 10px 10px; border-color: transparent transparent #A8DBA8 transparent;
}
.t span:after { right: 20px; border-width: 10px 0 0 10px; border-color: transparent transparent transparent #79BD9A;
}
.o { top: -80px; width: 70px; height: 70px; border-radius: 100%; border-width: 10px; border-color: #3B8686 #3B8686 #79BD9A #79BD9A; margin-left: 60px; margin-right: 10px;
}
.o:before { width: 90px; height: 90px; border-radius: inherit; border-width: 10px; border-color: #CFF09E #CFF09E #3B8686 #A8DBA8; top: -20px; left: -20px;
}
.o:after,
.o span,
.o span:after,
.o span:before { border: none;
}
.p { margin-left: 20px; margin-right: 15px; margin-top: 10px; width: 35px; height: 25px; border-radius: 0 40px 40px 0; border-width: 10px; border-color: #3B8686 #3B8686 #A8DBA8 #79BD9A; box-shadow: 0px 0 0 10px #CFF09E; z-index: 1;
}
.p:before { left: -20px; top: -20px; height: 90px; width: 0px; border-color: #CFF09E transparent #3B8686 #A8DBA8; border-width: 10px;
}
.p:after { width: 18px; height: 44px; left: -10px; top: 35px; z-index: -2; border-color: transparent transparent transparent #79BD9A; border-right: 0; border-width: 10px 10px 0 10px;
}
.p span,
.p span:before,
.p span:after { display: none;
}
.e { margin-right: -60px; margin-left: 80px; height: 90px; width: 70px; border-color: #CFF09E transparent #3B8686 #A8DBA8; border-width: 10px 0 10px 10px;
}
.e:before, .e:after { height: 25px; width: 60px; border-color: #3B8686 transparent #CFF09E #79BD9A; border-width: 10px 0 10px 10px;
}
.e:after { top: 45px;
}
.e span,
.e span:after,
.e span:before { width: 0; border-width: 10px 10px 10px 0; border-color: transparent #79BD9A transparent transparent;
}
.e span { z-index: 1; position: relative; display: block; left: 60px; top: -10px;
}
.e span:before { left: 0px; top: 35px;
}
.e span:after { left: 0px; top: 80px;
}
.a { position: relative; margin: 0 0 0 18px; height: 88px; top: 12px; border-color: transparent #79BD9A #3B8686 #A8DBA8; border-width: 0 10px 10px 10px; -webkit-transform: skew(-22deg); transform: skew(-22deg); box-shadow: -5px -16px 0 -5px #A8DBA8;
}
.a:before { display: block; content: ""; height: 0; width: 0; border-style: solid; position: absolute; left: 5px; height: 24px; -webkit-transform: skew(22deg); transform: skew(22deg); border-color: #A8DBA8; border-width: 0 0 0 10px;
}
.a:after { display: block; content: ""; height: 0; width: 0; border-style: solid; position: absolute; bottom: -10px; left: 40px; height: 64px; border-color: transparent #79BD9A #3B8686 #A8DBA8; border-width: 0 10px 10px 10px; -webkit-transform: skew(39deg); transform: skew(39deg); box-shadow: 5px -40px 0 -5px #79BD9A;
}
.a span { -webkit-transform: skew(22deg); transform: skew(22deg); z-index: 1; display: block; position: absolute; top: 48px; left: -3px; right: 0; margin: auto; width: 24px; border-width: 6px 13px; border-color: transparent transparent #CFF09E transparent;
}
.a span:before { display: block; content: ""; height: 0; width: 0; border-style: solid; position: absolute; top: 6px; left: -13px; width: 36px; border-width: 10px 7px; border-color: #3B8686 transparent transparent transparent;
}
.a span:after { display: block; content: ""; height: 0; width: 0; border-style: solid; position: absolute; top: -66px; left: 6px; border-color: #CFF09E transparent transparent transparent; border-width: 12px 6px 0 6px;
}
Two Element Typeface - Script Codes
Two Element Typeface - Script Codes
Home Page Home
Developer Chris Ota
Username chrisota
Uploaded September 15, 2022
Rating 4
Size 4,942 Kb
Views 20,230
Do you need developer help for Two Element Typeface?

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!

Chris Ota (chrisota) Script Codes
Name
Dynamic Restaurant Prices
Vertical Progress Navigation
Button Hover Animation
Responsive Devices
Simple Toggle Switch
Random Wrist Watch
Thank You Dribbble Card
Lego Man
Origami Penguin
Single HTML Element Icons
Create amazing marketing copy 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!