CSSアメリカンな吹き出しの 見出しを作る
公開日:
:
最終更新日:2014/10/22
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; }
スポンサー
関連記事
-
-
SEOではタイトルが重要。Googleの検索結果表示が変更に
先日から、SEOを意識して各ページの見直しを行っています。 SEOのサイトチェックをするのに、
-
-
CSS 文字の下にラインを入れる
長い文章にノートのように罫線が入っている感じをCSSでやってみました。 CSS .u
-
-
CSS 強調したい文字を枠で囲む
ホームページを作っていると、この部分は強調したいという場合が多くあります。 太字にしたり色を変えた
-
-
個別のHTML, ページごとにCSS, JS, PHPを追加・管理できるプラグイン
先日から、備忘録的にCSSコードをWordpressに記載するようにしていますが、どのような表示にな
-
-
ソースコードを表示するのに便利な「SyntaxHighlighter Evolved」
サイトを作っていると、備忘録的にソースコードを分かるところに残しておきたいということがあります。
-
-
CSS 文字の下にラインを入れる(画像使用)
以前気に入って使用していた、文字の下にラインを入れる方法。 画像を使うのでちょっと凝ったライン
-
-
CSSだけでタブボックスを実装する
今、力を入れているサイトのメニューが増えてきて、自分でもリンク先を探すのに戸惑ってしまう。 そこで
-
-
CSS 回り込み解除(clear)の指定忘れでレイアウトが崩れた
CSSのレイアウト崩れで悩む 昨日から、CSSのレイアウト崩れで悩んでしまった。 「floa
-
-
見出しのデザインを変えてみる
見出しのデザインをいろいろと工夫してみたいと思います。 こんな感じです 囲みの線の色を変
-
-
CSSで画像に枠をつける
いつもつかうCSSなのに、忘れちゃうことがあって、また、ネットで調べなおしたりして時間ばかり掛かって