The current article

CSSで画像にリボンを斜めがけする

最近リボンで装飾されたサイトや画像を良く目にします。
今回は画像加工ではなく、HTMLとCSSで斜めがけのリボンを表現できるサイトをご紹介します。
リボンの文字も変更できるので便利じゃないでしょうか。

CSSでリボン

capture

Creating CSS3 Image Ribbon Tagsです。
英語のサイトですが、スクリプトとか入っていないのでHTMLとCSSをコピペだけで使えますので簡単~。

HTML記述例

<div class="side-corner-tag">
    <img src="1.jpg" alt="" />
    <p><span>newest</span></p>
</div>

まず、クラス名をつけたdivを作り、画像を配置。
リボン内に入るテキストをspan内に入力します。

CSS記述例

まず、クラスを定義

.side-corner-tag {
    position: relative;
    color: #fff;
    display: inline-block;
    padding: 5px;
    overflow: hidden;
    font-family: Arial, sans-serif;
    font-weight: 900;
}
 
.side-corner-tag p {
    display: inline;   
}

続けて、リボン幅を決め、リボンを傾け、シャドウます。

.side-corner-tag p span {
    position: absolute;
    display: inline-block;
    right: -25px;
    box-shadow: 0px 0px 10px rgba(0,0,0,0.2), inset 0px 5px 30px rgba(255,255,255,0.2);
    text-align: center;
    text-transform: uppercase;
    top: 22px;
    background: #d93131;
    width: 100px;
    padding: 3px 10px;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
}

そして、リボンが立体的に見えるように三角形を作成します。

.side-corner-tag p:before {
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    top: -17px;
    right: 69px;
    z-index: -1;
    border: 17px solid;
    border-color: transparent transparent #662121 transparent;
}
 
.side-corner-tag p:after {
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    top: 74px;
    z-index: -1;
    right: -10px;
    border: 17px solid;
    border-color: #662121 transparent transparent transparent;
}

このサイトは、コリスさんが詳しく日本語(div要素版のコード付き)で紹介して下さってますので
画像やパネルに斜めにしたリボンを重ねるスタイルシートを参考にして下さいね。
コリスさんに感謝!


Category

Service

Guidance

Salutation

WPCは大阪を中心に、ホームページ制作、リニューアル、コーディング、更新業務、各種印刷物制作、スキルアップ出張講習・セミナー等取り扱っております。
どこの会社に作成を依頼しようかとお悩みの方、リニューアルしたいんだけど良いプランはないかなとお探しの方、本格派のデザイナーにデザインを依頼したい、 コーディングだけ頼みたい、更新だけ頼みたい、パソコンやソフトの使い方を教えて欲しいなど、どんな事でもWPCまでお気軽にご相談ください。