Ryan Mulligan
-
Blog Questions Challenge
Hey there. It has been a minute since my last post. I was semi-recently tagged by Zach Leatherman to (optionally) participate in this year's Blog Questions Challenge. I had planned on doing it then. But life really hit hard as we entered this year and it has not let up. Energy dedicated to my personal…
Published
-
Some Things About Keyframes
Whether you've barely scratched the surface of keyframe animations in CSS or fancy yourself a seasoned pro, I suggest reading An Interactive Guide to Keyframe Animations. Josh (as always) does an impeccable deep dive that includes interactive demos for multi-step animations, loops, setting dynamic values…
Published
-
Scrolling Rails and Button Controls
Once again, here I am, hackin' away on horizontal scroll ideas. This iteration starts with a custom HTML tag. All the necessities for scroll overflow, scroll snapping, and row layout are handled with CSS. Then, as a little progressive enhancement treat, button elements are connected that scroll the previous…
Published
-
The Shape of Runs to Come
Over the last few months or so, I have been fairly consistent with getting outside for Sunday morning runs. A series of lower body issues had prevented me from doing so for many years, but it was an exercise I had enjoyed back then. It took time to rebuild that habit and muscle but I finally bested the…
Published
-
The Pixel Canvas Shimmer Effect
I recently stumbled on a super cool, well-executed hover effect from the clerk.com website where a bloom of tiny pixels light up, their glow staggering from the center to the edges of its container. With some available free time over this Thanksgiving break, I hacked together my own version of a pixel…
Published
-
Web Components for Password Input Enhancements
So there I was, experimenting with HTML password inputs and Web Components. I'm not sure why the idea even came up but it quickly snowballed into a curious expedition. The result from the journey was a set of custom elements that provide extra functionality and information about the text being typed…
Published
-
CSS @property and the New Style
The @property at-rule recently gained support across all modern browsers, unlocking the ability to explicitly define a syntax, initial value, and inheritance for CSS custom properties. It seems like forever ago that CSS Houdini and its CSS Properties and Values API were initially introduced. I experimented…
Published
-
Center Items in First Row with CSS Grid
Imagine the following section on a website: A collection of elements, like a series of cards with marketing information, are presented in a grid display. The elements are arranged in rows of three. When there are an odd number of elements left over, they will be center-aligned horizontally. There are…
Published
-
Notes on handling events in Web Components
My click-spark web component was a fun, silly project at best. Yet I've seen it's had some love since being shared. So why not publish it as an npm package? No better time than the present, some say. I had done a major refactor before publishing, the most notable was that the spark would now be contained…
Published
-
Penguin!
My partner and I finally finished our epic three-part claymation saga. It's our first attempt at creating stop-motion videos with clay and it truly is a lot of work for such a short result. That claymation episode of Parks and Recreation is a little too real. I won't compare our movie to Avatar though…
Published
-
Detect JavaScript Support in CSS
I had been aware of the scripting CSS media feature but I was still under the impression that cross-browser support was lacking. What a pleasant surprise to discover that it has been available in all modern browsers as of December 2023 according to caniuse.com. With this feature, we can provide alternative…
Published
-
Someone Great
Where to start? The grief is heavy and far too real. I barely slept last night. The brain fog is thick but finding the words and placing them here may provide some catharsis. I lost someone great. Oscar was so much bigger than most folks will ever understand. His love, not just for my partner and I,…
Published
-
The Fifty-Fifty Split and Overflow
The fifty-fifty split—or 50/50 for a dash of brevity—is a classic layout pattern where two elements occupy the same amount of inline space inside a row. These two elements will stack once it becomes too narrow to properly display them side by side. Both flexbox and CSS grid can accommodate this pattern…
Published
-
CSS Scroll-triggered Animations with Style Queries
Topping my CSS wishlist in 2024 are scroll-driven animations and style queries. At the time of writing this post, both lack full support but I've got fingers crossed they become available in all evergreen browsers not too long from now. I had done some exploration of scroll-driven animations but have…
Published
-
Using External Links as GitHub Issue Template Options
I've been down the road of configuring custom issue templates on GitHub repos before. It even seems like there have been some nice improvements to help make creating them even easier. Thanks for setting me up with a reasonable bug report template to start from so I don't have to build one from scratch…
Published
-
Click Spark
Last week I had made this fun little experiment. When clicking or tapping on the page, sparks (of joy) fly out from the mouse cursor/tap position. It started with me just messing around a bit in CodePen, but after sharing and getting a few friendly nudges on my Mastodon post, this fun little experiment…
Published
-
Web Component
There are very rare occasions that I want element disclosure widget-style funtionality but would like to have the element detached or live outside of it's related container. This commonly stems from designs that may, for example, expect a toggle button to appear inline with other controls or content…
Published
-
We can :has it all
The functional :has() CSS pseudo class is now shipping in all evergreen browsers! 🎉 With the release of Firefox 121.0, I'm excited to see that my semi-dusty :has() demos are finally realizing their full potential in Firefox. The amount of opportunity unlocked with this selector seems nearly infinite…
Published
-
Site Rebuild, Here We Go!
There are still a few bits to work out, but why wait any longer? The latest version of my site is here and it has been rebuilt from the ground up. I'm feeling pretty good about it and invite you all to celebrate the magic with me! ✨ Inspiration While playing Super Mario Wonder, I found myself intrigued…
Published
-
Scrollspy Navigation Web Component
Just here for the code and demos? Check out the scrollspy-nav repository on GitHub and its corresponding demo page. The backstory A "scrollspy" is a method of tracking which link in a menu is active based on a relevant section of information being visible in the viewport. Typically, the menu position…
Published
-
Starting Exploration of Scroll-driven Animations in CSS
CSS Scroll-driven Animations has recently made its debut on the main stage in the latest versions of Chrome and Edge. Before this module became available, linking an element's animation to a scroll position was only possible through JavaScript. I've been (and still am) a huge fan of GSAP ScrollTrigger…
Published
-
CSS Custom Property Fallbacks in Shorthand Values
CSS Custom Properties are incredibly versatile and have become especially useful as customizable props in common layout and component style patterns. Here's an example derived from the SmolCSS site: .grid { --min: 15ch; --gap: 1rem; display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fit…
Published
-
Full-bleed Table Scrolling on Narrow Viewports
I found the following to be a rather decent solution for having HTML tables overflow the inline edges of smaller/tighter/narrow viewports. Try resizing the width of the browser window if viewing this page on a larger screen. Open CodePen demo Notice that the table overflows beyond the edge of the window…
Published
-
Sticky Page Header Shadow on Scroll
We've seen it plenty of times around the web where a website's page header follows us as we scroll down the page. CSS makes doing this a breeze with sticky positioning: .page-header { position: sticky; top: 0; } What if we desired something a little bit extra, like applying a box-shadow to the sticky…
Published
-
CSS Grid Gap Behavior with Hidden Elements
I was recently prototyping a component layout that included a way to toggle the visibility of sibling elements inside a grid display. What tripped me up was, while these elements were hidden, all of the container's gap gutters remained, leaving undesired extra visual spacing. I expected these gutters…
Published
-
Creating Time
For my birthday, my partner put together the sweetest, most thoughtful surprise I could ever imagine. She recognized that I had been in a complete creative rut the previous year. I'd complain that I work too much, play too little. I'm too tired. Way too busy. This, that, and the other thing is blocking…
Published
-
Layout Breakouts with CSS Grid
A post about the layout you're looking at right now The previous structure of this page layout was virtually the same, the foundation of it expertly defined in the article Full-Bleed Layout Using CSS Grid by Josh Comeau. It's a technique I've used on many projects. I've even blogged about it previously…
Published
-
The Infinite Marquee
The deprecated tag The HTML element had blessed (cursed?) the early days of the internet with the ability to insert scrolling text onto a webpage. It even included options to control text behavior once it reached the end of its container with a handful of attributes. Review them here on MDN if you're…
Published
-
Inverted Media Queries and Breakpoints
The occasional breakpoint Nowadays I lean on modern CSS solutions, fluid layout patterns, and intrinsic sizing over viewport dimension-based media queries – typically referred to as breakpoints – that adapt a design at particular screen sizes. Let's not forget that container queries will soon join our…
Published
-
Horizontal Scrolling in a Centered Max-Width Container
The layout challenge When I had first assembled a gallery of CodePen projects to include on my personal site redesign in the summer of 2021, I imagined the following layout and interaction: The page's main content container is centered on the page with a max-width set. The first gallery item aligns with…
Published
-
Website Themes and Color Schemes
Getting into the mode Before we begin, I'd like to preface this article with the following resources that were helpful guides on my theming quest. They explain a lot of the intricacies of setting up dark mode and I recommend reading them before my own. A Complete Guide to Dark Mode on the Web Quick and…
Published
-
Animating with the Flip Plugin for GSAP
What the flip is it? Every time a new GSAP plugin is introduced, I'm close to bursting from excitement. The simplicity of the GreenSock API makes learning and applying these tools in projects such a dream. I had the pleasure of beta testing the ScrollTrigger plugin and was blown away by how easily I…
Published
-
A Horizontal Scroll List and Custom Keyboard Navigation
Getting started It was time for a personal site refresh. I didn't plan much for this next iteration, but I knew I wanted to include a showcase of my CodePen projects. With so many to choose from, it was tough deciding on how I'd ultimately like to visibly display project content. To kick things off,…
Published
-
Migrating to Eleventy
Hello, world! The time has come. I've finally decided to explore the wonderful world of 11ty! The migration process for my personal website was dead simple. Not that moving a tiny one-pager over to a static site generator is really a big deal, but getting started was just so easy. Build An Eleventy …
Published
-
Style Review
Donut dessert lollipop dragée pudding marzipan jelly Danish icing cake sugar plum chocolate bar candy canes macaroon pie. Bear claw bear claw biscuit fruitcake icing brownie. Jelly-o pudding tart cake ice cream jelly-o. Danish sugar plum chocolate cake wafer cake pudding sweet roll sesame snaps tiramisu…
Published