3D Text

Developer
Joey Hoer
Size
3,862 Kb
Views
30,360
  1. 3D Text Previews
  2. 3D Text HTML Codes
  3. 3D Text CSS Codes

How do I make an 3d text?

A SCSS mixin to generate realistic 3D text. What is a 3d text? How do you make a 3d text? This script and codes were developed by Joey Hoer on 14 September 2022, Wednesday.

3D Text Previews
IQ Test

3D Text - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>3D Text</title> <script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Bowlby+One+SC'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <h2>Super Cool</h2>
<h1>Super 3D</h1>
<h2>SCSS Mixin</h2>
</body>
</html>

3D Text - Script Codes CSS Codes

h1, h2 { margin: 0; line-height: 1; font-weight: 400;
}
h1 { color: #ff1a1a; font-size: 5em; text-shadow: -0.81915px 0px 0px #00334d, 0px -0.57358px 0px #0099e6, -1.6383px -0.57358px 0px #00334d, -0.81915px -1.14715px 0px #0099e6, -2.45746px -1.14715px 0px #00334d, -1.6383px -1.72073px 0px #0099e6, -3.27661px -1.72073px 0px #00334d, -2.45746px -2.29431px 0px #0099e6, -4.09576px -2.29431px 0px #00334d, -3.27661px -2.86788px 0px #0099e6, -4.91491px -2.86788px 0px #00334d, -4.09576px -3.44146px 0px #0099e6, -5.73406px -3.44146px 0px #00334d, -4.91491px -4.01504px 0px #0099e6, -6.55322px -4.01504px 0px #00334d, -5.73406px -4.58861px 0px #0099e6, -7.37237px -4.58861px 0px #00334d, -6.55322px -5.16219px 0px #0099e6, -8.19152px -5.16219px 0px #00334d, -7.37237px -5.73576px 0px #0099e6, -9.01067px -5.73576px 0px #00334d, -8.19152px -6.30934px 0px #0099e6, -9.82982px -6.30934px 0px #00334d, -9.01067px -6.88292px 0px #0099e6, -10.64898px -6.88292px 0px #00334d, -9.82982px -7.45649px 0px #0099e6, -11.46813px -7.45649px 0px #00334d, -10.64898px -8.03007px 0px #0099e6, -12.28728px -8.03007px 0px #00334d, -11.46813px -8.60365px 0px #0099e6, -13.10643px -8.60365px 0px #00334d, -12.28728px -9.17722px 0px #0099e6, -13.92558px -9.17722px 0px #00334d, -13.10643px -9.7508px 0px #0099e6, -14.74474px -9.7508px 0px #00334d, -13.92558px -10.32438px 0px #0099e6, -15.56389px -10.32438px 0px #00334d, -14.74474px -10.89795px 0px #0099e6, -16.38304px -10.89795px 0px #00334d, -15.56389px -11.47153px 0px #0099e6, -17.20219px -11.47153px 0px #00334d, -16.38304px -12.04511px 0px #0099e6, -18.02134px -12.04511px 0px #00334d, -17.20219px -12.61868px 0px #0099e6, -18.8405px -12.61868px 0px #00334d, -18.02134px -13.19226px 0px #0099e6, -19.65965px -13.19226px 0px #00334d, -18.8405px -13.76583px 0px #0099e6, -20.4788px -13.76583px 0px #00334d, -19.65965px -14.33941px 0px #0099e6, -21.29795px -14.33941px 0px #00334d, -20.4788px -14.91299px 0px #0099e6, -22.11711px -14.91299px 0px #00334d, -21.29795px -15.48656px 0px #0099e6, -22.93626px -15.48656px 0px #00334d, -22.11711px -16.06014px 0px #0099e6, -23.75541px -16.06014px 0px #00334d, -22.93626px -16.63372px 0px #0099e6, -24.57456px -16.63372px 0px #00334d, -23.75541px -17.20729px 0px #0099e6, -25.39371px -17.20729px 0px #00334d, -24.57456px -17.78087px 0px #0099e6, -26.21287px -17.78087px 0px #00334d, -25.39371px -18.35445px 0px #0099e6, -27.03202px -18.35445px 0px #00334d, -26.21287px -18.92802px 0px #0099e6, -27.85117px -18.92802px 0px #00334d, -27.03202px -19.5016px 0px #0099e6, -28.67032px -19.5016px 0px #00334d, -27.85117px -20.07518px 0px #0099e6, -29.48947px -20.07518px 0px #00334d, -28.67032px -20.64875px 0px #0099e6, -30.30863px -20.64875px 0px #00334d, -29.48947px -21.22233px 0px #0099e6, -31.12778px -21.22233px 0px #00334d, -30.30863px -21.7959px 0px #0099e6, -31.94693px -21.7959px 0px #00334d, -31.12778px -22.36948px 0px #0099e6, -32.76608px -22.36948px 0px #00334d, -31.94693px -22.94306px 0px #0099e6, -33.58523px -22.94306px 0px #00334d, -32.76608px -23.51663px 0px #0099e6, -34.40439px -23.51663px 0px #00334d, -33.58523px -24.09021px 0px #0099e6, -35.22354px -24.09021px 0px #00334d, -34.40439px -24.66379px 0px #0099e6, -36.04269px -24.66379px 0px #00334d, -35.22354px -25.23736px 0px #0099e6, -36.86184px -25.23736px 0px #00334d, -36.04269px -25.81094px 0px #0099e6; -webkit-transform: translatex(36.04269px) translatey(25.23736px); transform: translatex(36.04269px) translatey(25.23736px); position: relative; z-index: 1;
}
h2 { color: #dada0b; font-size: 2.5em; text-shadow: -0.81915px 0px 0px #790606, 0px -0.57358px 0px #da0b0b, -1.6383px -0.57358px 0px #790606, -0.81915px -1.14715px 0px #da0b0b, -2.45746px -1.14715px 0px #790606, -1.6383px -1.72073px 0px #da0b0b, -3.27661px -1.72073px 0px #790606, -2.45746px -2.29431px 0px #da0b0b, -4.09576px -2.29431px 0px #790606, -3.27661px -2.86788px 0px #da0b0b, -4.91491px -2.86788px 0px #790606, -4.09576px -3.44146px 0px #da0b0b, -5.73406px -3.44146px 0px #790606, -4.91491px -4.01504px 0px #da0b0b, -6.55322px -4.01504px 0px #790606, -5.73406px -4.58861px 0px #da0b0b, -7.37237px -4.58861px 0px #790606, -6.55322px -5.16219px 0px #da0b0b, -8.19152px -5.16219px 0px #790606, -7.37237px -5.73576px 0px #da0b0b, -9.01067px -5.73576px 0px #790606, -8.19152px -6.30934px 0px #da0b0b, -9.82982px -6.30934px 0px #790606, -9.01067px -6.88292px 0px #da0b0b, -10.64898px -6.88292px 0px #790606, -9.82982px -7.45649px 0px #da0b0b, -11.46813px -7.45649px 0px #790606, -10.64898px -8.03007px 0px #da0b0b, -12.28728px -8.03007px 0px #790606, -11.46813px -8.60365px 0px #da0b0b, -13.10643px -8.60365px 0px #790606, -12.28728px -9.17722px 0px #da0b0b, -13.92558px -9.17722px 0px #790606, -13.10643px -9.7508px 0px #da0b0b, -14.74474px -9.7508px 0px #790606, -13.92558px -10.32438px 0px #da0b0b, -15.56389px -10.32438px 0px #790606, -14.74474px -10.89795px 0px #da0b0b, -16.38304px -10.89795px 0px #790606, -15.56389px -11.47153px 0px #da0b0b, -17.20219px -11.47153px 0px #790606, -16.38304px -12.04511px 0px #da0b0b, -18.02134px -12.04511px 0px #790606, -17.20219px -12.61868px 0px #da0b0b, -18.8405px -12.61868px 0px #790606, -18.02134px -13.19226px 0px #da0b0b, -19.65965px -13.19226px 0px #790606, -18.8405px -13.76583px 0px #da0b0b, -20.4788px -13.76583px 0px #790606, -19.65965px -14.33941px 0px #da0b0b, -21.29795px -14.33941px 0px #790606, -20.4788px -14.91299px 0px #da0b0b, -22.11711px -14.91299px 0px #790606, -21.29795px -15.48656px 0px #da0b0b, -22.93626px -15.48656px 0px #790606, -22.11711px -16.06014px 0px #da0b0b, -23.75541px -16.06014px 0px #790606, -22.93626px -16.63372px 0px #da0b0b, -24.57456px -16.63372px 0px #790606, -23.75541px -17.20729px 0px #da0b0b, -25.39371px -17.20729px 0px #790606, -24.57456px -17.78087px 0px #da0b0b, -26.21287px -17.78087px 0px #790606, -25.39371px -18.35445px 0px #da0b0b, -27.03202px -18.35445px 0px #790606, -26.21287px -18.92802px 0px #da0b0b, -27.85117px -18.92802px 0px #790606, -27.03202px -19.5016px 0px #da0b0b, -28.67032px -19.5016px 0px #790606, -27.85117px -20.07518px 0px #da0b0b; -webkit-transform: translatex(36.04269px) translatey(25.23736px); transform: translatex(36.04269px) translatey(25.23736px);
}
h2:first-of-type { position: relative; z-index: 2;
}
body { font-family: 'Bowlby One SC', sans-serif; text-transform: uppercase; background-color: #084a9c;
}
:root { height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex;
}
:root > * { margin: auto; text-align: center;
}
3D Text - Script Codes
3D Text - Script Codes
Home Page Home
Developer Joey Hoer
Username joeyhoer
Uploaded September 14, 2022
Rating 4
Size 3,862 Kb
Views 30,360
Do you need developer help for 3D Text?

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!

Joey Hoer (joeyhoer) Script Codes
Name
CSS Preloader Animations
Object-fit and object-position
Shift
Pinked Border
Outer Stroke
SCSS Star Badges
Halftone
Lightpack
Fighting the Space
HR Department
Create amazing art & images 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!