Loading video...

Video Failed to Load

Go Home

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

clockmaker's profile picture

池田 泰延

30,568 subscribers

50,493 views • 4 months ago •via X (Twitter)

EducationScience & Technology
LIVE

Anya Rossi• Live Now

Private livecam show

0 Comments

No comments available

Comments from the original post will appear here

Related Videos

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

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

池田 泰延

112,756 views • 9 months ago

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

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

池田 泰延

157,899 views • 9 months ago

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

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

Sadao Tokuyama

534,920 views • 1 month ago

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

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

Takumi HASEGAWA (unshift Inc.)

78,220 views • 1 year ago

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

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

池田 泰延

293,025 views • 5 months ago

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

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

yui540

176,747 views • 6 months ago

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

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

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

34,949 views • 6 months ago

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

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

mass

39,911 views • 2 months ago

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

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

米山こうじ

274,503 views • 1 month ago

一日でバイブコーディング？したプレゼンテンプレート（内容は適当な架空のもの）テンプレートも何もなくほぼ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 views • 11 months ago

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

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

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

124,436 views • 1 year ago

HTMLベースのバイブコーディングのゲーム、その手軽さからか、どこか舐められているのが悔しくて、どこまでクオリティ出せるのか日々追求して開発してます！ 絶対にthree js でハイクオリティな3Dゲームは作れると信じてます PULCQでも現在、和風ダークファンタジーのゲーミングシンセ開発中です
0:36

HTMLベースのバイブコーディングのゲーム、その手軽さからか、どこか舐められているのが悔しくて、どこまでクオリティ出せるのか日々追求して開発してます！ 絶対にthree js でハイクオリティな3Dゲームは作れると信じてます PULCQでも現在、和風ダークファンタジーのゲーミングシンセ開発中です

MISOSHITA / ミソシタ

28,197 views • 3 months ago

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

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

大塚実(Minoru OTSUKA)

22,092 views • 1 month ago

HTMLの<details>・<summary>タグで作るアコーディオンUI。今ならCSSだけでも開閉アニメーションが実装可能です。 <details>タグならブラウザ内検索でもキーワードがヒットするので、ユーザビリティーも確保できます。
0:33

HTMLの<details>・<summary>タグで作るアコーディオンUI。今ならCSSだけでも開閉アニメーションが実装可能です。 <details>タグならブラウザ内検索でもキーワードがヒットするので、ユーザビリティーも確保できます。

池田 泰延

69,461 views • 1 year ago

MGS2の大佐がやたらと「度し難い」と言っているので作中のどの無線で言っていたのかまとめてみました。 だいたい雷電が常軌を逸した行動をすると言ってくれるのですが、そういう非道徳的な行動がゲームで出来るのでMGS2は凄いです。今の時代はこういう表現は出来ないですね。
3:55

MGS2の大佐がやたらと「度し難い」と言っているので作中のどの無線で言っていたのかまとめてみました。 だいたい雷電が常軌を逸した行動をすると言ってくれるのですが、そういう非道徳的な行動がゲームで出来るのでMGS2は凄いです。今の時代はこういう表現は出来ないですね。

兵隊

143,212 views • 1 month ago

藤田一己版Zガンダムです 藤田氏が小説版の挿絵として描いたデザインを元に、WR形態に変形するならというifで作りました 変形機構は可能な限り簡素化しています あくまで個人的な推測で作ったものなので、藤田氏ご本人の想定とは異なると思います #Zガンダム
0:41

藤田一己版Zガンダムです 藤田氏が小説版の挿絵として描いたデザインを元に、WR形態に変形するならというifで作りました 変形機構は可能な限り簡素化しています あくまで個人的な推測で作ったものなので、藤田氏ご本人の想定とは異なると思います #Zガンダム

赤檮

128,548 views • 1 year ago

＃トリカンメカ 試作🐓 缶詰形態からニワトリ形態に完全変形！！！ 脚と尾羽と鶏冠は変形ステップで勝手に迫り出してくる構造なので変形が楽になっています。 パーツの動きがダイナミックで変形中のシルエット変移がとても楽しい作品。
0:48

＃トリカンメカ 試作🐓 缶詰形態からニワトリ形態に完全変形！！！ 脚と尾羽と鶏冠は変形ステップで勝手に迫り出してくる構造なので変形が楽になっています。 パーツの動きがダイナミックで変形中のシルエット変移がとても楽しい作品。

赤井キキ　Akai Kiki

521,736 views • 8 months ago

制度を変えないと、もう待ったなしで続かない状況に来ている、ビジュアルで見ると、あらためてその深刻さがわかります。 自分は、状況の違う前時代をただ金科玉条にするのではなく、「未来にとっての良き先例」となれるものを今の時代で実現させて行きたいです。
1:37

制度を変えないと、もう待ったなしで続かない状況に来ている、ビジュアルで見ると、あらためてその深刻さがわかります。 自分は、状況の違う前時代をただ金科玉条にするのではなく、「未来にとっての良き先例」となれるものを今の時代で実現させて行きたいです。

大須賀 淳(スタジオねこやなぎ)

94,659 views • 3 years ago

塩麹サラダチキン 塩麹で鶏むね肉がしっとり美味しい作り置きです。 鶏肉を鍋に直接入れる方法なので、袋が熱で変形するなどの心配もなし！ そしてこれ、茹で汁も鶏のうまみと塩麹でスープとしておいしいので一石二鳥なのです〜！ねぎなどちょこっと野菜をいれても。
1:18

塩麹サラダチキン 塩麹で鶏むね肉がしっとり美味しい作り置きです。 鶏肉を鍋に直接入れる方法なので、袋が熱で変形するなどの心配もなし！ そしてこれ、茹で汁も鶏のうまみと塩麹でスープとしておいしいので一石二鳥なのです〜！ねぎなどちょこっと野菜をいれても。

榎本美沙(料理家/発酵マイスター)

49,240 views • 4 months ago