Cascading Style Sheets (CSS) is the web’s core styling language. For web developers, It’s one of the quickest technologies to get started with, but one of the hardest to master. Follow Una Kravets and Adam Argyle, Developer Advocates from Google, who gleefully breakdown complex aspects of CSS into digestible episodes covering everything from accessibility to z-index.
Season 1 Wrap Up
In this closing episode, we do a whirlwind recap of our entire first season! We go over every episode, from the box model to z-index to animations and functions and color. Listen as we recount our favorite tips and tricks and discuss what we learned in the process of making this podcast.
Today we are talking about CSS blend modes! Blend modes are super fun and allow you to specify how you want elements to interact in terms of their overlapping pixel values on the page.
mix-blend-mode → https://goo.gle/3m5L9mP
Isolation: Cascading Style Sheets → https://goo.gle/2GIDjiX
In this episode, we’re talking about CSS filters! We can alter the pixels of our web apps in similar ways to our favorite design tools.
Filter Effects Module L1 → https://goo.gle/34SPJ1D
Backdrop Filter → https://goo.gle/3hJTMRz
CSSGram → https://goo.gle/2EPDOad
Photo filters → https://goo.gle/31PhaYi
Contrast Swap → https://goo.gle/2G9LpRh
feColorMatrix → https://goo.gle/34UKw9u
Shaders → https://goo.gle/32PJ2uR
With CSS animations a developer creates a set of keyframes, and then uses a variety of animation properties to describe how the element moves through each of the possible keyframes.
Animations L1 → https://goo.gle/2DhV0V2
Easing L1 → https://goo.gle/3kWoWap
Scroll-Linked Animations → https://goo.gle/39VQV4N
Cubic-Bezier → https://goo.gle/2Q5xj5i
Debugging Animations → https://goo.gle/3ayI2yD
Rainbow Button → https://goo.gle/3214e0t
Complete Easing Functions → https://goo.g
In this episode gradients take the stage as we share syntax secrets, tips and tricks, and probably teach you about repeating-conic-gradient. By the end, you’ll be savvy with color stops, transition hints, and all the ways to interpolate color in your design.
Spec Level 3 → https://goo.gle/3h8cRN7
Spec Draft Level 4 → https://goo.gle/3iPmDUE
Lea’s Pattern Gallery → https://goo.gle/3j4XEwX
Lea’s Cicada Principle Article → https://goo.gle/2FyeWnr
In this episode we talk about the runtime dynamic side of CSS, commonly recognized as a CSS function. Today, in similar fashion to other episodes, we’ll be doing a massive overview of all the CSS functions, to be later deep dived.
CSS Tricks Guide to CSS Functions → https://goo.gle/2XRb7Ah
CSS Variables → https://goo.gle/2XRb2fX
Functional Notations Spec → https://goo.gle/3gJwavQ
Cubic Bezier Generator → https://goo.gle/30LiDhG
Billion Laughs Attack → https://goo.gle/2XUxjtg