Preview Mode Links will not work in preview mode

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.

Aug 12, 2020

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. 

Links:

CSS Tricks Guide to CSS Functions → https://goo.gle/2XRb7Ah 

CSS Variables →...


Aug 5, 2020

In today’s episode, we’re talking about z-index and stacking context. This is a pretty in-depth topic, but it's something that we see all the time and it can definitely bite if you aren’t aware of what’s going on.

Links:

CSS Animations Level 1 → https://goo.gle/2DhV0V2 

Scroll-linked Animations 1 →


Jul 30, 2020

Today we discuss: focus! Focus  is something we regularly deal with when writing styles and is also very tied to markup and attributes like tabindex, so we’ll be discussing all of those things in this episode!

Links:

User Action Pseudo-classes → https://goo.gle/3jNSHcL 

HTML Standard → https://goo.gle/3g7FzNr 


Jul 22, 2020

Today we’re talking about shadows! Box shadows, drop shadows, text shadows, and everything in between. Shadows can exist all over our UIs without us even realizing it because sometimes, they just look like borders.

 

box-shadow spec →  https://goo.gle/32JVdL4 

text-shadow spec → https://goo.gle/2ZMdiGo 

Sass pixel...


Jul 15, 2020

Today we’re talking about borders! And while this sounds relatively simplistic, borders in CSS can actually get pretty complex very quickly. It’s not just color and style that you can adjust, but also also border images, where you control how the image repeats itself and what slice of the image you want to show.