Pure CSS Jalousien

Developer
Oliver Kühn
Size
2,238 Kb
Views
20,240
  1. Pure CSS Jalousien Previews
  2. Pure CSS Jalousien HTML Codes
  3. Pure CSS Jalousien CSS Codes

How do I make an pure css jalousien?

What is a pure css jalousien? How do you make a pure css jalousien? This script and codes were developed by Oliver Kühn on 15 November 2022, Tuesday.

Pure CSS Jalousien Previews
IQ Test

Pure CSS Jalousien - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Pure CSS Jalousien</title> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ html, body
{ width: 100%; height: 100%; margin: 0; padding: 0; background: #000;
}
.hover-me
{ color: white; font-family: georgia; font-weight: bolder; font-style: italic; color: #222; text-align: center;
}
.background
{ border: 4px solid #222; background: url(http://placehold.it/480x480/ff00ff/00ff00&text=hello%20world.); height: 480px; width: 480px; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); border-radius: 32px;
}
.bars
{ background: linear-gradient( 180deg, transparent 0px, transparent 10px, #000 10px, #000 30px ); background-size: 400px 40px; width: 100%; height: 100%; transition: all 500ms linear; opacity: 1; border-radius: 28px;
}
.bars:hover
{ background-size: 400px 0px; opacity: 0;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <h1 class="hover-me">hover me!</h1>
<div class="background"> <div class="bars"></div>
</div>
</body>
</html>

Pure CSS Jalousien - Script Codes CSS Codes

html, body
{ width: 100%; height: 100%; margin: 0; padding: 0; background: #000;
}
.hover-me
{ color: white; font-family: georgia; font-weight: bolder; font-style: italic; color: #222; text-align: center;
}
.background
{ border: 4px solid #222; background: url(http://placehold.it/480x480/ff00ff/00ff00&text=hello%20world.); height: 480px; width: 480px; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); border-radius: 32px;
}
.bars
{ background: linear-gradient( 180deg, transparent 0px, transparent 10px, #000 10px, #000 30px ); background-size: 400px 40px; width: 100%; height: 100%; transition: all 500ms linear; opacity: 1; border-radius: 28px;
}
.bars:hover
{ background-size: 400px 0px; opacity: 0;
}
Pure CSS Jalousien - Script Codes
Pure CSS Jalousien - Script Codes
Home Page Home
Developer Oliver Kühn
Username 0x04
Uploaded November 15, 2022
Rating 3
Size 2,238 Kb
Views 20,240
Do you need developer help for Pure CSS Jalousien?

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!

Oliver Kühn (0x04) Script Codes
Name
Perforated foil
Border loading indicators
Max Headroom
7 Segment Display Characters
ASCIICanvas
Scanline effect
Background-blend-mode Test
X4.css Theme System
Hover rotating cube
Pentagon loading indicator
Create amazing sales emails 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!