3 in 1: solve 3 coding challenges in 33 minutes (also explain solutions) скачать в хорошем качестве

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

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