/
Gists
/
CSS
Gists - CSS
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
Fake slider :) (rather for mobile )
index.html #
<style>
grid {
border: 2px solid maroon;
width: 100%;
display: flex;
overflow: auto visible;
scrollbar-width: none;
}
grid-item {
width: min(80vw, 500px);
flex: 0 0 auto;
outline: 1px solid lime;
padding-block: 2rem;
}
</style>
<grid>
<grid-item>1</grid-item>
<grid-item>2</grid-item>
<grid-item>3</grid-item>
<grid-item>4</grid-item>
<grid-item>5</grid-item>
<grid-item>6</grid-item>
<grid-item>7</grid-item>
<grid-item>8</grid-item>
<grid-item>9</grid-item>
<grid-item>10</grid-item>
</grid>
On gists
Css grid by KevinPowell sheats
•
CSS
CSS trick
grid.css #
/* Adjustable grid */
.grid {
--column-count: 3;
display: grid;
grid-template-columns: repeat(var(--column-count), 1fr);
}
/* modifiers */
.grid-3 { --column-count: 3; }
.grid-4 { --column-count: 4; }
.grid-5 { --column-count: 5; }
/* custom */
.grid { --column-count: 1; }
@media (min-width: 600px) {
.grid { --column-count: 3; }
}
@media (min-width: 960px) {
.grid { --column-count: 4; }
}
/*
-----------------------------------------------------
*/
/* grid auto-columns */
.auto-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
}
/*
-----------------------------------------------------
*/
/* Pushing the footer down */
.main-layout {
min-height: 100vh;
display: grid;
grid-template-rows: rows 1fr rows;
}
/*
-----------------------------------------------------
*/
/* The stack */
.the-stack {
display: grid;
grid-template-areas: "stack";
place-items: center;
}
.the-stack > * {
grid-area: stack;
}
On gists
CSS
CSS trick
full width in container
index.html #
<!--
https://jsbin.com/heqamezuju/edit?html,css,output
-->
<grid>
<item class="l">
aaa
</item>
<item class="r">
bbb
</item>
</grid>
<style>
grid {
display: grid;
grid-template-columns: 1fr 1fr;
max-width: 500px;
outline: 2px solid gray;
height: 500px;
margin: auto;
}
item {
padding: 10px;
}
.r, .l {
position: relative;
isolation: isolate;
}
.r:after {
background: lightgray;
top: 0;
bottom: 0;
left: 0;
width: 50vw;
position: absolute;
content: "";
z-index: -1;
}
.l:after {
background: lightpink;
top: 0;
bottom: 0;
right: 0;
width: 50vw;
position: absolute;
content: "";
z-index: -1;
}
</style>