CSSのスゴ技！美しいグラデーションのボーダー、角丸や半円のテクニックを使用したチケットを実装する方法

CSSで実装された美しいグラデーションのボーダー、さらにはそれを角丸し、半円を加えたチケットを実装するスタイルシートのテクニックを紹介します。 グラデーションのボーダーは割と簡単に実装できますが、角丸にするのは目から鱗でした。また、簡単なJavaScriptで3Dも再現されています。 Gradient borders with curves and 3d movement in CSS by Medhat Dawoud 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 1. チケット自体の構築 2. グラデーションのボーダーを実装 3. 左右の半円を実装 4. カーソルの動きに応じたアニメーションを実装 この実装で学んだこと はじめに 2020年10月27日にNext.jsの初のグローバルユーザーカンファレンスが開催され

[coliss]

Next.jsのカンファレンスで使用されているチケットを実装するテクニックを解説。

[moto_motosaka]

なんだろう言語化できないこの否定的な気持ち

[metatrading]

すごち

[kiyo_hiko]

すごいな最近のCSS

[radicode]

[]CSSのグラデーションボーダーや半円を利用したチケット風デザインの作り方😌✨ 構造から丁寧に解説されているのでとても勉強になりますね✨

[kagioo2uma]

はー、もうこんな形をCSSで描けるようになっちゃうのね

[Shisama]

Next.js conf のチケットの実装

[ponpon_qonqon]

すげえ！まるで1ドット画像とTABLEタグを駆使したみたいなワザだぜ！