Two Element Typeface
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 - 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;
}
Developer | Chris Ota |
Username | chrisota |
Uploaded | September 15, 2022 |
Rating | 4 |
Size | 4,942 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 |
Simple Toggle Switch | 2,829 Kb |
Navigation Experiment | 4,547 Kb |
Lego Man | 5,277 Kb |
For Fun | 3,087 Kb |
Origami Penguin | 4,204 Kb |
Mobile Table with Comparison View | 5,946 Kb |
Styled Checkbox | 4,069 Kb |
Responsive Devices | 5,519 Kb |
Pure HTML and CSS Accordion | 3,485 Kb |
Pure HTML and CSS Braun Clock | 6,537 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 |
A Different Type of Gallery | DonPage | 2,950 Kb |
Simple Weather App | Cmwebby | 0 Kb |
Plotting Points with D3.js | Laurakelly | 31,996 Kb |
Experiments with Vertical Centering | KatieK2 | 3,924 Kb |
TweetBox with React JS | J0zelito | 3,325 Kb |
Polo, the flying squirrel | Agbales | 2,445 Kb |
Lazy Load for Background Images | The_ruther4d | 2,977 Kb |
Mosaic transition effect between two photos using jQuery | Stathisg | 2,518 Kb |
AOR site logo | Thatbram | 2,527 Kb |
Save for later... | Victorfreire | 1,359 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!