個人的に役立ったデザイン素材やTips、WEBサービス、役立つグッズ、あれやこれやをご紹介

切れ込みの入ったリボン型のナビゲーションをCSS3だけで実装する方法

切れ込みの入ったリボン型のナビゲーションをCSS3だけで実装する方法をご紹介します。
リボン関連については便利なジェネレーターが揃っていますが、CSSプロパティーを知る上でも勉強になるのでご紹介します。

HTMLでマークアップ

ナビゲーション部分をHTMLでマークアップします。
idは”navigation”にしておきます。

CSSでスタイリング

CSSでスタイリングしていきます。

メニューを水平に並べる

まずはメニューを水平に並べます。
li要素に対してdisplay:block、float:leftを適用します。

次のようになります。
切れ込みの入ったリボン型のナビゲーションをCSS3だけで実装する方法

文字にドロップシャドウのエフェクトをかける

文字にエフェクトをかけます。
text-shadowを利用して、ドロップシャドウのエフェクトをかけます。

次のようになります。
切れ込みの入ったリボン型のナビゲーションをCSS3だけで実装する方法

マウスオーバー時のエフェクトを設定する

マウスオンしたときに、少しだけズレるようになエフェクトを付けたいので、margin-bottomを設定します。

リボン部分を作成します

リボン部分を作成するには、全体を合計6つのdiv要素を追加する必要があります。
メニュー部分自身、リボン本体部分、右エッジ部分2つ、左エッジ部分2つの合計6つです。
順番に見ていきます。

全体をdivで囲む

メニュー部分全体をdivで囲み、id=”navigation_container”とします。

この#navigation_containerにCSSを適用します。

本体部分を作成するため、もう一度、内側をdivで囲む

さらに、内側をもう一度divで囲み、class=”rectangle”とします。
この部分はリボンの本体部分となります。

.rectangleにCSSを適用します。

次のようになります。

切れ込みの入ったリボン型のナビゲーションをCSS3だけで実装する方法

リボンのエッジ部分を作成する

リボンのエッジ部分を作成するため、div要素を追加します。
それぞれ左のエッジ部分の上下、右のエッジ部分の上下に合計で4つのdivを追加します。

まずリボンのエッジ上部分から。
エッジ部分に対して、boder-widthプロパティを加えます。
border-widthは50pxとします。
この値がリボンのエッジ上部分の大きさになります。
これに対して、heigthとwidthを0pxにしていることにご注目。
この値をheight,widhtともに50pxとすると以下のようになります。
(わかりやすくするため、リボン本体部分は色を透明にしています)
切れ込みの入ったリボン型のナビゲーションをCSS3だけで実装する方法

heigthとwidthを0pxにすることによって、以下のような形になります。
ボーダーだけになっている様子がわかります。
切れ込みの入ったリボン型のナビゲーションをCSS3だけで実装する方法

ここで、border-colorの上部分以外(青と黄色になっている部分)をtransparent=透明にすれば、二等辺三角形を形作ることができます。
切れ込みの入ったリボン型のナビゲーションをCSS3だけで実装する方法

さらに、float:leftで本体を回りこませます。
切れ込みの入ったリボン型のナビゲーションをCSS3だけで実装する方法

下部分も同じ要領で作成しますが、floatの値が変わっていることに注意してください。
位置をずらすことで、上と下の三角形を重ね合わせて、リボンのエッジ部分になります。
わかりやすく色を変えると以下のようになります。
切れ込みの入ったリボン型のナビゲーションをCSS3だけで実装する方法

最後に、エッジ部分を左にずらして、リボン本体の下に隠して、リボンのエッジを表現しています。
切れ込みの入ったリボン型のナビゲーションをCSS3だけで実装する方法

右部分も同じように指定します。

切れ込みの入ったリボン型のナビゲーションをCSS3だけで実装する方法

これで完成です!
切れ込みの入った リボン型ナビゲーションを CSS3だけで実装する方法

ここはでは、「How to Create a Modern Ribbon Banner Navigation Bar with Pure HTML/CSS3」を参考に作成しました。

お役に立てましたら、以下どれでも結構のですので、ポチリと……。

  • 0
  • 0
  • 0
  • 1

Amazonアソシエイト・プログラム規約による記載
当サイトはamazon.co.jpを宣伝しリンクすることによってサイトが紹介料を獲得できる手段を提供することを目的に設定されたアフィリエイト宣伝プログラムである、Amazonアソシエイト・プログラムの参加者です。

この記事を読んだ人はこんな記事も読んでいます

CSSだけでブルブル震えるエフェクトを簡単実装!CSS Shakeを使ってみた

CSSだけでブルブル震えるエフェクトを簡単実装!CSS Shakeを使ってみた

CSSだけでブルブル震えるエフェクトを簡単実装!CSS shakeを使ってみた すでにお気づき

記事を読む

UIのインスピレーションに最適な「UXPorn」

UIデザインのインスピレーションで溢れてる「UXPorn」

サイトやWEBサービスをつくるときにどのようなUIデザインにするかは悩むところですよね。 UIをつ

記事を読む

CSS3を知らなくてもOK!便利すぎるCSS3関連ツール&ジェネレーター51

CSSを入力するときには、細かいプロパティを覚えていないと、作業がなかなかはかどりません。 特に、

記事を読む

JSを使わずにCSSだけで簡単にシンプルなパララックス効果をつける方法

JSを使わずにCSSだけで簡単にシンプルなパララックス効果をつけられる方法をご紹介します。 パララ

記事を読む

プログラミング・コーディングの作業効率UP!ミスを激減させる見やすいフリーフォント18

プログラミングやコーディングするとき、どんなフォントを使っていますか? 私の場合、Coda 2とい

記事を読む

参考にしたい!シンプルで美しいWEBデザイン50(〜2014.02)

2014年2月現在までに公開されているサイトのうち、美しくスッキリしたデザインをコレクションしてみま

記事を読む

UIデザインのリニューアル前と後を比較できるギャラリーサイト「Android UX before and after」

UIデザインのリニューアル前と後を比較できるギャラリーサイト「Android UX before and after」

UIデザインのリニューアルの前と後をひと目で比較できるギャラリーサイトをご紹介します。 Googl

記事を読む

twitterでのキーワードのひろがりを調べられるツール「twimp」

twitterでのキーワードのひろがりを調べられるツール「twimp」

twitterでのキーワードのひろがりを調べられるツール「twimp」をご紹介します。 作成者した

記事を読む

ブラウザがあればOK!コードを即実行・確認できるツール

ブラウザでプログラミング!ブラウザでコードが書けて実行・確認できるサービス14

ブラウザでコードが書けて実行・確認できるサービスをご紹介します。 サイトを実際に公開する前にテスト

記事を読む

激易!YouTubeなどの動画やGoogleMapsをコピペだけでレスポンシブ化「Embed Responsively」

激易!YouTubeなどの動画やGoogleMapsをコピペだけでレスポンシブ化「Embed Responsively」

YouTubeやViemoなどの動画、あるいはGoogleMapsをコピペだけでレスポンシブ化できて

記事を読む