Welcome to the third edition of CSS Landscape for 2024. This digest brings together the latest content in the world of CSS. In the News section, we reflect on the web’s 35th birthday with an open letter from Tim Berners-Lee. The Articles section is packed with a variety of topics, from exploring CSS filters and blending to understanding infinity in CSS. The Tutorials section offers practical guides on creating a simple tip calculator, setting up popover codes, and more. Lastly, the Video section features tutorials including creating a responsive movie dashboard and learning 3D cube animation effects. Stay tuned for more updates in the world of CSS.
News
Marking the Web’s 35th Birthday: An Open Letter
March 12, 2024 / Tim Berners-Lee
Tim Berners-Lee, inventor of the web, reflects on its 35th birthday. He laments the web’s deviation from its original goals of decentralization and empowerment, exacerbated by AI’s rise.
Articles
Exploring the Creative Power of CSS Filters and Blending
March 6, 2024 / Joan Ayebola
This article delves into CSS filters and blending modes, equipping you to craft visually arresting web interfaces.
How Much Do You Know About Infinity in CSS?
March 11, 2024 / w3cplus
This article explores the concept of infinity in CSS, demonstrating its use in various scenarios such as z-index, border-radius, and animations. It highlights how infinity, represented by the keywords infinity and -infinity, can simplify code and convey intent more clearly. The article also discusses the limitations and peculiarities of using infinity in CSS.
The Gotcha of align-content with Block Elements
March 11, 2024 / Temani Afif
Exploring the nuances of the align-content property in CSS, particularly with block-level elements, the piece highlights a common misconception about centering elements like <img>, <iframe>, <canvas>, and <video>. A solution is provided using vertical-align: top to eliminate the default baseline alignment’s whitespace, ensuring accurate centering.
Сustom Checkboxes Are on Steroids with :has()
March 13, 2024 / Stas Melnikov
Melnikov introduces the :has pseudo-class as a powerful alternative, offering greater flexibility and resilience to changes in element order.
The Ultimate Ideal Bestest Base Font Size That Everyone Is Keeping a Secret, Especially Chet
March 13, 2024 / Adrian Roselli
It is a thought-provoking article that advocates for not setting a base font size in CSS. Roselli argues that this approach respects user preferences, avoids calculation complexities, and enhances accessibility. The article also provides practical tips for handling forms and print styles.
&13;
Turn an Image Into a Postage Stamp
March 14, 2024 / Temani Afif
It is a practical guide that empowers web developers to transform images into postage stamp-like visuals using CSS. The technique leverages two CSS gradients and is easily adjustable using CSS variables.
&13;
ECSS – an Interesting CSS Methodology
March 14, 2024 / Andy Bell
The author appreciates the emphasis on understandable code and the empowerment of designers, but disagrees with the assertion that CSS is not a programming language. While the author remains committed to the CUBE CSS approach, they acknowledge the potential of ECSS and encourage readers to explore it.
What is safe alignment in CSS?
March 14, 2024 / Chris Coyier
The article explains how safe prevents content from being positioned off-screen, thus avoiding data loss. Chris Coyier demonstrates this concept with a practical example, showing how the use of safe ensures content remains accessible, even when there isn’t enough room in an element.
Tutorials
How to Create a Simple Tip Calculator with HTML, CSS, and Vanilla JavaScript
March 12, 2024 / Esther Vaati
Esther Vaati’s tutorial on webdesign.tutsplus.com guides readers through creating a simple tip calculator using HTML, CSS, and JavaScript. The calculator allows users to enter an amount, select a tip percentage, and specify the number of people sharing the bill.
Steal this Popover Code
March 15, 2024 / Adam Argyle
The tutorial covers the process of setting up the HTML structure, applying CSS styles, and managing transitions for opacity, display, and overlay. The author also explains how to handle the entry animation for popovers. The tutorial is designed for easy understanding and encourages readers to try out the code.
Creating Wavy Circles with Fancy Animations in CSS
March 15, 2024 / Temani Afif
It is a follow-up to a previous tutorial on creating flower-like shapes. This article focuses on creating similar shapes with added animations.
How to Animate Borders in CSS
March 17, 2024 / Ryan Finni
The tutorial covers five examples of animations done without real CSS borders, instead using “fake” borders, outlines, and SVG.
Video
Thank you for reading the CSS Landscape!
