Flyknife Comics

Developer
Chris Burnell
Size
2,934 Kb
Views
80,920

How do I make an flyknife comics?

CSS-only Text Logo for http://flyknifecomics.com.Uses background-clip and text-fill-color with a linear-gradient.. What is a flyknife comics? How do you make a flyknife comics? This script and codes were developed by Chris Burnell on 16 September 2022, Friday.

Flyknife Comics Previews
IQ Test

Flyknife Comics - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Flyknife Comics</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel='stylesheet prefetch' href='http://fonts.googleapis.com/css?family=Yellowtail'>
<link rel='stylesheet prefetch' href='http://fonts.googleapis.com/css?family=Archivo+Black'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div> <h1 class="miami-vice" data-text="Flyknife">Flyknife</h1> <h1 class="metal" data-text="COMICS">COMICS</h1>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>

Flyknife Comics - Script Codes CSS Codes

html,
body { height: 100%;
}
body { background-color: #1d1d1d; position: relative; overflow: hidden;
}
div { position: absolute; top: 50%; left: 50%; -webkit-transform: translate3d(-50%, -50%, 0); transform: translate3d(-50%, -50%, 0); text-align: center;
}
h1 { width: auto; font-size: 15em; font-size: 25vw; margin: 0 0 -0.1em; line-height: 1em;
}
.miami-vice { color: #86DEFF; font-family: "Yellowtail", cursive; font-weight: 300; text-shadow: 0 0 0.5em rgba(134, 222, 255, 0.5); position: relative; -webkit-transform: rotate3d(1, -1, 0, 35deg); transform: rotate3d(1, -1, 0, 35deg); z-index: 2;
}
.miami-vice:after { content: attr(data-text); color: #FA74FB; position: absolute; top: 0; left: 0; text-shadow: 0 0 0.5em rgba(250, 116, 251, 0.5); -webkit-transform: translateX(-0.05em); transform: translateX(-0.05em); z-index: -1;
}
.metal { background-image: -webkit-linear-gradient(#7795B0 0, #7795B0 3px, #6581B0 4px, #6380AE 30%, #DDC4C3 50%, #B9957F 50%, #B9957F 53%, #D18B2D 53%, #DDC4C3 80%); background-image: linear-gradient(#7795B0 0, #7795B0 3px, #6581B0 4px, #6380AE 30%, #DDC4C3 50%, #B9957F 50%, #B9957F 53%, #D18B2D 53%, #DDC4C3 80%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; color: white; width: 100%; font-family: 'Archivo Black', sans-serif; font-size: 15vw; line-height: 1em; -webkit-transform: rotate3d(1, -1, 0, 30deg); transform: rotate3d(1, -1, 0, 30deg);
}
.metal:before, .metal:after { content: attr(data-text); background: none; color: white; width: 100%; position: absolute; top: 0; left: 0; text-shadow: 0 0 1em rgba(255, 255, 255, 0.3);
}
.metal:after { z-index: -1;
}
Flyknife Comics - Script Codes
Flyknife Comics - Script Codes
Home Page Home
Developer Chris Burnell
Username chrisburnell
Uploaded September 16, 2022
Rating 4
Size 2,934 Kb
Views 80,920
Do you need developer help for Flyknife Comics?

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!

Chris Burnell (chrisburnell) Script Codes
Name
The power of transform for centering
Stupid RTL Demo
Student Charter Demo for City University
Interaction Jazz
Message Types
Clock Face Idea
The Importance of Proper Navigational CSS
Simple CSS Checkbox
Square Illusion
Simple CSS Checkbox
Create amazing marketing copy 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!