個人的に役立ったデザイン素材や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アイコン500+

アイコンはCSSの時代へ!?こんなにある無料のCSSアイコン500+

CSSだけ作られたアイコン(ピュアアイコン)をご紹介します。 アイコン制作手法も様変わりを見せてお

記事を読む

無料で商用利用可のレスポンシブ/HTML5対応のテンプレートをまとめてくれている「HTML5 UP」

無料テンプレートを探すとき、どういう基準で探していますか? レスポンシブ対応? HTML5対応?

記事を読む

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

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

記事を読む

デザインのヒントはここに!海外の人気ブログで評価の高かった2013年のWEBデザイン60

新年を迎え、2013年のまとめ的な記事が海外ブログでも続々とアップされています。 そんななかから今

記事を読む

いまさら聞けない無料のアイコンフォントの導入の仕方・使い方

アイコンフォントを今頃になってようやく使ってみました。 最初は正直よくわからず、戸惑ってしまいまし

記事を読む

今さら聞けない!作業時間を短縮するChrome用ショートカットベスト・コレクション

ブラウザはChromeを使ってます。 そのChromeでサイトを制作したり、ブログを書いたりしてい

記事を読む

無料で利用できる検索フォーム12(CSS3,HTML5,jQuery)

検索フォームはサイトに欠かせない重要な要素の1つになっています。 最近では、アニメーションを用いた

記事を読む

画像を使わずにCSSとWEBフォントを利用してアイコンボタンをつくる方法

アイコンに画像を利用せず、WEBフォントとCSSを使って表現する方法が徐々に増えています。 画像を

記事を読む

SVGベースのオリジナルなシームレスパターンを作ってダウンロードできる「Plain Pattern」

SVGベースのオリジナルなシームレスパターンを作ってダウンロードできる「Plain Pattern」

今回ご紹介するのはSVGベースのシームレスパターンを簡単につくれて、PNG形式でダウンロードできてし

記事を読む

使える!2015年時点で最高の無料HTMLフリーテンプレート50+

使える!2015年時点で最高の無料レスポンシブ用フリーテンプレート50+

2015年時点で最高の無料レスポンシブ用フリーテンプレートをご紹介します。 今回ご紹介する無料のH

記事を読む