ちょっとした飾りに使えるCSS3.0ジェネレータ『CSS3.0Maker』

  • 2011/02/17
  • このエントリーをはてなブックマークに追加

スポンサーリンク

ちょっとした飾りに使えるCSSジェネレータ
はてぶ数もすごいし既にご存知の人も多そうだけど、探してもなにかのまとめの一部としてさらっとしか紹介されてなかったので、とりあえずどんな事が可能なのかをご紹介。
かゆいところをパパっとCSSで書きだしてくれるジェネレータ「CSS3.0Maker」レビューです。
IT/Web業界に強い転職サイトGreen

解説


特定のもの以外は大体トップページのドロップダウンメニューにあります。
CSS3.0 Maker | CSS3.0 Generator | CSS 3.0 Generator
CSSスタイルメニューを開く
トップページにある左のメニューと上の並ぶタブは同じページに繋がっています。

左メニュー


各ページには以下のブラウザ対応アイコンが有ります。
ブラウザ別
どのブラウザに対応していないのかも確認しておくといいでしょう。




Border Radius


ここでは枠線の装飾ができます。
Border Radius | CSS Border Radius
枠線

種類は豊富で、太さも左がわのバーで変更可能。
borderの種類

こんなのもらくらく。
点線



CSS Transform


ここでは拡大縮小といった事が設定できます。
CSS Transform
回転

拡大縮小

斜め



Box Shadow


ここでは影の作成が出来ます。
Box Shadow
影の色、大きさ、ボカシ具合、位置など細かく決めれます。
ボックスシャドウ



Text Shadow


ここではテキストシャドウの設定が出来ます。
Text Shadow
テキストシャドウ



Text Rotation


ここではテキストの角度が設定できます。
Text Rotation
角度の変更



RGBA


RGBでのカラー設定が出来ます・・・。
CSS 3.0 RGBA
RGBで色の変更



@font Face


ここではフォントフェイスの細かい設定が行えます。
@Font Face
フォントフェイス



Outline Offset


ここでは、枠の外部のラインを装飾できます。
この項目はトップページのドロップダウンメニューにのみあります。
外部ライン

外部ラインの装飾



Transition


ここではホバーによってアニメーションするCSS3が書き出せます。
CSS Transition
ホバー前
マウスのせると↓
ホバー後

簡単操作
通常時と、ホバー後両方の設定を終えれば出来あがり。



CSS Gradient


ここではグラデーションの書きだしが出来ます。
CSS Gradient
グラデーション



CSS Animation


ここでは、常時動き続けるCSS Animationの書き出しが出来ます。
CSS Animation
この項目はトップページのドロップダウンメニューにありません。
Animation



以上が全機能です。

同時に以下のジェネレータも。

CSS Type Set
テキストCSS

テキストまわりのCSSを手軽に生成してくれます。


それでは、また。


スポンサーリンク

トップへ戻る

Twitter版のネタ帳では毎週月曜~金曜までWeb屋さんに役立つ色んな情報や単なるネタまでをつぶやいています。

関連するエントリー

コメント

この記事にコメントする人はクリック

コメントポリシーをお読みください
管理者にだけ表示を許可する

FC2Ad

広告


IT・Web業界の求人なら転職サイトgreen(グリーン) ホームページテンプレート、WordPressテーマ、Facebookページテンプレートならクラウドテンプレート ネットマーケティングとは│ネットマーケティング検定 SEOコンサルティング&SEO対策 無料レスポンシブWebデザインテンプレート 広告主募集

あわせて読みたい
フィードメーター - ホームページを作る人のネタ帳

人気の記事一覧

あなたのブログの再訪問者を増やす50の方法

私の経験から感じた事を書き記します。全てが全てその時々で、正しいとは限りませんが、一つの指針としてお使いください。因みに全部リスト化すると230くらいありましたが、それはきっとセミナーとかでやるかなぁと。

http://e0166.blog89.fc2.com/blog-entry-824.html

あなたの生活を確実に拘束し時間を浪費させる動画50

今回は生産性を向上させる事ばかり考えて記事を書いてきたので、逆に年末にかけて忙しい皆さんの時間を出来るだけ拘束し、忙しさを倍増させるものが無いかを考えました。その結果、動画で行こうと言う事になったのが1ヶ月以上前。動画閲覧本数はおそらく600本以上。その中から、おもしろそうなものを50個ベストチョイスいたしました。

http://e0166.blog89.fc2.com/blog-entry-820.html

webデザインのセンスを磨く○○系のwebデザインまとめ

webデザインを学ぶならwebデザインから。と言うわけで、今回は海外のエントリを中心に、○○系のまとめをまとめます。

http://e0166.blog89.fc2.com/blog-entry-817.html

jQueryプラグインのベストトレンド総まとめ2010

もはやこの業界ではかなり浸透しつつあるjQuery。今回はそんなjQueryにスポットを当て、本年度紹介された中でも、ホットなトレンドプラグインをご紹介します。

http://e0166.blog89.fc2.com/blog-entry-816.html

ツイッターの日常における35の行動パターン

私が良く見かける35の行動パターンに名前をつけてみようと思う。年末の誰も見てない時に公開しようと思っていた、ただのネタだったのですが、結構時間がかかりこの時期に・・・。

http://e0166.blog89.fc2.com/blog-entry-823.html

ウェブデザイナーのためのウェブアプリ15

OSがWindowsであろうと、ubuntuであろうと、共通のサービスを受けることができるのがウェブアプリケーションです。ウェブデザイナーの中には、自宅ですでにubuntuを利用している人も多い。また、Mac、Windowsと、各自それぞれの使いやすい物を利用していると思います。

http://e0166.blog89.fc2.com/blog-entry-784.html

愛用するGoogleChromeエクステンション12個

この2年でノートPC2台購入。自他のPCはクラッシュしてリカバリー。会社のPCは新しいのがあたり、再セットアップ。そんなこんなで、会社はまぁともかくとして、とりあえず全PCが比較的3ヶ月に一度リカバリーしてもいいように、自分用にメモとして残しておきます。

http://e0166.blog89.fc2.com/blog-entry-784.html

文章や会話のプレゼンテーションを向上させる方法

文章力がないためにプレゼンに失敗した、会話がうまくできずにプレゼンに失敗した。こういう経験はなかなか無い。なぜなら多くの場合、失敗したことに気がつかないからです。

http://e0166.blog89.fc2.com/blog-entry-802.html

サイトの裏側の意識を変え売り上げをアップする方法

ネットショップ運営者が、あることをちょっとだけ始めてみただけでわずか5ヶ月で売り上げが3倍になりました。はたして、webサイト運営がどのように変わったのでしょうか。。

http://e0166.blog89.fc2.com/blog-entry-749.html

webサイトのリピーターを増やすさりげない5つのコツ

多くのビジネスサイトのアクセス数を支えている大手検索サイト、Yahoo、Googleのアルゴリズムが変わる事で、突然商売がひっくり返る事態を回避する方法。

http://e0166.blog89.fc2.com/blog-entry-746.html