Stay ahead of the curve with FreeFrontend's CSS Landscape!
This digest delivers the latest news, articles, tutorials, tips, and videos to empower your CSS skills.
News
-
What's New in DevTools, Chrome 124
March 28, 2024 / Sofia Emelianova
This document describes the new features, updates, and improvements in the Chrome DevTools in Chrome version 124.
-
What's New in WebGPU (Chrome 124)
April 9, 2024 / François Beaufort
The latest updates in WebGPU for Chrome 124 include new features such as read-only and read-write storage textures, service workers and shared workers support, new adapter information attributes, bug fixes, and Dawn updates.
-
Release Notes for Safari Technology Preview 192
April 10, 2024 / Jon Davis
Safari Technology Preview 192 has been released, featuring WebKit changes, new features, resolved issues, and deprecations across various areas such as Authentication, CSS, Editing, JavaScript, Media, Rendering, Web API, Web Extensions, and Web Inspector.
Articles
-
Hanging Punctuation in CSS
April 3, 2024 / Jeremy Keith
The context discusses the use of the hanging-punctuation CSS property to improve text appearance and the unintended side-effects when applied globally, along with solutions to fix them.
-
How to Think about HTML Responsive Images
April 6, 2024 / Dan Burzo
This article discusses the concept of responsive images in HTML, explaining how to provide image source candidates and how browsers choose the most appropriate one based on device pixel ratio, zooming, and viewport size.
-
Testing HTML with Modern CSS
April 7, 2024 / Heydon Pickering
The article explores the use of modern CSS for testing HTML integrity, focusing on the author's open-source project REVENGE.CSS and recent advancements in CSS.
-
Layered Toggles: Optional CSS Mixins
April 9, 2024 / Roman Komarov
The article introduces a new technique called "layered toggles" that allows applying optional CSS mixins on any element using custom cascade layers and cyclic dependency space toggles.
-
An intro to CSS Grid
April 11, 2024 / Chris Ferdinandi
This context provides an introduction to CSS Grid, a layout system for creating grid-based layouts using rows and columns, with a focus on the fractional unit (
fr) and therepeat()function. -
A CSS-Powered Add/Remove Tags UI
April 11, 2024 / Preethi Sam
This article discusses a CSS-powered add/remove tags UI using checkboxes, labels, and
:has()selectors, demonstrating how to build a tag management component with interactive HTML and CSS. -
Finally Understand Responsive Design!
April 11, 2024 / Jared Weiss
This text provides an in-depth guide to understanding and implementing responsive design in web development, focusing on seven key CSS properties and concepts.
-
How to Build a Reusable Grid System with CSS Grid
April 12, 2024 / Chris Ferdinandi
This context provides a tutorial on how to create a reusable grid system using CSS Grid, focusing on a single row with 12 columns and classes for specifying column width and starting points.
Tutorials
-
Quick Tip: How to Animate Text Gradients and Patterns in CSS
April 11, 2024 / Ralph Mason
This tutorial demonstrates how to animate text gradients and patterns using CSS.
-
Sliding 3D Image Frames in CSS
April 12, 2024 / Temani Afif
Temani Afif demonstrates advanced CSS techniques by applying 3D effects and sliding transitions to a single
<img>without modifying the HTML.
Tips & Tricks
-
How to Remove Background of an Image with CSS
April 3, 2024 / Madhu Saini
This context provides a tutorial on how to remove the background of an image using CSS, specifically through the use of the
mix-blend-modeproperty. -
position: absolute Frees Us from Using display: block
April 10, 2024 / Stas Melnikov
The web page explains that defining
position: absolutefor::beforeor::afterelements eliminates the need to usedisplay: block. -
CSS-Only Pixelated Cut Corners
April 11, 2024 / Temani Afif
This web page provides a CSS-only solution to create pixelated cut corners on an image using modern CSS properties.
Video
-
Email Obfuscation Using CSS
April 8, 2024 / CSS Weekly
Learn how email obfuscation works and why you should obfuscate your emails using CSS.
-
Form Input Wave Animation
April 9, 2024 / Web Dev Made Easy
In this video, we'll guide you step-by-step through crafting captivating wave animations for your web forms, perfect for developers looking to enhance their skills in frontend design.
-
These CSS Features Give Us More Control on the Cascade and Specificity
April 9, 2024 / Kevin Powell
-
Login Form with Slider
April 10, 2024 / Ecem Gokdogan
This video includes the login form with a slider that is provided by Swiper JS.
-
Write Less Code with These 5 CSS Tips
April 11, 2024 / Kevin Powell
-
CSS Artist Kass Moreno
April 12, 2024 / freeCodeCamp.org
On this week's episode of the podcast, freeCodeCamp founder Quincy Larson interviews Kass Moreno, a Senior Front End Developer and CSS Artist. Kass started learning coding at age 28 and has since built a reputation as one of the most skilled artists who work with CSS.
-
Why YOU need DARKMODE (with CSS)
April 12, 2024 / chunkydotdev
Discover the simplicity and power of CSS variables to switch between themes effortlessly.
Thank you for reading the CSS Landscape!
