*

CSSでborderにグラデーションを使って、よくある見出しを作る

   

midashi
borderにグラーデーションって、あまり使い勝手がない気もしますが、たまたま見出しとかに使ってみる機会があったのでやってみました。

//HTML
<h1><span>左にグラデーションがあるタイトルです</span></h1>

//CSS
h1 {
	border: 1px solid #B8C3CC;
	padding:20px 20px;
	background: -moz-linear-gradient(top,#FFFFFF 0%,#FDFDFD);
	background: -webkit-gradient(linear, left top, left bottom, from(#FFFFFF), to(#FDFDFD));
}
h1 span {
	padding-left: 16px;
	font-size: 24px;
	position: relative;
}
h1 span:before {
	height: 100%;
	content:"";
	display:block;
	width:6px; /* borderの太さ */
	background: linear-gradient(to bottom, #92C8A1 0%,#3EA158 100%); /* borderのグラデーション */
	position: absolute;
	top:0; /* borderの位置調整 */
	left:0;
}

CSSでborderにグラデーションを使った見出しのサンプル

※ただし、ie7~9まではうまく表示されないので、ie用に対策をするか割りきって切り捨てるか。
スマホで使う場合は、今のとこ問題なさげです。

参考サイト
(K)CSSでborderにグラデーションをかける場合はこうするしかないかな? | web(K)campus

 -design, Web

Sponsored link

Sponsored link

  関連記事

キーボードショートカット

Dreamweaver8でZen-codingを使えるように設定する

会社のソフトがDreamweaver8で、てっきりCS3以降のものしかZen-coding対応してないものだと思ってたら

AndroidでPCサイトを閲覧すると幅が狭まって余白ができる

実機(AQUOS PHONE 206SH)でPCサイトを検証したところ右側にボコっと余白ができる。 ググってるとAndr

数量の入力部分をプルダウン(ドロップダウン)に変更する[カラーミーカスタマイズ]

人生初の入院と手術が無事終わり、今週からお仕事復帰でございます。 さて本題です。カラーミーショップのカスタマイズについて

気軽にブログを始めるなら「Google Blogger」もありかも→配布テーマも意外とあるよ

「Google Blogger」って、一時期やたら聞いてた単語でしたが、今ってどれくらい普及してるんでしょうか? 最近ち

no image

福岡の写真素材サイト

福岡に住んでて、こんな仕事をしている以上は 使いたいけどなかなか無い福岡の写真素材。 これまた会社の方に良い素材サイト教

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です


*

共働きの30代女性。
福岡でWebに携わってます。
主に自分用の細かいメモを書いてます。
細かい内容が多いですが、他の方にも役立つなら幸いです。

確定拠出年金、退職したときに行う手続き(継続するor掛金停止する)

私、昨年から確定拠出年金をしております。 会社には確定拠出年金の制度がなかったので、「個人型年金」の加入者として掛金の拠

実は先月で退職しました

だいぶブログさぼっておりましたが、実は先月末で会社を退職しました。 別にこの歳になって、自主退職したわけじゃないのです。

Thunderbirdのアドオン「QuickText」のテンプレが消えた?時の対処法

後で調べたら、QuickTextで割とよく見られる問題?のようですが、私は今回初めての体験だったので焦りました。 私の場

  • ブログランキング・にほんブログ村へ