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. CSS3を使ったツールチップ

    CSS

    CSS3を使ってアニメーションするツールチップを実装するコード

    これすごくよかったのでメモがてらエントリー。CSS3を使ってアニメーシ…

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

    CSS

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

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

  3. (cs)spinner

    CSS

    CSSだけでミニマルなローディングアニメーションを実装できる「(cs)spinner」

    CSSだけでローディングアニメーションを実装できる「(cs)spinn…

  4. Epic Spinners

    CSS

    CSSによる素敵なスピナーコレクション「Epic Spinners」

    Epic SpinnersはCSSで作成された素敵なスピナーコレクショ…

  5. Media Queriesの@media
  6. CSS

    WebデザインのためCSSエフェクトを実装できる5つのライブラリ

    とても役立ちそうなまとめだったのでメモがてらご紹介します。Webデザイ…

最近の記事

  1. サーモンアボカドサラダラップとドリップ
  2. 猿田彦フレンチ
  3. Zarigani Curry 挽肉のカレー ゴーダチーズとピクルスを添えて
  4. ビジネスホテル
  5. ドリップコーヒー

アーカイブ

PAGE TOP