CSS the 😎😎😎 Cool Parts

Syntax - Tasty Web Development Treats

Wes Bos

Tech News, Technology, News

4.9 • 1.2K Ratings

🗓️ 22 May 2019

⏱️ 58 minutes

🔗️ Recording | iTunes | RSS

🧾️ Download transcript

Summary

In this episode Wes and Scott talk about the cool parts of CSS! From filters to variables, here are some cool (and amazing) things you can do with CSS in 2019. Sentry - Sponsor If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”. Sanity - Sponsor Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create. Get an awesome supercharged free developer plan on sanity.io/syntax. Show Notes 2:28 - Clip path 6:35 - Filters 16:24 - Background mix blend mode 21:47 - Border images 25:46 - Multiple background images 27:47 - Multiple background gradients 28:25 - Radial gradients 29:06 - Multiple box-shadows 34:30 - HEX + Alpha 40:41 - Viewport units 42:17 - Calc 44:32 - CSS variables 47:44 - Text decoration Links Can I use Clippy - CSS clip generator CSS Filters Tweet: Using mix-blend-mode:multiply CSS blend mode generator Lea Verou Codepen - Scott’s digital text animations Steve Schoger Mother-effing HSL Diana Adrianne ××× SIIIIICK ××× PIIIICKS ××× Scott: Solar string lights Wes: Digital Calipers Shameless Plugs Wes: Wes’ Courses — use coupon code “syntax” at checkout and get and extra $10 off. Scott: Animating React Tweet us your tasty treats! Scott’s Instagram LevelUpTutorials Instagram Wes’ Instagram Wes’ Twitter Wes’ Facebook Scott’s Twitter Make sure to include @SyntaxFM in your tweets

Transcript

Click on a timestamp to play from that location

0:00.0	You're listening to Syntax, the Podcast with the Tastiest Web Development Treats out there.
0:06.0	Strap yourself in and get ready.
0:08.0	Here is Scott Telinsky and West Boss.
0:10.5	Welcome to Syntax, the Podcast with the tastiest web development treats out there.
0:15.4	Today we are talking about CSS the cool part.
0:18.8	Scott has added three sunglass emojies happy Happy Days in front of it.
0:25.4	We're just gonna kind of go through some of the more neat parts of CSS
0:29.2	that you might not necessarily know about,
0:31.4	or you might not necessarily know about like kind of these neat ways in which they can be used in CSS.
0:37.0	So with me as always today is Mr. Tolinsky, how you doing?
0:41.0	Hey, I'm doing good. I'm ready to start talking about these cool, cool,
0:44.3	parts here. This is some of my favorite stuff in CSS, to be honest. Yeah, and you've just been going
0:49.5	through a big redesign of your level up tuts, right Yeah big redesign and since my user base is
0:56.2	usually people when I say usually I mean like 99% of people with modern browsers
1:02.4	gives me a ton of freedom to use new CSS stuff which I have been doing to maybe the fullest extent.
1:11.0	I look at the Can I Use and I get to use some of this cool stuff and
1:14.8	then I get to feel just so inspired by how far we've come with CSS. So I'm really
1:20.4	excited about a lot of the stuff we're going to be talking about on this
1:22.4	episode some of which these things I'm really excited about a lot of the stuff we're going to be talking about on this episode, some of which these things I'm using currently in a website, some of which I used before, and some of which I'm sure you've used before yourself.
1:29.4	Yeah, I think everything we're talking about today has been around for probably what would you say at least two or three years
1:35.4	Yeah, so I think that they're pretty safe to use even more than that you have in here
1:40.3	I don't know if we'll go through the browser support for every single one just because you can look that up yourself if you're really curious, but I think if you're running a modern, if you dropped IE 11, I think almost all of the stuff, if not all of it will work in all the browsers.
	...

Please login to see the full transcript.

Previous episode | Next episode

Disclaimer: The podcast and artwork embedded on this page are from Wes Bos, and are the property of its owner and not affiliated with or endorsed by Tapesearch.

Generated transcripts are the property of Wes Bos and are distributed freely under the Fair Use doctrine. Transcripts generated by Tapesearch are not guaranteed to be accurate.