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
A complete guide to iconography
Icons are a crucial part of any design system or product experience. Icons help us quickly navigate. They are language-independent. And best of all: they're real tiny, so they don't take up very much real estate. Icons are a fundamental part of a good design system and are very helpful for marketing materials. They’re the foundational building block of illustrated content, but they are also highly
Making noisy SVGs — Daniel Immke
Addendum Dec 7, 2023 One of my ongoing fixations with the web is how improvements in technology inform web design. In an earlier post this year I wrote about my theory that the increasing pixel density of displays galvanized the shift from photography to vector illustrations in the early to mid 2010s. In recent years there has been a design trend that runs counter to this. Illustrations still rule
SVG Tutorial - Learn how to code images in HTML with SVG
How to Draw a Clock with SVG and JavaScript that Shows the Actual Time
Making SVG Loading Spinners: An Interactive Guide | fffuel
Drawing a CircleWe start by defining our workspace. The viewBox attribute controls the coordinate system. Here, 0 0 800 800 sets the origin at the top-left corner with a width and height of 800 units each. We then create a circle element. The cx and cy attributes position the center of the circle at 400 units along both the x and y axes. A radius (r) of 200 units and a stroke width of 40 units giv
CSS Masking
In the design world, masking is a popular technique to achieve unique design effects. As a designer, I’ve used it many times, but my usage of it on the web is rare. I think that the reason that kept me from not using a CSS mask is the browser support, they are partially supported in blink browsers (Chrome and Edge) and fully supported in Safari and Firefox. The great news is that CSS masking will
A Guide To Keyboard Accessibility: JavaScript (Part 2) — Smashing Magazine
This article is the second of two parts about a guide to making websites accessible to keyboard users. Here Cristian Diaz covers a toolset on JavaScript that you can mix into different components to create a great experience for keyboard users. In the previous article, we talked about how to improve accessibility for keyboard users using HTML and CSS. Those languages can do the job most of the tim
最速でゆっくり Figma最新機能紹介 〜Section編 GroupやFrameとの違いとは〜 | さくらのナレッジ
Group, Frame, Sectionの挙動の違いを学ぼう この項では、紛らわしいGroup, Frame, Sectionの違いについて整理していきましょう。まずはGroupの挙動を確認します。Groupは先に述べたとおり、グルーピングした要素の一括処理を担っています。 Groupの機能と役割 先程、Groupには２つの機能があるとご紹介しました。その１つ目は子要素のプロパティ一括変更です。以下の動画では、Groupレイヤーを選択することで、子要素に対して一括してプロパティ変更を行っています。 Groupで子要素のプロパティを一括で変更している様子 2つ目の機能はGroupレイヤー自身へのプロパティ適用による子要素への間接的なデザイン適用です。GroupレイヤーのLayerプロパティを変更して透明度を変更したり、Effectsプロパティを変更することで子要素のレイヤーに一括でドロップ
Building a tooltip component | Articles | web.dev
Building a tooltip component Stay organized with collections Save and categorize content based on your preferences. A foundational overview of how to build a color-adaptive and accessible tooltip custom element. In this post I want to share my thoughts on how to build a color-adaptive and accessible <tool-tip> custom element. Try the demo and view the source! A tooltip is shown working across a va
How to Create Wavy Shapes & Patterns in CSS | CSS-Tricks
The wave is probably one of the most difficult shapes to make in CSS. We always try to approximate it with properties like border-radius and lots of magic numbers until we get something that feels kinda close. And that’s before we even get into wavy patterns, which are more difficult. “SVG it!” you might say, and you are probably right that it’s a better way to go. But we will see that CSS can mak
The Storyblok Next.js Ultimate Tutorial | Storyblok
Scale secure digital services for enhanced customer experiences
Google Analytics UA版が2023年7月でサポート（収集）終了。GA4への移行方法とタイミングをご紹介
アクセス解析ツールといえば、最も利用されているツールの1つが「Google Analytics（GA）」ではないでしょうか。無償ツールなのに本格的な解析ができ、多くのウェブサイトで導入されています。 しかし、実はこのGAが2023年7月に大きな変更があります。現在展開しているバージョンである「Universal Analytics（UA）」版といわれるバージョンのサポート（データ収集）が終了し、その半年後に閲覧も終了となり、最新版の「Google Analytics 4（GA4）」というバージョンへの移行が求められています。 無料ツール故の不親切さ さらにこのバージョンの移行は、自動では行われず、手作業で移行作業をしなければなりません。また、データの移行もないため、これまでに収集してきたデータは2023年以降は見ることができなくなってしまうという、なかなか厳しい処置です。無料ツールとはいえ
What If Our Sliders Actually Slid? — Smashing Magazine
In this article, Jhey Tompkins explores one of GreenSocks’ newest plugins alongside React to create an impractical whimsical spin on a well-known native element: <input type="range"/>. One of my main mantras is using “Creative Coding” to level up your skills. It’s one of the main reasons I have gotten to where I am. But when so much of the web is very “set in its way”, it takes a little more for u
Building a dialog component | Articles | web.dev
Building a dialog component Stay organized with collections Save and categorize content based on your preferences. A foundational overview of how to build color-adaptive, responsive, and accessible mini and mega modals with the <dialog> element. In this post I want to share my thoughts on how to build color-adaptive, responsive, and accessible mini and mega modals with the <dialog> element. Try th
素のJavaScriptだけでアニメーションを実装するWeb Animations API
2022年3月17日 JavaScript Web Animations APIとは、他のライブラリーを使わずにアニメーションを実装できるJavaScriptの仕様です。CSSアニメーションと違い、様々な関数やイベントと組み合わせてより柔軟に、より豊かな表現が可能となります。今回はそんなWeb Animations APIを使ってみましょう！ ↑私が10年以上利用している会計ソフト！ Web Animations APIの基本の書き方 基本的な考え方や構造はCSSアニメーションと同じですが、アニメーションの内容やどう動かすかの指定は、配列やオブジェクトで記述していきます。基本形はこんな感じ： JavaScript 動かす要素.animate(動かす内容, 動きの詳細); 動かす内容（キーフレーム） animate() の第一引数には動かす内容、キーフレームを指定します。CSSと同じ形でプロ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Reality Check Archives - Set Studio
Redirecting to: /vanilla/import-on-interaction
Single Element Loaders: The Bars | CSS-Tricks
Accessible cards
Building Designcember | Articles | web.dev