[Web Application] One Page Apps I Actually Use – 使える単機能サイト
使える単機能サイトを集めた記事。CSS3ジェネレーター（包括的なものから限定的なものまで）、JSライブラリへのリンク行コピペ、特殊文字一覧とコピペ、ボタンメーカーなどが紹介されてます。量こそ多くない上に、どれも限定的な機能のシングルページサイトばかりなんだけど、使えるものが多いです。なかなか便利なまとめ記事なので、いくつかブックマークしときました。特殊文字一覧とかナイスです。
Tag Archives: WebApplication
[Generator] gradient-scanner – 画像からCSSのグラデーション指定を生成できるサイト
画像をアップする事で、画像内で使われているグラデーションをCSSコードに吐き出す事ができるジェネレーター。これなかなか便利です。サイトには最初から例となる画像がアップされているので、まずはグラデーションを抽出したい範囲をドラッグして囲います。するとページ下部に範囲選択された箇所が大きく表示されるので、「Next」をクリックして次のステップへ。次のステップではグラデーションの色数を調節します。スライダーを左にすると色数が多く（より滑らかに）、右にすると少なく（粗く）なります。決まったら再度「Next」をクリックして終了です。ソースコードは画面下部に吐き出されます。また最後の画面では個別に色の微調整もできます。CSS3でグラデーション描画をする際に、まずはフォトショで画像として作って、その後コード化するっていうワークフローだったりすると便利ですねこれ。
[Generator] Img to CSS – 画像をソースコード化してくれるジェネレーター
画像をアップロード、もしくはURL指定する事で、ソースコード化してくれるというジェネレーター。タイトルを見るとCSSとあるので、CSS3のCanvasタグとか使うのかと思って試しにやってみたら、鬼のテーブルレイアウトの力業でした。ようするにドット絵と同じようにセルをマス目状に区切って色づけしてるだけですね。果たしてどれだけの意味があるのか不明ではありますが、再現率がなかなかのものだったので紹介。笑い男もキレイにテーブルタグ化してくれました。
[CSS3] Layer Styles – フォトショップのレイヤースタイル風にCSS生成が行えるサイト
これはスゴい。フォトショップのレイヤースタイルパネル風にCSS指定ができるウェブアプリケーション。フォトショ野郎には馴染みの深いパネルレイアウトで、説明などなくてもサクっと使えそうです。指定できるのはドロップシャドウ、インナーシャドウ、背景、ボーダー、角丸の5項目。背景の項目ではボックス要素内のグラデーションの指定もできます。指定した内容はリアルタイムに反映され、完成後はページ下部の「CSS Code」からCSSのコードをコピーできます。その際色指定に関して、HEX or RGBAの指定もできます。多機能かつ使いやすい内容なので、ソッコーでブックマークしました。ナイスです。
[CSS] Powerful New CSS Techniques and Tools – CSSを使った新しい表現やウェブツール
CSSを使った新しい表現や、オンラインジェネレーターなどをまとめた記事。CSSがらみで新しいと言うだけあって、CSS3関連の情報やTipsが多いです。記事はCSSテクニック、とCSSツールの2つに分けて紹介されていて、トータルで結構な量の情報が掲載されてます。CSS3で描画されたMac用キーボードとかなかなかアツいです。よく作ったなーこれ。
[CSS] CSSWARP – パス上にテキストを配置し、ソースをDLできるジェネレーター
サイト上でパスを描画し、そのパスに沿って文字をタイプする事のできるCSSジェネレーター。イラレさえあればこんな事簡単にできるんですが、画像ではなくテキストのまま配置できる点がナイス。テキストの向きや間隔などの細かい指定もできるようです。イイ感じに仕上がったら「Generate HTML」ボタンを押す事で、DL用のソースコードが出力されます。CSSもHTML内にインラインで記述されているので、あとはコピペするだけ。HTMLに拘りたい時や、イラレが手元にない場合に便利なウェブアプリ。
[Generator] 25 Super Web-based HTML & CSS Tools – HTML & CSSに関するジェネレーターまとめ
HTMLやCSSに関するオンラインジェネレーターのまとめ記事。とは言ってもほとんどがCSSジェネレーターです。フォントやレイアウト、カラーピッカー、角丸生成、グラデーション生成、単位変換、CSSスプライト生成、グリッドレイアウト、コード圧縮などが紹介されてます。ソース記述が面倒な作業を、こうしたオンラインツールにやらせるのもイイかも。グラデとか。
[CSS3] Ultimate CSS Gradient Generator – CSS3のグラデーション記述のジェネレーター
CSS3でコーディングレベルで描画できるようになったグラデーションですが、複雑なグラデにすればするほど記述がちょい面倒というか、グラフィック系のソフトでちょいちょいっとやるようにはいかなかったりします。このウェブアプリを使えば、見た目に分かりやすく、かつ簡単にグラデーションを描画してCSSをDLする事ができます。ちなみにプリセットもいくつかあるので、目指すグラデに近いものを素体にする事もできます。この手のグラデジェネレーターとしてなかなか使いやすいんじゃないでしょうか。