Search
Items tagged with: CSS
Note that when you’re working with Kitten, your apps do not have a build process.
You write HTML, CSS, JavaScript and, optionally, extend using first-class support for htmx and alpine.js as well as Kitten’s own Streaming HTML workflow¹. There’s also no scaffolding or generating a project with hundreds of files or anything. You just write the code for your app.
¹ https://ar.al/2024/03/08/streaming-html/
#SmallWeb #Kitten #StreamingHTML #web #dev #NodeJS #JavaScript #HTML #CSS
Streaming HTML
Sorry, your browser doesn't support embedded videos. But that doesn’t mean you can’t watch it! You can download the video and watch it with your favourite video player. Building the Streaming HTML counter example.Aral Balkan
I still prefer the Kitten version ;)
(That’s _all_ the code for a _persisted_ counter.) :)
#Kitten #SmallWeb #web #dev #html #css #javascript #NodeJS
New Kitten features: Interactive Shell (REPL), Multi-page Settings, and backup and restore (data portability)
Sorry, your browser doesn't support embedded videos. But that doesn’t mean you can’t watch it! You can download the video and watch it with your favourite video player.Aral Balkan
#tinySVGtip Better gooey effect with no matrix filter!
Each particle can get its own CSS blur filter with a value that may be any unit (SVG doesn't support this).
The assembly containing them gets an SVG filter as below.
Heavily commented on @codepen: https://codepen.io/thebabydino/pen/NWVdKaG
#CSS #SVG #filter #cssFilter #svgFilter #goo #gooey #blob #blobby #blur #alpha #code #coding #frontend #webDev #web #dev #webDevelopment
7⃣ 545 ❤️ Cycling gradient glow - no text duplication https://codepen.io/thebabydino/pen/rNPOpJK
A simple #SVG filter trick.
We create the gradient text.
The filter creates a blurred copy of it and places it underneath.
We then animate the gradient stops... magic! 🪄✨
#css #svgFilter #filter #filterEffect #glow #text #textEffect #textGlow #cssGradient #code #coding #frontend #web #webDev #dev #webDevelopment
6⃣ 688 ❤️ Pure #CSS 1 div card patterns (no SVG, no images other than CSS gradients) https://codepen.io/thebabydino/pen/NWxBzRv
A variation on the pure CSS halftone technique https://mastodon.social/@anatudor/112401133442879091
#halftone #pattern #gradient #cssGradient #blendMode #blending #fliter #cssFilter #code #coding #frontend #web #webDev #dev #webDevelopment
Ana Tudor 🐯 (@anatudor@mastodon.social)
Attached: 1 image #tinyCSStip You may have seen some of my demos using this on #CodePen already. Here's the how behind it.Mastodon
5⃣ 723 ❤️ No SVG, no image fluid slider with input[type=range] https://codepen.io/thebabydino/pen/qByGqOm
JS used only for
a) feature support detection
b) updating slider value in a --val
Uses only
1 × input[type=range] for actual slider
1 × output for current value display
1 × datalist for ruler
#css #slider #code #coding #frontend #control #web #webDev #dev #webDevelopment
4⃣ 736 ❤️ Pure #CSS Möbius 6hedrons https://codepen.io/thebabydino/pen/mJojKd
The how behind I live coded it in 30 minutes https://css-tricks.com/how-i-live-coded-my-most-hearted-codepen-demo/
Could be improved with CSS variables nowadays, see https://css-tricks.com/simplifying-css-cubes-custom-properties/ as well as by using CSS trigonometric functions.
#3D #transform #css3D #code #coding #looping #animation #cssAnimation #frontend #web #webDev #dev #webDevelopment
Simplifying CSS Cubes with Custom Properties | CSS-Tricks
I know there are a ton of pure CSS cube tutorials out there. I've done a few myself. But for mid-2017, when CSS Custom Properties are supported in all majorAna Tudor (CSS-Tricks)
3⃣ 747 ❤️ no sprite, no JS twitter 🤍 animation https://codepen.io/thebabydino/pen/RRRRZE
Behind demo https://css-tricks.com/recreating-the-twitter-heart-animation/
Now twitter uses an SVG heart 👍 (that path data though 😵) and upon clicking, inserts a div with the sparks. There are better ways to do it... still better than sprites!
#css #svg #code #coding #frontend #web #webDev #webDevelopment #dev
Recreating the Twitter Heart Animation (with One Element, No Images, and No JavaScript) | CSS-Tricks
I recently saw a recreation of the Twitter heart animation among the picks on CodePen. If I happen to have a bit of time, I always look through the code ofAna Tudor (CSS-Tricks)
I turn 12 on @codepen in less than a month, so here are my most hearted demos ever:
1️⃣ 955 ❤️ Pure CSS gravity button https://codepen.io/thebabydino/pen/bGzeQrv
My only demo to ever pass 850 ❤️ - a bit mixed about it, it was just an exercise in getting a certain result - please don't use it in the wild!
#css #pureCSS #gravity #button #code #coding #frontend #web #dev #webDevelopment #webDev
Why new #CSS features aren't getting fast adoption as one might think.
https://mxb.dev/blog/old-dogs-new-css-tricks/
"While there are many different reasons for the slow adoption, I think one of the biggest barriers are our own brains."
Old Dogs, new CSS Tricks
A lot of new CSS features have shipped in the last years, but actual usage is still low. One of the biggest barriers: we need to re-wire our own brains.Max Böck
So! Many! Kittens!
(Going to record a demo of the new interactive shell – REPL to some – and multi-page Settings this afternoon, just planning it out now.)
Oh and is that me creating and calling web routes interactively in the REPL on a live server? Why yes, yes it is.
💕
#Kitten #SmallWeb #web #dev #HTML #CSS #JavaScript #NodeJS
})
The output has more kittens in it each time. One copy of the output is below:
<html><meta charset="utf-8"><h1>🐱🐱🐱🐱🐱🐱🐱🐱🐱🐱🐱🐱🐱🐱🐱🐱🐱🐱🐱🐱🐱🐱🐱🐱🐱🐱🐱🐱🐱🐱</h1></html>
Then the following command:
🐱 💬 count
Output: 31
In the web browser, you see the HTML rendered shown above rendered.](https://friendica.hellquist.eu/photo/preview/640/2736237 "Screenshot of terminal window on the left, browser on the right. In the terminal window, the following command is run several times:
🐱 💬 kitten.app.router.find('GET', '/cats').handlers[7](null, {end: output => console.log(output)})
The output has more kittens in it each time. One copy of the output is below:
<html><meta charset=\"utf-8\"><h1>🐱🐱🐱🐱🐱🐱🐱🐱🐱🐱🐱🐱🐱🐱🐱🐱🐱🐱🐱🐱🐱🐱🐱🐱🐱🐱🐱🐱🐱🐱</h1></html>
Then the following command:
🐱 💬 count
Output: 31
In the web browser, you see the HTML rendered shown above rendered.")
steal this dialog and popover snippet #CSS
- transitions
- entry/exit
- backdrop included
ready for richer design system integration
try on Codepen
https://codepen.io/argyleink/pen/zYbQBOm
![[popover], dialog, ::backdrop {
transition:
display 1s allow-discrete,
overlay 1s allow-discrete,
opacity 1s;
opacity: 0;
}
/* IN */
:popover-open,
:popover-open::backdrop,
[open],
[open]::backdrop {
opacity: 1;
}
/* OUT */
@starting-style {
:popover-open,
:popover-open::backdrop,
[open],
[open]::backdrop {
opacity: 0;
}
}](https://friendica.hellquist.eu/photo/preview/640/2732524 "[popover], dialog, ::backdrop {
transition:
display 1s allow-discrete,
overlay 1s allow-discrete,
opacity 1s;
opacity: 0;
}
/* IN */
:popover-open,
:popover-open::backdrop,
[open],
[open]::backdrop {
opacity: 1;
}
/* OUT */
@starting-style {
:popover-open,
:popover-open::backdrop,
[open],
[open]::backdrop {
opacity: 0;
}
}")
🎉
Kitten now has a lovely new multi-page Settings screen and… *drumroll*… a new 🐢 interactive shell (REPL) for you to play with the running state of your Small Web site/app/place and debug your app, inspect/manipulate its database, etc.
I plan on recording demos of each of them tomorrow but you can play with them now.
And here’s a little tutorial to get you started with the shell:
https://codeberg.org/kitten/app#kitten-s-interactive-shell
💕
#Kitten #SmallWeb #SmallTech #NodeJS #REPL #JavaScript #HTML #CSS #web #dev
![Screenshot of Kitten running in terminal:
🌍 Domain https://localhost
📂 Source /var/home/aral/Projects/kitten/app/examples/file-uploads
💾 Databases /var/home/aral/.local/share/small-tech.org/kitten/databases
🐢 To launch an interactive shell, press the [s] key.
Server is running and listening for connections…
s
🐢 Launching interactive shell ctrl-d to exit; .help for assistance
A good place to start is to run the .ls command to see the keys of the global kitten object:
» 💡.ls is an alias for Object.keys(kitten)
[
'version', 'domain',
'port', 'app',
'databaseDirectory', 'projectIdentifier',
'deploy', 'WebSocket',
'html', 'libraries',
'page', 'events',
'css', 'js',
'markdown', 'md',
'safelyAddHtml', 'sanitise',
'uploadsDirectory', '_db',
'uploads', 'package',
'db'
]
🐱 💬 kitten.db.images[0]
Proxy [
{
path: '/uploads/1a6c2612-057d-435b-83c7-7157b4add982/',
altText: 'Screenshot of Draw Together sketch that reads Free Gaza!'
},
{
get: [Function: bound getHandler],
set: [Function: bound setHandler],
defineProperty: [Function: bound definePropertyHandler],
deleteProperty: [Function: bound deletePropertyHandler]
}
]
🐱 💬](https://friendica.hellquist.eu/photo/preview/640/2720308 "Screenshot of Kitten running in terminal:
🌍 Domain https://localhost
📂 Source /var/home/aral/Projects/kitten/app/examples/file-uploads
💾 Databases /var/home/aral/.local/share/small-tech.org/kitten/databases
🐢 To launch an interactive shell, press the [s] key.
Server is running and listening for connections…
s
🐢 Launching interactive shell ctrl-d to exit; .help for assistance
A good place to start is to run the .ls command to see the keys of the global kitten object:
» 💡.ls is an alias for Object.keys(kitten)
[
'version', 'domain',
'port', 'app',
'databaseDirectory', 'projectIdentifier',
'deploy', 'WebSocket',
'html', 'libraries',
'page', 'events',
'css', 'js',
'markdown', 'md',
'safelyAddHtml', 'sanitise',
'uploadsDirectory', '_db',
'uploads', 'package',
'db'
]
🐱 💬 kitten.db.images[0]
Proxy [
{
path: '/uploads/1a6c2612-057d-435b-83c7-7157b4add982/',
altText: 'Screenshot of Draw Together sketch that reads Free Gaza!'
},
{
get: [Function: bound getHandler],
set: [Function: bound setHandler],
defineProperty: [Function: bound definePropertyHandler],
deleteProperty: [Function: bound deletePropertyHandler]
}
]
🐱 💬")
Double bubble! 🫧
On scroll text bubble up effect with 1 div, no text duplication, no JS - just a little bit of #CSS trickery and a simple #SVG #filter! 🪄
Live on @codepen
https://codepen.io/thebabydino/pen/NWmBmrZ
#CodePenChallenge #svgFilter #CodePen #text #textEffect #code #coding #frontend #webDev #webDevelopment #web #dev #scrollAnimation
If you're only gonna watch one thing this weekend, watch this amazing talk about the history of styling in the web and the guiding principles of how browsers work with regards to styling by @mia from last week's 11ty conference.
https://www.youtube.com/watch?v=uaN9kY8lKPU
Hints and Suggestions — Miriam Suzanne (11ty Conf 2024)
This was a talk given at the 11ty International Symposium on Making Web Sites Real Good (2024): https://conf.11ty.dev/2024/hints-and-suggestions-first-do-no-...YouTube
✏️ Look ma, no JS! It’s time to learn about popovers and anchor positioning! https://css-irl.info/anchor-positioning-and-the-popover-api/
Featuring a JS-free menu demo: https://codepen.io/michellebarker/pen/qBGEVov
#CSS
CSS { In Real Life } | Anchor Positioning and the Popover API for a JS-Free Site Menu
A blog about CSS, front-end development, the web, and beyond.CSS { In Real Life } | Anchor Positioning and the Popover API for a JS-Free Site Menu
Unexpected things can happen when you add containment (some elements completely collapse)! @stacy and I will discuss #CSS Container Queries in the real world on @OddBird's Winging It livestream this Thursday:
May 16 at 1pm ET/11am MT
https://www.youtube.com/watch?v=Mq8zmeLNGfg
Send us your questions in advance or join us during the live stream!
CSS Container Queries in Practice - Winging It Live
Miriam Suzanne and Stacy Kvernmo of OddBird talk about CSS Container QueriesThu, May 16 @ 1p ET / 11am MTUnexpected things that happen when you add containme...YouTube
No Face from Spirited Away, drawn with CSS and a single HTML element.
https://codepen.io/alvaromontoro/pen/ZERzGWY
#webdevelopment #css #cssArt #divtober #throwBackThursday #tbt
3 days until the @eleventy's International Symposium on Making Web Sites Real Good!
@mia will be there doing a quick dive into the origins of the web, and #CSS in particular—the design constraints, and the range of strange proposals, and how we got where we are.
11ty’s International Symposium on Making Web Sites Real Good
We’re running a conference — this is an 11ty Conference!11ty Conference, May 2024
