Konstantin's public fiddles
-
gxpn4om5
No-Library (pure JS), HTML, CSS, JavaScript
-
CSS Full-Bleed Scroll-Snapping Carousel with Centered Content and Visible Overflow
from: https://www.bram.us/2021/05/06/css-full-bleed-scroll-snapping-carousel-with-visible-overflow/
-
CSS variables are resolved before the value is inherited
Custom properties resolve any var() functions in their values at computed-value time, which occurs before the value is inherited.
-
Truncate element inside flex child
using min-width: 0; on the flex child who's the container for the element that needs to be truncated (using: overflow: hidden; text-overflow: ellipsis; white-space: nowrap;)
-
grid-template-columns: 350px minmax(0, 1fr);
No-Library (pure JS), HTML, CSS, JavaScript
-
Flex item's child resolve its height set in percentages from the align-items stretch default value
If the flex item has align-self: stretch, redo layout for its contents, treating this used size as its definite cross size so that percentage-sized children can be resolved.
-
Button with `preserve-3d`, `perspective` and translate3d(0px, 0px, -5px); doesn't submit FORM
No-Library (pure JS), HTML, CSS, JavaScript
-
Masked fixed text (using clip-path and position fixed)
No-Library (pure JS), HTML, CSS, JavaScript
-
Remove Toast With Panning (Using mouse & touch events)
No-Library (pure JS), HTML, CSS, JavaScript
-
:not() pseudo class with compound selector
No-Library (pure JS), HTML, CSS, JavaScript
-
argsq56p
No-Library (pure JS), HTML, CSS, JavaScript
-
Lock document's scroll position using overflow:hidden
Could be used to lock scroll position when user opens dialog window or menu
-
Lsr6h253
No-Library (pure JS), HTML, CSS, JavaScript
-
heaL7dsq
No-Library (pure JS), HTML, CSS, JavaScript
-
zuj3r6md
No-Library (pure JS), HTML, CSS, JavaScript
-
v3jncwfz
No-Library (pure JS), HTML, CSS, JavaScript
-
uq5d6zwv
No-Library (pure JS), HTML, CSS, JavaScript
-
using counter and @property (CSS Houdini)
No-Library (pure JS), HTML, CSS, JavaScript
-
Lpkefj7u
No-Library (pure JS), HTML, CSS, JavaScript
-
4bzjLkeq
No-Library (pure JS), HTML, CSS, JavaScript