MD-Blog_Web Creative

« BACK TO BLOG TOP

ひと手間加えてオイシク仕上げる！ CSS3小ワザまとめサンプルコードを添えて。「見出し編」

2013.11.22 Fri.

Posted by スズキリュウスケ

Hafa Adai！

先週末グアムに行ってきました。海はとても綺麗だったのですが、足元にあるガンガゼ？に気が付かず痛い思いをしました（涙
黒い長い刺のアイツには気をつけましょう...。

さてと今回は、なるべく画像を使わずにCSSだけを使って簡単に綺麗に仕上げる方法を、サンプル付きで紹介していきたいと思います。

...と、書いていたらなんかサンプルが増え過ぎちゃったので、今回、まずは「見出し」に使えそうなものをご紹介しましょう。

01：マーカーを引いたような見出し

株式会社MONSTER DIVE（モンスターダイブ）株式会社MONSTER DIVE（モンスターダイブ）

.ttlMarker {
    display:inline;
    padding:5px;
    background:#34495e;
    color:#fff;
    font-size:2.0rem;
    line-height:1.5;
}

その名もズバリマーカーで強調したような見出しです。
ポイントはdisplay:inline;でしょうか。line-heightで重ならないように調整してみてください。

02：アンダーライン見出し

株式会社MONSTER DIVE

.ttlUnderLine {
    position:relative;
    color:#34495e;
    font-size:2.0rem;
    line-height:1;
}
.ttlUnderLine:before {
    content:"";
    position:absolute;
    left:0;
    bottom:2px;
    width:100%;
    border-bottom:1px solid #34495e;
}
.ttlUnderLine > span {
    position:relative;
    display:inline-block;
    background:#fff;
    z-index:100;
}

文字の終わりから右端まで下線を引いたようなスタイルです。
:beforeで幅100%のラインを生成し、背景に白を敷いた文字ブロックの下に置きます。背景色が複雑な場合は使えません。

03：角を折り返した見出し

株式会社MONSTER DIVE（モンスターダイブ）

.midashi01 {
    position:relative;
    padding:20px 25px 20px 35px;
    background:#ffb53c;
    color:#fff;
    font-size:2.2rem;
    text-shadow:0 0 1px rgba(000,000,000,0.3);
}
.midashi01:before {
    position:absolute;
    top:0;
    left:0;
    display:block;
    content:"";
    border-top:    10px solid #fff;
    border-left:   12px solid #fff;
}

角を折り返したようなスタイルです。
:beforeで左上に要素を生成し、borderを使って左上を白100%（背景色）に、右下を白50%で塗りつぶしています。
折り返し左上を塗りつぶしているため、残念ながら背景が単色以外の場合使えません。折り返し右下はボックスのカラーに白50%を載せているだけなので、ボックスカラーを変更しても変更する必要はありません。

04：水玉アイコンがついた見出し

Pickup株式会社MONSTER DIVE（モンスターダイブ）

.ttlDrop {
    position:relative;
    padding:25px 25px 25px 90px;
    color:#1d7ee2;
    font-size:2.4rem;
}
.ttlDrop .icon {
    position:absolute;
    top:0;
    left:0;
    width:80px;
    padding:34px 0;
    border-radius:200px;
    background:#1d7ee2;
    color:#fff;
    font-size:1.2rem;
    line-height:1;
    text-align:center;
    vertical-align:middle;
    z-index:100;
}
.ttlDrop .icon:before {
    position:absolute;
    bottom:-6px;
    right:0;
    display:block;
    content:"";
    width:40px;
    height:40px;
    border-radius:100px;
    background:#1d7ee2;
    z-index:-1;
}
.ttlDrop .icon:after {
    position:absolute;
    bottom:-8px;
    left:8px;
    display:block;
    content:"";
    width:10px;
    height:10px;
    border-radius:100px;
    background:#1d7ee2;
    z-index:-1;
}

アイキャッチとして水のようなアイコンを置きました。:before/:afterを使い、中・小サイズの水玉を足しています。

05：二重線で囲んだ見出し

株式会社MONSTER DIVE（モンスターダイブ）

.ttlDoubleLine {
    width:100%;
    padding:3px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.ttlDoubleLine > span {
    display:block;
    padding:15px;
    border:4px solid #fff;
    box-shadow:inset 0 0 0 3px #d35400, 0 0 0 3px #d35400;
    color:#d35400;
    font-size:2.0rem;
    text-align:center;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

一つのdivにborderとbox-shadowを使って重ねて、二重線に見えるように表現しています。
二重線の間の白い部分はborderなので背景が単色以外だと使えませんね...。

06：背景にテキストをデザイン風に配置した見出し

株式会社MONSTER DIVE（モンスターダイブ）

.ttlTxtBG {
    position:relative;
    padding:20px;
    background:#ecf0f1;
    color:#2c3e50;
    font-size:2.6rem;
    text-align:center;
    z-index:100;
    overflow:hidden;
}
.ttlTxtBG:before {
    position:absolute;
    top:-15px;
    left:2px;
    content:"TITLE";
    display:block;
    color:rgba(000,000,000,0.05);
    font-family: 'Ubuntu Condensed' sans-serif;
    font-size:10.0rem;
    font-weight:bold;
    letter-spacing: 0.1rem;
    line-height:1;
    -webkit-transform:rotate(-13deg);
    -moz-transform:rotate(-13deg);
    transform:rotate(-13deg);
    z-index:-1;
}

背景にテキストをデザイン的に入れたスタイルです。
content要素で生成しているのでHTMLに影響がありませんし、動的に変更も可能です。

07：立体的な囲みの見出し

A:株式会社MONSTER DIVE（モンスターダイブ）

B:株式会社MONSTER DIVE（モンスターダイブ）

.ttlFrameA {
    width:100%;
    padding-right:8px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.ttlFrameA > span {
    display:block;
    padding:15px;
    box-shadow:inset 0 0,8px 8px 0 -2px #fff, 8px 8px 0 0 #2e8ece;
    background:#2e8ece;
    color:#fff;
    font-size:2.0rem;
    text-align:center;
}
.ttlFrameB {
    width:100%;
    padding-right:8px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.ttlFrameB > span {
    display:block;
    padding:15px;
    border:2px solid #2e8ece;
    box-shadow:inset 0 0,8px 8px 0 -2px #fff, 8px 8px 0 0 #2e8ece;
    color:#1d7ee2;
    font-size:2.0rem;
    text-align:center;
}

囲み枠をずらしたようなスタイルです。box-shadowを2つ重ねて線のように見せています。
枠の分右へ8pxずらしているため、親のDIVで8px余白をとっています。
これも塗りつぶしなので白の部分は透過しません。

08：斜めに歪んだ見出し

株式会社MONSTER DIVE（モンスターダイブ）

.ttlWarp {
    width:100%;
    padding:8px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.ttlWarp > span {
    display:block;
    padding:15px;
    border:2px solid #16a085;
    box-shadow:inset 0 0, 8px 8px 0 0 #16a085;
    background:#fff;
    color:#16a085;
    font-size:2.0rem;
    text-align:center;
    -webkit-transform: skew(-10deg,-3deg);
    -moz-transform: skew(-10deg,-3deg);
    transform: skew(-10deg,-3deg);
}

transformのskewを使用しています。これは要素を傾斜させることが出来ます。
残念ながら、IEには対応しておりません。

09：トンボ風？の見出し

株式会社MONSTER DIVE（モンスターダイブ）

.ttlTombo {
    position:relative;
    display:block;
    padding:15px;
    border:1px dotted #bdc3c7;
    color:#34495e;
    font-size:2.0rem;
    text-align:center;
}
.ttlTombo:before,
.ttlTombo:after,
.ttlTombo > span:before,
.ttlTombo > span:after {
    content:"";
    position:absolute;
    width:7px;
    height:7px;
    background:url(/blog/ex_images/imgcorner7.png) 0 0 no-repeat;
}
.ttlTombo:before {
    top:-1px;
    left:-1px;
-webkit-transform:rotate(0deg);
-moz-transform:rotate(0deg);
    transform:rotate(0deg);
}
.ttlTombo:after {
    top:-1px;
    right:-1px;
-webkit-transform:rotate(90deg);
-moz-transform:rotate(90deg);
    transform:rotate(90deg);
}
.ttlTombo > span:before {
    bottom:-1px;
    left:-1px;
-webkit-transform:rotate(-90deg);
-moz-transform:rotate(-90deg);
    transform:rotate(-90deg);
}
.ttlTombo > span:after {
    bottom:-1px;
    right:-1px;
-webkit-transform:rotate(180deg);
-moz-transform:rotate(180deg);
    transform:rotate(180deg);
}

これだけ画像を使用。
カギカッコのような画像を:befor/:afterで生成、transform:rotateでくるくる回して4隅に配置しています。
画像ブロックを4つ生成しているので、divとspanで囲っています。

10：色見本的な見出し

株式会社MONSTER DIVE（モンスターダイブ）

.ttlGradation {
    border:1px solid #3498db;
    background: #3498db;
    color:#3498db;
    font-size:2.0rem;
}
.ttlGradation span {
    display:block;
    padding:15px 15px 15px 6%;
    background: #fff;
    background: -webkit-linear-gradient(left, rgba(255,255,255,0.0) 0%, rgba(255,255,255,0.0) 1%,   rgba(255,255,255,0.2) 1%,   rgba(255,255,255,0.2) 2%,   rgba(255,255,255,0.4) 2%,   rgba(255,255,255,0.4) 3%,   rgba(255,255,255,0.6) 3%,   rgba(255,255,255,0.6) 4%,   rgba(255,255,255,0.8) 4%,   rgba(255,255,255,0.8) 5%,   rgba(255,255,255,1.0) 5%,   rgba(255,255,255,1.0) 100%);
    background:     linear-gradient(to right,   rgba(255,255,255,0.0) 0%,   rgba(255,255,255,0.0) 1%,   rgba(255,255,255,0.2) 1%,   rgba(255,255,255,0.2) 2%,   rgba(255,255,255,0.4) 2%,   rgba(255,255,255,0.4) 3%,   rgba(255,255,255,0.6) 3%,   rgba(255,255,255,0.6) 4%,   rgba(255,255,255,0.8) 4%,   rgba(255,255,255,0.8) 5%,   rgba(255,255,255,1.0) 5%,   rgba(255,255,255,1.0) 100%);
}

見出しとして背景にグラデーションを敷いてみました。
spanの背景グラデーションに白の透明度を1%ずつずらして指定。親divの背景色に1%幅ずつかぶせます。
もちろんdivの背景色を変更すればグラデーションも変化します。おなじことをbox-shadowでもできますね。insetで。

次回はまた別のサンプルを紹介したいと思います。
Adios！

Recent Entries

MD EVENT REPORT

What's Hot?

株式会社MONSTER DIVE

タグリスト

カテゴリアーカイブ

ひと手間加えてオイシク仕上げる！ CSS3小ワザまとめ サンプルコードを添えて。「見出し編」

01：マーカーを引いたような見出し

02：アンダーライン見出し

03：角を折り返した見出し

04：水玉アイコンがついた見出し

05：二重線で囲んだ見出し

06：背景にテキストをデザイン風に配置した見出し

07：立体的な囲みの見出し

08：斜めに歪んだ見出し

09：トンボ風？の見出し

10：色見本的な見出し

ひと手間加えてオイシク仕上げる！ CSS3小ワザまとめサンプルコードを添えて。「見出し編」