pMasking in CSS is one way to hide parts of the element and show others. Another is codeclip-path/code, but let#8217;s not focus on that today. em#8220;Masks are images; Clips are paths#8221;/em is one way to think about the a href=https://css-tricks.com/clipping-masking-css/#article-header-id-0difference/ahellip;/p

#185: Playing with CSS Masks

CSS-Tricks Screencasts is focused on showing you tips, tricks, techniques about web design. Code samples can be extremely helpful, but sometimes it is even more helpful to watch someone as they code. In CSS-Tricks Screencasts will show you real live CSS and HTML code being written and tested right on the screen. Topics will vary but will always center around design and usability.

Technology

Tech News

Podcasting

Gadgets

Software How-To

pI think Astro is a pretty cool bit of technology for building websites! Should we call it a framework? We#8217;ll get into that in the video. How can we call it a framework if it asks you to #8220;bring your hellip;/p

#210: Yapping About Astro

pI paired up with a href=https://twitter.com/sonicdmg rel=noopenerDavid Jones-Gilardi/a of DataStax to go through a href=https://github.com/datastaxdevs/appdev-week3-graphql rel=noopenerone of the workshops/a they have put together (with a href=https://www.youtube.com/channel/UC5DNytAJ6_FISueUfzZCVsw rel=noopenerAnia Kubów/a, who has  a href=https://www.youtube.com/watch?v=g8COh40v2jU rel=noopenera video/a you should watch as well) that does a good job of showcasing how hellip;/p

#209: A Netflix Clone with DataStax Astra and Netlify

pThis is the video version of a href=https://css-tricks.com/how-do-you-make-a-layout-with-pictures-down-one-side-of-a-page-matched-up-with-paragraphs-on-the-other-side/a blog post we did/a asking the question: How do you make a layout with pictures down one side of a page matched up with paragraphs on the othernbsp;side?/p



pIt#8217;s a satisfying answer because hellip;/p

#208: A CSS Grid Layout with Pictures Down One Side Matched Up with Paragraphs on the Other

pI get a hands-on performance review with a href=https://timkadlec.com/ rel=noopenerTim Kadlec/a of a href=https://webpagetest.org/ rel=noopenerWebPageTest/a! This is a real honor as Tim is a real performance guru who knows WebPageTest in and out. I#8217;m all about sgetting a little free consulting/s helping y#8217;all hellip;/p

#207: Performance Testing CSS-Tricks with WebPageTest

pI#8217;m joined by a href=https://twitter.com/chris__sev?lang=en rel=noopenerChris Sev/a from a href=https://www.digitalocean.com/ rel=noopenerDigital Ocean/a to talk about their new a href=https://try.digitalocean.com/css-tricks/?utm_medium=partneramp;utm_source=csstricksamp;utm_campaign=global_brand_video_enamp;utm_content=conversion rel=noopenerApp Platform/a. We#8217;re going to use it to build a little website. The site will be blog-like: posts with IDs, titles, content, and the more dynamic hellip;/p

#185: Playing with CSS Masks

Download our free app to listen on your phone