/
Gists
/
CSS
Gists - CSS
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
Grid as HTML table
index.html #
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<html>
<body>
<div class="gridTable">
<div> <!-- Header -->
<div>Timeclock.Kiwi</div>
<div>Payroll</div>
<div>Checked</div>
</div>
<div> <!-- Body -->
<div>
<div>Cat</div>
<div>In</div>
<div>Hat</div>
</div>
<div>
<div>Cat</div>
<div>In</div>
<div>Hat</div>
</div>
<div>
<div>Cat</div>
<div>In</div>
<div>Hat</div>
</div>
<div>
<div>Cat</div>
<div>In</div>
<div>Hat</div>
</div>
</div>
</div>
</body>
</html>
</body>
</html>
On gists
Css anchor example
•
CSS
index1.html #
<!DOCTYPE html>
<html lang="cs">
<head>
<meta charset="UTF-8">
<title>CSS Anchor Positioning Demo 2026</title>
<style>
/* Pomocný styling pro demo */
body {
margin: 0;
font-family: sans-serif;
}
section {
height: 100vh;
background: orange;
display: flex;
align-items: center;
justify-content: center;
font-size: 2rem;
color: white;
}
ul {
padding: 50px;
background: #eee;
}
/* DEFINICE KOTVY (Anchor) */
li {
anchor-name: --li;
border: 2px solid black;
min-height: 300px;
list-style: none;
display: flex;
align-items: center;
justify-content: center;
background: white;
/* POZOR: Nesmí zde být position: relative, jinak span kotvu neuvidí */
}
/* DEFINICE POZICOVANÉHO PRVKU (Target) */
span {
all: unset; /* Vyčištění výchozích stylů */
display: block;
background: pink;
width: fit-content;
padding: 1rem;
border-radius: 8px;
box-shadow: 0 4px 10px rgba(0,0,0,0.2);
font-weight: bold;
/* Propojení s kotvou */
position: fixed; /* Vztahuje se k viewportu (nutné pro flip) */
position-anchor: --li; /* Jméno kotvy */
/* Výchozí pozice: NAHOŘE */
position-area: top;
/* AUTOMATICKÉ PŘEKLOPENÍ */
/* flip-block automaticky změní 'top' na 'bottom', když nahoře dojde místo */
position-try-fallbacks: flip-block;
/* Volitelné: Plynulý přechod pozice (podporováno od Chrome 129+) [1, 2] */
transition: position-area 0.3s;
}
/* Ukázka, jak by vypadalo ruční přepsání přes @position-try,
pokud byste nepoužil flip-block:
@position-try --dolu {
position-area: bottom;
margin-top: 10px;
}
*/
</style>
</head>
<body>
<section>Scrollujte dolů k růžovému tooltipu...</section>
<ul>
<li>
<div>AAA (Kotva)</div>
<span>BBB (Tooltip - přeskakuje nahoru/dolů)</span>
</li>
</ul>
<section>Scrollujte zpět nahoru...</section>
</body>
</html>
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
Grid - bordered items (top or bottom or full)
index.html #
<!-- https://codepen.io/gwaradon/pen/poYYbPY -->
<div class="w-500">
<div class="grid">
<div class="grid-item">
Gird item 1
</div>
<div class="grid-item">
Gird item 2
</div>
<div class="grid-item">
Gird item 3
</div>
<div class="grid-item">
Gird item 4
</div>
<div class="grid-item">
Gird item 5
</div>
<div class="grid-item">
Gird item 6
</div>
</div>
</div>
<style>
.w-500{
max-width:500px;
margin:auto;
}
.grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
overflow:hidden;
justify-content: center;
align-items:center;
text-align:center;
border: 1px solid #333;
}
.grid-item{
position:relative;
padding:1rem
}
.grid-item::before,
.grid-item::after {
content: '';
position: absolute;
background-color: #333;
z-index: 1;
}
.grid-item::after {
width: 100vw;
height: 1px;
left: 0;
top: -1px;
}
.grid-item::before {
width: 1px;
height: 100vh;
left: -1px;
top: 0;
}
</style>