RSSを購読する
follow us in feedly
ふかふか交易所 | ネットの情報をわかりやすくお届け!
RSSを購読する
follow us in feedly

ニュータウンシリーズ まとめ

マインクラフト関連記事 まとめ

VR関連記事 まとめ

トップ ゲーム 動画 ホームページ 掲示板 お問い合わせ サイトマップ ページ下部へ

ホームページカテゴリ 新着記事

サイト内検索

過去7日間の人気記事

  • 総合
  • ゲーム
  • 動画
  • ホームページ

ホーム > ホームページカテゴリー No.11 ~ No.20 > 記事No.14

要素に影やグラデーション・角の丸みを適用するCSSを生成してくれるおすすめサイト

← 前の記事

次の記事 →

CSS3 GENERATOR

要素や画像の角を丸くしたり、影やグラデーションを付けたりなど自分で書くには面倒くさいCSSコードを自動で簡単に生成してくれるサイトさんを紹介します!

(しかも各WEBプラウザ対応コードまで付けてくれる親切設計!)

↓ このような感じの要素が簡単に生成できます

CSS3 GENERATORへのアクセス

http://www.css3.me/

上記の"CSS3 GENERATOR"さんのサイトにアクセスしてください。

アクセスすると以下のような画面が出てくると思います。

左側にあるコントローラを調整することで、自由に要素の形やグラデーションを変更することが出来ます。

以下、各値の説明

① border-radius: 要素の角の丸さを調整します。

② box-shadow: 要素の周囲の影を調整します。

③ background gradient: "ON"にすると要素に色の色彩(グラデーション)がつきます。 "from"が上方の色彩、"to"が下方の色彩となります。

④ opacity: 要素の透明度を調整します。

⑤ preview: 現在の要素の状況が表示されます。

⑥ 全ての調整が済んだら、"GET THE CODE!"ボタンを押して、表示されるCSSコードをコピーして 要素に適用してください。(やたらコードが長くなる場合がありますが、各Webプラウザに対応させるためです)


以上でCSSの実装は完了です!自分で書くと大変面倒なCSSコードを簡単に生成することができました!

関連記事はこちら

▼ 一言コメントをどうぞ!

Comment Form is loading comments...

過去7日間の人気記事

マインクラフト関連記事 まとめ

VR関連記事 まとめ

Aviutl(動画編集)関連記事まとめ

AR関連記事 まとめ

ご意見・ご質問等は 掲示板へ!

コメントを公開されたくない場合は メッセージフォームへ!


当サイトについて  月極広告の募集

©Copyright fukafuka295.jp 2016 All rights reserved.

トップ ゲーム 動画 ホームページ 掲示板 お問い合わせ サイトマップ ページ上部へ