Gists - CSS trick

On gists

Colorize SVG in CSS

18.9.2025

SVG CSS trick

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 interactions

17.9.2025

CSS CSS trick

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>

On gists

CSS if

13.9.2025

CSS CSS trick

index.html #

<!--
https://jsbin.com/kiliyineca/2/edit?html,css,output
-->



<!--  /// 1 /// -->	

<!-- .btn -->
<div class="btn" style="--status: success">Success</div>
<div class="btn" style="--status: danger">Danger</div>
<div class="btn" style="--status: warning">Warning</div>	
<div class="btn">Else</div>	
	
<!-- .cover -->	
<div class="cover" style="--priority: medium;">Iam Cover</div>
	
	
<!-- .container -->	
<div class="container">Container</div>
	
	
	
<!--  /// 2 /// -->	


<div class="card" data-status="pending">Pending Task</div>
<div class="card" data-status="complete">Completed Task</div>
<div class="card" data-status="inactive">Inactive Task</div>

On gists

Transition-behavior: allow-discrete

30.8.2025

CSS CSS trick

example.css #

/* works in one direction, if both direction is needed, we need to use 
@starting-style for second direction, @see: https://www.youtube.com/shorts/xVt8Foa2u7I (Kevin Powell)


/* toggle - two 2 , starting-style needed */
/* https://jsbin.com/sokazavera/edit?html,css,output */
.txt {
	background-color: #eee;
	padding: 20px;
	margin-top: 15px;
	border-radius: 4px;
	border: 1px solid #ccc;
	display: none;
	opacity: 0;

	transition-property: all;
	transition-duration: 1s;
	transition-behavior: allow-discrete;
}
.txt.show {
	display: block;
	opacity: 1;
	@starting-style {
		opacity: 0;
	}
}


/* one way 
https://jsfiddle.net/oz6m4ctd/9/
*/

box {
  width: 20%;
  height: auto;
  aspect-ratio: 1/1;
  display: block;
  position: relative;
  transition: all 0.25s;
  transition-behavior: allow-discrete;
  opacity: 1;
  scale: 1;
}

.box.closed {
  display: none;
  opacity: 0;
  scale: 0;
  width: 0;
}

On gists

Starting style

5.6.2025 • 28.8.2025 (aktualizováno)

CSS CSS trick

style.css #

/* https://jsbin.com/fayirefaqu/2/edit?html,css,js,output */


.modal {
  /* Hidden state */
  display: none;
  opacity: 1;
}

.modal.open {
  display: block;
  /* Regular transition works now */
  transition: opacity 300ms;
  opacity: 1;
}

/* Define starting styles when modal becomes displayed */
@starting-style {
  .modal.open {
    opacity: 0;
  }
}

On gists

Css Toggle (if-else)

26.5.2025

CSS CSS trick

demo.css #

/*
https://css-tricks.com/the-css-custom-property-toggle-trick/
*/


html {
  --mq-sm: initial;
}

@media (max-width: 600px) {
  html {
    --mq-sm: ;
  }
}

.card {
  --bg1: var(--mq-sm) green; /* first can be invalid ;) */
  --bg2: red;

  background: var(--bg1, var(--bg2));
}

On gists

Centered last row with flex / grid

13.5.2025

CSS CSS trick

grid.html #

<!--
https://codepen.io/kevinpowell/pen/OJaBNQE
-->

<div class="grid">
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>

  <div class="grid-item offset"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
</div>



<style>
 .grid {
  margin: 2rem auto;
  max-width: 900px;
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(8, 1fr);
}

.grid-item {
  padding: 2rem;
  background: lightblue;
  border: 4px solid royalblue;

  grid-column: span 2;
}

.offset {
  grid-column: 2 / span 2;
}
</style>

On gists

Rubber stamp effect

24.4.2025

CSS CSS trick

effect.css #

/* https://codepen.io/555/pen/pdwvBP */
/*
https://s3-us-west-2.amazonaws.com/s.cdpn.io/8399/grunge.png
*/


stamp {
  transform: rotate(12deg);
	color: #555;
	font-size: 3rem;
	font-weight: 700;
	border: 0.25rem solid #555;
	display: inline-block;
	padding: 0.25rem 1rem;
	text-transform: uppercase;
	border-radius: 1rem;
	font-family: 'Courier';
	-webkit-mask-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/8399/grunge.png');
  -webkit-mask-size: 944px 604px;
  mix-blend-mode: multiply;
}

.is-nope {
  color: #D23;
  border: 0.5rem double #D23;
  transform: rotate(3deg);
	-webkit-mask-position: 2rem 3rem;
  font-size: 2rem;  
}

.is-approved {
	color: #0A9928;
	border: 0.5rem solid #0A9928;
	-webkit-mask-position: 13rem 6rem;
	transform: rotate(-14deg);
  border-radius: 0;
} 

.is-draft {
	color: #C4C4C4;
	border: 1rem double #C4C4C4;
	transform: rotate(-5deg);
  font-size: 6rem;
  font-family: "Open sans", Helvetica, Arial, sans-serif;
  border-radius: 0;
  padding: 0.5rem;
}

On gists

CSS Colors: relative colors

24.4.2025 • 5.9.2025 (aktualizováno)

CSS CSS trick

colors.css #

// https://medium.com/@arnoldgunter/how-relative-colors-in-css-just-solved-one-of-the-hardest-styling-problems-24b9f5ad7b8emys

:root {
  --btn-blue: hsl(220, 100%, 50%);
  --btn-green: hsl(140, 70%, 45%);
  --btn-red: hsl(0, 80%, 55%);
  --btn-yellow: hsl(45, 100%, 50%);
}

/* Base styles for all buttons */
.button {
  color: white;
  border: none;
  padding: 10px 20px;
  cursor: pointer;
}

/* Individual button base colors */
.button.blue   { --button-color: var(--btn-blue); }
.button.green  { --button-color: var(--btn-green); }
.button.red    { --button-color: var(--btn-red); }
.button.yellow { --button-color: var(--btn-yellow); }

.button.blue,
.button.green,
.button.red,
.button.yellow {
  background-color: var(--button-color);
}

/* Single hover rule using relative color */
.button:hover {
  background-color: hsl(from var(--button-color) h s calc(l + 10%));
}

On gists

Calc infinity

12.4.2025

CSS trick

demo.css #

/* https://www.matuzo.at/blog/2025/never-lose-a-z-index-battle-again */

button.a {
  z-index: calc(infinity + 1); /* 2147483647 */
  background: green;
}