RADICAL

Developer
Ty Strong
Size
2,222 Kb
Views
36,432
  1. RADICAL Previews
  2. RADICAL HTML Codes
  3. RADICAL CSS Codes
  4. RADICAL JS Codes

How do I make an radical?

I wanted to try a few different things, so this happened. I experimented with: - Combining SVGs, Images, and CSS3 Gradients as backgrounds. What is a radical? How do you make a radical? This script and codes were developed by Ty Strong on 11 August 2022, Thursday.

RADICAL Previews
IQ Test

RADICAL - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>RADICAL</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <span>radical</span> <script src="js/index.js"></script>
</body>
</html>

RADICAL - Script Codes CSS Codes

@import url(http://fonts.googleapis.com/css?family=Ceviche+One);
body, html { margin: 0; padding: 0; width: 100%; height: 100%; position: relative; background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/42863/black-thread.png"), -webkit-linear-gradient(left, #f31, #f36); background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/42863/black-thread.png"), linear-gradient(to right, #f31, #f36); background-size: 100%,; background-position: 0%; overflow: hidden; -webkit-perspective: 450; perspective: 450;
}
span { position: absolute; display: block; margin: auto; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 1em; font-size: 20vw; text-transform: uppercase; font-family: 'Ceviche One', cursive; text-align: center; color: #fff; text-shadow: 0 0 1em rgba(0,0,0,0.8); -webkit-animation: wiggle 10s ease-in-out infinite; animation: wiggle 10s ease-in-out infinite; -webkit-transform: rotateY(-30deg) rotateZ(-30deg); transform: rotateY(-30deg) rotateZ(-30deg);
}
@-webkit-keyframes wiggle { 0% {-webkit-transform: rotateY(-10deg);transform: rotateY(-10deg)} 50% {-webkit-transform: rotateY(10deg);transform: rotateY(10deg)} 100% {-webkit-transform: rotateY(-10deg);transform: rotateY(-10deg)}
}
@keyframes wiggle { 0% {-webkit-transform: rotateY(-10deg);transform: rotateY(-10deg)} 50% {-webkit-transform: rotateY(10deg);transform: rotateY(10deg)} 100% {-webkit-transform: rotateY(-10deg);transform: rotateY(-10deg)}
}

RADICAL - Script Codes JS Codes

// I experimented with:
//
// 1. Combining SVGs, Images, and CSS3 Gradients as backgrounds
// 2. Silly 3D stuff
// 3. A new font; "Ceviche One"
// 4. vw font-size
//
//
//
RADICAL - Script Codes
RADICAL - Script Codes
Home Page Home
Developer Ty Strong
Username tystrong
Uploaded August 11, 2022
Rating 3.5
Size 2,222 Kb
Views 36,432
Do you need developer help for RADICAL?

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!

Ty Strong (tystrong) Script Codes
Name
Colors and Media Queries
Rolling Circle
Heart Monitor
CSS Laptop
Another No Div Spinner
The Greatest.
Title Logo
Spinning Submit Button
Added new link buttons.
Menu
Create amazing captions 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!