/ Gists / CSS

Gists - CSS

On gists

KP: Max column count with auto-fit

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>

<!-- 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

5 Responsive Layouts (KP)

CSS CSS trick

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

Dropdown without JS

Tailwind CSS CSS HTML

code.html #

<!-- https://codepen.io/xqbuilds/pen/LYwvOer  -->

<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-black text-white flex items-center justify-center min-h-screen space-x-6">
    <!-- Hover Dropdown -->
    <div class="relative group">
        <button class="bg-amber-900 hover:bg-amber-800 px-6 py-3 rounded-lg transition">
            Hover Dropdown
        </button>
        <div class="absolute left-0 hidden w-40 bg-gray-800 rounded-lg group-hover:block">
            <a href="#" class="block px-4 py-2 hover:bg-gray-700">Option 1</a>
            <a href="#" class="block px-4 py-2 hover:bg-gray-700">Option 2</a>
            <a href="#" class="block px-4 py-2 hover:bg-gray-700">Option 3</a>
            <a href="#" class="block px-4 py-2 hover:bg-gray-700">Option 4</a>
        </div>
    </div>
    <!-- Click Dropdown -->
    <div class="relative">
        <details>
            <summary class="bg-teal-800 hover:bg-teal-700 px-6 py-3 rounded-lg cursor-pointer transition">
                Click to Open
            </summary>
            <div class="absolute left-0 w-40 bg-gray-800 rounded-lg">
                <a href="#" class="block px-4 py-2 hover:bg-gray-700">Option A</a>
                <a href="#" class="block px-4 py-2 hover:bg-gray-700">Option B</a>
                <a href="#" class="block px-4 py-2 hover:bg-gray-700">Option C</a>
                <a href="#" class="block px-4 py-2 hover:bg-gray-700">Option D</a>
            </div>
        </details>
    </div>
</body>
</html>
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

Transformace (transform) does not change flow

CSS CSS trick

index.html #

	<div>
		<figure>
				<img src="http://picsum.photos/400/400?grayscale" alt="">
			<figcaption>
				Nakej popis
			</figcaption>
		</figure>
		
		
	</div>
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

Position absolute + flex + pointer events

•
CSS CSS trick

index.html #

<!-- https://play.tailwindcss.com/FMLNwmWBhB -->
<!--
  1. flex funguje i pro absolutně napozicované prvky :)
  2. pointer-event: none umožní přes lupu se prokliknout na input
-->
<div class="border border-gray-300 m-5 relative flex items-center">
    <span class="bg-red-500 w-4 h-4 absolute pointer-events-none"></span>
  <input type="text" class="bg-gray-100 p-2 w-full block">
</div>
On gists

css grid - values

•
CSS

grid-values.css #

// https://www.vzhurudolu.cz/prirucka/css-minmax

minmax(100px, 200px)   - bude 200px, lze zmenšovat pod 100px
minmax(100px, max-content) - minimálně 100px, zvětšovat se to bude podle obsahu (obrázek = maximální pixelová věc, podle délky textu)
minmax(min-content, 100px) - bude hned 100px a v případě dlouhého obsahu bude délka nejdelšího slova (u obrázků nic takového nemáme / neznáme)
fit-content(100px) - dle obsahu s maximální šířkou 100px
~ lze použít i samostatně mimo fci minmax
min-content
max-content
auto