Responsive Grid Cards
0
UX Engineer
UI Designer
Website CSS
CSS
CSS3
HTML5
Simple grid prototype with various interaction points, originally designed for a content feed.
Uses
clip-path for better, cleaner border radii, especially in conjunction with transitionsUtilizes
oklch for colors and color-mix for modificationsUses
@container to determine if/when to unwrap and marquee-ify tagsFaux
marquee that intentionally waits a beat before animating, and pauses on :hoverUses
@media queries to determine whether card titles are line-clamped + text-overflow: ellipsis;'d or flex-wrap: wrap;Like this project
0
Posted Dec 1, 2024
A functional prototype of a layout originally designed in Figma that utilizes a mix of new and future CSS, featured on Codepen Spark.
Likes
0
Views
0
Tags
UX Engineer
UI Designer
Website CSS
CSS
CSS3
HTML5
Synthesis
Fluid Typography + `color-scheme`
![Rally [Component System]](https://media.contra.com/image/upload/ar_1.333,c_fill,f_avif,h_240,q_auto:good,w_320/a6zgri33qayxvoel1voh)
Rally [Component System]
Imaginable Futures