3 in 1: solve 3 coding challenges in 33 minutes (also explain solutions)

Опубликовано: 25 Октябрь 2024
на канале: Ana Tudor

954

Live demos:

Challenge 1 https://codepen.io/thebabydino/pen/xx...
Challenge 2 https://codepen.io/thebabydino/pen/rN...
Challenge 3 https://codepen.io/thebabydino/pen/eY...

If the work I've been putting out since early 2012 has helped you in any way or you just like it, please consider supporting it to help me continue and stay afloat. You can do so in one of the following ways:

you can be a cool cat 😼🎩 and become a patron on Patreon   / anatudor

you can make a one time donation via Ko-fi https://ko-fi.com/anatudor

you can make me happy by getting me a gift off my wishlist
🎁🇺🇸 https://www.amazon.com/hz/wishlist/ls...
🎁🇬🇧 https://www.amazon.co.uk/hz/wishlist/...

you can share this to show the world what can be done with CSS these days

Thank you!

---

Resources:

challenge 1 (  / 1536991852393644032  )

inspiration (https://www.dailyminimal.com/posters/...)

Ways of expressing RGB (https://meyerweb.com/eric/css/colors/)

Taming Blend Modes: `difference` and `exclusion` (https://css-tricks.com/taming-blend-m...)

how `filter: contrast()` works in the back (https://developer.mozilla.org/en-US/d...)

Gradient Blobs & Halftone Effects (https://codepen.io/thebabydino/projec...) - Chromium only, arrow dn/ up for nav to next/ prev item

challenge 2 (  / 1538767189125353473  )

The `background-clip` Property and its Use Cases (https://css-tricks.com/the-backgound-...)

Layering gradients to follow `border-radius` (https://codepen.io/thebabydino/full/Z...)

`inset(d round r)` illustrated (https://codepen.io/thebabydino/full/P...)

Methods for Contrasting Text Against Backgrounds (https://css-tricks.com/methods-contra...)

how to: shadow on clipped element (https://codepen.io/thebabydino/full/B...)

challenge 3 (  / 1538782451203313664  )

4 point star - visual explanation (https://codepen.io/thebabydino/full/W...)

4 point star - adjusting the `viewBox` (https://codepen.io/thebabydino/full/B...)

`stroke-linecap` (https://developer.mozilla.org/en-US/d...)

SVG `mask` element (https://developer.mozilla.org/en-US/d...)

---

Chapters

00:00 Intro
00:19 Challenge 1
00:30 Base styling: layout
01:30 Diagonal stripes background layers
03:01 How blending works: general case
04:54 How blending works: our use case
07:23 Blending multiple layers
08:43 Get rid of blurriness: contrast filter
09:20 How `filter: contrast(a)` works for a subunitary
10:50 How `filter: contrast(a)` works for a greater than 1
12:53 High contrast along the grey axis
15:11 Challenge 2
15:41 Base styling: sizing & a background
16:06 The box model
16:53 Clipping backgrounds to certain boxes
17:57 The `border-radius` corner rounding problem
19:03 The `clip-path: inset(d round r)` solution
20:32 The clipped shadow problem
21:03 The `filter: drop-shadow()` on parent fix
21:43 Challenge 3
22:08 The `viewBox`
24:05 Drawing the two lines of the path
25:48 Ditching the fill
28:05 Rounding the ends of the arrow line
29:10 Hollow interior: the size of an identical, thinner line
29:45 Hollow interior: the mask technique
31:05 Expand mask so nothing gets cut off
33:10 Easily tweakable result
33:51 Fin

#css #svg #csscrashcourse