Minimal CSS-only blurry image placeholders
https://leanrada.com/notes/css-only-lqip/
#HackerNews #MinimalCSS #BlurryImage #Placeholders #CSSOnly #WebDesign
Also, new article's up! Exploring how I made a CSS-only slideshow with scroll snapping (plus some quick notes on radio-button approaches) π
You can even navigate the slideshow with arrow keys!
Overall, I'm really happy to see CSS features to control scroll behavior without JS now! Scroll snap is a joy to use, and opens the door to a lot of easy-to-do customization that required a lot of carefully managed scroll-linked event listeners before β¨
sharing here the website i made for the architecture practice specs ππ https://specs.work
the site is built minimally with static site generator #pelican and #cssonly and hosted in BE with Domaine Public :)
I've released a version of the theme (SpeCSS), with a lot of documentation on my gitlab, if anyone wants to use it as a starter kit for a portfolio site. βοΈ https://gitlab.com/mar_ver/specss/ (edit: link was wrong) βοΈ
License is CC-BY-SA-NC
#portfolio #css #pelican #lowtechwebsite #opensource #webdev
NEW third-person blog post! π
https://dev.to/ivorjetski/css-music-video-no-images-pure-code-42e1
It's about #CSS and stuff.
@anatudor gets a mention too.
#code #coding #html #dev #webdev #animation #music #musicvideo #cssart #cssonly #codepen #frontend
Could this be the first ever responsive Music Video? π΅
https://youtube.com/watch?v=V0nsD2bEqkg
https://codepen.io/ivorjetski/pen/jOgEyPO
@CodePen
#css #frontend #html #cssonly #cssart #music #musicss #video
I retro-fitted animation-timeline to my old #purecss King of Hearts, to see how easy it would be... It was too easy! π€© Animation-timeline is amazing!! π₯³
https://codepen.io/ivorjetski/pen/VwOraXv
via
@CodePen
Finally got the JS-free user selectable themes integrated into sidneys1.com :)
π Today, Maxwell Barvian shares three amazing carousel experiments made with CSS scroll-driven animations, based on Francesco Zagamiβs designs! No JavaScript!
π§ͺ Highly experimental, but oh-so-beautiful! π
Have a look: https://tympanus.net/codrops/?p=75188
#css #cssonly #animation #frontend #webdevelopment #creativecoding
Surely there's a #CSS-only way to create a product spinner on hover using slices and 36 images. Shall I go down this rabbit hole?
#LukeDorny7 #cssOnly
π A Practical Introduction to Scroll-Driven Animations with CSS scroll() and view()
Chromium only
by Adam Argyle @argyleink at @codrops
#frontend #css #webdevelopment #tutorial #howto #cssonly #ui #coding #carrousel
π’ Get the lowdown on CSS scroll-driven animations in Adam Argyle's extensive tutorial. π€ Tons of fun examples included!
Check it out: https://tympanus.net/codrops/?p=75216
#frontend #css #webdevelopment #tutorial #howto #cssonly #ui #coding
Wanna see some AMAZING stuff made ONLY with CSS? Huge thanks to @mikebabcock for tipping me off to this Kevin Powell video. π€―
https://www.youtube.com/watch?v=CG__N4SS1Fc
#CSS #WebDev #CSSArt #animation #design #art #CSSOnly #Codepens
RTβBen Evans
Fancy a fun holiday challenge? π
Fork & put your own piece of furniture in this room.
The funnier & the more adventurous the better.
All forks will be reviewed in a YouTube video early next year.
https://codepen.io/ivorjetski/pen/vYbPgdE
Inspired by @garethheyes β₯οΈ
#cssonly #purecss @CodePen
:sys_twitter: https://twitter.com/ivorjetski/status/1733246103464624489
#CodePenChallenge | Tricks & Treats https://codepen.io/takaneichinose/pen/BavgmVx
@codepen
A little witch girl is asking for a treat! Please give her some candies!
This behavior and animations is written only using #css animation
It's a CSS Maze!! π½
Unless in Safari... In which case it's some random shapes π
https://codepen.io/ivorjetski/pen/poQpveN
π³ No images
π΅ No JavaScript
π¨βπ» Just CSS + a sprinkling of HTML
First one to screenshot the end wins... Go!! π
@codepen@fosstodon.org
@CodePen@hello.2heng.xin #nocode #purecss #cssonly #cssart #ccsgame