CSSline is a showcase gallery of excellent CSS sites from all over the world.
Finland
Joined April 2009
- Tweets2.6K
- Following130
- Followers899
- Likes639
CSSline retweeted
Good news: We'll be back next week! Now is a *really* good time to get on the newsletter, which is also back after (oh snap) 4 years!
css-tricks.com/newsletters/
CSSline retweeted
It took me months to build the framework of my dreams. Rust on the back, front fully rendered via native WebGPU, SEO friendly.. Mah! ❤️
CSSline retweeted
15 years ago, I and @pieteromvlee changed design, forever.
We're ready to do it again, with something new, starting tomorrow.
CSSline retweeted
I built a WebGL layer that syncs with the DOM, optimised for coding agents.
Get notified 👉 domgl.jesperlandberg.com
CSSline retweeted
Everyone builds these grids with WebGL. including me, normally.
So this morning I built a demo one in pure DOM instead. one matrix3d per card, from techniques I've been using for years.
Infinite in every direction, domed, cursor lens, flashlight, click-to-open case study. Zero dependencies.
Demo link (with claude skill) in comments🙂
CSSline retweeted
spritesheets are, and always will be, a fun trick! ⚡
translate with css based on pointer position
grace note™ blink included ♪
CSSline retweeted
Last year my main acc with 7k+ followers got hacked. Decided to create a new one. I'm Jesper Landberg, a design engineer from Sweden👋
CSSline retweeted
My skills repo has gained 8,000 GitHub stars in a week, it surpassed Vaul and is 300 stars short of surpassing Sonner.
Not greatest metrics of success, but it’s a good indication of how the times change.
CSSline retweeted
My editorial web design course is now OPEN!
Enrollment closes in 7 days (June 25th).
If you've been wanting to learn more about typography, art direction, grids, hierarchy, spacing, scale, etc. This is for you.
Info and enrollment ↓
tiwd.courses/
CSSline retweeted
CSS Tip! ⭐️
You can use mix-blend-mode with scoped custom properties to create this inverted :hover effect 🤙
button > span {
left: calc(var(--x, 0) * 1px);
top: calc(var(--y, 0) * 1px);
mix-blend-mode: difference; 👈
}
The cool trick is that using mix-blend-mode acts like a color inverter which works well with monochromatic controls 😍 Saves defining the :hover colors, etc. It works it out for you!
As for how to move that spot around? A teeny bit of JavaScript 🤏
const UPDATE = ({target, x, y }) => {
const bounds = target.getBoundingClientRect()
target.style.setProperty('--x', x - bounds.left)
target.style.setProperty('--y', y - bounds.top)
}
const BTNS = document.querySelectorAll('button')
BTNS.forEach(BTN => BTN.addEventListener('pointermove', UPDATE))
On :hover you can use a scoped custom property to change the size of the spot
button:is(:hover, :focus-visible) {
--active: 1;
}
button span {
transform: translate(-50%, -50%) scale(calc(var(--active, 0) * 3);
transition: transform 0.25s;
}
But, what about the bouncy easy? You can use linear() where supported to create a bouncy transition ✨
@supports (transition-timing-function: linear(0, 1)) {
button:is(:hover, :focus-visible) span {
transition-duration: 0.5s;
transition-timing-function: linear(
0, 0.5007 7.21%, 0.7803 12.29%,
...
);
}
}
That's it! Thanks for the challenge @alemalohe 🤙
@CodePen link below! 👇
CSSline retweeted
Future UI && CSS Tip! 🔮
You could use View Transitions to animate CSS grid position and create an OSX-style exposé for a portfolio 🔥
It's a grid where things move based on state. Wrapped in a VT 🤙
[data-expose] section{
grid-area:var(--x)/var(--y);
}
@CodePen link below 👇
CSSline retweeted
Simple 3D CSS demo: an interactive version of Friedrich's "Wanderer Above the Sea of Fog." Hover over the image (or tap if on mobile) to see it move.
Live demo and source code: alvaromontoro.com/demos/wand…
Note: the demo uses :has(), so it won't work on Firefox.
CSSline retweeted
the new experimental animation-timeline (developer.mozilla.org/en-US/…) together with clip-path is a really cool way to create responsive scroll effects #css
CSSline retweeted
I am joining the game and trying the new View Transitions on CSS Tip
👉 css-tip.com 👈
Yes, what you see are Zig-Zag edges 👀
Open your Chrome, activate the "viewTransition" flags and have fun! 🤩
#CSS
CSSline retweeted
My first-ever font has just been published on Google Fonts – Figtree! 🎉🥳
It's a clean-yet-friendly geometric sans serif. Variable font wit 7 weights. Supports 280+ languages.
Here are some of the tiny details that went into its crafting ⚒️…
New font! Figtree is a clean yet friendly geometric sans serif font for usage in web and mobile apps, designed by @erikdkennedy. It comes as a variable font with 7 legacy weights, Light through Black, and supports 280+ Latin languages. 🌿 fonts.google.com/specimen/Fi…
CSSline retweeted
Say goodbye to the limitations of font-weight! 👋
With #CSS GRAD properties for font variable, you can achieve a superior bold experience that gives your designs more depth and character.
@CodePen: codepen.io/DeyJordan/pen/yLR…
#typography #webdesign #frontend #codingtips
CSSline retweeted
We recreated this Lottie animation in Rive.
Lottie file is 181.7 KB.
Rive file is 18 KB.
Lottie GPU memory: ~149 MB-190 MB
Rive GPU memory: 2.6 MB
Lottie JS heap: 16.9 MB
Rive JS heap: 7.3 MB
Lottie CPU: 91.8%
Rive CPU: 31.8%
CSSline retweeted
CSS Tip! 👻
Build a CSS version with :has() selecting previous siblings ✨
.char:hover {
--pop: 1;
}
.char:hover + .char,
.char:has(+ .char:hover) { 👈
--pop: 0.4;
}
.char {
translate: 0 calc(var(--pop, 0) * -65%);
transition: translate 0.2s;
}
Demo link below! 👇
