menu

想像とシンプル/体温を感じるWEBサービス
WEB DISIGNERS Blog

2016/07/11
  • CSS
  • html5

画像を使わずにCSSのみでボーダーにグラデーションをかける方法

bordergradation
画像を使わずにCSSのみでボーダーをグラデーション表現することができます。backgroundのlinear-gradient()関数を利用して透過もできます。

使用方法

DEMO

See the Pen PzJWJY by brightonline (@brightonline) on CodePen.0

HTML

ボーダーを当てる要素を書き込みます。

CSS

基本要素の「.border」には「position: relative;」を設定します。
要素の上にボーダーを引く場合は::before、要素の下にボーダーを引く場合は::afterになります。
「0%と100%」を「背景色と同じ」にする場合と「transparent」に設定する場合とではボーダーの長さが変わります。

ただボーダーを引くよりもかっこいい演出に使用できると思います。背景が暗いページなどではより効果が引き立つと思います。

コメントを残す

メールアドレスが公開されることはありません。




POPULAR POSTS

高機能jQueryスライダー「Slider Pro」の使い方

2016/03/03

HTML要素に背景としてYouTube動画を表示するレスポンシブ対応

2016/02/11

「HTML5」と「CSS」のみで背景動画をフルスクリーンで再生する

2016/04/09

HTML/CSSのみで動きを加えてくれるアニメーション ホバーエフェクト9選まとめ

2016/03/24

NEW ENTRY

HTMLとCSSだけ簡単シンプルなスライダーを実装

2016/08/23

マウスホバーでテキストの色を左からアニメーションで変更するCSSテクニック

2016/07/26

テキストをCSSだけで映画のタイトルのように、ぼかしたブラーの状態から徐々に表示させるテクニック

2016/07/12

画像を使わずにCSSのみでボーダーにグラデーションをかける方法

2016/07/11