/
Gists
/
CSS
Gists - CSS
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
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>
On gists
CSS
CSS trick
CSS if
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
CSS
CSS trick
Transition-behavior: allow-discrete
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
•
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
CSS trick
Centered last row with flex / grid
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
CSS
CSS trick
Rubber stamp effect
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
•
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
CSS
CSS trick
KP: Escape the container on only one side
index.html #
<a class="yt" href="https://youtu.be/Ivk8Blw2VTI">Watch the tutorial</a>
<section>
<div class="wrapper">
<h1>Full-width on one side only</h1>
</div>
</section>
<section class="full-width-split-screen">
<img src="https://images.unsplash.com/photo-1689046194076-62199393c464?crop=entropy&cs=srgb&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2OTE1MDg5Mjl8&ixlib=rb-4.0.3&q=85" alt="" />
<div>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit.
Reprehenderit officiis dolores vitae sed libero ipsa.
</p>
<a href="#" class="button">Keep reading</a>
</div>
</section>
<section>
<div class="wrapper">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse
impedit cupiditate, quisquam reprehenderit rem nostrum quaerat
tempore molestias magnam maxime omnis hic enim, autem tempora
tenetur illo excepturi eaque fugiat.
</p>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit.
Reprehenderit officiis dolores vitae sed libero ipsa. Aut, eos
accusantium, quas at laborum tempore ab quidem eum exercitationem
odit excepturi incidunt iste.
</p>
</div>
</section>
<section class="full-width-split-screen">
<div class="accent">
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Reprehenderit officiis dolores vitae sed libero ipsa. Aut, eos accusantium, quas at laborum tempore ab quidem eum exercitationem odit excepturi incidunt iste.</p>
<p>Deleniti voluptates harum nemo eos deserunt? Cum quos blanditiis dignissimos facilis , pariatur vel nostrum consectetur nesciunt in numquam.</p>
</div>
<img src='https://images.unsplash.com/photo-1689443111223-fdba9d92dbd7?crop=entropy&cs=srgb&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2OTE2OTAxMjB8&ixlib=rb-4.0.3&q=85' alt=''>
</section>
<section class="">
<div class="wrapper">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse impedit cupiditate, quisquam reprehenderit rem nostrum quaerat tempore molestias magnam maxime omnis hic enim, autem tempora tenetur illo excepturi eaque fugiat.</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Reprehenderit officiis dolores vitae sed libero ipsa. Aut, eos accusantium, quas at laborum tempore ab quidem eum exercitationem odit excepturi incidunt iste.</p>
</section>
<section class="full-width-split-screen">
<div class="accent">
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Reprehenderit officiis dolores vitae sed libero ipsa. Aut, eos accusantium, quas at laborum tempore ab quidem eum exercitationem odit excepturi incidunt iste.</p>
<p>Deleniti voluptates harum nemo eos deserunt? Cum quos blanditiis dignissimos facilis , pariatur vel nostrum consectetur nesciunt in numquam.</p>
</div>
<div class="primary">
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Reprehenderit officiis dolores vitae sed libero ipsa. Aut, eos accusantium, quas at laborum tempore ab quidem eum exercitationem odit excepturi incidunt iste.</p>
<p>Deleniti voluptates harum nemo eos deserunt? Cum quos blanditiis dignissimos facilis , pariatur vel nostrum consectetur nesciunt in numquam.</p>
</div>
</section>
<section class="">
<div class="wrapper">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse impedit cupiditate, quisquam reprehenderit rem nostrum quaerat tempore molestias magnam maxime omnis hic enim, autem tempora tenetur illo excepturi eaque fugiat.</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Reprehenderit officiis dolores vitae sed libero ipsa. Aut, eos accusantium, quas at laborum tempore ab quidem eum exercitationem odit excepturi incidunt iste.</p>
</section>
<section class="full-width-split-screen">
<img src="https://images.unsplash.com/photo-1689046194076-62199393c464?crop=entropy&cs=srgb&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2OTE1MDg5Mjl8&ixlib=rb-4.0.3&q=85" alt="" />
<img src='https://images.unsplash.com/photo-1689443111223-fdba9d92dbd7?crop=entropy&cs=srgb&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2OTE2OTAxMjB8&ixlib=rb-4.0.3&q=85' alt='' />
</section>
<section class="">
<div class="wrapper">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse impedit cupiditate, quisquam reprehenderit rem nostrum quaerat tempore molestias magnam maxime omnis hic enim, autem tempora tenetur illo excepturi eaque fugiat.</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Reprehenderit officiis dolores vitae sed libero ipsa. Aut, eos accusantium, quas at laborum tempore ab quidem eum exercitationem odit excepturi incidunt iste.</p>
</section>