CSSでborderにグラデーションをかけたようにする

CSS

CSSでborderにグラデーションをかけたようにするやり方

CSSでborderにグラデーションを直接かけたいんですが、なんかできそうもないっぽいので背景のグラデーションをボーダーっぽく見せるやり方です。画像を使うよりも色々と応用が効くので覚えておきたいですね。

[ads_center]

CSSの設定

ここでは以下のHTMLを使います。

<h1><a href="#">sample text</a></h1>

CSSはこんな感じです。

h1 {
	background: -webkit-linear-gradient(left, #000, #fff);
	background:    -moz-linear-gradient(left, #000, #fff);
	background:      -o-linear-gradient(left, #000, #fff);
	background:         linear-gradient(to right, #000, #fff);
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#ffffff', GradientType=1)";
	padding: 1px 0;
}

a {
	background: #fff;
	color: #000;
	text-decoration: none;
	display: block;
}

Chromeで見てみると以下のように表示されます。

CSSグラデーション

仕組みとしては、h1の背景に左から右へグラデーションがかかっており、その上に白の背景を持ったaが重なっているようなイメージです。で、h1のpaddingのtopとbottomを1px増やしているので、その部分がボーダーのように表示されます。

なかなか手軽にできるのでオススメです。

関連記事

  1. li要素の折り返したテキストを揃える

    CSS

    li要素のテキストを折り返した時に頭文字の余白を揃えるやり方

    またどこかで使いそうな感じがしたので記録として残しておきます。ulのl…

  2. CSSグラデーションジェネレーター「Gradientoo」

    CSS

    直感的な操作感!CSSグラデーションを作成できるジェネレーター「Gradientoo」

    CSSのグラデーションを作成できる素敵なジェネレーター「Gradien…

  3. CSSで文字の長さに合わせる

    CSS

    CSSで文字の長さにwidthを合わせてbacgroundやborderを表示させるやり方

    CSSでブロック要素のwidthを文字の長さに合わせるやり方をご紹介し…

  4. CSS Only Fab Icon Menu

    CSS

    CSSで実装できるコンパクトで可愛いメニュー「CSS Only Fab Icon Menu」

    CSS Only Fab Icon MenuはCSSによるコンパクトで…

  5. 動画をレスポンシブにするCSS

    CSS

    動画をレスポンシブに対応させるCSSのTipsがとても便利

    以前、YouTubeやVimeoからの埋め込み動画をレスポンシブにする…

  6. 背景画像のロゴをRetinaに対応させるCSS

    CSS

    背景画像のロゴをRetinaディスプレイに対応させるCSSのやり方

    背景画像のロゴをMacのRetinaディスプレイに対応させるCSSのや…

最近の記事

  1. CITTA TT5.0
  2. Kindle Oasis
  3. OWL-WDDESK01
  4. ワンタッチ着脱フィルターキット

アーカイブ

PAGE TOP