こんにちは。
シーサイドレーベルweb担当の飯野です。
今回は、CSSを使って、
ボックスなどの角に
リボンのデザインを装飾する
方法について解説させて頂きます。
ちょっとしたアクセントに
なると思いますし、
CSSの勉強の一環として、
是非目を通して頂ければと思います。
上記のようなデザインを設定するための
コードについて解説を行っていきますね。
まずは、htmlのコードはこちらです。
|
1 2 3 |
<div class="wrapper"> <div class="ribbon-wrapper-green"><div class="ribbon-green">NEWS</div></div> </div> |
そして、CSSでデザインを調整して行きます。
まずは、ボックスの設定です。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
.wrapper { margin: 50px auto; width: 280px; height: 370px; background: white; border-radius: 10px; -webkit-box-shadow: 0px 0px 8px rgba(0,0,0,0.3); -moz-box-shadow: 0px 0px 8px rgba(0,0,0,0.3); box-shadow: 0px 0px 8px rgba(0,0,0,0.3); position: relative; z-index: 90; } |
ボックスの角を丸くしてあり、影を付けているデザインになってます。
次に、リボンの表示位置を設定してあげます。
|
1 2 3 4 5 6 7 8 |
.ribbon-wrapper-green { width: 85px; height: 88px; overflow: hidden; position: absolute; top: -3px; right: -3px; } |
縦横幅の設定を行い、positionプロパティで
位置の調整を行っています。
そして、リボンの色やデザインを設定します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
.ribbon-green { font: bold 15px Sans-Serif; color: #333; text-align: center; text-shadow: rgba(255,255,255,0.5) 0px 1px 0px; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); position: relative; padding: 7px 0; left: -5px; top: 15px; width: 120px; background-color: #BFDC7A; background-image: -webkit-gradient(linear, left top, left bottom, from(#BFDC7A), to(#8EBF45)); background-image: -webkit-linear-gradient(top, #BFDC7A, #8EBF45); background-image: -moz-linear-gradient(top, #BFDC7A, #8EBF45); background-image: -ms-linear-gradient(top, #BFDC7A, #8EBF45); background-image: -o-linear-gradient(top, #BFDC7A, #8EBF45); color: #6a6340; -webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.3); -moz-box-shadow: 0px 0px 3px rgba(0,0,0,0.3); box-shadow: 0px 0px 3px rgba(0,0,0,0.3); } |
影を付けたり、グラデーションを掛けたりの設定を行っています。
次に、リボンの端のデザイン設定です。
|
1 2 3 4 5 6 7 8 |
.ribbon-green:before, .ribbon-green:after { content: ""; border-top: 3px solid #6e8900; border-left: 3px solid transparent; border-right: 3px solid transparent; position:absolute; bottom: -3px; } |
そして、先程設定したデザインが両端にくるように
調整します。
|
1 2 3 4 5 6 |
.ribbon-green:before { left: 0; } .ribbon-green:after { right: 0; } |
全ての設定を行うと、この様に形にしたいリボンのデザインに
なったと思います。
ボックスにちょっとしたデザインを付けたい時などに
役に立つのではないでしょうか。
【 デモページはこちら 】
こちらのサイトで、今回ご紹介させて頂いたコードを
見ることが出来ます。
良かったらチャレンジしてみて下さいね。
では、また来週お会いしましょう。
●３年ぶりに帰ってきた「藤田哲也の個別コンサルティング」
