鹿野壮 Takeshi Kano's banner

鹿野壮 Takeshi Kano

@tonkotsuboy_com • 19,866 subscribers

Staff Product Engineer @ubie_ai / 『TypeScriptコードレシピ集』『JavaScriptコードレシピ集』著者 / 九州大学芸術工学部音響設計学科卒 / CSSNite ベストセッション / 登壇・執筆・技術相談はDMへ / https://t.co/kCQ7f2HVGV

Shorts

毎年クリスマスには、いいお肉を買ってきてローストビーフをデプロイしている。今年は日本橋今半でモモブロックを買い、塩・胡椒・すりおろしにんにくを刷り込み一晩寝かし、65度で1:45低温調理した。柔らかく、美味しすぎて口から日本橋が出そうだった。ソースはGitHubです。 #カノメシ

毎年クリスマスには、いいお肉を買ってきてローストビーフをデプロイしている。今年は日本橋今半でモモブロックを買い、塩・胡椒・すりおろしにんにくを刷り込み一晩寝かし、65度で1:45低温調理した。柔らかく、美味しすぎて口から日本橋が出そうだった。ソースはGitHubです。 #カノメシ

912,405 просмотров

:has()、CSS Grid、CSS変数を組み合わせたチェックボックス表現を作った✅ label { display: grid; --selected: 0; grid-template-columns: auto calc(var(--selected) * 24px); } label:has(:checked) { --selected: 1; } 2列の行列を作っておき、2列目の幅をCSS変数--selected×24pxにしておく。--selectedの初期値は0なので、2列目幅は0。子孫要素がチェック状態になるのを:has()でキャッチし--selectedを1にすると、行列2列目が24pxになりチェックボックスが表示される。参考: #CSS #cssnite #朝までマークアップ

:has()、CSS Grid、CSS変数を組み合わせたチェックボックス表現を作った✅ label { display: grid; --selected: 0; grid-template-columns: auto calc(var(--selected) * 24px); } label:has(:checked) { --selected: 1; } 2列の行列を作っておき、2列目の幅をCSS変数--selected×24pxにしておく。--selectedの初期値は0なので、2列目幅は0。子孫要素がチェック状態になるのを:has()でキャッチし--selectedを1にすると、行列2列目が24pxになりチェックボックスが表示される。参考: #CSS #cssnite #朝までマークアップ

33,703 просмотров

Videos

Anya Rossi

sweetdream.ai

SweetDream.ai•Sponsored•Livecam

Watch Anya Live

Anya is streaming live right now! Join her private show and enjoy exclusive content.

Exclusive private shows

1.2k viewers online

Private Show

Join now for exclusive access

Free preview available • Premium content

CursorのVisual Editor（ビジュアルエディター）を早速使ってみたら、エグかった😱 1. Figma UIでデザインを編集。paddingの調整・グラデーションの変更など 2. Applyを押す 3. コードがそのまま実現💐 「Figmaで描いた絵を再現する」時代から「Figmaである程度デザインを作って、Cursor上で最終成果物を直接いじってAIにコードを書かせる」時代になった。なお、ビジュアルエディターのUIはどうみてもFigmaです。ありがとうございます #Figma #Cursor

CursorのVisual Editor（ビジュアルエディター）を早速使ってみたら、エグかった😱 1. Figma UIでデザインを編集。paddingの調整・グラデーションの変更など 2. Applyを押す 3. コードがそのまま実現💐 「Figmaで描いた絵を再現する」時代から「Figmaである程度デザインを作って、Cursor上で最終成果物を直接いじってAIにコードを書かせる」時代になった。なお、ビジュアルエディターのUIはどうみてもFigmaです。ありがとうございます #Figma #Cursor

鹿野壮 Takeshi Kano

198,227 просмотров • 7 месяцев назад

「Kanary」が良すぎる🐲 ありがとう、 Kenn Ejima さん

「Kanary」が良すぎる🐲 ありがとう、 Kenn Ejima さん

鹿野壮 Takeshi Kano

29,739 просмотров • 1 месяц назад

今日リリースされたCursor 2.0のマルチエージェント、私が本当に求めていたものだ。超わかりやすいUI。これだよこれ感がすごい。

今日リリースされたCursor 2.0のマルチエージェント、私が本当に求めていたものだ。超わかりやすいUI。これだよこれ感がすごい。

鹿野壮 Takeshi Kano

41,734 просмотров • 9 месяцев назад

CSSの「cqw」単位がアツい💐 コンテナクエリのコンテナ幅を基準とした横幅です。「font-size: 20cqw」と指定すれば、コンテナに対して必ず全角5文字になるフォントサイズを指定できます🥰 中心のテキストが親に対して必ず5文字サイズになるメインビジュアルデモを作った。イマドキCSS2024は12/6（金）開催！ #イマドキCSS

CSSの「cqw」単位がアツい💐 コンテナクエリのコンテナ幅を基準とした横幅です。「font-size: 20cqw」と指定すれば、コンテナに対して必ず全角5文字になるフォントサイズを指定できます🥰 中心のテキストが親に対して必ず5文字サイズになるメインビジュアルデモを作った。イマドキCSS2024は12/6（金）開催！ #イマドキCSS

鹿野壮 Takeshi Kano

69,198 просмотров • 1 год назад

先日のCSS Niteで好評だったキラキラ✨カードアニメーションの作り方とコードを公開します。 1. conic-gradientでグラデーション 2. propertyでグラデーションの開始角度をアニメーション 3. background-clipとbackground-originでborder部分だけグラデーション 4. 完成デザインは Eri Matsushita 松下絵梨が作ってくださいました。 #イマドキCSS

先日のCSS Niteで好評だったキラキラ✨カードアニメーションの作り方とコードを公開します。 1. conic-gradientでグラデーション 2. propertyでグラデーションの開始角度をアニメーション 3. background-clipとbackground-originでborder部分だけグラデーション 4. 完成デザインは Eri Matsushita 松下絵梨が作ってくださいました。 #イマドキCSS

鹿野壮 Takeshi Kano

38,401 просмотров • 1 год назад

Больше нет контента для загрузки