Text Shadow Experiment

Developer
Jerusha Johnson
Size
2,593 Kb
Views
14,168
  1. Text Shadow Experiment Previews
  2. Text Shadow Experiment HTML Codes
  3. Text Shadow Experiment CSS Codes

How do I make an text shadow experiment?

I wanted to try making a pattern out of one element. I saw a pen that did it, and in order to fully understand it, I had to recreate it.. What is a text shadow experiment? How do you make a text shadow experiment? This script and codes were developed by Jerusha Johnson on 22 October 2022, Saturday.

Text Shadow Experiment Previews
IQ Test

Text Shadow Experiment - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Text Shadow Experiment</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <h1>look at me</h1> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>

Text Shadow Experiment - Script Codes CSS Codes

html{ background: #dde89c; height:100%; width:100%;
}
body{ font-weight: 400; font-size: 20px; line-height: 1.4; display: -webkit-box; display: -moz-box; display: -ms-box; display: box; -webkit-box-align: center; -moz-box-align: center; -ms-box-align: center; box-align: center; -webkit-box-pack: center; -moz-box-pack: center; -ms-box-pack: center; box-pack: center; height: 100%; width: 100%;
}
h1{ font-weight:900; font-size:2.3em; text-transform:uppercase; line-height:1; color:rgba(255,255,255,.75); text-shadow: -1em -1em 0em rgba(255,255,255,0.25), -2em -2em 0em rgba(255,255,255,0.25), -3em -3em 0em rgba(255,255,255,0.25), -4em -4em 0em rgba(255,255,255,0.75), -5em -5em 0em rgba(255,255,255,0.75), -6em -6em 0em rgba(255,255,255,0.75), -7em -7em 0em rgba(255,255,255,0.75), -8em -8em 0em rgba(255,255,255,0.75), -9em -9em 0em rgba(255,255,255,0.75), -10em -10em 0em rgba(255,255,255,0.75), -11em -11em 0em rgba(255,255,255,0.75), -12em -12em 0em rgba(255,255,255,0.75), -13em -13em 0em rgba(255,255,255,0.75), -14em -14em 0em rgba(255,255,255,0.75), -15em -15em 0em rgba(255,255,255,0.75), -16em -16em 0em rgba(255,255,255,0.75), 1em 1em 0em rgba(255,255,255,0.25), 2em 2em 0em rgba(255,255,255,0.25), 3em 3em 0em rgba(255,255,255,0.25), 4em 4em 0em rgba(255,255,255,0.75), 5em 5em 0em rgba(255,255,255,0.75), 6em 6em 0em rgba(255,255,255,0.75), 7em 7em 0em rgba(255,255,255,0.75), 8em 8em 0em rgba(255,255,255,0.75), 9em 9em 0em rgba(255,255,255,0.75), 10em 10em 0em rgba(255,255,255,0.75), 11em 11em 0em rgba(255,255,255,0.75), 12em 12em 0em rgba(255,255,255,0.75), 13em 13em 0em rgba(255,255,255,0.75), 14em 14em 0em rgba(255,255,255,0.75), 15em 15em 0em rgba(255,255,255,0.75), 16em 16em 0em rgba(255,255,255,0.75), 6.5em 0em 0em rgba(255,255,255,0.25), 5.5em -1em 0em rgba(255,255,255,0.25), 4.5em -2em 0em rgba(255,255,255,0.25), 3.5em -3em 0em rgba(255,255,255,0.25), 2.5em -4em 0em rgba(255,255,255,0.75), 1.5em -5em 0em rgba(255,255,255,0.75), 0.5em -6em 0em rgba(255,255,255,0.75), -0.5em -7em 0em rgba(255,255,255,0.75), -1.5em -8em 0em rgba(255,255,255,0.75), -2.5em -9em 0em rgba(255,255,255,0.75), -3.5em -10em 0em rgba(255,255,255,0.75), -4.5em -11em 0em rgba(255,255,255,0.75), -5.5em -12em 0em rgba(255,255,255,0.75), -6.5em -13em 0em rgba(255,255,255,0.75), -7.5em -14em 0em rgba(255,255,255,0.75), -8.5em -15em 0em rgba(255,255,255,0.75), -9.5em -16em 0em rgba(255,255,255,0.75), -10.5em -17em 0em rgba(255,255,255,0.75), -11.5em -18em 0em rgba(255,255,255,0.75), -12.5em -19em 0em rgba(255,255,255,0.75), 13em 0em 0em rgba(255,255,255,0.75), 12em -1em 0em rgba(255,255,255,0.75), 11em -2em 0em rgba(255,255,255,0.75), 10em -3em 0em rgba(255,255,255,0.75), 9em -4em 0em rgba(255,255,255,0.75), 8em -5em 0em rgba(255,255,255,0.75), 7em -6em 0em rgba(255,255,255,0.75), 6em -7em 0em rgba(255,255,255,0.75), 5em -8em 0em rgba(255,255,255,0.75), 4em -9em 0em rgba(255,255,255,0.75), 3em -10em 0em rgba(255,255,255,0.75), 2em -11em 0em rgba(255,255,255,0.75), 1em -12em 0em rgba(255,255,255,0.75), 0em -13em 0em rgba(255,255,255,0.75), -1em -14em 0em rgba(255,255,255,0.75), -2em -15em 0em rgba(255,255,255,0.75), -3em -16em 0em rgba(255,255,255,0.75), -4em -17em 0em rgba(255,255,255,0.75), -5em -18em 0em rgba(255,255,255,0.75), -6em -19em 0em rgba(255,255,255,0.75), 7.5em 1em 0em rgba(255,255,255,0.25), 8.5em 2em 0em rgba(255,255,255,0.25), 9.5em 3em 0em rgba(255,255,255,0.25), 10.5em 4em 0em rgba(255,255,255,0.75), 11.5em 5em 0em rgba(255,255,255,0.75), 12.5em 6em 0em rgba(255,255,255,0.75), 13.5em 7em 0em rgba(255,255,255,0.75), 14.5em 8em 0em rgba(255,255,255,0.75), 15.5em 9em 0em rgba(255,255,255,0.75), 16.5em 10em 0em rgba(255,255,255,0.75), 17.5em 11em 0em rgba(255,255,255,0.75), 18.5em 12em 0em rgba(255,255,255,0.75), 19.5em 13em 0em rgba(255,255,255,0.75), 20.5em 14em 0em rgba(255,255,255,0.75), 21.5em 15em 0em rgba(255,255,255,0.75), 14em 1em 0em rgba(255,255,255,0.75), 15em 2em 0em rgba(255,255,255,0.75), 16em 3em 0em rgba(255,255,255,0.75), 17em 4em 0em rgba(255,255,255,0.75), 18em 5em 0em rgba(255,255,255,0.75), 19em 6em 0em rgba(255,255,255,0.75), 20em 7em 0em rgba(255,255,255,0.75), -6.5em 0em 0em rgba(255,255,255,0.25), -5.5em 1em 0em rgba(255,255,255,0.25), -4.5em 2em 0em rgba(255,255,255,0.25), -3.5em 3em 0em rgba(255,255,255,0.25), -2.5em 4em 0em rgba(255,255,255,0.75), -1.5em 5em 0em rgba(255,255,255,0.75), -0.5em 6em 0em rgba(255,255,255,0.75), 0.5em 7em 0em rgba(255,255,255,0.75), 1.5em 8em 0em rgba(255,255,255,0.75), 2.5em 9em 0em rgba(255,255,255,0.75), 3.5em 10em 0em rgba(255,255,255,0.75), 4.5em 11em 0em rgba(255,255,255,0.75), 5.5em 12em 0em rgba(255,255,255,0.75), 6.5em 13em 0em rgba(255,255,255,0.75), 7.5em 14em 0em rgba(255,255,255,0.75), 8.5em 15em 0em rgba(255,255,255,0.75), 9.5em 16em 0em rgba(255,255,255,0.75), 10.5em 17em 0em rgba(255,255,255,0.75), 11.5em 18em 0em rgba(255,255,255,0.75), 12.5em 19em 0em rgba(255,255,255,0.75), -13em 0em 0em rgba(255,255,255,0.75), -12em 1em 0em rgba(255,255,255,0.75), -11em 2em 0em rgba(255,255,255,0.75), -10em 3em 0em rgba(255,255,255,0.75), -9em 4em 0em rgba(255,255,255,0.75), -8em 5em 0em rgba(255,255,255,0.75), -7em 6em 0em rgba(255,255,255,0.75), -6em 7em 0em rgba(255,255,255,0.75), -5em 8em 0em rgba(255,255,255,0.75), -4em 9em 0em rgba(255,255,255,0.75), -3em 10em 0em rgba(255,255,255,0.75), -2em 11em 0em rgba(255,255,255,0.75), -1em 12em 0em rgba(255,255,255,0.75), 0em 13em 0em rgba(255,255,255,0.75), 1em 14em 0em rgba(255,255,255,0.75), 2em 15em 0em rgba(255,255,255,0.75), 3em 16em 0em rgba(255,255,255,0.75), -7.5em -1em 0em rgba(255,255,255,0.25), -8.5em -2em 0em rgba(255,255,255,0.25), -9.5em -3em 0em rgba(255,255,255,0.25), -10.5em -4em 0em rgba(255,255,255,0.75), -11.5em -5em 0em rgba(255,255,255,0.75), -12.5em -6em 0em rgba(255,255,255,0.75), -13.5em -7em 0em rgba(255,255,255,0.75), -14.5em -8em 0em rgba(255,255,255,0.75), -15.5em -9em 0em rgba(255,255,255,0.75), -16.5em -10em 0em rgba(255,255,255,0.75), -17.5em -11em 0em rgba(255,255,255,0.75), -18.5em -12em 0em rgba(255,255,255,0.75), -19.5em -13em 0em rgba(255,255,255,0.75), -20.5em -14em 0em rgba(255,255,255,0.75), -21.5em -15em 0em rgba(255,255,255,0.75), -22.5em -16em 0em rgba(255,255,255,0.75), -14em -1em 0em rgba(255,255,255,0.75), -15em -2em 0em rgba(255,255,255,0.75), -16em -3em 0em rgba(255,255,255,0.75), -17em -4em 0em rgba(255,255,255,0.75), -18em -5em 0em rgba(255,255,255,0.75), -19em -6em 0em rgba(255,255,255,0.75), -20em -7em 0em rgba(255,255,255,0.75), -21em -8em 0em rgba(255,255,255,0.75), -19.5em 0em 0em rgba(255,255,255,0.75), -18.5em 1em 0em rgba(255,255,255,0.75), -17.5em 2em 0em rgba(255,255,255,0.75), -16.5em 3em 0em rgba(255,255,255,0.75), -15.5em 4em 0em rgba(255,255,255,0.75), -14.5em 5em 0em rgba(255,255,255,0.75), -13.5em 6em 0em rgba(255,255,255,0.75), -12.5em 7em 0em rgba(255,255,255,0.75), -11.5em 8em 0em rgba(255,255,255,0.75), -10.5em 9em 0em rgba(255,255,255,0.75), -9.5em 10em 0em rgba(255,255,255,0.75), -8.5em 11em 0em rgba(255,255,255,0.75), -7.5em 12em 0em rgba(255,255,255,0.75), -6.5em 13em 0em rgba(255,255,255,0.75), -5.5em 14em 0em rgba(255,255,255,0.75), -4.5em 15em 0em rgba(255,255,255,0.75), -3.5em 16em 0em rgba(255,255,255,0.75), 18.5em -1em 0em rgba(255,255,255,0.75), 17.5em -2em 0em rgba(255,255,255,0.75), 16.5em -3em 0em rgba(255,255,255,0.75), 15.5em -4em 0em rgba(255,255,255,0.75), 14.5em -5em 0em rgba(255,255,255,0.75), 13.5em -6em 0em rgba(255,255,255,0.75), 12.5em -7em 0em rgba(255,255,255,0.75), 11.5em -8em 0em rgba(255,255,255,0.75), 10.5em -9em 0em rgba(255,255,255,0.75), 9.5em -10em 0em rgba(255,255,255,0.75), 8.5em -11em 0em rgba(255,255,255,0.75), 7.5em -12em 0em rgba(255,255,255,0.75), 6.5em -13em 0em rgba(255,255,255,0.75), 5.5em -14em 0em rgba(255,255,255,0.75) ; transition: text-shadow 2s ease, color 1s ease; cursor: pointer;
}
h1:hover { text-shadow: none; color: rgba(255, 255, 255, 1); transition: text-shadow 3s, color 2s;
}
Text Shadow Experiment - Script Codes
Text Shadow Experiment - Script Codes
Home Page Home
Developer Jerusha Johnson
Username bonzaipenguin
Uploaded October 22, 2022
Rating 4
Size 2,593 Kb
Views 14,168
Do you need developer help for Text Shadow Experiment?

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!

Jerusha Johnson (bonzaipenguin) Script Codes
Name
Logo Trial v2
New BookStrap
Recreate ScrollSpy v1
Phone-esque Accordian
Medium-esque
Project Showcase Idea
Medium-esque v2.0
Moveable 8-bit
Objects
Engagement
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!