I'll be NET】創作サイトから中小企業まで東京都三鷹市で低価格高品質なホームページ制作(SOHO)

トップページ > CSS > WEBデザイナー必見!CSSジェネレータ集

WEBデザイナー必見!CSSジェネレータ集

  • 投稿日:2015/10/25 |最終更新:2015/10/26
  • CSS
WEBデザイナー必見!CSSジェネレータ集

WEBサイトを作成する際に絶対に役立つスタイルシートのジェネレータ集です。
設定項目を調整するだけで自動的にソースを構成してくれます。

Layer Styles

Layer Styles
リンク先へはこちらをクリック

box-shadow、背景色(グラデーション)、border(線色)、border-radius(角丸)を設定できます。
Adobeに似たインターフェイスなので調整しやすいと思います。

CSS 3.0 MAKER

CSS3.0 MAKER
リンク先へはこちらをクリック

border、border-radius(角丸)、グラデーション、text-shadow、box-shadowはもちろん、transform(角度)、アニメーションなども調整可能です。
グラデーションは2色のみとなっています。

CSS Buttun Generator

CSS Buttun Generator
リンク先へはこちらをクリック

text-shadow、box-shadow、border、border-radius(角丸)、グラデーションを調整できます。
グラデーションは2色のみとなっています。

CSS3 GENERATOR

CSS3 GENERATOR
リンク先へはこちらをクリック

border-radius(角丸)、box-shadow、背景色(グラデーション)、透明度(opacity)を調整できます。
グラデーションは2色のみとなっています。

css generator

css generator
リンク先へはこちらをクリック

border-image、text-shadow、box-shadow、border-radius(角丸)を調整できます。
border-imageを調整できるのが特徴的です。

Ultimate CSS Gradient Generator

Ultimate CSS Gradient Generator
リンク先へはこちらをクリック

グラデーション用のCSSを生成するためのジェネレータです。
サンプルの画像もあるので好きなスタイルを選択し、色や透明度を調整できます。

CSS3 Text Shadow Generator

CSS3 Text Shadow Generator
リンク先へはこちらをクリック

text-shadowを生成するためのジェネレーターです。
影色、角度などを調整して生成するシンプルなジェネレーターです。

box-shadowジェネレーター

box-shadowジェネレーター
リンク先へはこちらをクリック

box-shadowを生成するジェネレーターです。
border(線色)、border-radius(角丸)も調整可能です。
日本語なので利用しやすいです。

この記事が気に入ったらシェアしてください。

関連記事

ulリストのliアイテムを横並びにする方法あれこれ

iphone の safari でアドレスバーや標準メニューが消えない時に確認した方がいいCSSの設定

HTMLとCSSで半角英数が連続する場合の文章の折返しを自由自在にコントロールする方法

pixiv小説のように縦書きの文章の中でCSSで縦中横に表示してみる。

pixiv小説のようにCSS3だけでHTMLを縦書き表示してみる。

欲しいアイコンだけ選んでWEBフォント化してくれる便利サイト【Fontello】

Comment Form

コメント投稿はこちらをクリックしてください
  • コメントを入力してください。
登録フォーム
Name
Mailaddress
URL
Message
Postkey
(スパム対策に、投稿キー を半角で入力してください。)

Profile

yuricolo@I'll be NET

東京都を拠点としたSOHO(フリーランス)による創作サイト向けWEB制作サービスを行っています。 お仕事とか創作活動とかでメモっておきたいこととかを掲載しています。