P R E S S E D
How do I make an p r e s s e d?
Based on https://dribbble.com/shots/2351633-Pressed-Motion. What is a p r e s s e d? How do you make a p r e s s e d? This script and codes were developed by Tryggvi Gylfason on 15 October 2022, Saturday.
P R E S S E D - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>P R E S S E D</title> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<link href="https://fonts.googleapis.com/css?family=Source+Code+Pro:200" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Work+Sans:100" rel="stylesheet">
<body> <main> <div class="marker"></div> <h1>P</h1> <h1 class="r">R</h1> <h1 class="e1">E</h1> <h1 class="s1">S</h1> <h1 class="s2">S</h1> <h1 class="e2">E</h1> <h1>D</h1> </main>
</body>
</body>
</html>
P R E S S E D - Script Codes CSS Codes
html { font-size: 1px; }
body { margin: 0; font-family: 'Work Sans', sans-serif; font-size: 30rem; min-height: 100vh; display: flex; align-items: center; justify-content: center; background-image: linear-gradient(rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.6)), url(http://alluretouch.com/wp-content/uploads/2015/09/minimalist-art.jpg); background-position: 50% 15%; background-size: cover;
}
main { position: relative; display: flex;
}
h1 { margin: 0; }
h1, .marker { transform: translateX(0); animation-timing-function: cubic-bezier(0.15,-0.01, 0.58, 1); animation-duration: 5s; animation-iteration-count: infinite;
}
.marker { position: absolute; top: 4px; left: -3px; height: 3px; width: 40px; background-color: black; animation-name: marker;
}
.r { margin-left: 1rem; animation-name: r; }
.e1 { margin-left: 7rem; animation-name: e1; }
.s1 { margin-left: 16rem; animation-name: s1; }
.s2 { margin-left: 21rem; animation-name: s2; }
.e2 { margin: 0 36rem 0 42rem; animation-name: e2; }
@keyframes r { 0%, 20% { transform: translateX(0); } 50%, 70% { transform: translateX(35rem); }
}
@keyframes e1 { 0%, 20% { transform: translateX(0); } 50%, 70% { transform: translateX(75rem); }
}
@keyframes s1 { 0%, 20% { transform: translateX(0); } 50%, 70% { transform: translateX(81rem); }
}
@keyframes s2 { 0%, 20% { transform: translateX(0); } 50%, 70% { transform: translateX(71rem); }
}
@keyframes e2 { 0%, 20% { transform: translateX(0); } 50%, 70% { transform: translateX(34rem); }
}
@keyframes marker { 0%, 20% { transform: translateX(0); } 50%, 70% { transform: translateX(337rem); }
}
Developer | Tryggvi Gylfason |
Username | tryggvigy |
Uploaded | October 15, 2022 |
Rating | 4.5 |
Size | 2,047 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 |
The smallest possible valid HTML website | 1,212 Kb |
A Pen by Tryggvi Gylfason | 3,407 Kb |
Flexbox - one-line form | 3,021 Kb |
Redux - applyMiddleware | 3,960 Kb |
Macintosh 128k - Terminal | 4,994 Kb |
Jank Free Card Animations | 5,953 Kb |
Image inside HTML | 1,759 Kb |
CSS embedding | 1,527 Kb |
Flexbox - text-align | 2,526 Kb |
Flexbox - mobile app layout | 3,780 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 |
Adding Items | Valhead | 4,008 Kb |
Pure CSS Dial | Lukewatts | 3,018 Kb |
A Different Type of Gallery | DonPage | 2,950 Kb |
Rotate Demo | Agelber | 3,061 Kb |
Jstam.com Home Page | Jstam | 10,558 Kb |
P1 | Vivi_Lai | 1,533 Kb |
A Pen by Anoop | Anoopjohn | 330,760 Kb |
Box-sizing | Elad2412 | 1,572 Kb |
Blockquote design | Sjmcpherson | 1,863 Kb |
Sassy Buttons | Elyseholladay | 2,299 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!