/
Gists
/
CSS trick
Gists - CSS trick
On gists
CSS
CSS trick
Sticky header and how to solve the indentation?
index.css #
/* 1 */
html {
scroll-behavior: smooth;
/* Set this to the height of your header */
scroll-padding-top: 80px;
}
/* 2 */
.anchor-section::before {
content: "";
display: block;
/* Negative margin pulls the element back up */
margin-top: -100px;
/* Height creates the "blocker" space */
height: 100px;
visibility: hidden;
pointer-events: none;
}
/* 3 */
section:target {
border-top: 80px solid transparent;
margin-top: -80px;
background-clip: padding-box;
}
On gists
CSS
CSS trick
Anchor (product image with badge - by KP)
index.html #
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style>
.Card {
border: 1px solid gray;
border-radius: .75rem;
padding: 1rem;
background: lightgray;
img {
max-width: 100%;
border-radius: .75rem;
anchor-name: --product-image;
}
.badge {
position: absolute;
position-anchor: --product-image;
bottom: calc(anchor(bottom) + 10px);
right: calc(anchor(right) + 10px);
background: green;
padding: 0.25rem 0.65rem;
border-radius: 100vw;
color: white;
}
}
</style>
</head>
<body>
<div class="Card">
<h1>Classic line Solicí řeznická dusitanová směs PRAGANDA - RYCHLOSŮL 1kg</h1>
<img src="https://picsum.photos/id/92/800/600" alt="">
<div class="badge">Zlevněno</div>
</div>
</body>
</html>
On gists
CSS
CSS trick
Toasts with relatie colors - oklch vs hsl (Kevin Powell)
example.html #
<!-- https://codepen.io/kevinpowell/pen/wBMbozYhttps://codepen.io/kevinpowell/pen/wBMbozY -->
<!--
oklch maji lepsi vnimani barev a lepe pracuji s posunem barev ..
-->
<div class="toast-grid oklch">
<h2>using oklch</h2>
<div class="toast" data-toast="info">Some general info toast</div>
<div class="toast" data-toast="warning">This might end badly</div>
<div class="toast" data-toast="error">Oh no, something has gone wrong!</div>
</div>
<div class="toast-grid hsl">
<h2>using hsl</h2>
<div class="toast" data-toast="info">Some general info toast</div>
<div class="toast" data-toast="warning">This might end badly</div>
<div class="toast" data-toast="error">Oh no, something has gone wrong!</div>
</div>
On gists
CSS
CSS trick
Css Color: from var
index.css #
/*
https://jsbin.com/setohiqiwe/edit?html,css,output
*/
:root {
--color: red;
}
.a, .b, .c {
margin: 1rem;
padding: 0.55rem;
}
.a {
background: hsl(from var(--color) h s 90%);
}
.b {
background: hsl(from var(--color) h s calc(l + 40));
}
.c {
background: hsl(from var(--color) h s l / 0.2);
}
/*
Converted to HSL, red is hsl(0 100% 50%), thus:
Setting l to 90%,
Is just hsl(0 100% 90%).
Adding 40 to l,
Add the l components together:
hsl(0 100% (50% + 40%)) → hsl(0 100% 90%)
Changing opacity to 0.2,
This means mixing white (hsl(0 0% 100%)) with hsl(0 100% 50%) on top. I guess you can find some mathematical formula somewhere that resolves this to be hsl(0 100% 90%).
Do the same steps above for green hsl(120deg 100% 25%) and see you get different colors.
*/
On gists
Popular ⭐
CSS
CSS trick
Image container edge breakout
index.css #
:root {
--container-width: 700px;
--columns: 12;
--gap: 20px;
--column-width: calc((var(--container-width) / var(--columns)) - var(--gap));
--breakpoint: 46em;
}
img {
max-width: 100%;
}
.image-edge-grid {
margin-bottom: 2rem;
display: grid;
grid-gap: var(--gap);
grid-template-columns: minmax(1em, 1fr) repeat(var(--columns), minmax(0, var(--column-width))) minmax(1em, 1fr);
max-width: initial;
}
.image-edge-grid__img {
grid-column-start: 1;
grid-column-end: 15;
display: flex;
align-items: center;
@media (min-width: 46em) {
grid-column-start: 1;
grid-column-end: 8;
}
}
.image-edge-grid__content {
grid-column-start: 2;
grid-column-end: 14;
display: flex;
align-items: center;
background: plum;
@media (min-width: 46em) {
background: lime;
grid-column-start: 8;
grid-column-end: 14;
}
}
.image-edge-grid[data-reversed]
{
.image-edge-grid__content
{
background: mistyrose;
grid-column: 2/8;
grid-row: 1;
}
.image-edge-grid__img
{
grid-column: 8/15;
grid-row: 1
}
}
On gists
CSS
CSS trick
Anchor positioning - popover (Coding2Go)
index.html #
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<button popovertarget="menu">Menu button</button>
<div id="menu" popover>
<a href="">Item 1</a>
<a href="">Another Item 2</a>
<a href="">Very long long long Item 3</a>
</div>
</body>
</html>
On gists
Grid-Subgrid (Kevin Powell)
•
CSS
CSS trick
index.html #
<div class="wrapper">
<h1>Our products</h1>
<p>
Dolor sit amet consectetur adipisicing elit. Quo expedita voluptas
provident.
</p>
<div class="layout">
<main class="grid">
<div class="product">
<img src="https://images.unsplash.com/photo-1559715541-5daf8a0296d0?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2OTYzMzU1ODd8&ixlib=rb-4.0.3&q=80&w=400" alt="Toy duck in a batman costume" />
<h3 class="product__title">Bat Duck</h3>
<div class="flex-group space-between v-center">
<p class="product__price">From <span>$25</span></p>
<button class="button" data-type="outline">Buy</button>
</div>
</div>
<div class="product">
<img src="https://images.unsplash.com/photo-1472457897821-70d3819a0e24?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2OTYzMzU1ODd8&ixlib=rb-4.0.3&q=80&w=400" alt="lego stormtrooper" />
<h3 class="product__title">Lego Storm Trooper</h3>
<div class="flex-group space-between v-center">
<p class="product__price">From <span>$25</span></p>
<button class="button" data-type="outline">Buy</button>
</div>
</div>
<div class="product">
<img src="https://images.unsplash.com/photo-1627752458987-d721d34ecd68?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2OTYzMzYxNjN8&ixlib=rb-4.0.3&q=80&w=400" alt="" />
<h3 class="product__title">Figurines</h3>
<div class="flex-group space-between v-center">
<p class="product__price">From <span>$25</span></p>
<button class="button" data-type="outline">Buy</button>
</div>
</div>
<div class="product">
<img src="https://images.unsplash.com/photo-1599481238505-b8b0537a3f77?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2OTYzMzYxODV8&ixlib=rb-4.0.3&q=80&w=400" alt="" />
<h3 class="product__title">Gundam</h3>
<div class="flex-group space-between v-center">
<p class="product__price">From <span>$25</span></p>
<button class="button" data-type="outline">Buy</button>
</div>
</div>
<div class="product" data-featured="true">
<img src="https://images.unsplash.com/photo-1605287977617-ddd865d5f696?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2OTYzMzYxODV8&ixlib=rb-4.0.3&q=80&w=400" alt="" />
<h3 class="product__title">Stuffed hamster</h3>
<p class="product__description">
A nice fuzzy and cuddly stuffed hamster for you to snuggle with
and enjoy. Might be small in size, but it isn't small in cuteness.
</p>
<div class="flex-group space-between v-center">
<p class="product__price">From <span>$25</span></p>
<button class="button" data-type="outline">Buy</button>
</div>
</div>
<div class="product">
<img src="https://images.unsplash.com/photo-1556012018-50c5c0da73bf?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2OTYzMzYyMjh8&ixlib=rb-4.0.3&q=80&w=400" alt="" />
<h3 class="product__title">Teddy bear</h3>
<div class="flex-group space-between v-center">
<p class="product__price">From <span>$25</span></p>
<button class="button" data-type="outline">Buy</button>
</div>
</div>
<div class="product">
<img src="https://images.unsplash.com/photo-1566576912321-d58ddd7a6088?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2OTYzMzYyMjh8&ixlib=rb-4.0.3&q=80&w=400" alt="" />
<h3 class="product__title">Super Mario Figurines</h3>
<div class="flex-group space-between v-center">
<p class="product__price">From <span>$25</span></p>
<button class="button" data-type="outline">Buy</button>
</div>
</div>
<div class="product">
<img src="https://images.unsplash.com/photo-1517242810446-cc8951b2be40?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2OTYzMzYxODV8&ixlib=rb-4.0.3&q=80&w=400" alt="" />
<h3 class="product__title">Lego duck man</h3>
<div class="flex-group space-between v-center">
<p class="product__price">From <span>$25</span></p>
<button class="button" data-type="outline">Buy</button>
</div>
</div>
</main>
<aside>
<h2>Lorem ipsum dolor sit amet.</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi
minima quasi ipsa!
</p>
</aside>
</div>
</div>
<a class="yt" href="https://youtu.be/pKHKQwAsZLI">
Watch the tutorial
</a>
On gists
CSS
CSS trick
Css only type grinding
demo.css #
/* https://www.bitovi.com/blog/css-only-type-grinding-casting-tokens-into-useful-values */
@property --variant {
syntax: "primary|secondary|success|error";
initial-value: primary;
inherits: true;
}
@property --_v-primary-else-0 {
syntax: "primary|<integer>"; initial-value: 0; inherits: true;
}
@property --_v-primary-bit {
syntax: "<integer>"; initial-value: 1; inherits: true;
}
.element {
--variant: primary;
--_v-primary-else-0: var(--variant);
--_v-primary-bit: var(--_v-primary-else-0);
}
On gists
SVG
CSS trick
Colorize SVG in CSS
index.html #
<!DOCTYPE html>
<html lang="cs">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>SVG Mask Test</title>
<style>
.container {
display: flex;
gap: 20px;
padding: 20px;
flex-wrap: wrap;
}
.test-box {
border: 1px solid #ccc;
padding: 10px;
text-align: center;
}
/* Test 1: External URL */
.B1 {
display: block;
width: 100px;
height: 100px;
mask-image: url('stripe.svg');
mask-position: center;
mask-repeat: no-repeat;
mask-size: contain;
background: red;
}
/* Test 2: Inline SVG jako data URL */
.B2 {
display: block;
width: 100px;
height: 100px;
/* https://yoksel.github.io/url-encoder/ */
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 184.63 236.36'%3E%3Cpath d='M172.33 0c-12.95 17.23-25.87 34.48-38.62 51.79C88.31 112.96 43.42 174.34 0 236.36h.01c49.58-59.38 95.23-122.99 142.83-183.22C156.9 35.48 170.78 17.75 184.63 0z'/%3E%3C/svg%3E");
mask-position: center;
mask-repeat: no-repeat;
mask-size: contain;
background: red;
}
/* Test 3: Inline SVG v HTML */
.B3 {
display: block;
width: 100px;
height: 100px;
}
.B3 svg {
width: 100%;
height: 100%;
fill: red;
}
/* Test 4: Webpack prefix */
.B4 {
display: block;
width: 100px;
height: 100px;
mask-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxODQuNjMgMjM2LjM2Ij48cGF0aCBkPSJNMTcyLjMzIDBjLTEyLjk1IDE3LjIzLTI1Ljg3IDM0LjQ4LTM4LjYyIDUxLjc5Qzg4LjMxIDExMi45NiA0My40MiAxNzQuMzQgMCAyMzYuMzZoLjAxYzQ5LjU4LTU5LjM4IDk1LjIzLTEyMi45OSAxNDIuODMtMTgzLjIyQzE1Ni45IDM1LjQ4IDE3MC43OCAxNy43NSAxODQuNjMgMHoiLz48L3N2Zz4=');
mask-position: center;
mask-repeat: no-repeat;
mask-size: contain;
background: red;
}
</style>
</head>
<body>
<h1>Test SVG masek</h1>
<div class="container">
<div class="test-box">
<h3>Test 1: URL</h3>
<div class="B1"></div>
<p>mask-image: url("")</p>
</div>
<div class="test-box">
<h3>Test 2: Data URL (bez fill)</h3>
<div class="B2"></div>
<p>Inline SVG jako data URL</p>
</div>
<div class="test-box">
<h3>Test 3: Inline SVG</h3>
<div class="B3">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 184.63 236.36">
<path d="M172.33 0c-12.95 17.23-25.87 34.48-38.62 51.79C88.31 112.96 43.42 174.34 0 236.36h.01c49.58-59.38 95.23-122.99 142.83-183.22C156.9 35.48 170.78 17.75 184.63 0z" />
</svg>
</div>
<p>SVG přímo v HTML</p>
</div>
<div class="test-box">
<h3>Test 4: Base64 Data URL</h3>
<div class="B4"></div>
<p>Base64 encoded SVG</p>
</div>
</div>
<div style="margin: 20px; padding: 20px; background: #f5f5f5">
<h3>Debugging info:</h3>
<p>Otevřete Developer Tools (F12) a podívejte se na Console a Network tab</p>
<p>Pokud vidíte CORS chyby, problém je v cross-origin policy</p>
</div>
</body>
</html>
On gists
CSS
CSS trick
Css interactions
index.html #
<!--
https://jsbin.com/tuticinojo/1/edit?html,css,output
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Pure CSS Interactions Demo</title>
<style>
body {
font-family: sans-serif;
padding: 2rem;
background: #f9fafb;
color: #111;
line-height: 1.5;
}
h2 {
margin-top: 2rem;
border-bottom: 2px solid #eee;
padding-bottom: 0.5rem;
}
/* === ACCESSIBLE FOCUS STYLE === */
button,
.menu-btn,
.open-modal,
.close,
.accordion label {
outline: none;
}
button:focus,
.menu-btn:focus,
.open-modal:focus,
.close:focus,
.accordion label:focus {
outline: 2px solid #2563eb;
outline-offset: 3px;
}
/* === TOGGLE SWITCH === */
.switch {
display: inline-block;
position: relative;
width: 50px;
height: 25px;
}
.switch input {
display: none;
}
.slider {
background: #ccc;
border-radius: 25px;
position: absolute;
inset: 0;
cursor: pointer;
transition: 0.3s;
}
.slider::after {
content: "";
width: 21px;
height: 21px;
background: white;
border-radius: 50%;
position: absolute;
top: 2px;
left: 2px;
transition: 0.3s;
}
.switch input:checked + .slider {
background: #4ade80;
}
.switch input:checked + .slider::after {
transform: translateX(25px);
}
/* === DROPDOWN MENU === */
.menu-btn {
display: inline-block;
margin-top: 1rem;
cursor: pointer;
padding: 0.5rem 1rem;
background: #111;
color: white;
border-radius: 5px;
}
#menu-toggle {
display: none;
}
.menu {
margin-top: 0.5rem;
background: white;
border: 1px solid #ddd;
padding: 0.5rem;
border-radius: 5px;
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease;
}
#menu-toggle:checked + .menu {
max-height: 300px; /* enough space */
}
/* === MODAL === */
.open-modal {
display: inline-block;
margin-top: 1rem;
cursor: pointer;
padding: 0.5rem 1rem;
background: #2563eb;
color: white;
border-radius: 5px;
}
#modal-toggle {
display: none;
}
.modal {
position: fixed;
inset: 0;
display: none;
justify-content: center;
align-items: center;
background: rgba(0, 0, 0, 0.6);
}
#modal-toggle:checked + .modal {
display: flex;
}
.modal-content {
background: white;
padding: 2rem;
border-radius: 10px;
position: relative;
max-width: 300px;
text-align: center;
}
.close {
display: inline-block;
margin-top: 1rem;
cursor: pointer;
padding: 0.5rem 1rem;
background: #ef4444;
color: white;
border-radius: 5px;
}
/* === ACCORDION === */
.accordion label {
display: block;
cursor: pointer;
padding: 0.5rem;
background: #f3f4f6;
margin-top: 0.5rem;
border-radius: 5px;
}
.accordion input {
display: none;
}
.accordion .content {
max-height: 0;
overflow: hidden;
padding: 0 0.5rem;
background: white;
border: 1px solid #ddd;
border-radius: 5px;
transition: max-height 0.3s ease;
}
.accordion input:checked + label + .content {
max-height: 200px;
padding: 0.5rem;
}
</style>
</head>
<body>
<h1>Pure CSS Interactions Demo</h1>
<h2>1. Toggle Switch</h2>
<label class="switch">
<input type="checkbox" aria-label="Toggle setting" />
<span class="slider"></span>
</label>
<h2>2. Dropdown Menu</h2>
<label for="menu-toggle" class="menu-btn" role="button" aria-expanded="false" aria-controls="menu">Menu</label>
<input type="checkbox" id="menu-toggle" />
<ul id="menu" class="menu">
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
<h2>3. Modal</h2>
<label for="modal-toggle" class="open-modal" role="button">Open Modal</label>
<input type="checkbox" id="modal-toggle" />
<!-- modal closes when background clicked -->
<label for="modal-toggle" class="modal">
<div class="modal-content" role="dialog" aria-modal="true">
<h3>Hello</h3>
<p>This modal works without JS.</p>
<label for="modal-toggle" class="close" role="button">Close</label>
</div>
</label>
<h2>4. Accordion</h2>
<div class="accordion">
<input type="checkbox" id="q1" />
<label for="q1" aria-controls="a1" aria-expanded="false">Question 1</label>
<div class="content" id="a1">Answer to question 1.</div>
<input type="checkbox" id="q2" />
<label for="q2" aria-controls="a2" aria-expanded="false">Question 2</label>
<div class="content" id="a2">Answer to question 2.</div>
</div>
</body>
</html>