• RSS

[CSS]リボン風帯のHTML と CSS をWEB上で生成できる「3D Ribbon Generator」

  • このエントリーをはてなブックマークに追加
  • follow us in feedly

WEB上で簡単に「リボン風帯」のデザインを作って、HTML とCSS のコードを生成できるサービス 3D Ribbon Generator のご紹介です。

生成されるコードの量はかなり多いですが、リボン帯をCSS だけで一から作ろうと思うと結構大変なので、帯の色やサイズをかなり細かく指定できる3D Ribbon Generator は便利です。

3D Ribbon Generator へアクセス

リボン風帯のHTML と CSS をWEB上で生成できる「3D Ribbon Generator」

以下のページから 3D Ribbon Generator へアクセスします。


3D Ribbon Generator の設定(1)帯の形状

まず最初に「Examples」の中から、使いたい帯の形状の画像をクリックします。
リボン風帯のHTML と CSS をWEB上で生成できる「3D Ribbon Generator」

3D Ribbon Generator の設定(1)帯のデザイン

続いて「Configure」欄で「Elements」「Size」「Colors」の各項目に数値などを入れて、リボン帯のデザインを作っていきます。
リボン風帯のHTML と CSS をWEB上で生成できる「3D Ribbon Generator」

Elements

Elements には親要素名を入れます。
リボン風帯のHTML と CSS をWEB上で生成できる「3D Ribbon Generator」

あくまで一例ですが、Elements の「Add parent selector」欄に #parent のような親要素を指定した上で、以下のようなスタイルを別途用意しておきます。
#parent	{
margin:0 auto; /*センタリングの場合に指定*/
width:500px ; /*リボン帯のFront width で指定したサイズと同じ幅値*/
}


Colors

ページ右側の図を見ながら、表面、帯の両サイドなどの色をカラーピッカーから選択します。
リボン風帯のHTML と CSS をWEB上で生成できる「3D Ribbon Generator」

Sizes

リボン帯の高さや幅など、各要素のサイズを設定していきます。
ページ右側の図の青色番号を参考にしながら数値を入れていきます。
リボン風帯のHTML と CSS をWEB上で生成できる「3D Ribbon Generator」

デザインチェック

設定が完了したら「Generate」ボタンをクリックし、「Preview」欄に表示されるデザインイメージを確認します。
リボン風帯のHTML と CSS をWEB上で生成できる「3D Ribbon Generator」

問題なければ、その下の「Result」欄にHTML とCSS の各々のソースコードが出力されますので、コピペして使います。


リボン風帯のサンプル

試しに作った帯がこちらです。↓


あとは帯の中央にテキストを入れてデザインを整えるなどすれば完成です。



  • このエントリーをはてなブックマークに追加
  • follow us in feedly

コメント

コメントを残す