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