CSSだけでできちゃう！ラベルデザイン「リボン編」

どうも、すんです。

以前、三角形のラベルデザインについての記事を書きました。
・CSSだけでできちゃう！ラベルデザイン「三角形編」

今回は「リボン編」ということで、画像ではなくCSSだけで実装できるリボン型のラベルデザインを紹介していきたいと思います！

リボン型のラベル

今回もブロック枠に対してラベルをつけてみました。

【html】

<!--大外の枠-->
<div class="ribbon-wrap">
  <!--ブロック枠-->
  <div class="ribbon">
     <!--リボン部分-->
     <p class="cat-ribbon"><span>NEW！</span></p>
  </div>
</div>

【css】

/* 大外の枠 */
.ribbon-wrap {
    width: 270px;
    display: block;
    margin: 0 auto;
    padding: 10px;
    overflow: hidden;
}

/* ブロック枠 */
.ribbon {
    background: #fafafa;
    width: 250px;
    height: 250px;
    border: #eee 1px solid;
    margin: 0 auto;
    position: relative;
}

.ribbon .cat-ribbon span {
    width: 136px;
    padding: 0px 10px;
    display: inline-block;
    text-align: center;
    text-transform: uppercase;
    position: absolute;
    top: 14px;
    right: -39px;
    z-index: 10;
    background: #d93131;
    color: #fff;
    transform: rotate(45deg);
}

.ribbon .cat-ribbon:before {
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    top: -33px;
    right: 63px;
    z-index: 0;
    border: 17px solid;
    border-color: transparent transparent #662121 transparent;
}

.ribbon .cat-ribbon:after {
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    top: 56px;
    right: -39px;
    z-index: 0;
    border: 20px solid;
    border-color: #662121 transparent transparent transparent;
    transform: rotate(-90deg);
}

前回と同様、今回も擬似要素を使用しCSSのみで見出しの作成をおこなっています。

「.cart-ribbon」に対し、「before」「after」を設定しています。
このbeforeとafterは、ちょうどリボンの影の部分(色の濃い部分)を表しています。

「.cart-ribbon span」部分がリボンの本体部分(文字が載っている部分)になります。

装飾部分の色変更

【CSS】

.ribbon .cat-ribbon span {
    width: 136px;
    padding: 0px 10px;
    display: inline-block;
    text-align: center;
    text-transform: uppercase;
    position: absolute;
    top: 14px;
    right: -39px;
    z-index: 10;
    /* リボンの背景色指定 */
    background: #4b80dd;
    color: #fff;
    transform: rotate(45deg);
}

.ribbon .cat-ribbon:before {
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    top: -33px;
    right: 63px;
    z-index: 0;
    border: 17px solid;
    /* リボンの影部分の色指定 */
    border-color: transparent transparent #2e4d7a transparent;
}

.ribbon .cat-ribbon:after {
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    top: 56px;
    right: -39px;
    z-index: 0;
    border: 20px solid;
    /* リボンの影部分の色指定 */
    border-color: #2e4d7a transparent transparent transparent;
    transform: rotate(-90deg);
}

コメントを打ってある箇所「background」と「border-color」部分の指定色を変更することで、装飾部分の色変更をおこなうことができます。

実際にサイトにあててみた

…といいますか、実は弊社で運営している
http://www.ec-akinai.com/
このサイトに実際に使用しているんです！このラベルデザイン！

本記事で紹介しているラベルデザインに、シャドウを追加してあります。

ちなみにシャドウの追加は、

.ribbon .cat-ribbon span {
    box-shadow: 0px 0px 10px rgba(0,0,0,0.2), inset 0px 5px 30px rgba(255,255,255,0.2);
}

さっきの「.ribbon .cat-ribbon span」に対する記述に、上記box-shadowの記述を追加するだけです！

ラベルや見出しのデザインは、画像にしてしまいがちだと思います。その方が楽な場合も多いですし。
でもこういう風にCSSのみで実装することができる、ということを知っていれば、あとはコピペしたりちょっと色だけ変えたりしていろいろなところで使えるので便利です！

このようなラベルについてもそうですが、例えばブログ記事のタイトルや章見出しについてもCSSである程度はかっこよく作れちゃったりしますよ。

それはまた次の機会に。

投稿者プロフィール

sun

今年の目標：ひ弱キャラ脱却

最新の投稿

• jQuery2017.05.19ドロワーメニュー実装に使える！jQueryプラグインDrawerについて
• css2017.04.21CSSのpositionプロパティについてちょっとまとめてみた
• css2016.10.17CSSだけでできちゃう！ラベルデザイン「リボン編」
• css2016.08.19CSSだけでできちゃう！ラベルデザイン「三角形編」