CSS3アニメーションをはじめ、グラデーションやシャドウやボーダー、テキストやボックスをかっこよくしたり、レスポンシブデザイン用のグリッド、セレクタの使い方など、スタイルシートの制作時に役立つオンラインツールを紹介します。 Animate.css classを付与するだけで、さまざまなCSS3アニメーションが実装できます。 初っ端からオンラインツールじゃないですが、簡単にCSS3アニメーションが利用できるということで。
皆さんはWEB制作の過程で何かジェネレーターの類とか使ってますか?使う派使わない派と別れるところかもしれませんが、僕はかなりヘビーに使う派。それも一個のジェネレーターに留まったことはほぼ無く、毎月、下手すりゃ毎週のように新しいジェネレーター試しては便利そうなら周りと共有してといったことを繰り返してきました。 飽きっぽいと言えば飽きっぽい、他にももっと良いのあるんじゃないかとあっちへ行き、もっと良いのあるよと言われればそっちへ行き、こっちの方がおいしいよと言われればホイホイ試してみる・・・・・なんか駄目な人間みたいですが気にしない方向で行きます! というわけで、僕が最近使ってみたり、教えてもらったりしたジェネレーター関連。ボチボチごちゃついて来たのと、このブログでまだ紹介してない物も色々あったし、2012年5月現在使っているジェネレーターの類を一度振り返りながらまとめてみようと思います! 良
「8 Best Tools to Make Easy CSS3 Development」という記事で、CSS3のコーディングに役立つツールがまとまっていたのでご紹介します。 CSS3 CSS3ジェネレータ。プレビューしたり対応ブラウザの表示もあります CSS3 Pie IE6,7,8でCSS3のいくつかのプロパティを使用可能にするhtcファイル Layer Styles Photoshopのようなレイヤースタイルをブラウザ上でCSS生成 Cascader HTMLにインラインで書かれたCSSを分割してくれる CSS3 Gradients Generator CSS3のグラデーションジェネレータ CSS3 Cheat Sheet CSS3のチートシート CSS3 Please CSS3をブラウザ上で学習できるサイト CSS3 Button Maker CSS3で作るボタンジェネレータ ref
Styles Drop Shadow Inner Shadow Background Border Border Radius
タイル状に継ぎ目なく配置できるシームレスな背景用の画像が作成できるジェネレーターと無料素材を配布しているサイトを紹介します。
14 CSS3 Smashing Generators | Marked Lines CSS3のジェネレーターが14種まとまったエントリのご紹介。 既に紹介したものを多く含まれていますが、CSS3の作成をツールを使ってより効率化しちゃいましょう。 CSS3 Please! 1個のプロパティを編集すれば全部変わるもの CSS3 Generator v1.5 ウィザード形式でCSS3プロパティを簡単作成 CSS3 Generator – Widgetpad クリックで簡単にCSS3生成 CSS3 Gradient Generator v2.0 グラデーションを使ったボタンを生成 Westciv Tools WYSIWYGなCSS3プロパティ調整ツール色々 CSS Border Radius Radiusに絞った超シンプルツール。よく使うRadiusプロパティを一発生成 全部見る 関連エントリ
Patterncooler 3.1 - Fun, Free and even cooler! Apply your own colors, size and texture effects to thousands of pattern designs and download as seamless background images for FREE. Unlimited large tiles over 300px x 300px* and pattern area graphics can be obtained via the new license plans. This simple web app has been designed to provide seamless pattern images, for the use in creating:- Twitter,
Six Useful CSS3 Tools | Tools 便利な6つのCSS3ツールがまとまったエントリを+αでご紹介。 まだ覚えていないプロパティなんかもWYSIWYGやジェネレート等で簡単に理解&覚えることが可能です。 CSS3 Button Maker CSS3なボタンメーカー。角丸やシャドウの指定が可能 CSS3 Generator CSS3を使ったスタイル効果をブラウザ上で簡単ジェネレート CSS3 Please! クロスブラウザ向けのradiusやshadow等を一括生成 CSS3 Gradient Generator CSS3のグラデーション生成ツール CSS3 Transforms WYSIWYGでCSS3のtransformプロパティを生成可能 CSS3 Selectors Test ブラウザのCSS3対応状況が分かるツール CSS3 Click Chart by Im
CSS3 Generator CSS3の各ブラウザごとの対応状況の確認とソースコードの生成が同時に行える便利ツール。対応状況はブラウザのアイコンの上にカーソルを持っていくと表示されます。 Official Site CSS3 Gradient Generator v2.0 グラデーションのコードを吐き出すツール。カラーピッカーなどを使って直感的に操作できる Official Site CSS Border Radius ボーダーの角丸を表現するコードを吐き出すツール。四辺の周囲にある数値を変更するだけです。 Official Site Button Maker 画像を一切使わずにCSSだけでクールなボタンを作成。グラデーション、角丸、影などの調節が可能 Official Site CSS3, please! 左側のコードを書きかえると、プレビューが右上のプレビューが変化します。CSS3テス
CSS3 Click Chart by Impressive Webs CSS3のでのボックス要素デザインを圧倒的に簡単化できる「CSS3 Click Chart」。 サイトにアクセスすると、サンプルが並んでおり、クリック一発でサンプルのコードが出力されます。 更に、サポートブラウザまでが表示されるので、なんとも便利。 サンプルをクリックすると画面下部にサポートブラウザと具体的なCSS3コードが表示されます。 画面端の矢印で別画面に移動。更にサンプルを表示できます。合計22個が確認できます。 単なるリファレンスとしてだけでなく、入門用としても最適かもしれませんね。 関連エントリ ピュアCSS3で3Dアニメーション jQueryとCSS3で作るカラフルなスライダーウィジェット ピュアCSS3を使ったajaxアニメーション実装例 近未来に頻繁に使われるであろうCSS3サンプル10
<textarea name="code" class="css" cols="60" rows="5"> element { -moz-border-radius: 20px 20px 20px 20px; -webkit-border-radius: 20px 20px 20px 20px; padding: 20px; background: -moz-linear-gradient(center top, #999999 23%,#ffffff 93%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0.23, #999999),color-stop(0.93, #ffffff)); } </textarea>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s w
Warning: Undefined array key "page" in /home/mhd-01/www.tartanmaker.com/htdocs/modules/functions.php on line 5 Fatal error: Uncaught Error: Undefined constant "INACTIVE_USER" in /home/mhd-01/www.tartanmaker.com/htdocs/modules/authentication.php:5 Stack trace: #0 /home/mhd-01/www.tartanmaker.com/htdocs/sg_require.php(9): require_once() #1 /home/mhd-01/www.tartanmaker.com/htdocs/modules/user.php(5):
この記事は年以上前に書かれたもので、内容が古かったり、セキュリティ上の問題等の理由でリンクが解除されている可能性があります。 誰ともあまり会わないような職種 もネットビジネス界には多数存在 するでしょうが、名刺はあるとイザ という時に重宝します。ですが、 普通に発注すると最低枚数が あったりして余計なお金がかかります。 数を必要としない方は自作で済ませたい所。 そんな方にインク代、用紙代以外は 無料で名刺を作れるツールやテンプレートを ご紹介します。 テンプレの多くはPDFですが、Wordなどもあります。フリーソフトやオンラインツールなどなど。 A Business Card Template Pack かっこいいテンプレート。 A Business Card Template Pack 5 Business Card Template Packs フリーの名刺テンプレートパック。 5 B
TOP > WebService > だんだん小さくなるドット柄の背景パターンを制作してくれる「Dotted Background Generator」 WEBデザインの印象を決定付ける大きな一つの要素の一つに背景があります。様々な背景素材やジェネレーターがWEB上で公開されていますが、今日紹介するのはだんだん小さくなるドット柄の背景パターンを制作してくれる背景ジェネレーター「Dotted Background Generator」です。 上記のように上部から下部に向ってだんだんと小さくなっていくような背景を簡単に作る事ができます。 詳しくは以下 使い方は至って簡単でドットのカラーと、背景色、そして高さを指定すればOKです。色はカラースライダーなどは実装されていませんので、指定する必要があります。また選べるカラーはドット、背景ともに2色までとなっています。背景色は2色選んだ場合はA
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く