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増やしているので、その部分がボーダーのように表示されます。

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

Multi-level push menuサイドに開閉できるナビゲーションを実装できるjQueryプラグイン「Multi-level push menu」前のページ

MacでDockの表示・非表示を自動にする設定方法次のページDockの表示・非表示を自動

関連記事

  1. CSSだけで実装できるスニペット

    CSS

    CSSのコードだけで実装できるWebデベロッパーのための28のスニペット

    とてもよさそうなまとめですね。CSSのコードだけで実装できるWebデベ…

  2. nth-child()とnth-last-child()

    CSS

    CSSのnth-child()とnth-last-child()の使い方をまとめてみる

    毎回使おうとする度に記憶が曖昧になっちゃってるんでここにまとめておこう…

  3. CSSで上下の要素を入れ替えて配置させるやり方

    CSS

    CSSのレイアウトで上下の要素を入れ替えて逆に配置させるやり方

    CSSでレイアウトを組む時に、上下に二つ並んでいる要素を入れ替えて逆に…

  4. Alerts.css

    CSS

    シンプルでピュアなCSSによるアラート実装「Alerts.css」

    Alerts.cssはシンプルでピュアなCSSを使ったアラートを実装で…

  5. CSS Only Fab Icon Menu

    CSS

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

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

  6. CSSでテキストを縦にするやり方

    CSS

    CSSでテキストを縦の位置にするやり方

    ちょっと便利そうだったのでメモがてらご紹介。CSSでテキストを縦の位置…

最近の記事

  1. オータムスイートポテトフラペチーノ
  2. 紅葉
  3. ナノケア EH-NA0E
  4. スターバックス コロンビア サンタンデール

アーカイブ

PAGE TOP