New CSS Viewport Units Do Not Solve The Classic Scrollbar Problem — Smashing Magazine
Since the introduction of CSS viewport units in 2012, many of us have been using width: 100vw as a way to set an element’s width to the full width of the viewport. But, as Šime Vidas explains in this deep dive, 100vw does not always represent the full width of the viewport due to differences in how browsers handle scrollbars. Learn why this is an issue, how to avoid it, and what approaches we may
Writing CSS In 2023: Is It Any Different Than A Few Years Ago? — Smashing Magazine
CSS is evolving faster than ever. With all of the new features that are now available — and forthcoming — since we got Flexbox and Grid years ago, the way we write CSS is evolving, too. In this article, Geoff Graham shares which features have had the most influence on his current approaches to CSS, as well as those that have not (at least yet). Is there anything in the front-end world that’s evolv
CSS Scroll Snapping Aligned With Global Page Layout: A Full-Width Slider Case Study — Smashing Magazine
Have you run into a situation where you need the padding of one element to align with the padding of another element? It’s a common debacle, especially when a page layout is set with global padding, and you need to break out of that layout and go full-width but still align the inner content with the rest of the page. In this article, Brecht De Ruyte demonstrates the issue with a full-width slider
Creating Accessible UI Animations — Smashing Magazine
Animation and accessibility are often seen as two separate powers at odds with one another. How is it possible to strike a balance between elements that move and the possible negative effects they expose to users who are sensitive to motion? Oriana García explains how her team at Mercado Libre tackled the challenge by creating guiding principles for applying animation to user interfaces and incorp
Revealing Images With CSS Mask Animations — Smashing Magazine
Let’s play with images and experiment with CSS masks. The idea is fairly simple: take a single <img> tag and harness the power of CSS to accomplish complex hover transitions. Through different demos, you will see how CSS masks combined with gradients allow us to create fancy effects — with efficient, reusable code. In a previous article, we explored fancy hover effects for images that involve shin
Designing Better Error Messages UX — Smashing Magazine
Error messages need to be easy to spot, but they also need to be helpful. Let’s explore when error messages should live above input fields and why toast error messages are usually not a very good idea. When we design interfaces, we rarely think about error messages first. After all, how much is there to design anyway? We highlight the error, display a message, and nudge users toward the correct in
Keys To An Accessibility Mindset — Smashing Magazine
An accessible product can be daunting to build, particularly during development, if accessibility isn’t considered from the beginning. At times, it can feel like throwing random ARIA attributes at the wall to see what sticks. There’s so much nuance and technical depth to consider that many find it easier not to consider it at all. However, this article will demonstrate three keys for approaching a
CSS And Accessibility: Inclusion Through User Choice — Smashing Magazine
It is challenging to accurately understand the preferences of over 7.8 billion people at any given time. Carie Fisher outlines which CSS media features are available for detecting user preferences and how they are used to design and build more inclusive experiences. We make a series of choices every day. Get up early to work out or hit the snooze button? Double foam mocha latte or decaf green tea?
How To Define An Array Of Colors With CSS — Smashing Magazine
Join Temani Afif on experiment with modern CSS features to create an array of colors. The goal is to define a comma-separated list of colors and iterate through them using an index. CSS is mainly known as a language based on a set of property-value pairs. You select an element, define the properties, and write styles for it. There’s nothing wrong with this approach, but CSS has evolved a lot recen
Shines, Perspective, And Rotations: Fancy CSS 3D Effects For Images — Smashing Magazine
CSS has all kinds of tricks that are capable of turning images into neat, interactive elements. This article is a collection of fancy 3D effects for images that demonstrate those CSS powers. Get ready to learn how they work as we get our hands dirty with CSS features that add perspective, depth, rotation, and even a slick shine to images that you can use on your next project. We all agree that 3D
What’s The Perfect Design Process? — Smashing Magazine
The design process is messy. You might be following a structured approach, but too often, it takes a life of its own. And before you know it, you are designing in chaos, with last-minute changes and missed deadlines. So, what’s the “perfect” design process? Design process is messy. You might be following a structured approach, but with all the last-minute changes and overlooked details, too often,
Practical Design Tips And Guidelines For Beginner Designers — Smashing Magazine
Now that we have those buckets let’s continue: In what order do we want the audience to ingest them? My choice would be the headline first, then the logistics, with the big register button. I would keep the host information more as a detour, something optional to dive into if you would like to learn more. Compare these two versions. Isn’t it easier to ingest the information in the one on the right
Accessible Target Sizes Cheatsheet — Smashing Magazine
Practical guidelines to prevent rage taps and rage clicks with accessible tap targets for icons, links and buttons — on desktop and on mobile. With useful techniques and guidelines. Rage taps are annoying and frustrating. These wonderful occurrences in our interface when we need to tap twice or sometimes three times to continue our journeys. Of course, sometimes they happen because the website is
What Leonardo Da Vinci Can Teach Us About Web Design — Smashing Magazine
Perhaps more than any other person in history, Leonardo da Vinci showed the kind of magic that can happen in the overlap between art and science, where much of web development lives. His methods and outlooks are just as applicable to the web today as they were in Renaissance Italy. Exhaustive, sometimes bizarre notes… wireframes… mind-bending blends of art and science. Is it a GitHub repository? N
A Deep Dive Into The Wonderful World Of SVG Displacement Filtering — Smashing Magazine
What exactly is a displacement filter? In this article, Dirk Weber explains the SVG feDisplacementMap filter primitive with a good number of examples to demonstrate the concept of animated displacement maps. Even today, the magic, wicked realm of SVG Filter Effects is largely uncharted territory. The art of SVG filtering is still surrounded by an aura of alchemy: you have to bravely dive into a da
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
A Roundup Of WCAG 2.2 Explainers — Smashing Magazine
How Smashing Magazine Uses TinaCMS To Manage An Editorial Workflow
Falling For Oklch: A Love Story Of Color Spaces, Gamuts, And CSS — Smashing Magazine
Testing Sites And Apps With Blind Users: A Cheat Sheet — Smashing Magazine
Sustainable Web Development Strategies Within An Organization — Smashing Magazine