Custom components | Stefan Judis Web Development

Limit dimensions Limit max dimensions Apply margin: auto:

.box {
  position: absolute;
  inset: 0.5rem;
}

Hello!

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

CSSisreallyawesomeandgetsbettereveryday!

Apply safe alignment

The content isn't fitting into the box and you can't scroll to the beginning. This is again data loss.

.container {
  display: flex;
  flex-direction: column;
  align-items: safe center;
  width: 50%;
}

CSSisawesome!!!

Container width

Decrease the container width to force an overflow situation.

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 50%;
}

CSSisawesome!!!

Container width

Decrease the container width to force an overflow situation.

Go to local target without tabindex Go to local target with tabindex

a link target without tabindex

a link target with tabindex

Click the links above to see what document.activeElement becomes after interacting with a local link.

HTML

<div>
  <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Expedita cupiditate eligendi adipisci, quis doloremque laboriosam, explicabo sequi ut quam cumque voluptatem eaque saepe dolores illo autem vitae illum aliquid quod.</p>
  <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Expedita cupiditate eligendi adipisci, quis doloremque laboriosam, explicabo sequi ut quam cumque voluptatem eaque saepe dolores illo autem vitae illum aliquid quod.</p>
  <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Expedita cupiditate eligendi adipisci, quis doloremque laboriosam, explicabo sequi ut quam cumque voluptatem eaque saepe dolores illo autem vitae illum aliquid quod.</p>
  <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Expedita cupiditate eligendi adipisci, quis doloremque laboriosam, explicabo sequi ut quam cumque voluptatem eaque saepe dolores illo autem vitae illum aliquid quod.</p>
  <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Expedita cupiditate eligendi adipisci, quis doloremque laboriosam, explicabo sequi ut quam cumque voluptatem eaque saepe dolores illo autem vitae illum aliquid quod.</p>
</div>
<a href="#">Back to top</a><div>
  <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Expedita cupiditate eligendi adipisci, quis doloremque laboriosam, explicabo sequi ut quam cumque voluptatem eaque saepe dolores illo autem vitae illum aliquid quod.</p>
  <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Expedita cupiditate eligendi adipisci, quis doloremque laboriosam, explicabo sequi ut quam cumque voluptatem eaque saepe dolores illo autem vitae illum aliquid quod.</p>
  <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Expedita cupiditate eligendi adipisci, quis doloremque laboriosam, explicabo sequi ut quam cumque voluptatem eaque saepe dolores illo autem vitae illum aliquid quod.</p>
  <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Expedita cupiditate eligendi adipisci, quis doloremque laboriosam, explicabo sequi ut quam cumque voluptatem eaque saepe dolores illo autem vitae illum aliquid quod.</p>
  <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Expedita cupiditate eligendi adipisci, quis doloremque laboriosam, explicabo sequi ut quam cumque voluptatem eaque saepe dolores illo autem vitae illum aliquid quod.</p>
</div>
<a href="#">Back to top</a>

CSS

html, body {
  --container-height: 100vh;
  height: var(--container-height);
}

a {
  --distance-to-scroll: 50px;
  margin-top: calc(
    var(--container-height) +
    var(--distance-to-scroll)
  );
  position: sticky;
  bottom: 0;
  left: 5px;
}

/* --- base styles --- */
* {
  box-sizing: border-box
}

body {
  overflow: scroll;
  color: white;
  border-radius: 5px;
  padding: 0.5rem;
  border: 1px solid #888;
}

a {
  padding: 10px;
  background: white;
  border-radius: 0.5rem;
  color: #444;
}html, body {
  --container-height: 100vh;
  height: var(--container-height);
}

a {
  --distance-to-scroll: 50px;
  margin-top: calc(
    var(--container-height) +
    var(--distance-to-scroll)
  );
  position: sticky;
  bottom: 0;
  left: 5px;
}

/* --- base styles --- */
* {
  box-sizing: border-box
}

body {
  overflow: scroll;
  color: white;
  border-radius: 5px;
  padding: 0.5rem;
  border: 1px solid #888;
}

a {
  padding: 10px;
  background: white;
  border-radius: 0.5rem;
  color: #444;
}

Preview

Hue Angle

hsl(46 91% 66%)

oklch(87.5% 0.143 92)

Change the hue angle of these almost identical colors, and see that a hsl() color can drastically change its lightness, while the oklch() color stays almost the same.

And to prove the point, here's a color palette rotating hue angles of hsl() and oklch() colors...

hsl()

oklch()

... and here are two CSS color gradients spanning a 180 degree hue angle.

hsl()

oklch()

Open Sandbox

// Extend the `EventTarget` class to get all the goodies
export class MyEventEmitter extends EventTarget {
  #list;

  constructor(list = []) {
    super();
    this.#list = list;
  }

  getItems() {
    return this.#list;
  }

  addItem(item) {
    this.#list = [...this.#list, item];
    // Dispatch a new event to notify listeners
    this.dispatchEvent(new Event("update"));
  }
}

Relative colors can be used to create entire color palettes.

Choose palette steps (5):

.wheel {
  --base: #dd55aa;
  --swatch1: hsl(from var(--base) h s 0%);
  --swatch2: hsl(from var(--base) h s 20%);
  --swatch3: hsl(from var(--base) h s 40%);
  --swatch4: hsl(from var(--base) h s 60%);
  --swatch5: hsl(from var(--base) h s 80%);
  --swatch6: hsl(from var(--base) h s 100%);
}

HTML

<div class="blue" />
  Blue
  <div class="red" />
    Red
    <div class="green" />
      Green
    </div>
  </div>
</div><div class="blue" />
  Blue
  <div class="red" />
    Red
    <div class="green" />
      Green
    </div>
  </div>
</div>

CSS

.blue {
  background: #1c6ea5;
}

.red {
  background: #863f43;
}

.green {
  background: #637b40;
}

div { 
  color: white;
  padding: 0.5rem;
  margin: 0.5rem;
}.blue {
  background: #1c6ea5;
}

.red {
  background: #863f43;
}

.green {
  background: #637b40;
}

div { 
  color: white;
  padding: 0.5rem;
  margin: 0.5rem;
}

Preview

Edit me, please!

ital

INFM

BNCE

SPAC

.preview {
  font-family: Shantell;
  font-variation-settings: "ital" 0.5,"INFM" 50,"BNCE" 20,"SPAC" 10;
}

Doggo ipsum tungg yapper he made many woofs I am bekom fat long doggosuch treat, blep very hand that feed shibe doggo.

Bold hover styles leading to a heavy reflow.

This jump, obviously, isn't great. But variable fonts help out here. Play around with a relative font weight below.

p {
  font-family: Roboto;
  font-variation-settings: 'GRAD' 0;
}

Font grade

Doggo ipsum tungg yapper he made many woofs I am bekom fat long doggo such treat, blep very hand that feed shibe doggo.

Isn't it fancy that text can be displayed in bold without getting bigger?

Doggo ipsum tungg yapper he made many woofs I am bekom fat long doggosuch treat, blep very hand that feed shibe doggo.

Bold styles done with relative font weight.

And relative boldness works great with buttons, too!

↔ Cell Count

↕ Cell Count

Line Thickness

Grid Line Color

.background-grid {
  background-image: linear-gradient(#1c7cbb 1.5px, transparent 1.5px, transparent calc(100% - 1.5px), #1c7cbb calc(100% - 1.5px)), linear-gradient(90deg, #1c7cbb 1.5px, transparent 1.5px, transparent calc(100% - 1.5px), #1c7cbb calc(100% - 1.5px));
  background-size: 10% 10%;
  border: 1.5px solid #1c7cbb;
}

Choose a writing mode

horizontal-tb
vertical-lr

Choose size properies

width / height
inline / block-size

Choose a unit type

vw / vh
vi / vb

.👋 {
  writing-mode: horizontal-tb;
  width: 50vw;
  height: 20vh;
}

Preview

Inline Axis

Block Axis

Text is lined out horizontally and flows from top to bottom.

The container's horizontal size is 50% viewport width and its vertical size is 20% viewport height.

There's nothing fancy here. It's pretty much the default.

Choose the CSS property to toggle

display(block / none)

visibility(visible / hidden)

Preview

display: block

There are no surprises when using display.

Elements with display: none and all its descendants are hidden and don't take up any space.

1234

.red-square {
  clip-path: polygon(
    -20% 20%,
    20% -20%,
    120% 80%,
    80% 120%
  );
};

WIP

Choose your gutter

auto
stable
stable both-edges

Preview

Doggo ipsum such treat big ol pupper what a nice floof sub woofer lotsa pats big ol shoober dat tungg tho, lotsa pats pupperino most angery pupper I have ever seen clouds thicc.

Full width

Line-clamp

Choose after how many lines an ellipsis should be shown

Preview

I'm an example paragraph! 👋 Doggo ipsum shoob long water shoob h*ck smol fat boi, vvv wow very biscit. shibe heckin good boys and girls shoob. Bork ur givin me a spook pupper pats long bois very hand that feed shibe, you are doing me the shock adorable doggo shibe you are doin me a concern.

A text inputA textarea

A div with contentEditable

A text inputA textarea

inert

The example demo below shows how to make elements inaccessible.
This functionality is easy to misuse, make sure to read about inert use cases before implementing it.

<div inert>
  <p>You can't select me!</p>
  <label>
    You can't edit me!
    <input>
  </label>
  <button onclick="alert('Sup?!')" type="button">
    You can't click me!
  </button>
</div><div inert>
  <p>You can't select me!</p>
  <label>
    You can't edit me!
    <input>
  </label>
  <button onclick="alert('Sup?!')" type="button">
    You can't click me!
  </button>
</div>

Preview

You can't select me!

You can't edit me!

image-grid

DiceBear Avatars

avatars.dicebear.com/api/croodles/stefan.svg
avatars.dicebear.com/api/bottts/stefan.svg
avatars.dicebear.com/api/open-peeps/stefan.svg

Dialog intro

HTML

<dialog open>
 Hello world
</dialog><dialog open>
 Hello world
</dialog>

CSS

body {
 height: 10em;
}body {
 height: 10em;
}

Preview

Dialog focus trap

dialog.show() opens an absolute position non-modal dialog.

dialog.showModal() opens a fixed positioned modal dialog, it's closeable by pressing ESC and all other elements become inaccessible.

Accent color explainer

Text align last

Choose a text-align-last option

auto (initial value)
left
center
right
start
end
justify

Choose a direction option

left-to-right (ltr)
right-to-left (rtl)

Preview

I'm a paragraph with text-align: justify;! 👋 Doggo ipsum shoob long water shoob h*ck smol fat boi, vvv wow very biscit. shibe heckin good boys and girls shoob.

Code golf

HTML

<!-- All kudos to Martin Kleppe -->
<pre id=p style=background:#0a1922><svg onload='setInterval(f=n=>{for(t++,o=i=1;i++<476;o+=i%30?([(f+"")[i%195],"o"][c=0|(h=v=>(M=Math).hypot(i/30-8+3*M.sin(t/8/v),i%30/2-7+4*M.cos(t/9/v)))(7)*h(9)*h(6)/52]||".").fontcolor(c?c>2:n):"\n");p.innerHTML=o},t=1)'></pre><!-- All kudos to Martin Kleppe -->
<pre id=p style=background:#0a1922><svg onload='setInterval(f=n=>{for(t++,o=i=1;i++<476;o+=i%30?([(f+"")[i%195],"o"][c=0|(h=v=>(M=Math).hypot(i/30-8+3*M.sin(t/8/v),i%30/2-7+4*M.cos(t/9/v)))(7)*h(9)*h(6)/52]||".").fontcolor(c?c>2:n):"\n");p.innerHTML=o},t=1)'></pre>

Preview

Background transition

HTML

<a href="#">
  So fancy!
</a><a href="#">
  So fancy!
</a>

CSS

a {
  color: #ddd;
  position: relative;
  text-decoration: none;  display: inline-block;  padding: 0.25em 0.5em;
}

a::before {
  background: #558;
  content: "";
  inset: 0;
  position: absolute;
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.25s;
  z-index: -1;
}

a:hover::before {
  transform: scaleY(1);
  transform-origin: bottom;
}a {
  color: #ddd;
  position: relative;
  text-decoration: none;  display: inline-block;  padding: 0.25em 0.5em;
}

a::before {
  background: #558;
  content: "";
  inset: 0;
  position: absolute;
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.25s;
  z-index: -1;
}

a:hover::before {
  transform: scaleY(1);
  transform-origin: bottom;
}

Preview

hwb picker

HueWhitenessBlackness

.preview {
  background: hwb(222deg 25% 10%);
}

Keep playing...

playground

HTML

<div id="id" class="class">
  Hello world!
</div><div id="id" class="class">
  Hello world!
</div>

CSS

div {
  --color: red !important;
  color: var(--color);
}

.class {
  --color: blue;
}

#id {
  /* Overwrite the `color` property with higher specificity */
  color: yellow;
}div {
  --color: red !important;
  color: var(--color);
}

.class {
  --color: blue;
}

#id {
  /* Overwrite the `color` property with higher specificity */
  color: yellow;
}

Preview

Article components

WIP

Full width

Line-clamp

inert

image-grid

Dialog intro

Dialog focus trap

Accent color explainer

Text align last

Code golf

Background transition

hwb picker

playground

Paint order

Image diff

Accent color

Lang attribute and hyphens

natural-shadow

color-contrast

overscroll-behavior

System colors

Type writer

Scale effect

Clip demo

Overflow demo