Henri Vasserman @henri

11 postitusega9 osalejaga1 postitust täna

**Ana Tudor** @anatudor@mastodon.social · 1t

Ana Tudor @anatudor@mastodon.social

Flip card on hover, flip back on hover out...

... but on touchscreens, flip it on click and then flip it back on second click!

A mostly #CSS solution, using #3D transforms, variables, grid, pointer MQ + a little bit of #JS.

Because somebody asked how to do it https://www.reddit.com/r/css/comments/1jm0a7v/comment/mk7zmd5/

Live demo on @codepen: https://codepen.io/thebabydino/pen/MYWPeer

GIF

#cssGrid #cssVariables #JavaScript

**zeldman** @zeldman@front-end.social · 2p

zeldman @zeldman@front-end.social

✩ For people who make websites: The Best of A List Apart.  

10+ most popular A List Apart articles, as voted by the Refind community. 

https://refind.com/publications/alistapart #webdesign #classics #webdevelopment #ux #design #code #content

An octopus chef explores a book of CSS recipes. The octopus licks its lips in concentration, anticipation, or both. In one tentacle, the undersea chef holds a frying pan; in another, a salt shaker; a third holds the CSS book open; a fourth stirs ingredients in a mixing bowl. Comical and stylish illustration for A List Apart by the incomparable Patrick Clancey.

**Ana Tudor** @anatudor@mastodon.social · 4p

Ana Tudor @anatudor@mastodon.social

#tinyCSStip Simplifying animations with variables and mathematical functions.

Same result, just not writing almost the same `text-shadow` a bunch of times in a bunch of keyframes.

Live test on @codepen https://codepen.io/thebabydino/pen/MYWXgdZ

#CSS #Maths #code #coding #frontend #web #dev #webDev #webDevelopment
#cssMaths #trigonometry

Old CSS

```
.my-elem { animation: glow 5s ease-in-out infinite }

/* repeating most of the shadow so many times */
@keyframes glow {
0% { text-shadow: 0 0 5em red /* hsl( 0 100% 50%) */ }
16.7% { text-shadow: 0 0 1em yellow /* hsl( 60 100% 50%) */ }
33.3% { text-shadow: 0 0 5em lime /* hsl(120 100% 50%) */ }
50% { text-shadow: 0 0 1em cyan /* hsl(180 100% 50%) */ }
66.7% { text-shadow: 0 0 5em blue /* hsl(240 100% 50%) */ }
83.3% { text-shadow: 0 0 1em magenta/* hsl(300 100% 50%) */ }
100% { text-shadow: 0 0 5em red /* hsl(360 100% 50%) */ }
}
```

New CSS

```
@property --hue {
syntax: '<angle>';
initial-value: 0deg;
inherits: false
}

.my-elem { /* no repetition */
text-shadow: 0 1px calc(3em + 2em*cos(var(--hue))) hsl(var(--hue) 100% 50%);
animation: hue 5s linear infinite
}

@keyframes hue { to { --hue: 1turn } }
```

**Ana Tudor** @anatudor@mastodon.social · 5p

Ana Tudor @anatudor@mastodon.social

#tinyCSStip
Revert animated parent transform (like a scale or skew) on child without an extra animation using registered custom properties.

https://codepen.io/thebabydino/pen/MYWXoZW

@property --f {
syntax: '<number>';
initial-value: 1;
inherits: true
}

.scale {
scale: var(--f);
animation: scale 2s ease-in-out infinite alternate;
/* no need for another animation on ::before to revert scale */

&::before { scale: calc(1/var(--f)) }
}

@keyframes scale { to { --f: .5 } }

#CSS #code #coding

**Ana Tudor** @anatudor@mastodon.social · 5p

Ana Tudor @anatudor@mastodon.social

#cssWish That we could have a zero count for the number of columns in `repeat()`.

That repeat count is often computed. Let's say I want double the width for selected column k out of n columns:

```
repeat(var(--k), var(--w))
calc(2*var(--w)
repeat(calc(var(--n) - var(--k) - 1), var(--w))
```

#CSS #code #coding

**Ana Tudor** @anatudor@mastodon.social · 5p

Ana Tudor @anatudor@mastodon.social

New #CSS featues should make our lives easier, right?

Except for when they're buggy. Just hit (and filed) a Chrome bug https://issues.chromium.org/issues/405676714

Live test https://codepen.io/thebabydino/pen/qEBKRej

GIF

#bug #cssBug #chromeBug

**Helmut Strasser** @helmutstrasser@mstdn.social · 6p

Helmut Strasser @helmutstrasser@mstdn.social

Exciting News, PHPUnit and TYPO3 enthusiasts!

Are you ready to take your TYPO3 development skills to the next level? Join me at TYPO3Camp 2025 in Vienna for an in-depth PHPUnit workshop!

Date: Friday, 9 May 2025
Location: TYPO3Camp, Vienna
https://www.typo3camp.at/workshops/phpunit-in-typo3/

See you there! Let's code smarter, not harder.

Sujet for the TYPO3 Camp 2025 in Vienna with the workshop trainer Helmut Strasser, Friday 9 May 2025.

#TYPO3 #PHPUnit #t3cvie2025

**Ana Tudor** @anatudor@mastodon.social · 20. märts

20. märts

Ana Tudor @anatudor@mastodon.social

#tinyCSStip

DON'T use layered text-shadows for text outlines just because text-stroke is broken (https://mastodon.social/@anatudor/112410224855133935), they are going to produce ugly corners, thickened roundings and angled lines.

DO: use `paint-order: stroke fill` instead!

```
.mytext { /* 🚫 DON'T */
text-shadow:
2px 2px 0 black,
-2px -2px 0 black,
-2px 2px 0 black,
2px -2px 0 black,
2px 0 0 black,
-2px 0 0 black,
0 2px 0 black,
0 -2px 0 black;
}

.mytext { /* ✅ DO */
-webkit-text-stroke: #000 4px;
paint-order: stroke fill
}
```

Screenshot showing the same text with the DON'T (text-shadow emulating outlines) vs. the DO (paint-order to fix inner strokes mess) tactic. The text-shadow method comes with corner issues and angled lines getting thickened.

#CSS #typography #code

Jätkatud lõim

**Ana Tudor** @anatudor@mastodon.social · 20. märts

20. märts

Ana Tudor @anatudor@mastodon.social

Among other things, I also go into the how behind the minimum alpha for the semi-transparent black overlay so we can be sure of having enough contrast.

Some method to the madness. Alpha should be enough to ensure good contrast even if there is white in the image behind. That is, the result between that semi-transparent black overlay on top of a white backdrop should have enough contrast with white text.

This we can compute easily (it's computed on a per channel basis) and it results that the alpha should be no less than 54%. I bumped that up to 60%.

We have the channels of the white backdrop c0 = 1 (all RGB channels are equal for all greys between black & white), and the channels of the black overlay c1 = 0. We also have the unknown overlay alpha a. The channels of the equivalent grey we get out of this backdrop + semi-transparent overlay combo are:

```
c0 + (c1 - c0)*a = 1 + (0 - 1)*a = 1 - a
```

The maximum value we can have for the channels of the grey equivalent is 46% (.46). Above that, the contrast with white text drops below 4.5.

So we have:

```
1 - a < .46
1 - .46 < a
.54 < a
```

So our overlay alpha should have a minimum value of 54%.

#CSS #a11y #code

**Codrops** @codrops@mastodon.social · 20. märts

20. märts

Codrops @codrops@mastodon.social

Today, we’re shining the spotlight on web developer Jean Mazouni!

Jean shares his journey, favorite projects, his passion for WebGL/Three.js, and how he approaches building innovative web experiences.

Read it here: https://tympanus.net/codrops/?p=89618

GIF

#developerspotlight #webdevelopment #threejs

**DennisL** @dennisl@mastodon.social · 19. märts

19. märts

DennisL @dennisl@mastodon.social

A must read for web developers: "Who's Afraid of a Hard Page Load?" https://unplannedobsolescence.com/blog/hard-page-load/ #webdev #webdevelopment #spa #ux #browsers

Unplanned ObsolescenceWho's Afraid of a Hard Page Load?Single-Page Applications (SPAs) are a worse user experience.

Jätkatud lõim

**Ana Tudor** @anatudor@mastodon.social · 19. märts

19. märts

Ana Tudor @anatudor@mastodon.social

Can't believe this quick little thing made this week's @codepen Spark!

codepen.io/thebabydino/pen/GgRryoa

Screenshot of my demo featured in this week's CodePen Spark.

#CSS #SVG #filter

**Ana Tudor** @anatudor@mastodon.social · 19. märts

19. märts

Ana Tudor @anatudor@mastodon.social

Minimal pure #CSS textile patterns on @codepen https://codepen.io/thebabydino/full/OJmpzya

Absolutely no images other than CSS gradients and they are all tiny! All of them are under 500 bytes minified, some of them well under!

Some more of the patterns in the gallery.

#pattern #cssPattern #frontend

**Ana Tudor** @anatudor@mastodon.social · 19. märts

19. märts

Ana Tudor @anatudor@mastodon.social

Because someone just hearted this decade old @codepen.io #3D demo, I gave it a quick 2025 remake using modern #CSS features - grid instead of `position: absolute`, CSS variables to avoid setting multiple properties in Sass loops, `color-mix()` and more!

https://codepen.io/thebabydino/pen/NNxMaN

Based on a GIF by @sasj, originally CSS-ed 9+ years ago live on CodePen in 10 minutes and 50 lines of SCSS. Now the code is even more compact.

GIF

#cssTransform #code #coding

**Ana Tudor** @anatudor@mastodon.social · 19. märts

19. märts

Ana Tudor @anatudor@mastodon.social

Another little @codepen demo: pure #CSS double ball helix https://codepen.io/thebabydino/pen/JreoKw

(yet another demo that cold be simplified by the `position: absolute` to `display: grid` switch for stacking and in the future, further simplified by `sibling-index()`)

GIF

#3D #helix #cssTransform

Jätkatud lõim

**Ana Tudor** @anatudor@mastodon.social · 19. märts

19. märts

Ana Tudor @anatudor@mastodon.social

For example, nowadays I wouldn't use `position: absolute` + offsets + negative `margin` to stack and place elements in the middle before applying transforms to position them in 3D.

I would use grid now.

https://mastodon.social/@anatudor/110712771208508567

$/* THEN 🫤 */ div { position: absolute } .assembly { top: 50%; left: 50% } .cube__face { margin: -.5*$l } /* NOW 😻 */ div { display: grid } .assembly { place-self: center }$

#3D #css3D #cssTransform

**Ana Tudor** @anatudor@mastodon.social · 19. märts

19. märts

Ana Tudor @anatudor@mastodon.social

Someone hearted this old thing https://codepen.io/thebabydino/pen/GNYvbZ on @codepen and I noticed it said Chrome-only - tested and it's not the case anymore, it works cross-browser.

Do note that it's 8+ years old, before #CSS variables, grid, newer functions and could be much simplified using these.

GIF

#3D #css3D #cssTransform

**Ana Tudor** @anatudor@mastodon.social · 19. märts

19. märts

Ana Tudor @anatudor@mastodon.social

Some single `button` sets I made on @codepen a while back:

https://codepen.io/thebabydino/pen/dLLxdj

https://codepen.io/thebabydino/pen/QBOKPy

https://codepen.io/thebabydino/pen/qyVyKb

https://codepen.io/thebabydino/pen/jpaZBy

A set of 8 soft plastic-looking buttons.

#CSS #button #buttons

Jätkatud lõim

**Ana Tudor** @anatudor@mastodon.social · 19. märts

19. märts

Ana Tudor @anatudor@mastodon.social

If we have an inline `span` inside a `p` & we give it a semi-transparent `background` + a `padding`, we get an alpha increase where backgrounds of adjacent lines overlap.

How would you solve this problem without text duplication, without stacking 2 identical `p` elements, one for background (opaque background + transparent text + opacity) and one for text (transparent background)?