Mastodon BirdUI Catppuccin Mocha | Cool As Heck

cool-as-heck.blog/mastodon-bir…

#CSS #themes #catppuccin #catppuccinallthethings #BirdUI

Mastodon BirdUI Catppuccin Mocha

A colorful modification of the Mastodon BirdUI theme

^{Cool As Heck}

.bench {
position: absolute;
margin-bottom: -100px;
}

#CSS #memes

Nice collection of #CSS transitions here for the taking.

transition.style

#webdev

argyleink/transition.css

Drop-in CSS transitions

^{transition.style}

**Focus By Demotion**
a use case for #CSS `:hover > :not(:hover)`

nerdy.dev/hover-not-hover-sorr…

New year, new role @Mastodon!

Our core team is looking for a senior Front-end Developer to elevate the web UI/UX experience for our users.

Ideally:

1. You are highly skilled in accessible and semantic #HTML
2. Proficient in modern #CSS
3. Experienced with #Javascript, #Typescript and complex React/Redux applications

This remote full-time position requires a 4-hour overlap with the CET timezone.

For more info/to apply:
jobs.ashbyhq.com/mastodon/6a09…

#FediHire #GetFediHired #hiring #frontend

Front-end Developer (m/f/d)

We're looking for a Front-end Developer to work with us remotely on our free and open-source Mastodon software.

^{jobs.ashbyhq.com}

Created an #Eleventy plugin to zoom images on fullscreen.

When hovering, the magnifying glass indicates to the user that the img can be enlarged. A click and it appears enlarged, through a fade-in animation. A click outside the image quit the enlarged view.

Under the hood, a #VanillaJS inserts `<dialog>` #HTML modal right before the image. Outside of the modal click =`dialog` disappears.
Styled via #CSS `@starting-style`.

npmjs.com/package/eleventy-plu…

@eleventy @zachleat

#11ty #builtwith11ty

New Kitten update

Adds `:unique-suffix` support to automatic client-side element name to server-side event name mapping.

(This lets you give unique names to your elements while having them share the same event name.)

Read more in the “a magic connection” section of the Kitten Streaming HTML tutorial: kitten.small-web.org/tutorials…

💕

#Kitten #SmallWeb #web #dev #HTML #CSS #JavaScript #NodeJS #StreamingHTML

Nice. A #CSS flex box "playground" from Yoav Sabag.

Experiment with different flex properties to understand how they affect layout. Adjust the controls below to see changes in real-time and copy the generated CSS code.

#webdev

yoavsbg.github.io/css-flexbox-…

Saw youtube.com/watch?v=An3QMWg3m1… linked last evening & gave the challenge a quick go myself.

My approach was a mostly #CSS one, with minimal HTML (no extra wrappers) and JS (used only to update top item index, ~200 bytes minified).

While it was working, it wasn't pretty, so today I polished the demo & heavily commented the CSS - check it out on @codepen: codepen.io/thebabydino/pen/jEN…

#cssGrid #cssSubgrid #cssMaths #Maths #code #coding #frontend #web #dev #webDev #webDevelopment #cssLayout #cssVariables

🦖 :autofill 🦖

developer.mozilla.org/en-US/do…

The :autofill CSS pseudo-class matches when an <input> element has its value autofilled by the browser. The class stops matching if the user edits the field.

#webdev #CSS

:autofill - CSS: Cascading Style Sheets | MDN

The :autofill CSS pseudo-class matches when an element has its value autofilled by the browser. The class stops matching if the user edits the field.

^{MDN Web Docs}

#CSS feature faceoff:

scroll triggered stuck nav (left)
vs
scroll driven animation nav (right)

which do you prefer?

try it
codepen.io/argyleink/pen/gbYGg…
(use Canary for the scroll-state() support)

A little pure #CSS 🌟🎄 #animation I made on @codepen a few years ago codepen.io/thebabydino/pen/bGw…

#3D #transform #cssTransforms #code #cssAnimation #coding #frontend #xmas #web #dev #webDevlopment #webDev #tree #stars

Putting AI in your product? You're gonna need #CSS gradient text animations (if you want to be cool)

So here, a recipe!
codepen.io/argyleink/pen/vEBmZ…

↪ nerdy.dev/animated-gradient-te…

2️⃣ Update CSS variables using range slider

This one is a real game-changer. With only CSS, you can use a range slider to update a CSS variable!

css-tip.com/css-variables-rang…

Imagine all the JavaScript you will no longer need.

#CSS #HTML

3️⃣ The Complex But Awesome CSS border-image Property

This is probably one of my best articles. I explore a very old and underrated property. You can achieve a lot of magic with border-image!

smashingmagazine.com/2024/01/c…

#CSS #HTML

The Complex But Awesome CSS border-image Property — Smashing Magazine

The CSS `border-image` property is one of those properties you undoubtedly know exists but may not have ever reached for.

^{Smashing Magazine}

4️⃣ Glowing Border Animation

Look how the border smoothly returns to its initial position (choosing the shortest path) when the mouse leaves the element!

css-tip.com/glowing-border/

A single-element implementation powered by modern CSS.

#CSS #HTML

5️⃣ CSS-only games with keyboard control

Yes, games you can play with your keyboard coded with only #CSS.

Mario game or a maze game? Find them within my collection 👉 css-games.com/

I even have an article about them

frontendmasters.com/blog/how-k…

6️⃣ Overflow/Scrollbar detection

Another experimentation using Scroll-Driven animations.

css-tip.com/overflow-detection…

A few lines of code to detect if your element is overflowing or has a scrollbar. An information you can use to apply specific CSS anywhere on the page!

#CSS #HTML

7️⃣ Getting the Size of an Element

A cool (and hacky) experimentation using scroll-driven animation to get the dimension of any element using pure #CSS!

css-tip.com/element-dimension/

I also wrote a detailed article explaining the magic 🪄

frontendmasters.com/blog/how-t…

8️⃣ Quantity Query Selector

A simple tool to generate your quantity query selector in no time using modern CSS.

css-tip.com/quantity-queries/

A small Easter egg 🥚 is hidden there. Can you find it?

#CSS #HTML

9️⃣ A 3D Parallax Hover Effect

I like making cool effects with minimal #CSS code and a single #HTML element.

My favorite this year is this satisfying 3D effect coded with less than 15 declarations.

css-tip.com/3d-parallax-effect…

🔟 A huge collection of Tooltip/Speech bubble shapes!

100 different shapes made with a single element and modern CSS.

css-generators.com/tooltip-spe…

I also wrote 2 detailed articles (via @smashingmag ) explaining the techniques used to create most of them.

smashingmagazine.com/2024/03/m…

#CSS

It's the end of the year so let's jump back in time and see some of my favorite CSS stuff!

This week I will post (2 posts/day) my personal top 10 of what I shared in 2024 🏆

🧵Don't miss this thread! You can also participate by telling me your favorite CSS thing 👇

#CSS

Wildest #CSS media query I've written in a while

`@container (inline-size >= calc(100cqi - 120px))`

yep, `calc()` in a MQ!

WHY?
to re-anchor buttons to be "inside" when space is tight

Video:
purple outline's are containers, buttons adapt to containers or the page

nerdy.dev/carousel-adaptive-an…

For better access, I made the source of my public HTML and CSS books easier to browse. The following titles now and finally have an outline in the repo README:

* Upgrade Your HTML: github.com/frontenddogma/upgra…
* CSS Optimization Basics: github.com/frontenddogma/css-o…
* Rote Learning HTML & CSS: github.com/frontenddogma/rote-…
* The Little Book of Little Books: github.com/j9t/little-books
* Das kleine Buch der HTML-/CSS-Frameworks: github.com/frontenddogma/html-… 🇩🇪

(Titles are new and old, so relevance can vary.)

#html #css

GitHub - frontenddogma/css-optimization-basics: Source of the secret fourth “Little Book,” on the craft of writing CSS

Source of the secret fourth “Little Book,” on the craft of writing CSS - frontenddogma/css-optimization-basics

^GitHub