WEB上で簡単に「リボン風帯」のデザインを作って、HTMLとCSSのコードを生成できるサービス3D Ribbon Generatorのご紹介です。
生成されるコードの量はかなり多いですが、リボン帯をCSS だけで一から作ろうと思うと結構大変なので、帯の色やサイズをかなり細かく指定できる3D Ribbon Generatorは便利です。
3D Ribbon Generator へアクセス
以下のページから3D Ribbon Generatorへアクセスします。3D Ribbon Generator
3D Ribbon Generator の設定（１）帯の形状
まず最初に「Examples」の中から、使いたい帯の形状の画像をクリックします。
3D Ribbon Generator の設定（１）帯のデザイン
続いて「Configure」欄で「Elements」「Size」「Colors」の各項目に数値などを入れて、リボン帯のデザインを作っていきます。
Elements
Elementsには親要素名を入れます。
あくまで一例ですが、Elementsの「Add parent selector」欄に
#parentのような親要素を指定した上で、以下のようなスタイルを別途用意しておきます。
|
1 2 3 4 |
#parent { margin:0 auto; /*センタリングの場合に指定*/ width:500px ; /*リボン帯のFront width で指定したサイズと同じ幅値*/ } |
Colors
ページ右側の図を見ながら、表面、帯の両サイドなどの色をカラーピッカーから選択します。
Sizes
リボン帯の高さや幅など、各要素のサイズを設定していきます。ページ右側の図の青色番号を参考にしながら数値を入れていきます。
デザインチェック
設定が完了したら「Generate」ボタンをクリックし、「Preview」欄に表示されるデザインイメージを確認します。
問題なければ、その下の「Result」欄にHTMLとCSSの各々のソースコードが出力されますので、コピペして使います。
リボン風帯のサンプル
試しに作った帯がこちらです。↓あとは帯の中央にテキストを入れてデザインを整えるなどすれば完成です。
コメント