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, create a random color, or anything you want — all without a
デザイナーの千星（ちぼし）です。 NECKTIE design officeという名前でGRAPHIC / WEB / PRODUCTと領域をはみだしてデザインをしています。 最近いつもお願いしているエンジニアさんとは違う人とWEBの仕事をすることがあって、なかなかこちらの意図が伝わらず、特に文字周りに関してイチから説明しなければいけないことが何度かあったので、noteにまとめることにしました。少し長いですが、フロントエンドのエンジニアさんにはぜひ全文読んでいただきたいです。 この記事ははあくまで「千星が外部のフロントエンジニアさんに依頼するときに注意してほしいこと」がベースになっていますので、レスポンシブの実装方法など違和感がある部分もあるかもしれませんが、ご了承ください。また実装データはIllustratorで製作しています。以前はPhtoshopで製作していましたが、合成フォントをは
"use client"; import { useEffect, useState } from "react"; import { motion } from "motion/react"; let interval: any; type Card = { id: number; name: string; designation: string; content: React.ReactNode; }; export const CardStack = ({ items, offset, scaleFactor, }: { items: Card[]; offset?: number; scaleFactor?: number; }) => { const CARD_OFFSET = offset || 10; const SCALE_FACTOR = scaleFactor ||
Riveってなに？ Riveはリアルタイムでインタラクティブなアニメーションを作成できるツール ReactやFlutterといったフレームワーク向けライブラリを提供 作成したアニメーションを簡単にアプリへ統合できる！ Riveが使われているプロダクト ◆ Duolingo キャラクターの動きやリップシンク（音声に連動した口の動き）をリアルタイムで制御し、学習体験を豊かにしています！ ◆ Notion AIアシスタントの細かな表情や動きをリアルタイムで制御し、対話をより親しみやすく、楽しい体験にしています！ Rive 3つの魅力！ Riveが多くのプロダクトで活用されている理由は、その使いやすさと可能性の広がりにあります。 1. 🤝 デザイナーとエンジニアの連携がスムーズ 従来、デザイナーが作ったアニメーションをエンジニアが再現するには手間がかかりましたが、 Riveではコードでアニメーシ
スコープの下限にスコープのリミット自身を含めるかどうかは議論がありました。スコープのリミット自身を含めたい場合には @scope (.container) to (.inner > *) のように指定することで対応できることから、スコープのリミットを含めない仕様となりました。https://github.com/w3c/csswg-drafts/issues/6577 インラインスタイル @scope ルール HTML 内で <style> 要素を使用してインラインスタイルとして @scope ルールを記述できます。その場合、@scope のルールセットの指定は省略され、<style> 要素の親要素がスコープのルートとなります。なお、スコープのリミットはルートは自動で設定されません。 <main class="main"> <div class="container"> <style> @
CSS の `@layer` ルールは、カスケードレイヤーを宣言するために使用されます。カスケードレイヤーとは、スタイルの優先度をレイヤー（階層）に分けて管理する仕組みです。`@layer` ルールを使用することでスタイルの記述順や詳細度に関係なくスタイルを宣言できるため、新しい形式の CSS 設計を実現することができます。 CSS の @layer ルールは、カスケードレイヤーを宣言するために使用されます。カスケードレイヤーとは、スタイルの優先度をレイヤー（階層）に分けて管理する仕組みです。@layer ルールを使用することでスタイルの記述順や詳細度に関係なくスタイルを宣言できるため、新しい形式の CSS 設計を実現できます。 @layer ルールは CSS カスケーディングレベル 5 で定義されており、以下のように記述します。 /** * レイヤーの優先順位を宣言 * 右側のレイヤーが
<div data-aos="fade-up" data-aos-duration="3000"> </div> <div data-aos="fade-down" data-aos-easing="linear" data-aos-duration="1500"> </div>
はじめに 以下のツイートが500いいねを超えましたので解説記事を書きます。 デモ＆ソースコード CodePen に完成品のデモとソースコードを置いてあります。 グリッチとは 元々は「一過性の障害」という意味ですが、映像の世界ではしばしば「映像の乱れ」という意味で用いられます。ホラーやサイバーなどでよく見られる演出の一つ。 https://www.google.com/search?q=glitch&tbm=isch RGB ずらしとは 色収差、RGB シフト、RGB split (RGB 分割) など、さまざまな言い方がありますが、要するに本来光の三原色である Red、Green、Blue がズレることなく重なって映像を映し出すところ、それがズレた状態で表示されることです。 グリッチエフェクトと一緒に用いたり、場合によっては色ズレも含めてグリッチと言ったりしますので、今回も合わせて実装する
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
