Aug 21, 2025 by Jon Davis, Jen Simmons, and Tim Nguyen Random functions in programming languages are amazing. You can use them to generate variations, to make things feel spontaneous and fresh. Until now there was no way to create a random number in CSS. Now, the random() function is on its way. You’ll be able to create a random animation delay, layout content at a random place on the screen, crea
よくある2ペインのレイアウト用コンポーネントを作りつつ、Web Componentsの仕組みを理解する｜masuidrive
よくある2ペインのレイアウト用コンポーネントを作りつつ、Web Componentsの仕組みを理解する Web Componentsを一言で説明すると「HTML/CSSが独立したカスタムタグを作れる仕組み」です。理解するには、まずは素のJavascriptだけでよくある部品を作ってみることが一番だと思います。 多くのサンプルではボタンやアイコンなどの部品を作りますが、今回はflexboxを使ったレイアウト定義のコンポーネントを作ってみます。この部分にはちょっとしたハマりどころがあるのでちょうど良い練習になります。 もう一つハマりやすいのはフォーム部品ですが、これはまた後日書きます。 この記事の前に 「今なら使えるWebComponents」を軽くでも読んでおいてもらえると嬉しいです。 2ペインのレイアウトを考える最初にWebアプリでよくある、左にナビゲーション、右にコンテンツを置く2ペイン
The Complex But Awesome CSS border-image Property — Smashing Magazine
The CSS border-image property is one of those properties you undoubtedly know exists but may not have ever reached for. Or maybe you have reached for it but found all of its slicing logic difficult and cumbersome. That’s because it is! But the property is also capable of some really interesting things if we take the time to understand its syntax. In this article, Temani Afif demonstrates different
Getting Started With CSS Cascade Layers — Smashing Magazine
We all have run into CSS collisions and sudden regressions in our codebases when new styles are written or 3rd-party styles are added. This is because of the interdependence of styles due to source order, specificity, and inheritance. Some ways to control the cascade have included methodologies like ITCSS and BEM and other newer native features. Cascade layers will be the ultimate native solution
Building A Dynamic Header With Intersection Observer — Smashing Magazine
Have you ever needed to build a UI where some component on the page needs to respond to elements as they’re scrolled to a certain threshold within the viewport — or perhaps in and out of the viewport itself? In JavaScript, attaching an event listener to constantly fire a callback on scroll can be performance-intensive, and if used unwisely, can make for a sluggish user experience. But there is a b
24 min read6 CSS Snippets Every Front-End Developer Should Know In 2025 2025; I think every front-end developer should know how to enable page transitions, transition a <dialog>, popover, and <details>, animate light n' dark gradient text, type safe their CSS system, and add springy easing to animation. AI is not going to give you this CSS. This post is a theme continuation; checkout previous year
Infinite-Scrolling Logos In Flat HTML And Pure CSS — Smashing Magazine
Editor’s Note: This article has been updated with additional accessibility considerations for motion sensitivities. Remember the HTML <marquee> element? It’s deprecated, so it’s not like you’re going to use it when you need some sort of horizontal auto-scrolling feature. That’s where CSS comes in because it has all the tools we need to pull it off. Silvestar Bistrović demonstrates a technique that
Those HTML Attributes You Never Use — Smashing Magazine
In this article, Louis Lazaris describes and demonstrates some interesting HTML attributes that you may or may not have heard of and perhaps find useful enough to personally use in one of your projects. This post is the result of his research, and he hopes you’ll find some of these useful to you, as you build HTML pages in the coming months. In January, Madison Kanna asked her Twitter followers: W
The Modern Guide For Making CSS Shapes — Smashing Magazine
Creating shapes using CSS is, without any doubt, a classic exercise. In many cases, we try to use hacky code and workarounds, but CSS has evolved, and we have modern ways to create CSS Shapes with clean, reusable code. In this comprehensive guide, Temani Afif explores different techniques for creating common shapes with the smallest and most flexible code possible. You have for sure googled “how t
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
The Path To Awesome CSS Easing With The linear() Function — Smashing Magazine
With the new CSS linear() easing function on the horizon, the possibilities of what we can do to create natural-feeling animations and transitions in the future are greatly expanded. Jhey Tompkins looks at the current state of CSS easing in this article and demonstrates what we can expect from linear(), including handy tools to get your hands on it today. To paraphrase a saying that has always stu
A Guide To Modern CSS Colors With RGB, HSL, HWB, LAB And LCH — Smashing Magazine
Did you know that your chosen color palette can have an impact on how much energy your website uses? Even a more environmentally friendly choice of colors can reduce the impact on the battery life of mobile devices. In this article, Michelle Barker shares advice on the not-so-obvious things you have to keep in mind when handling colors in CSS today. There’s more to color on the web than meets the
Re-Creating The Pop-Out Hover Effect With Modern CSS (Part 1) — Smashing Magazine
This article is all about experimenting with modern CSS features. If you are wondering what the future of CSS will look like, you are in a good place! We will combine things like CSS masks, CSS variables, trigonometric functions, @property, and more to create a neat hover effect that would have been extremely difficult to do even a few years ago without the latest and greatest that CSS has to offe
The Times You Need A Custom @property Instead Of A CSS Variable — Smashing Magazine
Custom properties and CSS variables are often used interchangeably when describing placeholder values in CSS despite the fact that they are different but related concepts. Preethi Sam walks through an example that demonstrates where custom properties are more suitable than variables while showcasing the greater freedom and flexibility that custom properties provide for designing complex, refined a
What Are CSS Container Style Queries Good For? — Smashing Magazine
What are these CSS Container Style Queries, and why should you use them? Juan Diego Rodríguez delves deeply into style queries, and not at the syntax level, but at what exactly they are solving and what sort of use cases you would find yourselves reaching for them in your work if and when they gain browser support. We’ve relied on media queries for a long time in the responsive world of CSS but th
Simplify Your Color Palette With CSS Color-Mix() — Smashing Magazine
Defining a color palette and theme can be a lot of work, especially when considering contextual colors for elements’ various states. While CSS color-mix() only blends two colors together, this little function may be the key to maximizing your colors without maximum effort. There’s a reason for all the new, experimental color features CSS is introducing. And there’s a reason for all the excitement
How To Build A Magazine Layout With CSS Grid Areas — Smashing Magazine
Web development, especially what you can do with CSS, has become increasingly complex. With the added capabilities of CSS Grid, it is now possible to achieve layouts that look like they were laid out by hand. Let’s tackle a practical example of how to do something like that. In this article, I want to talk about the amazing possibilities of a CSS grid and how it allows for complex layouts that are
Sticky Headers And Full-Height Elements: A Tricky Combination — Smashing Magazine
Sticky positioning is one of those CSS features that’s pretty delicate and can be negated by a lot of things, so here’s another one to add to your mental catalog: Sticky elements don’t play nicely if they have to coordinate with other elements to make up a combined height, like 100vh. Philip Braunen explores why this happens and presents a solution to fix it. I was recently asked by a student to h
Blinded By the Light DOM
For a while now, Web Components (which I’m not going to capitalize again, you’re welcome) have been one of those things that pop up in the general web conversation, seem intriguing, and then fade into the background again. I freely admit a lot of this experience is due to me, who is not all that thrilled with the Shadow DOM in general and all the shenanigans required to cross from the Light Side t
Modern CSS Tooltips And Speech Bubbles (Part 2) — Smashing Magazine
In Part 1 of this series, Temani Afif explored different CSS techniques to create tooltip shapes. The main challenge was to rely on a single element and create optimized code that could easily be controlled using CSS variables to update the size, shape, and position of the tail. In this second part, you are going explore more shapes. I hope you were able to spend time getting familiar with the tec
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Rolling the Dice with CSS random()
6 CSS Snippets Every Front-End Developer Should Know In 2025 · January 19, 2025