Pens from Will Boyd https://codepen.io/lonekorean/ en nospam@codepen.io Copyright 2024 2024-02-15T13:45:19-07:00 Pill Shape https://codepen.io/lonekorean/pen/LYaMKpx https://codepen.io/lonekorean/pen/LYaMKpx Will Boyd

See the Code - See it Full Page - See Details

Using the CSS infinity constant for a border-radius to get a pill shape. Read more: [Playing with Infinity in CSS](https://codersblock.com/blog/playing-with-infinity-in-css/)

]]>
Pill Shape 2024-02-15T13:45:19-07:00
The Largest Possible Element https://codepen.io/lonekorean/pen/JjzwQYR https://codepen.io/lonekorean/pen/JjzwQYR Will Boyd

See the Code - See it Full Page - See Details

Using the CSS infinity constant for the width and height of an element. Read more: [Playing with Infinity in CSS](https://codersblock.com/blog/playing-with-infinity-in-css/)

]]>
The Largest Possible Element 2024-02-15T13:45:13-07:00
Unbeatable z-index https://codepen.io/lonekorean/pen/ExMGBVP https://codepen.io/lonekorean/pen/ExMGBVP Will Boyd

See the Code - See it Full Page - See Details

Using the CSS infinity constant to get the greatest possible z-index value. Read more: [Playing with Infinity in CSS](https://codersblock.com/blog/playing-with-infinity-in-css/)

]]>
Unbeatable z-index 2024-02-15T13:45:05-07:00
Rendering test with text-wrap: pretty https://codepen.io/lonekorean/pen/QWoayqp https://codepen.io/lonekorean/pen/QWoayqp Will Boyd

See the Code - See it Full Page - See Details

Test page for rendering speed without/with text-wrap: pretty. Read more: [Nicer Text Wrapping with CSS text-wrap](https://codersblock.com/blog/nicer-text-wrapping-with-css-text-wrap/)

]]>
Rendering test with text-wrap: pretty 2024-01-28T14:44:30-07:00
text-wrap: pretty (hyphenation) https://codepen.io/lonekorean/pen/bGZaEow https://codepen.io/lonekorean/pen/bGZaEow Will Boyd

See the Code - See it Full Page - See Details

Using text-wrap: pretty to prevent excessive hyphenation. Read more: [Nicer Text Wrapping with CSS text-wrap](https://codersblock.com/blog/nicer-text-wrapping-with-css-text-wrap/)

]]>
text-wrap: pretty (hyphenation) 2024-01-28T14:44:24-07:00
text-wrap: pretty (orphan) https://codepen.io/lonekorean/pen/OJqzMxM https://codepen.io/lonekorean/pen/OJqzMxM Will Boyd

See the Code - See it Full Page - See Details

Using text-wrap: pretty to prevent an orphan. Read more: [Nicer Text Wrapping with CSS text-wrap](https://codersblock.com/blog/nicer-text-wrapping-with-css-text-wrap/)

]]>
text-wrap: pretty (orphan) 2024-01-28T14:44:19-07:00
text-wrap: balance (heading comparison) https://codepen.io/lonekorean/pen/PoLEZJP https://codepen.io/lonekorean/pen/PoLEZJP Will Boyd

See the Code - See it Full Page - See Details

Comparison of a heading without/with text-wrap: balance. Read more: [Nicer Text Wrapping with CSS text-wrap](https://codersblock.com/blog/nicer-text-wrapping-with-css-text-wrap/)

]]>
text-wrap: balance (heading comparison) 2024-01-28T14:44:14-07:00
text-wrap: balance (basic) https://codepen.io/lonekorean/pen/YzgYwxo https://codepen.io/lonekorean/pen/YzgYwxo Will Boyd

See the Code - See it Full Page - See Details

Basic example of using text-wrap: balance. Read more: [Nicer Text Wrapping with CSS text-wrap](https://codersblock.com/blog/nicer-text-wrapping-with-css-text-wrap/)

]]>
text-wrap: balance (basic) 2024-01-28T14:44:09-07:00
Shape Zoom Transition https://codepen.io/lonekorean/pen/zYRjwQx https://codepen.io/lonekorean/pen/zYRjwQx Will Boyd

See the Code - See it Full Page - See Details

A neat transition effect made with CSS masking and an SVG. Read more: [Star Wars Scene Transition Effects in CSS](https://codersblock.com/blog/star-wars-scene-transition-effects-in-css/)

]]>
Shape Zoom Transition 2022-06-01T12:53:22-07:00
Clock Wipe Transition https://codepen.io/lonekorean/pen/eYVrWoq https://codepen.io/lonekorean/pen/eYVrWoq Will Boyd

See the Code - See it Full Page - See Details

The iconic clock wipe from Star Wars movies, created with a conic gradient mask and animated via CSS custom properties. Read more: [Star Wars Scene Transition Effects in CSS](https://codersblock.com/blog/star-wars-scene-transition-effects-in-css/)

]]>
Clock Wipe Transition 2022-06-01T12:52:48-07:00