Webやアプリのデザイントレンドを紹介。たまに雑談。

Browse By

Tag Archives: CSS

[CSS] CSS Filter Effects – CSSフィルターのコードジェネレーター

  • Pocket
  • このエントリーをはてなブックマークに追加

CSSを使ったフィルター効果を、設定と結果をリアルタイムで見ながら指定する事のできるオンラインツール。サイト内には各種スライダーがあり、これらを調整する事でサンプル写真に効果が反映されます。指定できるのはブラーやグレースケール、ドロップシャドウ、セピア、ブライトネス、コントラストなど、一通り指定する事ができます。フィルター指定については常時CSSコードが更新されるので、これをコピペする事で自サイト内の写真コンテンツに反映する事ができます。CSSフィルターって種類色々あるからこうしたツールは便利ですね。

[CSS] prefixMyCSS – ベンダープレフィックスを付けてくれるオンラインツール

  • Pocket
  • このエントリーをはてなブックマークに追加

CSSコードをペーストして「Prefix!」ボタンを押すだけで、ベンダープレフィックス(-moz-とか-webkit-とかのアレです)を付けてくれるというオンラインジェネレーター。これ個人的にツボです。すげぇ便利! 普段メンドくさくてこういうの書くの「ぎゃーす!」ってなるタイプなので、ひとまずプレフィックスなしの標準記述だけで指定をして、最後にこれに突っ込めば万事解決、という流れは素晴らしいなと。言うても最近はベンダープレフィックスなしで書いてもわりと平気ではあるんだけど。生成されるソースのインデントがなにげに綺麗です。

[CSS] PROCSSOR – CSS記述を整形してくれるオンラインツール

  • Pocket
  • このエントリーをはてなブックマークに追加

CSSのソースコードをぶち込んでやる事で、記述法の整形を一括でしてくれるオンラインジェネレーター。試しにこのブログのCSS一式をぶち込んでみました。コピペ後「options」ボタンを押す事で、どのように整形したいのかを選ぶ事ができます。1つのプロパティ指定をシングルラインにするのかマルチラインに書くのか、またマルチラインであるならインデントはどのように付けるのか、複数プロパティの同時指定は1行に書くのか複数行に書くのかなどを細かく指定できます。Dreamweaverにもソースフォーマットの適用というコマンドがありますが、こっちの方が細かく指定できるような気がします。指定の仕方によってはCSS圧縮にも使えそうです。用途によってCSSを圧縮したいのか、見やすい形に整形したいのか選べるのがナイスです。自分のようなCSS汚い野郎にとってはなかなか素晴らしいサービス。いやこれナイスですね。

[Web Design] The top 20 CSS sites of 2012 – 今年CSS的にクールだったサイト

  • Pocket
  • このエントリーをはてなブックマークに追加

CSS的にってなんだよ、というツッコみはさておき、今年クールだったサイトをまとめた記事。20の作例が紹介されてます。CSS3を使った動きのあるWebサイトが多く、アイデア面・技術面双方において参考になります。デザイナーのネタ帳としてなかなか素晴らしい内容かと。それにしても今年はパララックススクロールのサイトを多く見ましたな。正直ちょっとアレ飽きましたw

[CSS] 2012’s most popular CSS Reset scripts, all in one place – 2012年最もポピュラーだったCSSリセット

  • Pocket
  • このエントリーをはてなブックマークに追加

CSS Resetというサイト(なんつーかスゴい具体的なテーマすね・・・)が、2012年最もポピュラーだったCSSリセットの手法という記事を書いてます。よく使われる5つのCSS初期化用のコードを挙げていて、それぞれにコード一式と特徴について紹介してます。HTML5用のものもあります。CSSの初期化ってわりと1回コレと決めたらそうそう変えるもんじゃないので惰性で使い続けてしまいますが(自分の場合元のリソースが何なのかさえ忘れてしまいました)、世間一般では何がよく使われてるのか分かるのはまぁイイコトですよね。

[Framework] Ratchet – WebベースのiOS向けアプリを作る際に便利なフレームワーク

  • Pocket
  • このエントリーをはてなブックマークに追加

iOSデバイス向けにWebAppを作る際に便利なフレームワーク。ダウンロードすると簡単なテンプレートファイル(けど内容はほとんどないので、基本はWebサイトをリファレンス代わりにするのがイイかも)とCSS、JSが同梱されています。フレームワーク内においてはタイトルバーや各種ボタン、リスト、登録フォーム、スライダーなどがあらかじめ用意されていて、簡単な指定でそれらを使う事ができます。iPhoneでテストするにはホームボタンにブックマークするだけ。それほど機能が多くなくシンプルかつ純正に近いデザインなので、WebApp制作のベースとして使いやすい印象です。

[CSS] Overriding The Default Text Selection Color With CSS – テキスト選択時のハイライト色をコントロールするCSS

  • Pocket
  • このエントリーをはてなブックマークに追加

Webサイト内においてテキストを選択された際のハイライト色をコントロールするCSS。作り手側による任意の色が指定できます。自分の場合普段Macを使ってて、システム環境設定の一般パネル内で緑を指定してるんですが、たまにそこで指定した色以外の色でテキスト選択される場合ありますよね。実はアレ、前から気になってはいたんですが、どうやんのか知りませんでした。selectionてプロパティで背景色指定すりゃイイだけなんですね。ひとつ勉強になりました。

[Material] Agiledesigners – Webデザイナーのためのリソースまとめサイト

  • Pocket
  • このエントリーをはてなブックマークに追加

Webデザイナーのためのリソースまとめサイト。どのようなリソースかというと、アイコン、テクスチャ、ブラシ、フォント、ワイヤーフレーム、ECサイトツール、Webアプリケーション、フォトショッププラグイン、オンラインのコーディングツール、フレームワーク、ローカルソフトウェア、CMS、サイト解析ツール、オンライン共有ツール、マーケティングツール、プロジェクトマネージメントツール、そのたブログなどの情報リソースへのリンクなどがその内容。いやー盛りだくさんです。情報量が多く、広く浅くという感じのまとめサイト。けどなかなかイイですわこれ。役に立ちそうです。