Pens from Yair Even Or https://codepen.io/vsync/ en nospam@codepen.io Copyright 2024 2024-01-16T17:36:31-07:00 Basic Gradient Mask https://codepen.io/vsync/pen/WNmpNaa https://codepen.io/vsync/pen/WNmpNaa Yair Even Or

See the Code - See it Full Page - See Details

This pen is a part of an article in Smashing-Magazine

]]>
Basic Gradient Mask 2024-01-16T17:36:31-07:00
Faded Outer Box Backdrop Blur - Simplified Version https://codepen.io/vsync/pen/YzgGvRN https://codepen.io/vsync/pen/YzgGvRN Yair Even Or

See the Code - See it Full Page - See Details

Add blur effect around a box element so everything beneath it, up to certain radius, is blured

]]>
Faded Outer Box Backdrop Blur - Simplified Version 2024-01-11T14:47:41-07:00
Tagify - RTL & Uncapped Dropdown Width https://codepen.io/vsync/pen/VwReGKL https://codepen.io/vsync/pen/VwReGKL Yair Even Or

See the Code - See it Full Page - See Details

Passing the input element as a parameter to Tagify will transform it into a tags-component. Without any settings, the user will be allowed to create any tags they want, without a count limit. The input has a pre-defined value which Tagify creates two from tags. (Double-click on a tag to edit it)

]]>
Tagify - RTL & Uncapped Dropdown Width 2024-01-04T21:16:50-07:00
Faded Outer Box Backdrop Blur https://codepen.io/vsync/pen/XWoYaag https://codepen.io/vsync/pen/XWoYaag Yair Even Or

See the Code - See it Full Page - See Details

Add blur effect around a box element so everything beneath it, up to certain radius, is blured

]]>
Faded Outer Box Backdrop Blur 2024-01-08T14:00:37-07:00
multiline-truncated text with link after ellipsis https://codepen.io/vsync/pen/ExGwmJL https://codepen.io/vsync/pen/ExGwmJL Yair Even Or

See the Code - See it Full Page - See Details

Render a "show more" button (link) next to the ellipsis (at the same line) only if the text is being truncated

]]>
multiline-truncated text with link after ellipsis 2023-09-19T16:38:43-07:00
auto-fit truncated multiline text to container https://codepen.io/vsync/pen/eYbGgGL https://codepen.io/vsync/pen/eYbGgGL Yair Even Or

See the Code - See it Full Page - See Details

in CSS using `line-clamp` only allowed a fixed value integer, so it is impossible to fit a block of text to it's container, and especially if the container's height is dynamic

]]>
auto-fit truncated multiline text to container 2023-09-21T17:13:42-07:00
[WIP] https://codepen.io/vsync/pen/KKbmdEP https://codepen.io/vsync/pen/KKbmdEP Yair Even Or

See the Code - See it Full Page - See Details

]]>
[WIP] 2023-09-17T17:21:20-07:00
CSS-only switch toggler using a checkbox https://codepen.io/vsync/pen/YzRqgjO https://codepen.io/vsync/pen/YzRqgjO Yair Even Or

See the Code - See it Full Page - See Details

rape the shit out of of checkbox to make it pretty

]]>
CSS-only switch toggler using a checkbox 2023-07-02T19:24:45-07:00
Reveal with fade using CSS gradient mask https://codepen.io/vsync/pen/ZEmWwZE https://codepen.io/vsync/pen/ZEmWwZE Yair Even Or

See the Code - See it Full Page - See Details

Having a text to appear with a nice fade is tricky and I've spend a good hour+ solving this one. Anything can be revealed using this simple mask trick

]]>
Reveal with fade using CSS gradient mask 2023-06-22T12:14:41-07:00
CSS-only Cards Filters: Checkboxes & :has https://codepen.io/vsync/pen/JjmmjLR https://codepen.io/vsync/pen/JjmmjLR Yair Even Or

See the Code - See it Full Page - See Details

Using a combinations of checkboxes & the :has selector

]]>
CSS-only Cards Filters: Checkboxes & :has 2023-05-18T06:52:22-07:00