個人的に役立ったデザイン素材や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アソシエイト・プログラムの参加者です。

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

無料でオリジナルなクイズが作れてしまうツール「QuizGenerator」

無料でオリジナルなクイズが作成できるツール「QuizGenerator」

無料でオリジナルなクイズが、簡単に作成できるツールをご紹介します。 作れるクイズは選択式、穴埋め、

記事を読む

人気のHTML/CSSコードサンプル25+おまけ2 from CodePen

CodePenはHTML,CSS,JSのコードサンプル配布サイトです。 紹介されているコードの種類

記事を読む

プロジェクトにすぐ使えるハイクオリティーなHTML/CSS無料テーマテンプレート集100

プロジェクトにすぐ使えるハイクオリティーなHTML/CSS無料テーマテンプレート集100

HTML/CSS無料テーマテンプレートでハイクオリティーなものがありましたのでご紹介します。 これ

記事を読む

無料で使えるフラットデザインUIキット40

フラットデザインのUIキットをご紹介します。 さまざまなサイトで取り入れられているフラットデザイン

記事を読む

レスポンシブ対応のコンテンツスライダー/スライドショーベスト8

以前の記事「レスポンシブ対応などコンテンツスライダー/スライドショー用jQueryプラグイン50+」

記事を読む

デザインのインスピレーションに最適!パーツ/テーマごとのWEBデザイン見本帳「calltoidea」

WEBデザインのインスピレーションに最適!パーツ/テーマごとのデザイン見本帳「calltoidea」

WEBデザインのインスピレーションに最適なパーツ/テーマごとのWEBデザイン見本帳「calltoid

記事を読む

プログラミング初心者がプログラミングを学ぶのにベストな海外チュートリアルサイト11

プログラミング初心者がプログラミングを学ぶのにベストな海外チュートリアルサイト11

日本でプログラミングを学ぶなら、ドットインストールが有名ですよね。 海外でもプログラミングを学ぶう

記事を読む

美しいエフェクトが施されたCSSで作られたボタン12

css3で作られた美しいデザインのボタンがコレクションされていましたのでご紹介します。 優雅で目を

記事を読む

アイコンはCSSで!フォントもSVGも使用しないCSSだけのアイコンセット「Icono」

アイコンはCSSで!フォントもSVGも使用しないCSSだけのアイコンセット「Icono」

CSSだけでつくられたアイコンセットのご紹介です。 近年のアイコンというと、アイコンフォントかSV

記事を読む

CSSグラデーションを簡単につくれる「Colorful CSS Gradient Background Generator」

CSSグラデーションを簡単につくれる「Colorful CSS Gradient Background Generator」

CSSグラデーションは手軽に実装できるし、メンテナンスも簡単だし、とっても便利ですよね。 ただ、自

記事を読む