Welcome to Collective #790!
Today we have some fresh frontend links for you including a dive into the world of shaders, some insights by Lea Verou on the balance between usability and aesthetics in UIs and some gradient magic by Michelle Barker.
We’re also introducing “Behind the Pixel”, a bite sized look at tiny design details and how they are accomplished!
Please enjoy reading and feel free to share your favorite links and feedback by replying to this email.
Have a great start of the week!
Grab your .COM domain at an unbeatable price of $5.98 and unlock freebies like a 2-month email address trial, lifetime privacy protection, DNSSEC security, and 24/7 customer support. Get your domain
This article by Antoine Mayerowitz introduces the world of shaders, explaining how they work and their importance in graphics, particularly in video games, and guides beginners through the process of creating simple shader-based graphics using OpenGL Shading Language (GLSL).
Manuel Matuzović shares his experiment with using “rem” and “px” units for font sizing in web design, highlighting how different mobile browsers and operating systems handle text scaling and emphasizes the importance of using relative units like “rem” to respect user preferences in interface design.
This article is part of Austin Gil’s series on integrating AI into web applications and provides a good overview of AI, neural networks, Large Language Models (LLMs), parameters, embeddings, and Generative Pre-trained Transformers (GPTs).
Lea Verou discusses the balance between usability and aesthetics in user interface design, using the example of GitHub’s new commenting interface to highlight how prioritizing aesthetics over usability can lead to confusion and user frustration.
Michelle Barker dives into the creative use of CSS gradients, including layering, custom properties, and pixel art generation and shares a demo where you can create your own single div pixel art.
Geoff Graham reflects on the evolving landscape of CSS and the challenge of defining what is considered “modern” in web design, suggesting various naming approaches to capture different eras or periods in CSS development.
A free Framer template with a really nice and modern design, especially suitable for software startups and small businesses. Made by Andrea Montini.
Lusion has created an impressive collection of 2D Light Tracing examples that utilize the jump flooding algorithm to produce the distance field for 2D ray marching. This experiment features various visuals and mini-games for users to interact with.
Adam Argyle shares a morphing tooltip prototype with View Transitions. This tooltip includes a fixed position and animates display:none. You can simply set the innerText and position with left/top.
Jhey Thompkins demonstrates an awesome technique for creating a glowing border button effect using CSS container query units in animations. This technique also employs custom properties to control the speed of the animation.
A Python tool for applying various visual effects to text in the terminal, offering options such as color conversion and text manipulation effects like decryption and animation.
Eva Decker has shared with us a fascinating project she is currently working on. The project involves creating a website for tracking gender-swapped music covers. The website is built using Astro with View Transitions and is designed to automatically tag covers using the Spotify Audio Features API.
Viki shares a cool responsive HTML table that includes sticky columns and a mobile view, created using only CSS and HTML.
Behind the Pixel 🔎
In our new section “Behind the Pixel,” we examine small design and animation details and take a peek under the hood to see how they are accomplished.
Today, we’re examining a small line animation on Hervé Baillargeon’s website. As the user scrolls, the information details come into view and a line between the items animates. When we inspect this animation, we can see that the line is a pseudo-element that scales on the X-axis (from 0 to 1) when the section comes into the viewport:
The “is-inview” class gets added to each list item when it enters the viewport. A clever technique to animate a pseudo element! Certainly a nice detail 🙂
From our blog
And that’s it! Thank you for reading the Collective! If you have something you would like us to feature in the next edition, simply reply to this email!
Codrops is proudly sponsored by KeyCDN, the high performance content delivery network that has been built for the future.