Video yükleniyor...

Video Yüklenemedi

Ana Sayfaya Dön

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

clockmaker's profile picture

池田 泰延

31,496 subscribers

51,860 görüntüleme • 7 ay önce •via X (Twitter)

EğitimBilim & Teknoloji
LIVE

Anya Rossi• Live Now

Private livecam show

0 Yorum

Yorum bulunmuyor

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

Benzer Videolar

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

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

池田 泰延

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

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

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

池田 泰延

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

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

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

池田 泰延

208,338 görüntüleme • 1 yıl ö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

HTMLを直接3Dの質感として描画できる新機能「html-in-canvas」 複雑な操作画面をWebブラウザの標準機能でそのまま3D空間へ配置できます。 現在はChromeの試験運用機能ですが、Web3DのUI制作を劇的に効率化する可能性を秘めた期待の技術です。
0:26

HTMLを直接3Dの質感として描画できる新機能「html-in-canvas」 複雑な操作画面をWebブラウザの標準機能でそのまま3D空間へ配置できます。 現在はChromeの試験運用機能ですが、Web3DのUI制作を劇的に効率化する可能性を秘めた期待の技術です。

Sadao Tokuyama

538,093 görüntüleme • 5 ay önce

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

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

Takumi HASEGAWA (unshift Inc.)

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

HTMLベースのバイブコーディングのゲーム、その手軽さからか、どこか舐められているのが悔しくて、どこまでクオリティ出せるのか日々追求して開発してます！ 絶対にthree js でハイクオリティな3Dゲームは作れると信じてます PULCQでも現在、和風ダークファンタジーのゲーミングシンセ開発中です 結局ユーザーからしてみたら、バイブコーディングだろうがHTMlのブラウザゲームだろうが、そんなのはクリエイター側の都合でしかなく、ヤバいかヤバくないかだけではあるので、まだまだクオリティ上げられると思ってるので最高クオリティまで調整してリリースしていきたいと思います ＃PULCQ
0:36

HTMLベースのバイブコーディングのゲーム、その手軽さからか、どこか舐められているのが悔しくて、どこまでクオリティ出せるのか日々追求して開発してます！ 絶対にthree js でハイクオリティな3Dゲームは作れると信じてます PULCQでも現在、和風ダークファンタジーのゲーミングシンセ開発中です 結局ユーザーからしてみたら、バイブコーディングだろうがHTMlのブラウザゲームだろうが、そんなのはクリエイター側の都合でしかなく、ヤバいかヤバくないかだけではあるので、まだまだクオリティ上げられると思ってるので最高クオリティまで調整してリリースしていきたいと思います ＃PULCQ

ミソシタ (B2F執行者）

28,270 görüntüleme • 7 ay önce

HTMLの新しいinterestfor属性が便利！ JavaScript無しで、ホバーUIを作れます。
0:23

HTMLの新しいinterestfor属性が便利！ JavaScript無しで、ホバーUIを作れます。

池田 泰延

294,212 görüntüleme • 8 ay önce

「楽しいUIアニメーション」という名前でYouTubeチャンネルを開設しました。 ちょっとずつ、CSSアニメーションで作ったものや、CSSアニメーションの楽しさを発信していければと思っているでよければ見ていただけたら嬉しいです。
0:35

「楽しいUIアニメーション」という名前でYouTubeチャンネルを開設しました。 ちょっとずつ、CSSアニメーションで作ったものや、CSSアニメーションの楽しさを発信していければと思っているでよければ見ていただけたら嬉しいです。

yui540

179,333 görüntüleme • 9 ay önce

GPT4Vを使って、AIでFigmaのデザインからコードを生成するプラグインを作ってみました！🎉 通常のプラグインと比べ、プロンプトを書くことでnextjs, Tailwind CSS, flutter, swift uiなど様々なコードで出力することができるようになりました🙌 需要ありそうだったら、プラグインとして公開しようと思います。ニーズが気になるので、シェアしてもらえると嬉しいです😇
0:37

GPT4Vを使って、AIでFigmaのデザインからコードを生成するプラグインを作ってみました！🎉 通常のプラグインと比べ、プロンプトを書くことでnextjs, Tailwind CSS, flutter, swift uiなど様々なコードで出力することができるようになりました🙌 需要ありそうだったら、プラグインとして公開しようと思います。ニーズが気になるので、シェアしてもらえると嬉しいです😇

トミー

340,587 görüntüleme • 2 yıl önce

棒があればできるメニューです。体幹周りの動き、肋骨周りの動きが出ると、走りやすさ、足のあげやすさが変わります。今の時代、トレーニングなどで体幹周りの動きが出づらくなってるためこのようなメニューは必須になってくると思います。
1:09

棒があればできるメニューです。体幹周りの動き、肋骨周りの動きが出ると、走りやすさ、足のあげやすさが変わります。今の時代、トレーニングなどで体幹周りの動きが出づらくなってるためこのようなメニューは必須になってくると思います。

松原翔　怪我をしない身体で最高のパフォーマンスを。

34,949 görüntüleme • 9 ay önce

キーケットで初めてトラボ付きキーボードを買った人もいると思うので、ポインティングandタイピング練習アプリです。 コードペンでプログラム公開してるので、そのままHTMLで保存するとローカルでも遊べます。
1:28

キーケットで初めてトラボ付きキーボードを買った人もいると思うので、ポインティングandタイピング練習アプリです。 コードペンでプログラム公開してるので、そのままHTMLで保存するとローカルでも遊べます。

mass

41,397 görüntüleme • 5 ay önce

私の知り合いの方の現場です。 今までは変な日本人が来て怒鳴ったりチャッカマン振り回してる変な人とかいましたが、重機破壊まできました。状況がどんどん悪化していってます。 一刻も早く状況改善していかないと危険です。 ヘイトインフルエンサーたちが扇動した結果、このような事態になってます。
0:46

私の知り合いの方の現場です。 今までは変な日本人が来て怒鳴ったりチャッカマン振り回してる変な人とかいましたが、重機破壊まできました。状況がどんどん悪化していってます。 一刻も早く状況改善していかないと危険です。 ヘイトインフルエンサーたちが扇動した結果、このような事態になってます。

米山こうじ

275,545 görüntüleme • 4 ay önce

一日でバイブコーディング？したプレゼンテンプレート（内容は適当な架空のもの）テンプレートも何もなくほぼCursor上のClaude sonnet4との対話で作りました どうやらメインはNode.jsでNext.js (React)も使ってるぽいけど詳しいことはよくわかってない（丁寧にドキュメントを作ってくれてるのでとても勉強になる） htmlとかcssはわかるのでそのへんだけ手修正した
2:11

一日でバイブコーディング？したプレゼンテンプレート（内容は適当な架空のもの）テンプレートも何もなくほぼCursor上のClaude sonnet4との対話で作りました どうやらメインはNode.jsでNext.js (React)も使ってるぽいけど詳しいことはよくわかってない（丁寧にドキュメントを作ってくれてるのでとても勉強になる） htmlとかcssはわかるのでそのへんだけ手修正した

redjuice

16,583 görüntüleme • 1 yıl önce

mayaでスカートなどひらひら形状を作るとき ①カーブでラインを引いたらロフトしてメッシュを作成 ②カーブの「スムーズ」を適用し上に向かって滑らかに ③３本のカーブで出来ているので形状の変更がしやすいです！ #maya #tips #VRchat
0:29

mayaでスカートなどひらひら形状を作るとき ①カーブでラインを引いたらロフトしてメッシュを作成 ②カーブの「スムーズ」を適用し上に向かって滑らかに ③３本のカーブで出来ているので形状の変更がしやすいです！ #maya #tips #VRchat

Hisakuri (VRChat制作)　3DCGフリーランス

124,778 görüntüleme • 1 yıl önce

ロケットのCGを作成できるWebアプリを開発しました。ロケットの種類は今のところH3-30形態とイプシロンS。ロケットの姿勢や、カメラの向きなどを変えられます。3秒操作しないとUIが消えるので、そこでスクショをどうぞ
0:58

ロケットのCGを作成できるWebアプリを開発しました。ロケットの種類は今のところH3-30形態とイプシロンS。ロケットの姿勢や、カメラの向きなどを変えられます。3秒操作しないとUIが消えるので、そこでスクショをどうぞ

大塚実(Minoru OTSUKA)

22,273 görüntüleme • 4 ay önce

about Kenn Kato ①作詞家、プロデューサー、ときどきギタリスト avex entertainment所属 ②AGEHARIDe株式会社CEO ③言葉で文化を再定義するカルチャーリコンストラクター ④だいのねこさん好きです！（まるまるとののまる） ☆AGEHARIDeのPVができたのでアップします！ ちょっと出しだけどテーマソングも聴いてね。 #ageharide #lightdance
0:30

about Kenn Kato ①作詞家、プロデューサー、ときどきギタリスト avex entertainment所属 ②AGEHARIDe株式会社CEO ③言葉で文化を再定義するカルチャーリコンストラクター ④だいのねこさん好きです！（まるまるとののまる） ☆AGEHARIDeのPVができたのでアップします！ ちょっと出しだけどテーマソングも聴いてね。 #ageharide #lightdance

Kenn Kato

14,283 görüntüleme • 4 ay önce