/
Gists
/
CSS trick
Gists - CSS trick
On gists
Css grid by KevinPowell sheats
•
CSS
CSS trick
grid.css #
/* Adjustable grid */
.grid {
--column-count: 3;
display: grid;
grid-template-columns: repeat(var(--column-count), 1fr);
}
/* modifiers */
.grid-3 { --column-count: 3; }
.grid-4 { --column-count: 4; }
.grid-5 { --column-count: 5; }
/* custom */
.grid { --column-count: 1; }
@media (min-width: 600px) {
.grid { --column-count: 3; }
}
@media (min-width: 960px) {
.grid { --column-count: 4; }
}
/*
-----------------------------------------------------
*/
/* grid auto-columns */
.auto-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
}
/*
-----------------------------------------------------
*/
/* Pushing the footer down */
.main-layout {
min-height: 100vh;
display: grid;
grid-template-rows: rows 1fr rows;
}
/*
-----------------------------------------------------
*/
/* The stack */
.the-stack {
display: grid;
grid-template-areas: "stack";
place-items: center;
}
.the-stack > * {
grid-area: stack;
}
On gists
CSS
CSS trick
full width in container
index.html #
<!--
https://jsbin.com/heqamezuju/edit?html,css,output
-->
<grid>
<item class="l">
aaa
</item>
<item class="r">
bbb
</item>
</grid>
<style>
grid {
display: grid;
grid-template-columns: 1fr 1fr;
max-width: 500px;
outline: 2px solid gray;
height: 500px;
margin: auto;
}
item {
padding: 10px;
}
.r, .l {
position: relative;
isolation: isolate;
}
.r:after {
background: lightgray;
top: 0;
bottom: 0;
left: 0;
width: 50vw;
position: absolute;
content: "";
z-index: -1;
}
.l:after {
background: lightpink;
top: 0;
bottom: 0;
right: 0;
width: 50vw;
position: absolute;
content: "";
z-index: -1;
}
</style>
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>