CSSで実装した斜めのラインがギザギザになってしまうのを回避し、滑らかなラインで実装するテクニック | コリス

2019/11/26 179 users コリス シャキ SVG CSS テクニック

CSSで斜めのラインを実装する時は、ちょっとした工夫が必要です。 画像やSVGでなく、CSSで実装すると角度やカラーを変更できる利点がありますが、斜めのラインがジャギってギザギザになってしまうことがあります。 CSSグラデーションで実装した斜めのラインがギザギザになってしまうのを回避し、すっきりとした滑らかな... 続きを読む

CSSグラデーションで作った背景パターンのサンプル | NxWorld

2015/11/27 283 users NxWorld サンプル 背景パターン

CSSのグラデーションはよく見る単純なグラデーションを作るだけでなく、記述の仕方によって様々な見栄えをつくることができます。画像で切り出してしまった方が圧倒的に早く実装できるような場合も正直ありますし、古いIEをサポートするために使えなかったりもしましたが、最近では旧ブラウザをサポート対象外にすることも多くなってきましたし、今後ますますレスポンシブやRetinaディスプレイなどを考慮して使う機会が... 続きを読む

[CSS]シンプルなスタイルシートで書かれたグラデーションを使ったかっこいい背景のテクニック -Cool Gradient | コリス

2014/07/10 112 users コリス radial-gradient CSS テクニック

ブラウザいっぱいの背景や小さいサイズのパネルにも使える、CSSグラデーションを使った背景テクニックを紹介します。画像の使用はもちろん一切無しです。 ヴィンテージのディスプレイみたいで、面白い演出ができそうですね。 デモは「radial-gradient」を使用しているため、モダンブラウザでご覧ください。IEは10+で。 Cool Gradient 実装は非常にシンプル、コピペで簡単に利用できます。... 続きを読む

[CSS]クロスブラウザ対応、CSSグラデーションを使ったボタンの実用的な実装方法 | コリス

2011/02/02 322 users コリス border-radius text-shadow

ボタンにはborder-radius, box-shadow, text-shadowなどCSS3がふんだんに使用されていますが、グラデーションはIEでも適用されます。ホバー時のキャプチャ実装のポイントスケラｰビリティ文字のサイズを変更するとボタンのサイズもそれに合わせて拡大・縮小アジャスタビリティpadding, font-sizeを変更することでサイズ調整可能フレキシビリティあらゆるHTML要... 続きを読む

hail2u.net - Weblog - CSSグラデーションのちょっとしたテクニック #2

2009/12/20 350 users エントリ グラデーション Weblog hail2u.net

前回のエントリのような応用するための基本というものではなく、CSSグラデーションはこういう使い方もできるよ的なもので３つ。普通のグラデーションの作り方はcss gradients in Firefox 3.6とかで。#3はない。 以下プレビュー画像のリンク先がデモ・ページになっているのでそちらも参照のこと。もちろん対応ブラウザのFirefox 3.6とSafari 4やChrome 4以降でないと... 続きを読む