Video wird geladen...

Video konnte nicht geladen werden

Zur Startseite

CSS + JSで実現する、Apple WatchっぽいUI。 境界付近でCSSのscaleを変化させるのがポイント。

clockmaker's profile picture

池田 泰延

31,558 subscribers

208,338 Aufrufe • vor 1 Jahr •via X (Twitter)

Wissenschaft & TechnologieBildung
LIVE

Anya Rossi• Live Now

Private livecam show

0 Kommentare

Keine Kommentare verfügbar

Kommentare vom Original-Post werden hier angezeigt

Ähnliche Videos

形状変化で出現する今どきなメニューUI。 HTMLとCSSと、少しのJSで。 HTMLのpopover属性と、 CSSのアンカーポジショニングで作っています。
0:24

形状変化で出現する今どきなメニューUI。 HTMLとCSSと、少しのJSで。 HTMLのpopover属性と、 CSSのアンカーポジショニングで作っています。

池田 泰延

51,860 Aufrufe • vor 9 Monaten

CSSだけでスクロール連動アニメーションを作れる Scroll-driven Animations のジェネレーターを作りました。 設定を変えると、プレビューとCSSが一緒に変わります。 現在開いているブラウザが対応しているかもでます！ #CSS
0:51

CSSだけでスクロール連動アニメーションを作れる Scroll-driven Animations のジェネレーターを作りました。 設定を変えると、プレビューとCSSが一緒に変わります。 現在開いているブラウザが対応しているかもでます！ #CSS

長谷川喜洋★星のソムリエ®/HASEGAWA Yoshihiro

60,029 Aufrufe • vor 4 Monaten

CSSで弾みを加えると ウェブのUIが軽快になります
0:44

CSSで弾みを加えると ウェブのUIが軽快になります

池田 泰延

113,421 Aufrufe • vor 7 Monaten

HTML・CSSで作るメニューUI。 ヒットエリアを▷に拡張することで、マウス操作での使い勝手が良くなります。
0:39

HTML・CSSで作るメニューUI。 ヒットエリアを▷に拡張することで、マウス操作での使い勝手が良くなります。

池田 泰延

80,451 Aufrufe • vor 3 Monaten

もはや現実世界より美しいのではないか？ 3DGSという、ガウス（ドット）の集合によって3Dを表現する技術なのですが、あえてドットを大きくしてピクセルアートっぽくする実験。
0:56

もはや現実世界より美しいのではないか？ 3DGSという、ガウス（ドット）の集合によって3Dを表現する技術なのですが、あえてドットを大きくしてピクセルアートっぽくする実験。

ロマシゲ@DTMオーケストラアレンジ

140,495 Aufrufe • vor 7 Monaten

CSSのeaseで失敗しないコツ。 私の経験則ですが、ウェブのUIには、linearやease-outを避けるのが吉。比較動画で解説します。
0:40

CSSのeaseで失敗しないコツ。 私の経験則ですが、ウェブのUIには、linearやease-outを避けるのが吉。比較動画で解説します。

池田 泰延

20,865 Aufrufe • vor 7 Monaten

デモを作るのに気合を入れすぎてしまってかなり複雑になってしまい、すべてを細かく解説することはできないんですが、実現するための道具と考え方をしっかり解説したいと思います。 デモはこちら↓ アニメーション、インタラクションともにCSSのみで動いています。JSは使っていません。
0:21

デモを作るのに気合を入れすぎてしまってかなり複雑になってしまい、すべてを細かく解説することはできないんですが、実現するための道具と考え方をしっかり解説したいと思います。 デモはこちら↓ アニメーション、インタラクションともにCSSのみで動いています。JSは使っていません。

Takumi HASEGAWA (unshift Inc.)

78,220 Aufrufe • vor 1 Jahr

GPT6 Astraめっちゃ良い デザイナーが作ったものを実現するの大変だったけど、世界観伝えるだけで使えるパーツが出てくる
0:20

GPT6 Astraめっちゃ良い デザイナーが作ったものを実現するの大変だったけど、世界観伝えるだけで使えるパーツが出てくる

ゆうり

343,498 Aufrufe • vor 1 Monat

こちら、Discord Streamkit Overlay のカスタムCSSを作るだけのツールです…！！ （挿入した画像とかはサーバー側に保存されたりしないのでご安心ください🌱） 🔵カスタマイズした値を保存しておいて再利用、とか、CSSから復元、とかも一応できる 🔵この人はこの画像…みたいなのも、UIから設定できるよ 個人的に推しポイントは、PNGダウンロードですね！ CSSをカスタマイズして、角丸とか設定したやつをPNGダウンロード→クリッピングしてアイコンを作る…とかができる！！便利！！！（自分が欲しかっただけ）
2:59

こちら、Discord Streamkit Overlay のカスタムCSSを作るだけのツールです…！！ （挿入した画像とかはサーバー側に保存されたりしないのでご安心ください🌱） 🔵カスタマイズした値を保存しておいて再利用、とか、CSSから復元、とかも一応できる 🔵この人はこの画像…みたいなのも、UIから設定できるよ 個人的に推しポイントは、PNGダウンロードですね！ CSSをカスタマイズして、角丸とか設定したやつをPNGダウンロード→クリッピングしてアイコンを作る…とかができる！！便利！！！（自分が欲しかっただけ）

千歳 愛 / Mana Chitose

64,075 Aufrufe • vor 29 Tagen

Lism CSS v1.0 をリリースしました！🎉 心地よいレイアウトを手軽に組むための軽量なCSSフレームワークです。 明確な設計ルールで実装が一貫するので、人が書くときの迷いも、AIに任せたあとの手直しも減らせます。 全体像を1分でざっくりまとめました👇
0:55

Lism CSS v1.0 をリリースしました！🎉 心地よいレイアウトを手軽に組むための軽量なCSSフレームワークです。 明確な設計ルールで実装が一貫するので、人が書くときの迷いも、AIに任せたあとの手直しも減らせます。 全体像を1分でざっくりまとめました👇

了@Lism

139,257 Aufrufe • vor 1 Monat

Netflixで話題の映画『でっちあげ』 でっちあげが起きているのは映画だけではありません。 国家ぐるみのでっちあげが、この日本で、現実で起きています。 信頼されるべき、文科省が、旧統一教会解散命令の裁判で使用される陳述書の捏造をしています。 映画の世界ではありません。 現実で起きているでっちあげです。
0:56

Netflixで話題の映画『でっちあげ』 でっちあげが起きているのは映画だけではありません。 国家ぐるみのでっちあげが、この日本で、現実で起きています。 信頼されるべき、文科省が、旧統一教会解散命令の裁判で使用される陳述書の捏造をしています。 映画の世界ではありません。 現実で起きているでっちあげです。

えむ

12,101 Aufrufe • vor 9 Monaten

ゲームっぽいポップアップの見せ方のCSSアニメーション
0:20

ゲームっぽいポップアップの見せ方のCSSアニメーション

yui540

59,649 Aufrufe • vor 3 Monaten

UIで遊んでみるCSSアニメーション
0:29

UIで遊んでみるCSSアニメーション

yui540

439,822 Aufrufe • vor 7 Monaten

ゲームっぽい見せ方のCSSアニメーション
0:20

ゲームっぽい見せ方のCSSアニメーション

yui540

30,796 Aufrufe • vor 8 Tagen

UIで遊んでみるCSSアニメーション
0:23

UIで遊んでみるCSSアニメーション

yui540

182,824 Aufrufe • vor 5 Monaten

実写化で漫画の世界感をここまで再現するとは
0:31

実写化で漫画の世界感をここまで再現するとは

グリーン車に憧れてます

50,213 Aufrufe • vor 7 Monaten