/
Gists
/
CSS
Gists - CSS
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>
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%));
}