/
Gists
/
CSS
Gists - CSS
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>
On gists
Has (:has selector)
•
CSS
Web components
CSS trick
hover-group.css #
/*
https://www.matuzo.at/blog/2022/100daysof-day50/
*/
table:has(input:focus) tr:not(:focus-within) {
opacity: 0.1;
}
/* siblings but not me */
.gallery:has(img:hover) > img:not(:hover) {
/* rule */
}
/* has both, video + h2 */
post:has(h2):has(video) {
}
/* has video or h2 or both*/
post:has(h2, video) {
}
/* has only video */
post:has(video) {
}
/* has not video
do not use!!! post:has(:not(video) # post that has any element that is not a video
*/
post:not(:has(video)) {
}
/* previous element */
span:has(+ post) {
color: red;
}
/* more or equals 4 children = quantity query */
post:has(> *:nth-child(4n)) {
}
/*
https://jsbin.com/mafuhoquka/edit?html,css,output
<article>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
</div>
/* prev */
article div:has(+ :hover) {
background: pink;
}
/* next */
article div:hover + div {
background: lime;
}
/* prev all */
article div:has(~ :hover) {
background: pink;
}
/* next all */
article div:hover ~ div {
background: lime;
}
/* https://bejamas.io/blog/learn-css-has-selector-by-examples-top-use-cases/ */
/* At most 3 (3 or less, excluding 0) children */
ul:has(> :nth-child(-n+3):last-child) {
outline: 1px solid red;
}
/* At most 3 (3 or less, including 0) children */
ul:not(:has(> :nth-child(3))) {
outline: 1px solid red;
}
/* Exactly 5 children */
ul:has(> :nth-child(5):last-child) {
outline: 1px solid blue;
}
/* At least 10 (10 or more) children */
ul:has(> :nth-child(10)) {
outline: 1px solid green;
}
/* Between 7 and 9 children (boundaries inclusive) */
ul:has(> :nth-child(7)):has(> :nth-child(-n+9):last-child) {
outline: 1px solid yellow;
}
/* ranges */
/*
<div>
<h2>Start Title (First line green, last line red)</h2>
<p>First line between h2</p>
<h4>Second line between h2</h4>
<h5>Last line between h2</h5>
<h2>End Title</h2>
</div>
*/
/* Select the first line between h2 */
h2 + :has(~ h2) {
color: green;
}
/* Select the last line between h2 */
h2 ~ :has(+ h2) {
color: red;
}
/* Select all lines between h2 */
h2 ~ :has(~ h2) {
font-style: italic;
}
/* 'And' operation: selects <p> elements containing both class 'a' and 'b' children */
p:has(.a):has(.b) {
font-weight: bold;
}
/* 'Or' operation: selects <p> elements containing either class 'a' or 'b' children */
p:has(.a, .b) {
font-style: italic;
}
/* Select all parent elements containing a <p> element */
:has(p) {
background-color: lightblue;
}
/* Select parent elements with a direct child <p> element */
:has(> p) {
border: 1px solid red;
}
/* Select <div> elements with a direct child <p> element */
div:has(> p) {
padding: 10px;
}
/* Select the adjacent previous <div> sibling of a <p> element */
div:has(+ p) {
margin-bottom: 20px;
}
/* Select all previous <div> siblings of a <p> element */
div:has(~ p) {
color: green;
}
On gists
CSS
CSS trick
Fake slide pure css
index.html #
<!-- DEMO: https://jsbin.com/goyapuworo/edit?html,css,output -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Fake slide by me</title>
<style>
.grid {
display: flex;
translate: 0;
transition: 300ms;
}
.grid > div {
width: calc(100% - 4rem);
flex-shrink: 0;
padding: 2rem;
}
.grid > div:first-child {
background: pink;
}
.grid > div:first-child + *{
background: lime;
}
article
{
border: 2px solid green;
overflow: hidden;
}
input {
margin-bottom: 20px;
}
input:checked + article .grid {
translate: -100%;
}
</style>
</head>
<body>
<input type="checkbox">
<article>
<div class="grid">
<div class="col">AA</div>
<div class="col">BB</div>
</div>
</article>
</body>
</html>
On gists
CSS
CSS trick
Parent - Child (height - min-height inherited)
app.css #
/* 1 */
.parent
{
min-height: 200px;
height: 1px;
border: 3px solid black;
}
.child
{
background: mistyrose;
height: 100%;
}
/* 2 */
.parent
{
min-height: 200px;
border: 3px solid black;
display: flex;
}
.child
{
background: mistyrose;
width: 100%;
}
/* 3 */
.parent
{
min-height: 200px;
border: 3px solid black;
display: flex;
flex-direction: column;
}
.child
{
background: mistyrose;
flex: 1;
}
/* 4 */
.parent
{
min-height: 200px;
border: 3px solid black;
display: grid;
}
.child
{
background: mistyrose;
}
/* 5 */
.parent
{
min-height: 200px;
border: 3px solid black;
}
.child
{
background: mistyrose;
min-height: inherit;
}
On gists
CSS
CSS trick
Css scrollable centered modal
style.css #
/* to the body element */
.noscroll {
overflow: hidden;
}
.overlay {
position: fixed;
overflow-y: scroll;
inset: 0;
place-items: center;
}
[aria-hidden="true"] { display: none; }
[aria-hidden="false"] { display: grid; }
/* this code is not strictly necessary: just to make this demo a bit pleasant */
.overlay div {
width: 80%;
max-width: 650px;
padding: 30px;
background: rgba(255,255,255, .95);
}
.overlay {
background: rgba(40,40,40, .75);
}
* { box-sizing: border-box; }
button { padding: 1.5em 4em; cursor: pointer;}
pre { background: #fafafa; padding: 15px; border: 1px #ccd dashed; }
pre + p { margin: 5vh 0; }
On gists
CSS
CSS trick
Flexbox Solver
solver.css #
/*
https://kentondejong.medium.com/this-css-1-liner-will-improve-your-flexbox-7e40e977ef5c
*/
.parent {
--gap: 20px;
--columns: 5;
display: flex;
gap: var(--gap);
flex-wrap: wrap;
}
.child {
flex: 0 1 calc((100% / var(--columns)) - var(--gap) + (var(--gap) / var(--columns)));
}