CSS Landscape | 2024 #2 - News PouroverAI

Welcome to CSS Landscape digest, where we curate the latest articles, tutorials, and videos to keep you informed and inspired in the world of CSS. In this edition, discover techniques for breaking words effectively, explore innovative CSS button styles, and learn how to handle dark mode with CSS and JavaScript. Dive into advanced tooltip design, captivating border animations, and much more. Stay ahead in CSS trends and techniques with CSS Landscape digest.

Articles

Techniques to Break Words

February 29, 2024 / Adrian Roselli

The article “Techniques to Break Words” explores various methods of word breaking in web design, covering CSS properties like table-layout and word-break. It provides a demo showcasing different languages and offers practical advice for implementing these techniques effectively. The author emphasizes considerations for hyphenation and localization.

Case Study: lynnandtonic.com 2023 Refresh

March 4, 2024 / Lynn

This case study details a website refresh that utilizes dual-viewport responsive design with SVG illustrations and CSS animations to create a unique user experience on resize. The author explores various technical challenges and solutions implemented.

focus-within Removes Fragility of the Next-Sibling Combinator

March 6, 2024 / Stas Melnikov

This concise article by Stas Melnikov highlights the benefits of utilizing the focus-within pseudo-class as a reliable alternative to the next-sibling combinator in CSS.

Exploring the Creative Power of CSS Filters and Blending

March 6, 2024 / Joan Ayebola

This article on SitePoint explores the creative potential of CSS filters and blending modes, offering insights into their application to enhance web page aesthetics. With practical examples and considerations for accessibility and performance, developers can leverage these features to create visually captivating and dynamic user interfaces.

Some Little Ways I’m Using CSS :has() in the Real World

March 7, 2024 / Andy Bell

This article explores practical applications of the CSS :has() pseudo-class in real-world scenarios. Through low-fidelity demos, it showcases how :has() can be used to target parent elements based on their children’s state or presence, offering valuable insights into its usage.

The Quiet, Pervasive Devaluation of Frontend

March 7, 2024 / Josh Collinsworth

This article delves into the subtle yet pervasive devaluation of frontend development, examining how it’s often marginalized and trivialized despite its crucial role in user experience. Through insightful analysis, the author challenges prevailing attitudes and encourages reevaluation of frontend’s importance in software engineering.

Creating Color Palettes with the CSS color-mix() Function

March 8, 2024 / Michelle Barker

This article explores the versatility of the CSS color-mix() function for creating diverse color palettes. It covers mixing colors for light and dark variations, using custom properties for reusability, and adjusting color intensity. Additionally, it discusses color interpolation methods and browser support, offering practical examples and resources for further exploration.

Check-All / Expand-All Controls

March 8, 2024 / Adrian Roselli

The article “Check-All / Expand-All Controls” discusses the implementation of controls that can operate other controls in bulk, such as checkboxes for bulk selection or buttons for expanding or collapsing sets of elements. It explores the use of HTML checkboxes and ARIA attributes to convey the state of bulk operations programmatically, with considerations for accessibility and user experience.

CSS Button Styles You Might Not Know

March 10, 2024 / David Bushell

This post explores several lesser-known CSS button styling techniques including touch actions, user selection prevention, and styling the hidden file input button. It also covers accessibility improvements with focus states and logical sizing.

Tutorials

5 Ways to Style Text with CSS Inspired by the Spider-Verse

March 6, 2024 / Oscar Jite-Orimiono

This tutorial explores five innovative methods for styling text with CSS inspired by the Spider-Verse movies. Techniques include creating multi-layered text, glitch animations reminiscent of the movie’s visual effects, graffiti text styles, newspaper cutout effects, and SVG text animations.

Modern CSS Tooltips And Speech Bubbles (Part 2)

March 8, 2024 / Temani Afif

“Modern CSS Tooltips And Speech Bubbles (Part 2)” delves into advanced CSS techniques for creating tooltips with various shapes and styles. Author Temani Afif explores gradient backgrounds, rounded corners, border-only tooltips, and custom tail shapes, providing comprehensive guidance for enhancing tooltip design using modern CSS features.

SVG Toggle Button Tutorial – How to Handle Dark Mode with CSS and JavaScript

March 8, 2024 / Hunor Márton Borbély

The tutorial explores techniques to detect and implement dark mode in web applications using CSS, JavaScript, and SVG icons. It covers methods to detect dark mode, create toggle buttons, and manipulate SVG icons dynamically.

Video

Awesome Border Animation Effects Using CSS

March 6, 2024 / Web Dev Mad

Ready to take your web design skills to new heights? Dive into our latest video tutorial where we reveal the secrets behind captivating border animations using CSS. From subtle pulsations to mesmerizing gradients, learn how to infuse your designs with personality and flair in just minutes!

Simplify Your CSS Using :is() and :where() Pseudo-Classes

March 7, 2024 / CSS Weekly

A detailed guide to :is() and :where() CSS pseudo-classes, explaining exactly how they work, what’s the difference between them, and how they can help you simplify your CSS, along with some gotchas you should keep in mind.

Card Hover Effect

March 7, 2024 / Ecem Gokdogan

In this video, the cards become side by side when the mouse is over them. Otherwise, they return to their angled state. For this effect, HTML and CSS are used.