 |
 |
|
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 |
|
|
|
|
A Journey Into Shaders 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). |
Totally remdom, or How browsers zoom text 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. |
AI for Web Devs: What Are Neural Networks, LLMs, & GPTs? 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). |
Minimalist Affordances: Making the right tradeoffs 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. |
Messing About with CSS Gradients 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. |
What Exactly is “Modern” CSS? 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. |
Propellent: Free One Page Framer Template A free Framer template with a really nice and modern design, especially suitable for software startups and small businesses. Made by Andrea Montini. |
AKARI: 2D Light Tracing Experiment 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. |
Morphing tip prototype with View Transitions 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. |
CSS Tip: Glowy border button effect with CSS Container Queries 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. |
Introducing Shadow CanadaHonk introduces Shadow, a novel browser engine primarily built in JavaScript for fun and learning, emphasizing its unique approach and purpose. |
Terminal Text Effects 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. |
Crazy Pumpkin Game Andrii Babintsev created this adorable game of jumping pumpkins for the Three.js Journey Challenge. You can find the code here. |
Genderswap.fm 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. |
Responsive HTML table with sticky columns 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: |
.c-list_item.is-inview::before,
.c-list_item.is-inview:last-child::after {
transform: scale(1);
}
|
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 :) |
|
|
Video Vault |
 | | In his new stream, Yuri Artiukh shows how to code a circular loop of interactive particles with Three.js, shaders and a FBO simulation technique. |
|  | | Kevin Powell shows how thanks to scroll-timeline: scroll(), we can now create true parallax effects without JavaScript and have complete control over the speed of each layer. |
|  | | Una and Adam uncover common pitfalls with custom properties in this informative discussion, shedding light on their reactivity quirks and offering solutions. |
|
|
|
|
|
|
|
|
|
|
|
 | | Uprock Agency's latest concept features numerous interesting animations to explore. Additionally, it showcases a sleek neon text effect that adds a touch of coolness to the design. |
|
|
|
|
|
|
|
|
|
|
Demo Corner |
|
|
From our blog |
 | | Explore fresh animations and interactive designs made by talented designers. |
|  | | Some ideas for speedy page transition animations with layered images using clip-path. |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
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. |
|
|
|
