CSS Weekly
  • YouTube Channel
  • Archives
  • Supporters
  • Submit a link
  • Advertise
  • Contact

Issue #563

October 12, 2023

Re-Creating The Pop-Out Hover Effect With Modern CSS (Part 1)

Re-Creating The Pop-Out Hover Effect With Modern CSS (Part 1)

Temani Afif shows how to combine CSS masks, CSS variables, trigonometric functions, @property, and more to create a neat hover effect that would have been extremely difficult to create even a few years ago without the latest and greatest that CSS has to offer.

Read more

The Ultimate Low-Quality Image Placeholder Technique

The Ultimate Low-Quality Image Placeholder Technique

Harry Roberts explores how to implement low-quality image placeholders without negatively impacting Core Web Vitals metrics like Largest Contentful Paint (LCP).

Read more

What have I been up to

Mastering Prettier

Mastering Prettier

All Prettier modules of my course, Mastering Linting, have been released!

The latest module covers everything you need to know about integrating Prettier fully into your workflow, from sharing configurations to setting up pre-commit hooks, task runners, and Continuous Integration workflows.

Use the coupon code CSSFRIENDS at checkout to get an additional 40% discount on the already discounted pre-launch price. And act now, as the price is going up next week.

Enroll Now »

CSS Weekly on YouTube

▶ 10 Fantastic VS Code Icon Themes

▶ 10 Fantastic VS Code Icon Themes

An overview of beautiful Visual Studio Code File Icon Themes you should try to make your sidebar a bit nicer, your files and file types more distinguishable, and you a bit more productive.

Watch video

▶ VS Code Tips - Use Read-Only Mode

▶ VS Code Tips - Use Read-Only Mode

A quick tip showing you how a read-only mode in Visual Studio Code works and when it can be useful.

Watch video

Articles & Tutorials

WebKit Features in Safari 17.0

Jen Simmons gives an overview of new WebKit features available in the latest release of Safari.

Read more

Nine things automated accessibility tests can’t test

Dave Rupert outlines some weaknesses of automated accessibility testing.

Read more

Responsive type scales with composable CSS utilities

Tobias Ahlin Bjerrome explains how you can create composable, responsive, and fluid-type scales that smoothly adapt to viewport and container widths using calc(), clamp(), and CSS vars.

Read more

Textareas with auto-increasing height using CSS

Amit Merchant gives a short intro to an experimental CSS rule with form-sizing property that will let you increase the height of the textarea automatically based on the amount of text the user enters.

Read more

macOS Web Apps

Mark Otto gives a quick intro on adding web apps to your dock in macOS Sonoma and outlines some limitations.

Read more

Promoted Link

Craft the Perfect Content for Your Newsletters

Craft the Perfect Content for Your Newsletters

Tired of staring at a blank page, struggling to find the right words to connect with your audience?

Constant Contact’s AI content generator can banish writer’s block for good. Think of the time you’ll save crafting the perfect copy for newsletter campaigns while increasing your open rates without breaking a sweat.

Say goodbye to the frustration of content creation, and hello to more time doing what you love with who you love. 👋

Try Constant Contact’s AI Content Generator

Tools

linear() Generator

An online generator that will help you convert JavaScript/SVG easing definitions into linear() CSS format.

Check it out

Iconbundler

Iconbundler is an online tool that converts and optimizes SVG icons to React, Vue, and Svelte components.

Check it out

Inspiration

Cut out typography

Cut out typography

Lia Tsernant crafts a beautiful motivational message with CSS in a retro paper cut-out style.

Get inspired

Until Next Week

Thank you so much for reading!

If you want to support this newsletter and my work, check out my other CSS-related projects:
• CSS Weekly YouTube Channel
• CSS Stickers

Happy coding,
Zoran Jambor

Issue #562 Issue #564

CSS Stickers!

CSS Stickers set.

A set of beautiful, cute, and funny CSS stickers to showcase your love for CSS.

Get Your Set Today »

Course Mastering Linting

Get proficient with the best linting tools, Prettier & Stylelint.

Enroll Now »

Follow CSS Weekly

YouTube 11,000 Subscribers X / Twitter 16,700 Followers Bluesky 3,900 Followers TikTok 1,600 Followers Facebook 2,400 Likes Codepen 150 Followers RSS 8,500 Subscribers
YouTube 11,000 Subscribers X / Twitter 16,700 Followers Bluesky 3,900 Followers TikTok 1,600 Followers Facebook 2,400 Likes Codepen 150 Followers RSS 8,500 Subscribers

CSS Weekly is curated, edited,
published and created by Zoran Jambor.