Halloween CSS Bleeding Header

Developer
Giana
Size
3,721 Kb
Views
91,080
  1. Halloween CSS Bleeding Header Previews
  2. Halloween CSS Bleeding Header HTML Codes
  3. Halloween CSS Bleeding Header CSS Codes

How do I make an halloween css bleeding header?

Working on a thing for Halloween. Webkit + FF only.. What is a halloween css bleeding header? How do you make a halloween css bleeding header? This script and codes were developed by Giana on 12 June 2022, Sunday.

Halloween CSS Bleeding Header Previews
IQ Test

Halloween CSS Bleeding Header - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Halloween CSS Bleeding Header</title> <link href='https://fonts.googleapis.com/css?family=Emilys+Candy|Old+Standard+TT' rel='stylesheet' type='text/css'> <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>
<header> <nav> <ul> <li><a href="#">Weird dolls</a></li> <li><a href="#">Undead pets</a></li> <li><a href="#">Clowns</a></li> <li><a href="#">Pale little girls</a></li> </ul> </nav> <h1>Creepy Children</h1> <p class="tagline">Hover over header for blood</p>
</header>
</body>
</html>

Halloween CSS Bleeding Header - Script Codes CSS Codes

header { /* Striped background */ background: #2a1135; background-image: -webkit-linear-gradient(left, transparent 50%, #190b20 50%); background-image: linear-gradient(90deg, transparent 50%, #190b20 50%); background-size: 52px; box-shadow: inset 0 0 100px #000; text-align: center; padding: 2em 2em 3em; position: relative; /* Hover transition */ /* Header bottom edge */
}
header::before, header::after { content: ''; display: block; width: 100%; position: absolute; left: 0;
}
header::before { /* Red gradients for blood */ background: -webkit-linear-gradient(red 50%, transparent 60%), -webkit-radial-gradient(#d40000 50%, rgba(0, 0, 0, 0) 70%), -webkit-radial-gradient(#ff0000 30%, rgba(0, 0, 0, 0) 40%), -webkit-radial-gradient(#d40000 10%, rgba(0, 0, 0, 0) 20%), -webkit-radial-gradient(#ff0000 10%, rgba(0, 0, 0, 0) 15%); background: linear-gradient(red 50%, transparent 60%), radial-gradient(#d40000 50%, rgba(0, 0, 0, 0) 70%), radial-gradient(#ff0000 30%, rgba(0, 0, 0, 0) 40%), radial-gradient(#d40000 10%, rgba(0, 0, 0, 0) 20%), radial-gradient(#ff0000 10%, rgba(0, 0, 0, 0) 15%); background-size: 100% 100%, 500px 500px, 200px 200px, 103px 273px, 77px 800px; background-position: 0 0, -97% -78%, 71% 0%, 7% 23%, 5% 49%; /* Background blend for bleed effect */ mix-blend-mode: multiply; /* Mouse ignore blood */ pointer-events: none; /* Hide before hover transition */ opacity: 0; -webkit-transform: translateY(-100%); transform: translateY(-100%); /* Mouseout effect */ -webkit-transition: opacity 3s linear, -webkit-transform 1s 3s linear; transition: opacity 3s linear, -webkit-transform 1s 3s linear; transition: opacity 3s linear, transform 1s 3s linear; transition: opacity 3s linear, transform 1s 3s linear, -webkit-transform 1s 3s linear; height: 100%; top: 0;
}
header:hover::before { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); -webkit-transition: opacity 1s 0s, -webkit-transform 5s 0s linear; transition: opacity 1s 0s, -webkit-transform 5s 0s linear; transition: opacity 1s 0s, transform 5s 0s linear; transition: opacity 1s 0s, transform 5s 0s linear, -webkit-transform 5s 0s linear;
}
header::after { background-image: -webkit-radial-gradient(#07050a 40%, rgba(0, 0, 0, 0) 41%), -webkit-radial-gradient(#07050a 40%, rgba(0, 0, 0, 0) 41%); background-image: radial-gradient(#07050a 40%, rgba(0, 0, 0, 0) 41%), radial-gradient(#07050a 40%, rgba(0, 0, 0, 0) 41%); background-size: 104px 104px; background-position: 0 0, 52px 0; height: 104px; bottom: -52px; z-index: -1;
}
/* Styling */
body { background: #090917; font: 16px/1.5 'Old Standard TT', serif;
}
h1 { color: #fff; font: normal 52px 'Emilys Candy',serif; text-shadow: 3px 3px 0 #000; margin: 0.5em 0 0;
}
nav { /* Uncomment layer links above blood effect */
}
nav ul,
nav li { display: inline; margin: 0; padding: 0; list-style: none;
}
nav a { color: #52d7ea; font-weight: 700; padding: 1em 2em; text-decoration: none; -webkit-transition: all 1s; transition: all 1s;
}
nav a:hover { letter-spacing: 0.2em;
}
.tagline { color: #dcbd77; margin: 0;
}
/* Remove effects on mobile, fix nav */
@media (max-width: 714px) { header::before { display: none; } nav a { line-height: 2.5; padding: 1em; white-space: nowrap; } nav a:hover { letter-spacing: 0; }
}
Halloween CSS Bleeding Header - Script Codes
Halloween CSS Bleeding Header - Script Codes
Home Page Home
Developer Giana
Username giana
Uploaded June 12, 2022
Rating 4.5
Size 3,721 Kb
Views 91,080
Do you need developer help for Halloween CSS Bleeding Header?

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!

Giana (giana) Script Codes
Name
CSS Particles
CSS Border transitions
Stars
Pure CSS Candy Cane Text
Sass border drawing mixin
Spinning
Buttons with animated background
Something moving
Animated rainbow lines
WordPress Site Map
Create amazing Facebook ads 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!