Video yükleniyor...

Video Yüklenemedi

Ana Sayfaya Dön

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

clockmaker's profile picture

池田 泰延

31,558 subscribers

208,338 görüntüleme • 1 yıl önce •via X (Twitter)

Bilim & TeknolojiEğitim
LIVE

Anya Rossi• Live Now

Private livecam show

0 Yorum

Yorum bulunmuyor

Orijinal gönderinin yorumları burada görünecek

Benzer Videolar

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

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

池田 泰延

51,860 görüntüleme • 7 ay önce

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

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

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

60,029 görüntüleme • 2 ay önce

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

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

池田 泰延

113,310 görüntüleme • 5 ay önce

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

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

池田 泰延

79,843 görüntüleme • 1 ay önce

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

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

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

140,495 görüntüleme • 6 ay önce

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

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

Takumi HASEGAWA (unshift Inc.)

78,220 görüntüleme • 1 yıl önce

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

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

池田 泰延

20,865 görüntüleme • 5 ay önce

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

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

ゆうり

338,867 görüntüleme • 12 gün önce

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

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

えむ

12,101 görüntüleme • 8 ay önce

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

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

グリーン車に憧れてます

47,516 görüntüleme • 5 ay önce

HTMLとCSSのみで作る、羽ばたく蝶々。 JS未使用ですが、立体的に動きます。
0:30

HTMLとCSSのみで作る、羽ばたく蝶々。 JS未使用ですが、立体的に動きます。

池田 泰延

112,756 görüntüleme • 1 yıl önce

CSS小技✨ ついにCSSだけで「理想の改行」が完成する💻 ❌ 以前：単語が泣き別れ、ガタガタな行末 ✅ 2026：text-wrapとauto-phraseの合わせ技 見出しはbalance、本文はpretty。 さらに文節を認識して改行位置を自動最適化🎶 この1pxのこだわりがUXを劇的に変える📱 #CSS #Codejump
0:23

CSS小技✨ ついにCSSだけで「理想の改行」が完成する💻 ❌ 以前：単語が泣き別れ、ガタガタな行末 ✅ 2026：text-wrapとauto-phraseの合わせ技 見出しはbalance、本文はpretty。 さらに文節を認識して改行位置を自動最適化🎶 この1pxのこだわりがUXを劇的に変える📱 #CSS #Codejump

ろびー【CSS小技✨】

72,906 görüntüleme • 5 ay önce

断腸の思いで不採用にしたアクションプラン…ようやく陽の目を見ることができました。これが実現していた世界線を未だに夢想する時があります。ぜひ見てやってください🪚 本編では実現させるぞ！！！！！ #HIDARI
0:20

断腸の思いで不採用にしたアクションプラン…ようやく陽の目を見ることができました。これが実現していた世界線を未だに夢想する時があります。ぜひ見てやってください🪚 本編では実現させるぞ！！！！！ #HIDARI

Kimimasa Inazumi

66,535 görüntüleme • 2 yıl önce

「変化の年ですね。今年のテーマは、ま、誠実であり、変化でございます。色々変わっていくその様子を、それを味わえるのはリアルタイムを大事にするVTuber文化ならではだったりするのかなとも思ったりもします」 今日この日に起きた変化を忘れない
0:31

「変化の年ですね。今年のテーマは、ま、誠実であり、変化でございます。色々変わっていくその様子を、それを味わえるのはリアルタイムを大事にするVTuber文化ならではだったりするのかなとも思ったりもします」 今日この日に起きた変化を忘れない

𝑺𝑨𝑰

753,332 görüntüleme • 3 ay önce

スキミアの目の工夫ポイントの紹介です！ RT元と同じ構造で、イラスト的な横顔をなんとか表現したくて実装してます LantanaさんのアバターなどVRCでも同じ様な工夫をされてる方もいらっしゃいますね 3Dっぽさを崩す事ができるので面白いです #Skimmia3D #b3d
1:06

スキミアの目の工夫ポイントの紹介です！ RT元と同じ構造で、イラスト的な横顔をなんとか表現したくて実装してます LantanaさんのアバターなどVRCでも同じ様な工夫をされてる方もいらっしゃいますね 3Dっぽさを崩す事ができるので面白いです #Skimmia3D #b3d

Lat｜ラト

193,007 görüntüleme • 1 yıl önce