CSSでこんな実装ができるとは！ 美しい光がきらり✨とボーダーに沿って回転するボタン -Button Shimmer Tricks

2023/05/15 9 users CSS ボーダー 実装 hsl 美しい光

ぱっと見は普通の角丸ボタン、CSSグラーデションで実装された美しい光がきらりとボーダーに沿って回転するボタンを実装したデモを紹介します。 小さなボタンですが、CSSコンテナクエリをはじめ、CSSによるマスク、hsl()の...記事の続きを読む 続きを読む

CSS3で作られたユーザーインターフェイスキット「CSS3 UI Kit」 | DesignDevelop

2012/03/31 28 users DesignDevelop ページング プルダウン CSS3

CSS3は現在広く利用されているCSS 2を拡張したもので、従来のCSSでは表現が難しかったドロップ車道や、角丸など、画像に頼らずに、表現ができ、新しい表現の可能です。今日紹介するのはCSS3で作られたユーザーインターフェイスキット「CSS3 UI Kit」です。 サーチボタン、角丸ボタン、完全な円形のボタン、プルダウン、ページングなどなどユーザーインターフェイスの基本となるパーツがセットになって... 続きを読む

Photoshop風インタフェースで角丸やグラデーションなどのCSS3が生成できるサイト「Layer Styles」*二十歳街道まっしぐら

2011/06/14 45 users CSS グラデーション Layer Styles 正方形 角丸

Layer Styles Photoshop風インタフェースのCSS3生成サイト 「Layer Styles」はPhotoshop風のインタフェースで角丸ボタンのCSS3を生成してくれるサービスです。 正方形がデフォルトで表示されており、 それにグラデーションや影をつけたり、角を丸めることができます。 Photoshopのようなインタフェースで操作できることが特徴。 遊び感覚で使ってみるのも良さそ... 続きを読む

CSSだけでスタイリッシュな角丸ボタンが作れる『Sexy Buttons』が便利そう - IDEA*IDEA ～ 百式管理人のライフハックブログ

2010/02/24 414 users IDEA submit CSS span ライフハックブログ

ちょっと素敵なCSSファイルのご紹介。 このCSSを読み込んで、簡単なマークアップをするだけで簡単にスタイリッシュな角丸ボタンが作れますよ。 ↑ こんなのが一発で作れます。 マークアップは以下のとおり。spanが二つあるのがまぁ、あれですが。 <button class="sexybutton"><span><span><span class="ok">Submit</span></span></... 続きを読む

CSSでWii風のシンプルで角がまるいボタンを作る - GIGAZINE

2007/02/14 341 users GIGAZINE テクニック IE7 IE6 Firefox2

シンプルなWii風の角丸ボタンが簡単に作成できます。IE5.5、IE6、IE7、Firefox2、Opera9で動作確認がされており、2つのタグと画像が1つ、それからCSSファイル1つで構成されています。 作り方は以下から。 Simple Round CSS Links ( Wii Buttons ) これのもとになったのは、以下のページで解説されているCSSのテクニック。いろいろなボタンが作成で... 続きを読む