Box-shadow hexagon mask

Developer
Keisuke Takahashi
Size
2,196 Kb
Views
18,216
  1. Box-shadow hexagon mask Previews
  2. Box-shadow hexagon mask HTML Codes
  3. Box-shadow hexagon mask CSS Codes

How do I make an box-shadow hexagon mask?

Box-shadow with Big spread-radius value, It can cover and hide behind stacks. One element Hex has 2 pseudo-elements. Both transforms skewX.. What is a box-shadow hexagon mask? How do you make a box-shadow hexagon mask? This script and codes were developed by Keisuke Takahashi on 19 November 2022, Saturday.

Box-shadow hexagon mask Previews
IQ Test

Box-shadow hexagon mask - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>box-shadow hexagon mask</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <header>	<h1>hexagon mask</h1>	<p>no css mask, js &amp; svg.</p>	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident repellat distinctio modi, doloribus enim incidunt, sapiente excepturi. Dolorum ducimus voluptate enim laudantium quidem provident quaerat soluta nostrum numquam fugit! Asperiores.</p>
</header>
<div class="hex"></div>
</body>
</html>

Box-shadow hexagon mask - Script Codes CSS Codes

*,
:before,
:after { box-sizing: inherit;
}
html,
body { height: 100%; margin: 0; padding: 0;
}
html { background: url(http://ksk-soft.com/css_labo/dimg/orengeFlower.jpg) center no-repeat; background-size: cover;
}
body { box-sizing: inherit; overflow-x: hidden;
}
header,
.hex,
.hex:before,
.hex:after { position: fixed; left: 0; right: 0; top: 0; bottom: 0; margin: auto;
}
header { text-align: center; width: 30vw; height: 30vw; color: rgba(255, 255, 255, 0.7)
}
h1 { line-height: 1;
}
.hex { box-shadow: 0 0 1em 100vw #000; height: 30vw; width: 30vw; margin: auto; overflow: hidden; font-size: 2vw; cursor: pointer; -webkit-animation: hex infinite 10s linear; animation: hex infinite 10s linear; -webkit-transition: 0.5s; transition: 0.5s;
}
.hex:hover { -webkit-animation-duration: 20s; animation-duration: 20s; height: 60vw; width: 60vw;
}
.hex:before,
.hex:after { content: ""; display: block; height: 88%; width: 100%; position: absolute; top: 6%; bottom: 6%; -webkit-transform: skewX(30deg); transform: skewX(30deg); box-shadow: 0 0 0 10em #000;
}
.hex:after { -webkit-transform: skewX(-30deg); transform: skewX(-30deg);
}
@keyframes hex { 100% { transform: rotate(1turn); }
}
@-webkit-keyframes hex { 100% { -webkit-transform: rotate(1turn); }
}
Box-shadow hexagon mask - Script Codes
Box-shadow hexagon mask - Script Codes
Home Page Home
Developer Keisuke Takahashi
Username ksksoft
Uploaded November 19, 2022
Rating 3
Size 2,196 Kb
Views 18,216
Do you need developer help for Box-shadow hexagon mask?

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!

Keisuke Takahashi (ksksoft) Script Codes
Name
Pure CSS candle light animation by One element
Flexbox layout patterns
Equalizer
Pure css thumbnails hover
Table-cell with gutter
Pure CSS Slide Panel
SVG Concentrated Linework
Pure css Parallax header
Real eye with CSS Sfumato
CSS Slot Machine
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!