// 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.
.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%);
}
.preview {
font-family: Shantell;
font-variation-settings: "ital" 0.5,"INFM" 50,"BNCE" 20,"SPAC" 10;
}
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;
}
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.
And relative boldness works great with buttons, too!
.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;
}
.👋 {
writing-mode: horizontal-tb;
width: 50vw;
height: 20vh;
}
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.
display
.Elements with display: none
and all its descendants are hidden and don't take up any space.
.red-square {
clip-path: polygon(
-20% 20%,
20% -20%,
120% 80%,
80% 120%
);
};
WIP
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
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.
div
with contentEditable
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.
You can't select me!
image-grid
avatars.dicebear.com/api/croodles/stefan.svg
avatars.dicebear.com/api/bottts/stefan.svg
avatars.dicebear.com/api/open-peeps/stefan.svg
Dialog intro
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.
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
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
Background transition
hwb picker
.preview {
background: hwb(222deg 25% 10%);
}