*

CSSアメリカンな吹き出しの 見出しを作る

公開日: : 最終更新日:2014/10/22 CSS 見出しのデザイン, CSS備忘録

CSS アメリカンな見出し

アメリカンな吹き出しの 見出しを作る

ちょっとPOPな記事に合いそうな見出しです。

/* 05.アメリカンな(?)吹き出し */
#heading05{
	position:relative;
	padding:5px 20px;
	font:bold 28px/1.6 Arial, Helvetica, sans-serif;
	color:#333;
	background:#fff;
	text-shadow:
		1px 1px 0 #fff,
		2px 2px 0 #999;
	border-top:#333 solid 3px;
	border-bottom:#333 solid 3px;
    background-image: -webkit-gradient(linear, left top, right bottom,
			from(			rgba(255, 255, 255, 0.0)),
			color-stop(0.4, rgba(255, 255, 255, 0.0)),
			color-stop(0.4, rgba(0, 0, 0, 0.1)),
			color-stop(0.6, rgba(0, 0, 0, 0.1)),
			color-stop(0.6, rgba(255, 255, 255, 0.0)),
			to(				rgba(255, 255, 255, 0.0))
			);
	background-image: -webkit-linear-gradient(top -45deg,
			transparent 40%,
            rgba(0, 0, 0, 0.1) 40%,
            rgba(0, 0, 0, 0.1) 60%,
            transparent 60%
			);
	background-image: -moz-linear-gradient(top -45deg,
			transparent 40%,
            rgba(0, 0, 0, 0.1) 40%,
            rgba(0, 0, 0, 0.1) 60%,
            transparent 60%
			);
	background-image: -o-linear-gradient(top -45deg,
			transparent 40%,
            rgba(0, 0, 0, 0.1) 40%,
            rgba(0, 0, 0, 0.1) 60%,
            transparent 60%
			);
	background-image: linear-gradient(to bottom -45deg,
			transparent 40%,
            rgba(0, 0, 0, 0.1) 40%,
            rgba(0, 0, 0, 0.1) 60%,
            transparent 60%
			);
	background-size:4px 4px;
}
#heading05:before{
	content:" ";
	position:absolute;
	top:100%;
	left:24px;
	width:0;
	height:0;
	border-width:12px;
	border-style:solid;
	border-color:transparent;
	border-top-color:#333;
}
#heading05:after{
	content:" ";
	position:absolute;
	top:100%;
	left:28px;
	width:0;
	height:0;
	border-width:8px;
	border-style:solid;
	border-color:transparent;
	border-top-color:#f0f0f0;
	z-index:1;
}

スポンサー

関連記事

css備忘録

CSS 文字の下にラインを入れる

長い文章にノートのように罫線が入っている感じをCSSでやってみました。 CSS .u

記事を読む

SEO

SEOではタイトルが重要。Googleの検索結果表示が変更に

先日から、SEOを意識して各ページの見直しを行っています。 SEOのサイトチェックをするのに、

記事を読む

ESETセキュリティソフト

CSSだけでタブボックスを実装する

今、力を入れているサイトのメニューが増えてきて、自分でもリンク先を探すのに戸惑ってしまう。 そこで

記事を読む

css備忘録

見出しのデザインを変えてみる

見出しのデザインをいろいろと工夫してみたいと思います。 こんな感じです 囲みの線の色を変

記事を読む

css備忘録

CSS 強調したい文字を枠で囲む

ホームページを作っていると、この部分は強調したいという場合が多くあります。 太字にしたり色を変えた

記事を読む

CSS回り込み

CSS 回り込み解除(clear)の指定忘れでレイアウトが崩れた

CSSのレイアウト崩れで悩む 昨日から、CSSのレイアウト崩れで悩んでしまった。 「floa

記事を読む

css備忘録

CSS 文字の下にラインを入れる(画像使用)

以前気に入って使用していた、文字の下にラインを入れる方法。 画像を使うのでちょっと凝ったライン

記事を読む

SyntaxHighlighter Evolved

ソースコードを表示するのに便利な「SyntaxHighlighter Evolved」

サイトを作っていると、備忘録的にソースコードを分かるところに残しておきたいということがあります。

記事を読む

css備忘録

CSSで画像に枠をつける

いつもつかうCSSなのに、忘れちゃうことがあって、また、ネットで調べなおしたりして時間ばかり掛かって

記事を読む

CSS&javascript

個別のHTML, ページごとにCSS, JS, PHPを追加・管理できるプラグイン

先日から、備忘録的にCSSコードをWordpressに記載するようにしていますが、どのような表示にな

記事を読む

スポンサー

スポンサー

鼻うがいで上咽頭炎が改善
鼻うがいから1ヶ月

前回、鼻うがいを始めた記事を書きましたが、あれから毎日欠かさず起きた時

鼻うがいで慢性鼻炎の苦しみが激減(もうなんでもやります)

待ちに待った製品が届いたよ♪ 洗浄剤のサーレも! [a

鼻うがいで慢性鼻炎の苦しみが激減(もうなんでもやります)

辛いスパイラルにハマり始めた私・・・ 本を読んで、上咽頭のBスポットを

鼻炎 鼻の奥の乾燥
鼻うがいで慢性鼻炎の苦しみが激減(苦しんでた状態編)

こんにちは。 ずいぶんと久しぶりの更新です。 その間も、右鼻奥の鼻炎で

キャリアコンサルタント 口頭試問対策
キャリアコンサルタント国家試験 口頭試問対策

こんにちは。 キャリアコンサルタント試験のロールプレイング試験の実技

→もっと見る

  • 2019年8月
    « 2月    
     1234
    567891011
    12131415161718
    19202122232425
    262728293031  
PAGE TOP ↑