CSSスプライトをドラッグ&ドロップで作成、保存もできるWebサービス・SpritePad
CSSスプライトの作成、保存、共有が 可能なWebサービス・SpritePadのご 紹介です。少し大きめのプロジェクト 向けのサービスですかね。ドラッグ とドロップで作れるのはちょっと 良かったです。
css
JavaScript無しで作るレスポンシブなコンテンツスライダー・CSS3 Responsive Slider
使えそうだったので参考にしました。 JavaScriptを使わず、CSSのみで動作 させるレスポンシブWebデザイン対応 のコンテンツスライダーのサンプル です。軽量化にも繋がりそうですね。
HTMLやCSSのマークアップのパターンを作成し、その場で編集、インタラクティブに確認出来るツール・・・・を作れるWordPressテーマｗ
ちょっとネタ的な話題。HTMLやCSSを書くと その場でインタラクティブに反映、確認する 事が出来るツールやWebサービスは沢山ある のですが、それをWordPressで作ってしまった ようです。こういう発想は全然思い浮かば なか...
HTMLファイルをアップロードすると、使われているclassやidを取り出してcssの雛形にしてくれるWebサービス・Bear CSS
日曜日です。如何お過ごしでしょうか。 さて、今日も軽い話題・・HTMLファイル を送信するとそのページで利用している classやidを抽出、cssの雛形としてDL 出来るようにするWebサービスです。
Photoshopで作成したかのようなクオリティのボタンやナビゲーションをCSSで作ってみた！的なものだけを集めたギャラリー・CSSDeck
CSS3でこんなクオリティのボタンが作れる！ みたいな記事をよく見かけると思うんですが、 そういったものだけを集めたデザインギャラ リーがありましたのでシェア。CSSの勉強に 如何でしょう。さもPhotoshopで作ったかの よう...
jQueryで動かすアニメーションエフェクトが素敵なプリローダー・CUSTOM PRELOADER EFFECT
ちょっとお洒落なプリローダーを探してた という方の参考になるかな・・と思ったの と、自分でも使いたかったので備忘録です。 アニメーションエフェクトが素敵なプリ ローダー・CUSTOM PRELOADER EFFECTの ご紹介です...
css3で実装する3Dなロールオーバーエフェクトのサンプル
面白かったのでご紹介。マウスホバーによるロールオーバーエフェクトをcssで3D表現したサンプルです。休日ですし、ちょっとネタ的な内容ですけど、これはこれで勉強になりました。いろいろと考えますね、ほんと・・
Webフォントを利用する際に知っておくと役立ちそうなTipsとかサイトいろいろ
Webフォントに関して調べ物をしたので 個人的なメモ。少し利用頻度があがって 来たので探しやすいようにまとめておき ます。まだちょっと使い慣れてないので もう少し勉強しないとダメですね・・ スマフォ向けのリソースもあります。 ...
cssとhtmlをその場で書くだけですぐに結果を確認出来る・dabblet
購読してるLea Verou女史のブログで 面白いツールが公開されていました のでメモ的にご紹介。以前も同じよ うなツールをご紹介しましたが、 もっと手軽に使えますのでこちらで も十分かもしれません。
JavaScriptは使わず、CSS3でコンテンツフィルターを実装する
土曜日なのでちょっとしたネタ。 JavaScript無しで、CSSのみで コンテンツフィルターを実装する 方法をご紹介。実用性は無いので こんな事も出来るんだねくらいに 受け止めていただけると。
ブラウザ対応表とかでよく見かけるようなチェック表をサクッと生成するWebサービス・Compare Ninja
css3とかHTML5のブラウザ対応表とか で良く見かけるチェック表を簡単に 生成出来るWebサービス。用途はもっと あるんでしょうけど、思いつくような 思いつかないような。でもまぁよく 見かけはするのでシェアしてみます。
レスポンシブWebデザイン設計用のシンプルなテンプレート・The Goldilocks Approach
もういくつも出回ってますので今更感 もありますが、個人的にはいくつあって も困らないのでご紹介。レスポンシブ Webデザイン設計用のシンプルなテンプ レート・The Goldilocks Approachです。 殆ど何もない状態な...
プロパティをインクリメンタル検索出来るCSSリファレンスサイト・InstaCSS
便利そうだったのでシェア。CSSの プロパティをインクリメンタル検索 出来るリファレンスサイト・InstaCSS です。キーワードを入れるだけで 検索結果が表示されます。ありそう で無かったですね。
CSS3の:nth-childセレクタで、3n+2とかを計算するやつ
あんまり使わないような使うようなセレクタ の:nth-childですが、自分の頭が宜しくない ようで、適応させたい箇所の計算で混乱しま す・・面倒くさいと思っていたのでいいツール ないかなと思ってたんですがシンプルでいい のがあっ...
昨日書いた「画像を使わずに見出しを水平線で挟むCSS」をもうちょい工夫してみる
昨日書いた記事は実装のみでしたので、 もう少し工夫してみました。border自体 さほど出来ることは多くはありませんが それでもちょっと素敵な見出しが画像 を使わず作れるのは個人的には結構 嬉しいTipsだったりします。
画像を使わずに見出しを水平線で挟むCSS小技
ちょっと素敵だったので備忘録。CSS で見出しを水平線で囲むテクニック です。本とかでよくある表現方法です が、これを画像を使わず実装しよう、 というもの。クロスブラウザで動作 しますので汎用性もありますね。
画像もJSも使わず、CSSのみでTwitterやApple、マクドナルドなどのロゴを作成、コードを公開しているサイト
CSSのみでOperaやIEのロゴを作成したり、 というのを以前はよく見かけましたが、 インスパイアされたようでTwitterや、 Apple、マクドナルドやナイキなど様々 なロゴをCSSのみで作成、コードを公開 してるサイトがあ...
軽量で、シンプルなCSSフレームワーク・Atatonic
結構前からあるみたいですけど、なかなか 良かったのでメモがてらご紹介。軽量で シンプルなCSSフレームワークです。有名 なフレームワークは使いやすく、高性能 な傾向ですが、結局無駄が出てしまうので 場合によってはこういうシンプルな...
Webフォントを上手くWebデザインに取り入れたサイトを収集しているギャラリーサイト・the WEB FONTS gallery
ありそうでなかったWebデザインギャラリー だったのでご紹介。Googleでも提供して くれている、Webフォント。日本語では なかなか難しいですが、英語圏ではかなり 一般化してきている印象です。そんな Webフォントを上手く利用...
CSS3のベンダープレフィックスを自動で付けてくれる手軽で軽量なJavaScriptライブラリ・cssFx.js
久しぶりにかなり便利そうな気がした ので備忘録。CSS3で各ブラウザに対応 させるために加えるプレフィックスを 自動で付けてくれるライブラリです。 将来的にCSS3のプレフィックスは付け る必要が無くなるのでそうなったら これを...
著作権放棄・シンプル・軽量で、iPhoneなどにもレイアウトを調整できるレスポンシブWebデザイン対応のHTML5フレームワーク・Fluid Baseline Grid
なかなか凄いフレームワークがあったので 反射的にメモ。パブリックドメインという のが何より太っ腹ですねー。自由に使用で きて、シンプルで汎用的、しかも軽量で iPhoneやiPadにもレイアウトを自動調整 するレスポンシブWebデ...
レスポンシブWebデザインに対応できる軽量なグリッドレイアウト用CSSを生成するシンプルなジェネレーター・NegativeGrid
シンプルでいいなーと思ったのでシェアがてら ご紹介。レスポンシブWebデザインに対応できる グリッドレイアウト構築用のCSSを吐き出して くれるジェネレーターです。必要最低限のコード だけ出してくれるのは嬉しいかも。頻繁に 使うも...