/
Gists
/
CSS trick
Gists - CSS trick
On gists
CSS
CSS trick
KP: Max column count with auto-fit
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>
<!-- This is from a different demo that I forked for this one
it's a good tutorial looking at container queries and subgrid :) -->
<!-- <a class="yt" href="https://youtu.be/pKHKQwAsZLI">
Watch the tutorial
</a> -->
On gists
CSS
CSS trick
5 Responsive Layouts (KP)
code.css #
/* https://codepen.io/kevinpowell/full/vYvEdWG */
.cluster {
outline: 5px solid hotpink;
padding: 1rem;
display: flex;
gap: 1rem;
flex-wrap: wrap;
}
.flexible-grid {
outline: 5px solid hotpink;
padding: 1rem;
display: flex;
flex-wrap: wrap;
gap: 1rem;
}
.flexible-grid > * {
flex: 1;
}
.auto-grid {
outline: 5px solid hotpink;
padding: 1rem;
display: grid;
gap: 1rem;
grid-template-columns: repeat(auto-fit, minmax(min(10rem, 100%), 1fr));
}
.reel {
outline: 5px solid hotpink;
padding: 1rem;
display: grid;
gap: 1rem;
grid-auto-flow: column;
grid-auto-columns: 45%;
overflow-x: scroll;
scroll-snap-type: x mandatory;
scroll-padding: 1rem;
}
.reel > * {
scroll-snap-align: start;
}
.main-with-sidebar {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
gap: 1em;
max-width: 1200px;
margin-inline: auto;
}
.main-with-sidebar > :first-child {
flex-basis: 500px;
flex-grow: 9999;
}
.main-with-sidebar > :last-child {
flex-basis: 300px;
flex-grow: 1;
}
On gists
CSS Colors: color opacity (tailwind)
•
Tailwind CSS
CSS
CSS trick
index.html #
<!--
https://ishadeed.com/article/css-relative-colors/#adjust-the-opacity-with-color-mix
-->
<!-- works only for color from config not defined like css variables -->
<!--v2 -->
<div class="ring-msp-red-default/30"></div>
<!--v3 -->
<div class="ring-msp-red-default ring-opacity-30"></div>
<!-- Hack if color is defined like css variable in config -->
'my-red': 'var(--primary-color)', // '#ba0c2f',
<!--v2 hack -->
does not exist
<!--v3 hack -->
ring-[color-mix(in_srgb,theme(colors.my-red)_50%,transparent)]
<!--v4 -->
no hack needed, v4 is functional (read doc)
On gists
Css transition (with / height) 2025
•
CSS
CSS trick
transition-native.css #
/*
https://developer.chrome.com/docs/css-ui/animate-to-height-auto
// 1 moznost, zapnout globalne
:root {
interpolate-size: allow-keywords;
} */
.x {
width: 50px;
overflow: hidden;
background: red;
white-space: nowrap;
transition: 300ms;
}
/*2 nebo pres calc-size */
.x:hover {
width: calc-size(max-content, size);
}
On gists
Glowing button
•
CSS
CSS trick
index.css #
/*
https://jsbin.com/jonekutuja/edit?html,css,output
*/
/*
Project: CSS Glowing Button
Created: Sunday, 06 March 2022
Author: Jamshid Elmi
Tutorial: https://youtu.be/b_8fHNIHFk4
*/
html, body {
display: flex;
justify-content: center;
align-items: center;
background-color: #161616;
overflow: hidden;
/* transform: scale(1.5); */
}
/* button */
.btn {
margin: 100px;
padding: 15px 40px;
border: none;
outline: none;
color: #FFF;
cursor: pointer;
position: relative;
z-index: 0;
border-radius: 12px;
}
.btn::after {
content: "";
z-index: -1;
position: absolute;
width: 100%;
height: 100%;
background-color: #333;
left: 0;
top: 0;
border-radius: 10px;
}
/* glow */
.btn::before {
content: "";
background: linear-gradient(
45deg,
#FF0000, #FF7300, #FFFB00, #48FF00,
#00FFD5, #002BFF, #FF00C8, #FF0000
);
position: absolute;
top: -2px;
left: -2px;
background-size: 600%;
z-index: -1;
width: calc(100% + 4px);
height: calc(100% + 4px);
filter: blur(8px);
animation: glowing 20s linear infinite;
transition: opacity .3s ease-in-out;
border-radius: 10px;
opacity: 0;
}
@keyframes glowing {
0% {background-position: 0 0;}
50% {background-position: 400% 0;}
100% {background-position: 0 0;}
}
/* hover */
.btn:hover::before {
opacity: 1;
}
.btn:active:after {
background: transparent;
}
.btn:active {
color: #000;
font-weight: bold;
}
On gists
Neon button
•
CSS
CSS trick
index.html #
<!-- https://jsbin.com/liyigoniku/edit?html,css,output -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Neon Button</title>
</head>
<body>
<a class="neon">Neon</a>
</body>
</html>
On gists
@property like fake replacement for animation ;)
•
CSS trick
index.css #
/*
https://yuanchuan.dev/time-uniform-for-css-animation
*/
@property --t {
syntax: "<number>";
initial-value: 0;
inherits: true;
}
@keyframes animate-time {
from { --t: 0 }
to { --t: 31536000000 }
}
/* Put animation to :root so we can use --t everywhere */
:root {
animation: animate-time 31536000000ms linear infinite;
}
div {
background: red;
width: 100px;
height: 100px;
margin: 5rem;
}
.second {
background: hsl(
calc(var(--t) * .072), 60%, 60%
);
}
div.first {
transform: rotate(
calc(var(--t) / 1000 / 10 * 1turn)
);
}
On gists
Css animated border with css @property instead of css variable
•
CSS trick
example.css #
/*
@source: https://www.youtube.com/watch?v=ezP4kbOvs_E
@demo: https://jsbin.com/rixenodiga/3/edit?html,css,output
*/
body {
background: #000;
}
@property --angle {
syntax: "<angle>";
initial-value: 0deg;
inherits: false;
}
.card {
/* nefunguje pro animaci, nahradi se @property */
/*
--angle: 0deg
*/
width: 300px;
height: 300px;
background: #000;
border-radius: 10px;
margin: 3rem;
position: relative;
}
.card::after,
.card::before
{
content: "";
position: absolute;
z-index: -1;
width: 100%;
height: 100%;
border-radius: 10px;
/* vice barev */
background-image: conic-gradient(from var(--angle), red, blue, pink, orange, lime);
/* jedna a do ztracena */
/*background-image: conic-gradient(from var(--angle), transparent 80%, red); */ /* velikost definuje rozsah*/
padding: 3px;
top: 50%;
left: 50%;
translate: -50% -50%;
animation: 3s spin linear infinite;
}
.card::before {
filter: blur(1.5rem);
opacity: 0.7;
}
@keyframes spin {
from {
--angle: 0deg;
}
to {
--angle: 360deg;
}
}