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のTipsがとても便利

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

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

    CSS

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

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

  3. Epic Spinners

    CSS

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

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

  4. Alerts.css

    CSS

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

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

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

    CSS

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

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

  6. CSSで背景画像をアニメーションさせる

    CSS

    CSSを使ってテキストに背景画像を設定して背景をアニメーションさせるやり方

    ちょっと個人的にいいなって思ったTipsがあったのでご紹介します。CS…

最近の記事

  1. 10種の野菜と5種のビーンズ サラダラップとドリップコーヒー
  2. EOS RP
  3. COMOLI シルクネルジャケット シルクネルドローストリングパンツ
  4. スターバックス ハシエンダ アルサシア

アーカイブ

PAGE TOP