Gists
On gists
CSS
CSS trick
Non-Rectangular Headers
index.html #
<!--
https://css-tricks.com/creating-non-rectangular-headers/
https://github.com/kevin-powell/creative-section-shapes
https://github.com/Kcko/creative-section-shapes
-->
<!--
1) inline svg
2) clip-path
3) transform: skewY
4) mask with svg pattern (KP) -> https://github.com/Kcko/creative-section-shapes
svg lze ruzne zmensovat a zvetsovat v css a vytvari to pokazde jine tvary
-->
<!-- 1 -->
<header>
<h1>Header Content</h1>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="none">
<polygon fill="white" points="0,100 100,0 100,100"/>
</svg>
</header>
<style>
header {
position: relative;
height: 300px;
background-image: linear-gradient(#ff9d2f, #ff6126);
}
svg {
position: absolute;
bottom: 0;
width: 100%;
height: 10vw;
/* set height to pixels if you want angle to change with screen width */
}
</style>
<!--
2
-->
<style>
header {
position: relative;
height: 300px;
background-image: linear-gradient(#ff9d2f, #ff6126);
clip-path: polygon(
0 0,
100% 0,
100% 100%,
0 calc(100% - 5vw)
);
/* change the calc height to a percentage height to get alternate responsive behavior*/
}
</style>
On gists
CSS
CSS trick
3 ways to darken background image in CSS
index.html #
<!--
https://linuxhint.com/different-methods-to-darken-background-image-css/
https://jsbin.com/kimuzadowo/2/edit?html,css,output
-->
<header class="one"></header>
<header class="two"></header>
<header class="three"></header>
<style>
header {
height: 250px;
margin-bottom: 5px;
}
/* filter */
.one {
background: url("https://images.pexels.com/photos/19275682/pexels-photo-19275682/free-photo-of-umeni-kameny-letadlo-vyrezavany.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2") no-repeat center / cover;
filter: brightness(40%);
}
/* gradient */
.two {
background: linear-gradient(rgba(0, 0, 0, 0.60), rgba(0, 0, 0, 0.60)), url("https://images.pexels.com/photos/19275682/pexels-photo-19275682/free-photo-of-umeni-kameny-letadlo-vyrezavany.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2") no-repeat center / cover;
}
/* blend-mode */
.three {
background: url("https://images.pexels.com/photos/19275682/pexels-photo-19275682/free-photo-of-umeni-kameny-letadlo-vyrezavany.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2") no-repeat center / cover;
background-color: grey;
background-blend-mode: multiply;
}
</style>
On gists
CSS
CSS trick
Mask-image / css variables
demo.html #
<!--
https://jsbin.com/takokelege/4/edit?html,css,output
https://jsbin.com/yajeriteja/edit?html,css,output
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<h3>Original</h3>
<svg width="30" height="30" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 166 166"><polygon points="83 26.8 65.7 61.8 27.1 67.4 55 94.7 48.5 133.2 83 115 117.5 133.2 111 94.7 138.9 67.4 100.3 61.8 83 26.8 83 26.8"/></svg>
<h3>Variants with image-mask</h3>
<div class="masked"></div>
<div class="masked" style="--color: #FF00FF"></div>
<div class="masked" style="--color: #00FF00"></div>
<hr />
<h1>Original</h1>
<img src="https://i.pravatar.cc/400?img=70" alt="">
<h1>Masked</h1>
<div class="mask">
<img src="https://i.pravatar.cc/400?img=70" alt="">
</div>
<hr>
<div class="mask2">
<img src="https://picsum.photos/id/237/600/400" alt="">
</div>
<div class="mask3">
<img src="https://picsum.photos/id/237/600/400" alt="">
</div>
</body>
</html>