Harsh

Developer
Bookcasey
Size
3,170 Kb
Views
22,264
  1. Harsh Previews
  2. Harsh HTML Codes
  3. Harsh CSS Codes

How do I make an harsh?

Compass extension for randomly generated CSS3 gradients with harsh color stops—like magical diamonds.. What is a harsh? How do you make a harsh? This script and codes were developed by Bookcasey on 10 September 2022, Saturday.

Harsh Previews
IQ Test

Harsh - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Harsh</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <h1><a href="http://www.bookcasey.com/harsh/">Harsh</a></h1>
<p>Compass extension on <a href="https://github.com/bookcasey/harsh">Github</a></p>
<p>I wrote a Compass extension to randomly generate this kind of background.</p>
<p>See some more <a href="http://bookcasey.com/harsh">examples</a></p>
<p>Codepen supports Sass and Compass but this effect requires a few lines of Ruby to generate random colors and angles. Hence the generated CSS.</p>
<p>If you are as terrified by the necessary syntax to get these gradients working everywhere—the mixin <code>@include harsh()</code> isn&#39;t as scary. Compass does all the heavy lifting.</p> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>

Harsh - Script Codes CSS Codes

body { background: black; background: -webkit-gradient(linear, 62% 96%, 38% 4%, color-stop(43%, rgba(56, 172, 218, 0.5)), color-stop(43.0%, transparent)), -webkit-gradient(linear, 60% 22%, 40% 78%, color-stop(3%, rgba(97, 157, 254, 0.5)), color-stop(3.0%, transparent)), -webkit-gradient(linear, 32% 28%, 68% 72%, color-stop(73%, rgba(151, 14, 1, 0.5)), color-stop(73.0%, transparent)), -webkit-gradient(linear, 89% 69%, 11% 31%, color-stop(37%, rgba(26, 27, 138, 0.5)), color-stop(37.0%, transparent)), -webkit-gradient(linear, 49% 95%, 51% 5%, color-stop(20%, rgba(25, 105, 145, 0.5)), color-stop(20.0%, transparent)), -webkit-gradient(linear, 73% 46%, 27% 54%, color-stop(37%, rgba(125, 152, 102, 0.5)), color-stop(37.0%, transparent)), -webkit-gradient(linear, 77% 23%, 23% 77%, color-stop(68%, rgba(116, 109, 160, 0.5)), color-stop(68.0%, transparent)), -webkit-gradient(linear, 96% 11%, 4% 89%, color-stop(55%, rgba(17, 239, 152, 0.5)), color-stop(55.0%, transparent)), -webkit-gradient(linear, 41% 19%, 59% 81%, color-stop(22%, rgba(121, 124, 133, 0.5)), color-stop(22.0%, transparent)), -webkit-gradient(linear, 21% 74%, 79% 26%, color-stop(55%, rgba(150, 130, 237, 0.5)), color-stop(55.0%, transparent)), white; background: -webkit-linear-gradient(62% 96%, rgba(56, 172, 218, 0.5) 43%, transparent 43.0%), -webkit-linear-gradient(60% 22%, rgba(97, 157, 254, 0.5) 3%, transparent 3.0%), -webkit-linear-gradient(32% 28%, rgba(151, 14, 1, 0.5) 73%, transparent 73.0%), -webkit-linear-gradient(89% 69%, rgba(26, 27, 138, 0.5) 37%, transparent 37.0%), -webkit-linear-gradient(49% 95%, rgba(25, 105, 145, 0.5) 20%, transparent 20.0%), -webkit-linear-gradient(73% 46%, rgba(125, 152, 102, 0.5) 37%, transparent 37.0%), -webkit-linear-gradient(77% 23%, rgba(116, 109, 160, 0.5) 68%, transparent 68.0%), -webkit-linear-gradient(96% 11%, rgba(17, 239, 152, 0.5) 55%, transparent 55.0%), -webkit-linear-gradient(41% 19%, rgba(121, 124, 133, 0.5) 22%, transparent 22.0%), -webkit-linear-gradient(21% 74%, rgba(150, 130, 237, 0.5) 55%, transparent 55.0%), white; background: -moz-linear-gradient(62% 96%, rgba(56, 172, 218, 0.5) 43%, transparent 43.0%), -moz-linear-gradient(60% 22%, rgba(97, 157, 254, 0.5) 3%, transparent 3.0%), -moz-linear-gradient(32% 28%, rgba(151, 14, 1, 0.5) 73%, transparent 73.0%), -moz-linear-gradient(89% 69%, rgba(26, 27, 138, 0.5) 37%, transparent 37.0%), -moz-linear-gradient(49% 95%, rgba(25, 105, 145, 0.5) 20%, transparent 20.0%), -moz-linear-gradient(73% 46%, rgba(125, 152, 102, 0.5) 37%, transparent 37.0%), -moz-linear-gradient(77% 23%, rgba(116, 109, 160, 0.5) 68%, transparent 68.0%), -moz-linear-gradient(96% 11%, rgba(17, 239, 152, 0.5) 55%, transparent 55.0%), -moz-linear-gradient(41% 19%, rgba(121, 124, 133, 0.5) 22%, transparent 22.0%), -moz-linear-gradient(21% 74%, rgba(150, 130, 237, 0.5) 55%, transparent 55.0%), white; background: -o-linear-gradient(62% 96%, rgba(56, 172, 218, 0.5) 43%, transparent 43.0%), -o-linear-gradient(60% 22%, rgba(97, 157, 254, 0.5) 3%, transparent 3.0%), -o-linear-gradient(32% 28%, rgba(151, 14, 1, 0.5) 73%, transparent 73.0%), -o-linear-gradient(89% 69%, rgba(26, 27, 138, 0.5) 37%, transparent 37.0%), -o-linear-gradient(49% 95%, rgba(25, 105, 145, 0.5) 20%, transparent 20.0%), -o-linear-gradient(73% 46%, rgba(125, 152, 102, 0.5) 37%, transparent 37.0%), -o-linear-gradient(77% 23%, rgba(116, 109, 160, 0.5) 68%, transparent 68.0%), -o-linear-gradient(96% 11%, rgba(17, 239, 152, 0.5) 55%, transparent 55.0%), -o-linear-gradient(41% 19%, rgba(121, 124, 133, 0.5) 22%, transparent 22.0%), -o-linear-gradient(21% 74%, rgba(150, 130, 237, 0.5) 55%, transparent 55.0%), white; background: linear-gradient(62% 96%, rgba(56, 172, 218, 0.5) 43%, transparent 43.0%), linear-gradient(60% 22%, rgba(97, 157, 254, 0.5) 3%, transparent 3.0%), linear-gradient(32% 28%, rgba(151, 14, 1, 0.5) 73%, transparent 73.0%), linear-gradient(89% 69%, rgba(26, 27, 138, 0.5) 37%, transparent 37.0%), linear-gradient(49% 95%, rgba(25, 105, 145, 0.5) 20%, transparent 20.0%), linear-gradient(73% 46%, rgba(125, 152, 102, 0.5) 37%, transparent 37.0%), linear-gradient(77% 23%, rgba(116, 109, 160, 0.5) 68%, transparent 68.0%), linear-gradient(96% 11%, rgba(17, 239, 152, 0.5) 55%, transparent 55.0%), linear-gradient(41% 19%, rgba(121, 124, 133, 0.5) 22%, transparent 22.0%), linear-gradient(21% 74%, rgba(150, 130, 237, 0.5) 55%, transparent 55.0%), white; background-repeat: no-repeat; background-attachment: fixed; text-align: center; font-family: Futura, sans-serif; -webkit-font-smoothing: antialiased; color: white;
}
h1 a { display: inline-block; margin: 0.5em 0.5em; padding: 0.4em 0.5em; border: 0.12em solid rgba(255, 255, 255, 0.95); font-size: 5em; line-height: 1em; text-align: center; text-transform: uppercase; -webkit-transform: skew(-15deg, 0) rotate(-5deg); -moz-transform: skew(-15deg, 0) rotate(-5deg); -ms-transform: skew(-15deg, 0) rotate(-5deg); -o-transform: skew(-15deg, 0) rotate(-5deg); transform: skew(-15deg, 0) rotate(-5deg); }
p { margin: 3em; font-size: 1.5rem;
}
p + p { font-family: Georgia, serif; font-size: 1.333rem; line-height: 1.6em; text-align: left; max-width: 500px; margin: 0 auto; padding-top: 1em;
}
a { color: white; text-decoration: none;
}
p a { border-bottom: 2px solid white;
}
code { font-family: monospace;
}
Harsh - Script Codes
Harsh - Script Codes
Home Page Home
Developer Bookcasey
Username bookcasey
Uploaded September 10, 2022
Rating 4.5
Size 3,170 Kb
Views 22,264
Do you need developer help for Harsh?

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!

Bookcasey (bookcasey) Script Codes
Name
A Pen by bookcasey
A Pen by bookcasey
Full bleed background images with CSS3 filter
Scandinavian Sweater Pattern
Shiny Plastic Text
Trendy Shadow in CSS
Pure CSS one-element printer paper
English words that are also Hex colors
3D Text in Sass
Just a few lines of Sass...
Create amazing love letters 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!