/
Gists
/
CSS trick
Gists - CSS trick
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;
}
}
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
Stacking context
•
CSS
CSS trick
info.txt #
/* NEVYTVÁŘÍ stacking context */
.div1 {
position: relative;
}
/* VYTVÁŘÍ stacking context */
.div2 {
position: relative;
z-index: 0; /* nebo jakákoliv jiná hodnota */
}
/* VYTVÁŘÍ stacking context */
.div3 {
isolation: isolate;
}
Tady je kompletní seznam, co vytváří stacking context:
------------------------------------------------------
Root element (<html>)
position: fixed nebo sticky
position: relative/absolute + jakýkoliv z-index kromě auto
Element s opacity < 1
Element s transform, filter, backdrop-filter
Element s isolation: isolate
mix-blend-mode jiné než normal
perspective hodnota jiná než none
contain s hodnotou layout, paint nebo strict
-webkit-overflow-scrolling: touch
On gists
Grid instead of wrapper containers (edges)
•
Tailwind CSS
CSS
CSS trick
grid.css #
/* Kevin Powell
https://codepen.io/kevinpowell/pen/ExrZrrw
(https://ryanmulligan.dev/blog/layout-breakouts/)
*/
.content-grid {
--padding-inline: 1rem;
--content-max-width: 900px;
--breakout-max-width: 1200px;
--breakout-size: calc(
(var(--breakout-max-width) - var(--content-max-width)) / 2
);
display: grid;
grid-template-columns:
[full-width-start] minmax(var(--padding-inline), 1fr)
[breakout-start] minmax(0, var(--breakout-size))
[content-start] min(
100% - (var(--padding-inline) * 2),
var(--content-max-width)
)
[content-end]
minmax(0, var(--breakout-size)) [breakout-end]
minmax(var(--padding-inline), 1fr) [full-width-end];
}
.content-grid > :not(.breakout, .full-width),
.full-width > :not(.breakout, .full-width) {
grid-column: content;
}
.content-grid > .breakout {
grid-column: breakout;
}
.content-grid > .full-width {
grid-column: full-width;
display: grid;
grid-template-columns: inherit;
}
img.full-width {
width: 100%;
max-height: 45vh;
object-fit: cover;
}
:root {
--color-scheme: dark;
--font-family: system-ui;
--fs-300: clamp(0.94rem, calc(0.92rem + 0.08vw), 0.98rem);
--fs-400: clamp(1.13rem, calc(1.06rem + 0.33vw), 1.31rem);
--fs-500: clamp(1.35rem, calc(1.21rem + 0.69vw), 1.75rem);
--fs-600: clamp(1.62rem, calc(1.37rem + 1.24vw), 2.33rem);
--fs-700: clamp(1.94rem, calc(1.54rem + 2.03vw), 3.11rem);
--fs-800: clamp(2.33rem, calc(1.7rem + 3.15vw), 4.14rem);
--fs-900: clamp(2.8rem, calc(1.85rem + 4.74vw), 5.52rem);
--clr-primary-300: hsl(219, 76%, 55%);
--clr-primary-400: hsl(219, 76%, 40%);
--clr-primary-500: hsl(219, 76%, 25%);
--clr-secondary-300: hsl(269, 75%, 55%);
--clr-secondary-400: hsl(269, 75%, 40%);
--clr-secondary-500: hsl(269, 75%, 25%);
--clr-accent-200: hsl(358, 85%, 80%);
--clr-accent-300: hsl(358, 72%, 65%);
--clr-accent-400: hsl(358, 72%, 50%);
--clr-accent-500: hsl(358, 72%, 35%);
}
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
color-scheme: var(--color-scheme);
}
body {
margin: 0;
font-family: var(--font-family);
font-size: var(--fs-400);
line-height: 1.6;
}
h1,
h2,
h3,
h4,
h5,
h6,
p,
figure {
margin: 0;
}
img {
max-width: 100%;
display: block;
}
.site-title {
font-size: var(--fs-900);
line-height: 1.05;
text-transform: uppercase;
}
.section-title {
font-size: var(--fs-800);
line-height: 1.1;
}
.bg-primary {
background: var(--clr-primary-500);
}
.visually-hidden {
clip: rect(0 0 0 0);
clip-path: inset(50%);
height: 1px;
overflow: hidden;
position: absolute;
white-space: nowrap;
width: 1px;
}
.call-to-action {
padding: 1rem;
background: hsl(0 0% 100% / 0.15);
}
.wrapper {
width: calc(100% - 3rem);
max-width: 900px;
margin-inline: auto;
}
.flow > * + * {
margin-top: var(--flow-spacing, 1em);
}
.section-padding {
padding-block: 2.5rem;
}
.primary-header {
padding-block: 1rem;
margin-block-end: 3rem;
background: var(--clr-accent-200);
color: var(--clr-primary-500);
}
.primary-header__layout {
display: flex;
align-items: center;
justify-content: space-between;
}
.logo {
max-width: 250px;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: max(5vw, 1rem);
}
nav a {
color: inherit;
text-decoration: none;
}
nav a:hover,
nav a:focus {
color: var(--clr-accent-500);
text-decoration: underline;
}
.even-columns {
display: flex;
gap: 1rem;
}
On gists
Subgrid examples by Thirus (Rows and columns)
•
Tailwind CSS
CSS
CSS trick
example1.html #
<!-- https://play.tailwindcss.com/CF9WdM43Jf -->
<section class="bg-slate-900 min-h-screen text-slate-100">
<!-- Shopping Cart -->
<div class="rounded-md bg-slate-800 p-8 grid grid-cols-[auto_1fr_auto_auto_auto] gap-6">
<div class="grid gap-6 col-span-5 grid-cols-subgrid">
<p class="col-span-2">Product</p>
<p>Price</p>
<p>Quantity</p>
<p class="text-right">Total</p>
</div>
<div class="grid gap-6 col-span-5 grid-cols-subgrid">
<img
class="size-20 object-cover"
src="https://tinyurl.com/3r25tr36"
alt=""
/>
<div>
<h3 class="text-xl font-medium">
Stylish Tote Bag
</h3>
<p class="text-sm text-slate-400">
Women's Tote Bag Brown
</p>
<span class="text-sm text-slate-500">
#368798
</span>
</div>
<p class="text-slate-400">
$99.00
</p>
<label>
<input
class="border border-slate-600 bg-transparent px-2 py-1 text-sm text-slate-400"
type="text"
value="1"
size="2"
/>
</label>
<p class="font-medium text-right">
$99.00
</p>
</div>
<div class="grid gap-6 col-span-5 grid-cols-subgrid">
<img
class="size-20 object-cover"
src="https://tinyurl.com/3pj5teex"
alt=""
/>
<div>
<h3 class="text-xl font-medium">
Sunglasses
</h3>
<p class="text-sm text-slate-400">
Wooden Frame
</p>
<span class="text-sm text-slate-500">
#756328
</span>
</div>
<p class="text-slate-400">
$102.00
</p>
<label>
<input
class="border border-slate-600 bg-transparent px-2 py-1 text-sm text-slate-400"
type="text"
value="10"
size="2" />
</label>
<p class="font-medium text-right">
$1020.00
</p>
</div>
</div>
</section>
On gists
CSS trick
Responsive CSS Grids (autoheight by viewport)
style.css #
/*
Demo: https://jsbin.com/hugodahuge/1/edit?html,css,output
*/
.grid {
display: grid;
grid-template-rows: repeat(4, 1fr);
grid-auto-columns: calc((100vh - 3em) / 4);
grid-auto-flow: column;
grid-gap: 1em;
height: 100vh;
}
.grid-item:nth-child(3n) {
background-color: gray;
}
.grid-item:nth-child(3n + 1) {
background-color: green;
}
.grid-item:nth-child(3n + 2) {
background-color: yellow;
}