#csschallenge2023 — Public Fediverse posts

#cssChallenge2023 code this with:

⚠️1 div, text selectable & contenteditable, no duplication
⚠️line thickness & horizontal offset depend on responsive font-size
⚠️≤5¹ SVG filter primitives
⚠️<30¹² CSS declarations
⚠️crossbrowser
❌no JS, no SVG text/ shapes
⚠️no images save for body background

¹because of the cross-browser requirement 😭 could be very much simplified otherwise
²including any layout & prettifying (like nice transition on custom orange focus outline)
#css #svg #coding #frontend #webDev

#cssChallenge2023 code this with:

⚠️1 div, text selectable & contenteditable, no duplication
⚠️line thickness & horizontal offset depend on responsive font-size
⚠️≤5¹ SVG filter primitives
⚠️<30¹² CSS declarations
⚠️crossbrowser
❌no JS, no SVG text/ shapes
⚠️no images save for body background

¹because of the cross-browser requirement 😭 could be very much simplified otherwise
²including any layout & prettifying (like nice transition on custom orange focus outline)
#css #svg #coding #frontend #webDev

#CSSchallenge2023 🎅 edition

How do you pure CSS the striped shadow text with transparent outline?

Constraints:
❌no JS
⚠️no SVG, no images in general save for at most 2 CSS gradients
⚠️under 15 CSS declarations, including layout & prettifying
⚠️accessible

font: zilla slab
https://fonts.google.com/specimen/Zilla+Slab

background: given below
https://images.unsplash.com/photo-1700607687506-5149877683e8?w=1400

#css #textEffect #typography #code #coding #frontend #webDev #webDevelopment

#CSSchallenge2023 🎅 edition

How do you pure CSS the striped shadow text with transparent outline?

Constraints:
❌no JS
⚠️no SVG, no images in general save for at most 2 CSS gradients
⚠️under 15 CSS declarations, including layout & prettifying
⚠️accessible

font: zilla slab
https://fonts.google.com/specimen/Zilla+Slab

background: given below
https://images.unsplash.com/photo-1700607687506-5149877683e8?w=1400

#css #textEffect #typography #code #coding #frontend #webDev #webDevelopment

Found https://fffuel.co/hhhorizon/ which uses complicated SVG/ tons of rect elements so #cssChallenge2023!

Code it with:
⚠️no JS
⚠️no images¹
⚠️1 single div, no styles on other elems¹²
⚠️<20 CSS declarations incl prettifying
⚠️<5 CSS gradients, 2 stops each
¹other than root bg
²& layout

Notes:
May use pseudos on the one div.
May use #SVG filters. #CSS filters may do the job as well, but they're more limited.
Corner rounding in my screen isn't necessary.

#coding #frontend #webDev #webDevelopment #code

Found https://fffuel.co/hhhorizon/ which uses complicated SVG/ tons of rect elements so #cssChallenge2023!

Code it with:
⚠️no JS
⚠️no images¹
⚠️1 single div, no styles on other elems¹²
⚠️<20 CSS declarations incl prettifying
⚠️<5 CSS gradients, 2 stops each
¹other than root bg
²& layout

Notes:
May use pseudos on the one div.
May use #SVG filters. #CSS filters may do the job as well, but they're more limited.
Corner rounding in my screen isn't necessary.

#coding #frontend #webDev #webDevelopment #code

#CSSchallenge2023
How would you pure CSS a rotated img to always tightly fit inside its figure parent?

You know:
🌲 responsive figure width (for ex in viewport units)
🌲 img aspect ratio
🌲 img rotation angle

Solution must work regardless of viewport, img aspect ratio & rotation.

#css #coding #frontend #webDev #webDevelopment

#CSSchallenge2023
How would you pure CSS a rotated img to always tightly fit inside its figure parent?

You know:
🌲 responsive figure width (for ex in viewport units)
🌲 img aspect ratio
🌲 img rotation angle

Solution must work regardless of viewport, img aspect ratio & rotation.

#css #coding #frontend #webDev #webDevelopment

#CSSchallenge2023 How would you code this with:

⚠️ 1 element, no pseudos
⚠️ pure CSS
⚠️ under 5 CSS declarations
⚠️ at most 400 bytes
❌ no JS
⚠️ no SVG, no images in general save for at most 4 CSS gradients

#css #coding #challenges #codingChallenge #frontend #webDev #webDevelopment #cssGradient

#CSSchallenge2023 How would you code this with:

⚠️ 1 element, no pseudos
⚠️ pure CSS
⚠️ under 5 CSS declarations
⚠️ at most 400 bytes
❌ no JS
⚠️ no SVG, no images in general save for at most 4 CSS gradients

#css #coding #challenges #codingChallenge #frontend #webDev #webDevelopment #cssGradient

#CSSchallenge2023 How would you code this with:
⚠️1 div, no pseudos
⚠️ pure CSS
⚠️ at most 5 CSS declarations
⚠️ under 400 bytes
❌no JS
⚠️ no SVG, no images in general save for at most 4 CSS gradients

Palette: f49559, 9bd195, fdf159, 8bd6eb, f29699, f49559
Greys: 595959, 231f20

#css #coding #pattern #cssPattern #gradient #cssGradient #frontend #webDev #webDevelopment

#CSSchallenge2023 How would you code this with:
⚠️1 div, no pseudos
⚠️ pure CSS
⚠️ at most 5 CSS declarations
⚠️ under 400 bytes
❌no JS
⚠️ no SVG, no images in general save for at most 4 CSS gradients

Palette: f49559, 9bd195, fdf159, 8bd6eb, f29699, f49559
Greys: 595959, 231f20

#css #coding #pattern #cssPattern #gradient #cssGradient #frontend #webDev #webDevelopment

#CSSchallenge2023

An easy one this time. Code this with:

⚠️only CSS (just styles set on the root, nothing more)
❌no JS
❌no SVG
⚠️no images in general save for at most 2 CSS gradients
⚠️under 200 bytes of CSS

#css #coding #pattern #tiling #tessellation #maths #mathematics #geometry #frontend #webDev #webDevelopment

#CSSchallenge2023

An easy one this time. Code this with:

⚠️only CSS (just styles set on the root, nothing more)
❌no JS
❌no SVG
⚠️no images in general save for at most 2 CSS gradients
⚠️under 200 bytes of CSS

#css #coding #pattern #tiling #tessellation #maths #mathematics #geometry #frontend #webDev #webDevelopment

#CSSchallenge2023

Inspired by this Bees & Bombs gif https://twitter.com/beesandbombs/status/1714356224580276302

Code something like this as an animated background on the html?

No styles on any other element.
No JS.
No SVG, no images in general save for CSS gradients.
Under 20 CSS declarations (including CSS vars, those in @​keyframes, @​property).

#css #coding #frontend #webDev #webDevelopment

My take:

#CSSchallenge2023

Inspired by this Bees & Bombs gif https://twitter.com/beesandbombs/status/1714356224580276302

Code something like this as an animated background on the html?

No styles on any other element.
No JS.
No SVG, no images in general save for CSS gradients.
Under 20 CSS declarations (including CSS vars, those in @​keyframes, @​property).

#css #coding #frontend #webDev #webDevelopment

My take:

#CSSchallenge2023

How would you code this 🦋 animation with:

⚠️ 1 div (no styles on any other elements or their pseudos)
❌ no JS
❌ no images whatsoever
⚠️ at most 20 CSS declarations

#css #coding #frontend #webDev #webDevelopment

#CSSchallenge2023

How would you code this 🦋 animation with:

⚠️ 1 div (no styles on any other elements or their pseudos)
❌ no JS
❌ no images whatsoever
⚠️ at most 20 CSS declarations

#css #coding #frontend #webDev #webDevelopment

#CSSchallenge2023

How would you code this with no JS, no SVG (and no animated images for that matter), just HTML and *at most* 25 CSS declarations in the compiled code, including any that may be set in `style` attributes?

Palette used https://coolors.co/palette/0cb2af-a1c65d-fac723-f29222-e95e50-936fac

*for everyone who is a $5+ patron on Patreon, you know where to find the solution 😼

#css #coding #cssTricks #thisShouldNotBeLegal #cssHacks #frontend #webDev #webDevelopment

#CSSchallenge2023

How would you code this with no JS, no SVG (and no animated images for that matter), just HTML and *at most* 25 CSS declarations in the compiled code, including any that may be set in `style` attributes?

Palette used https://coolors.co/palette/0cb2af-a1c65d-fac723-f29222-e95e50-936fac

*for everyone who is a $5+ patron on Patreon, you know where to find the solution 😼

#css #coding #cssTricks #thisShouldNotBeLegal #cssHacks #frontend #webDev #webDevelopment

#CSSchallenge2023
How would you code this swipe & zoom reveal with:

⚠️ only 1 <img> element, no other elements
❌ no JS
⚠️ no SVG, no images in general save for the one used as img src (I used https://images.unsplash.com/photo-1603380381522-29aa9a09a348?w=640, but you can use any other one)
⚠️ at most 12 CSS declarations

#CSS #coding #frontend #webDev #webDevelopment

#CSSchallenge2023
How would you code this swipe & zoom reveal with:

⚠️ only 1 <img> element, no other elements
❌ no JS
⚠️ no SVG, no images in general save for the one used as img src (I used https://images.unsplash.com/photo-1603380381522-29aa9a09a348?w=640, but you can use any other one)
⚠️ at most 12 CSS declarations

#CSS #coding #frontend #webDev #webDevelopment

How would you get this kind of result with:

⚠️ 1 figure, 1 img, 1 figcaption per item
❌ no other element
⚠️ same code for any aspect ratio
❌ no SVG
❌ no JS
⚠️ at most 1 CSS gradient

Note all the shadows.

#cssChallenge2023 #CSS #coding #frontend #webDev #webDevelopment

How would you get this kind of result with:

⚠️ 1 figure, 1 img, 1 figcaption per item
❌ no other element
⚠️ same code for any aspect ratio
❌ no SVG
❌ no JS
⚠️ at most 1 CSS gradient

Note all the shadows.

#cssChallenge2023 #CSS #coding #frontend #webDev #webDevelopment

#cssChallenge2023
How would you code this with:

⚠️ 1 element, no pseudos
⚠️ no SVG, no images in general save for CSS gradients
🚫 no JS
⚠️ no lists of values of length > 8
⚠️ same amount of compiled CSS regardless of whether we have 6 or 25 bars
⚠️ at most 7 CSS declarations

#css #coding #frontend #webDev #webDevelopment #maths #trigonometry

#cssChallenge2023
How would you code this with:

⚠️ 1 element, no pseudos
⚠️ no SVG, no images in general save for CSS gradients
🚫 no JS
⚠️ no lists of values of length > 8
⚠️ same amount of compiled CSS regardless of whether we have 6 or 25 bars
⚠️ at most 7 CSS declarations

#css #coding #frontend #webDev #webDevelopment #maths #trigonometry

#cssChallenge2023
How would you code this with:

⚠️ a single img element, no other elements
⚠️ no SVG, no other images other than img src & body background (given below)
🚫 no JS
⚠️ at most 10 CSS declarations, including prettifying & layout
⚠️ no lists of values longer than 3

#css #coding #webdev #frontend #webdevelopment #csstricks

#cssChallenge2023
How would you code this with:

⚠️ a single img element, no other elements
⚠️ no SVG, no other images other than img src & body background (given below)
🚫 no JS
⚠️ at most 10 CSS declarations, including prettifying & layout
⚠️ no lists of values longer than 3

#css #coding #webdev #frontend #webdevelopment #csstricks

Because I saw https://twitter.com/njesenberger/status/1669361879905366018 here's a #cssChallenge2023 for you! How would you code this with:

⚠️ a single HTML element
🚫 no pseudos
⚠️ no image save for the background on body (image #2)
🚫 no JS
⚠️ you may use an SVG filter, but no SVG shapes
⚠️ at most 5 CSS gradients on the element

#css #coding #svg

Because I saw https://twitter.com/njesenberger/status/1669361879905366018 here's a #cssChallenge2023 for you! How would you code this with:

⚠️ a single HTML element
🚫 no pseudos
⚠️ no image save for the background on body (image #2)
🚫 no JS
⚠️ you may use an SVG filter, but no SVG shapes
⚠️ at most 5 CSS gradients on the element

#css #coding #svg

How would you pure CSS this split angled scroll reveal? #cssChallenge2023 #CSS #coding #webDev #webDevelopment #noJS #frontend #scrollAnimation

How would you pure CSS this split angled scroll reveal? #cssChallenge2023 #CSS #coding #webDev #webDevelopment #noJS #frontend #scrollAnimation

#cssChallenge2023

How would you code this sort of outset gradient border with:

❌no JS
⚠️only 1 img element
❌no magic values for the gradient stops, they're obtained from img source
⚠️no SVG, no images in general other than the actual image & the border one

#css #frontend #webDev #webDevelopment #coding #code

Image examples 👇

#cssChallenge2023

How would you code this sort of outset gradient border with:

❌no JS
⚠️only 1 img element
❌no magic values for the gradient stops, they're obtained from img source
⚠️no SVG, no images in general other than the actual image & the border one

#css #frontend #webDev #webDevelopment #coding #code

Image examples 👇

#cssChallenge2023
How would you code this with:

* 1 div in total (can't use a div per stripe)
* no JS
* no SVG, no animated .gif, no images in general save for the cat & at most 2 CSS gradients
* at most 15 CSS declarations
* cross-browser
* no value lists longer than 3 values

Because I've seen demos that use one div per stripe... 🙀

The cat photo I've used https://images.unsplash.com/photo-1608848461950-0fe51dfc41cb

If you're not into the challenge, then just enjoy a cat face.

#css #coding #webDev #frontend #webDevelopment

#cssChallenge2023
How would you code this with:

* 1 div in total (can't use a div per stripe)
* no JS
* no SVG, no animated .gif, no images in general save for the cat & at most 2 CSS gradients
* at most 15 CSS declarations
* cross-browser
* no value lists longer than 3 values

Because I've seen demos that use one div per stripe... 🙀

The cat photo I've used https://images.unsplash.com/photo-1608848461950-0fe51dfc41cb

If you're not into the challenge, then just enjoy a cat face.

#css #coding #webDev #frontend #webDevelopment

Here's a challenge: how would you code this?

Mostly #HTML+#CSS. A tiny bit of #JS allowed.

Not allowed:
🚫split the text into lines & wrap each line in an element
🚫use JS for the motion
🚫skew the box

Don't blur the text. It's only blurred here as it explains the how behind.

It's trickier than it looks. 🙃

#coding #CSSChallenge2023 #webDev

Here's a challenge: how would you code this?

Mostly #HTML+#CSS. A tiny bit of #JS allowed.

Not allowed:
🚫split the text into lines & wrap each line in an element
🚫use JS for the motion
🚫skew the box

Don't blur the text. It's only blurred here as it explains the how behind.

It's trickier than it looks. 🙃

#coding #CSSChallenge2023 #webDev

How would you code smth like this?

Constraints:
✨responsive
✨when resizing the viewport, the angle stays constant, while the vertical spacing changes appropriately
✨the angle is stored in a CSS var & changing its value automatically changes vertical spacing

#CSSChallenge2023 #CSS

How would you code smth like this?

Constraints:
✨responsive
✨when resizing the viewport, the angle stays constant, while the vertical spacing changes appropriately
✨the angle is stored in a CSS var & changing its value automatically changes vertical spacing

#CSSChallenge2023 #CSS

Up for a #cssChallenge2023?

How would you distort (not clip!) an element in pure CSS such as the top shrinks, but the bottom remains the same size, basically creating a trapezoidal shape?

Constraints:
✅ pure CSS
⚠️ 1 element
❌ no JS
⚠️ no SVG, no images save for maybe #3 below (you can just have text inside & show distortion on that)
⚠️ 10 CSS declarations just for the distorted element, 20 for animation + prettifying

Effect in isolation + comparison with original while both rotate in 3D.

#css

Up for a #cssChallenge2023?

How would you distort (not clip!) an element in pure CSS such as the top shrinks, but the bottom remains the same size, basically creating a trapezoidal shape?

Constraints:
✅ pure CSS
⚠️ 1 element
❌ no JS
⚠️ no SVG, no images save for maybe #3 below (you can just have text inside & show distortion on that)
⚠️ 10 CSS declarations just for the distorted element, 20 for animation + prettifying

Effect in isolation + comparison with original while both rotate in 3D.

#css