CSSでコーナーにリボンの装飾をしてみよう

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

こんにちは。
シーサイドレーベルweb担当の飯野です。

今回は、CSSを使って、
ボックスなどの角に
リボンのデザインを装飾する
方法について解説させて頂きます。

ちょっとしたアクセントに
なると思いますし、
CSSの勉強の一環として、
是非目を通して頂ければと思います。

ribbon

上記のようなデザインを設定するための
コードについて解説を行っていきますね。

まずは、htmlのコードはこちらです。

そして、CSSでデザインを調整して行きます。

まずは、ボックスの設定です。

ribbon2

ボックスの角を丸くしてあり、影を付けているデザインになってます。

次に、リボンの表示位置を設定してあげます。

ribbon3

縦横幅の設定を行い、positionプロパティで
位置の調整を行っています。

そして、リボンの色やデザインを設定します。

ribbon4

影を付けたり、グラデーションを掛けたりの設定を行っています。

次に、リボンの端のデザイン設定です。

ribbon5

そして、先程設定したデザインが両端にくるように
調整します。

全ての設定を行うと、この様に形にしたいリボンのデザインに
なったと思います。

ribbon

ボックスにちょっとしたデザインを付けたい時などに
役に立つのではないでしょうか。

デモページはこちら

こちらのサイトで、今回ご紹介させて頂いたコードを
見ることが出来ます。

Corner Ribbon

良かったらチャレンジしてみて下さいね。

では、また来週お会いしましょう。

●3年ぶりに帰ってきた「藤田哲也の個別コンサルティング」

 ⇒ http://www.japan-forum.jp/sp/kojin.htm

mt

起業初年度1000万円、その後ゆるやかに年商3000万円までを目標に起業に向けて一歩を踏み出したい方向けの起業専門メルマガです。最新のノウハウを始め、セミナーや限定サービスのご案内をご希望の方は今すぐ下記フォームより、メインで使っているメールアドレスをご登録下さい。家族との時間を大切にしながら自由自在に収入を増やせる起業家になる方法を余すことなくお伝えいたします。

メールアドレス(必須)

コミュニティ