PrefixrがAPIでEspresso・Codaなどに対応

Prefixrは、CSS3のベンダープレフィックスをいい感じに追加してくれるサービスです。An Update on Nettuts Prefixr | Nettuts という記事を読み、Espresso、Codaなどに対応していることを知り、Espressoで試してみました。
PrefixrのAPIページを開くと、現在の対応アプリケーションが記載されています。Espresso、Code、Sublime Text 2などのエディタに対応しています。変わったところではAlfredにも対応しています。

アニメーションできるプロパティがわかる一覧表、「animatable」

「animatable」は、CSS3の transition を適用できるプロパティを一覧を掲載しています。ウェブサイト作成時に、無意味なCSSプロパティを指定をすることはブラウザのレンダリングパフォーマンスを落とします。このツールを使えば余計なプロパティにアニメーションを指定しなくて済みます。

スマホでも使える！パフォーマンスアップの為のCSS記述方法

「CSS Lint」は、CSS記述方法によるパフォーマンスをチェックできるツールです。開発したのは、Yahoo!、 Facebook でパフォーマンスチームだった Nicole Sullivan（ニコール・サリバン）です。Web Directions East 2009 で来日したこともあります。

コーディングの手間を省くHTML5 & CSS3 フレームワーク

「Perkins」は HTML5&CSS3のフレームワークです。
「LESSスタイルシート」とmixinを利用してボタン・テーブル・タイポグラフィー・フォームなどのマークアップとスタイルシートがすべて用意されています。

CSS vs CSS3 スピードテスト

１年程前にCSS3を利用するとブラウザに負担をかけてしまい、ウェブサイトの表示パフォーマンスが悪くなる　などということを言われたことがありました。おそらく、ブラウザの進化の過程では、そんな時もあったのかもしれません。でも最近ではCSS3がパフォーマンスが悪くなるというのは間違いのようです。

Firefox も CSSアニメーションをサポート

CSS3 のアニメーションですが、現在のところサポートしているのは Webkit系のみでした。しかし、Firefox も CSS3 アニメーションをサポートすることが分かりました。

Firefox の David Baron が自身のブログの中で紹介をしています。

David Baron Blog

動画は下記で紹介しています。

jQuery Mobile って何だ？

jQuery Mobile は iOS や Android、Windows Phone7, BlackBerry などOSやブラウザに関係なくWebサイトを「アプリ」のように制作出来るフレームワークです。 jQuery の名前の通り jQuery Mobileは jQueryのコアを利用します。

今回は jQuery Mobile の事を少し考えてみたいとおもいます。

CSS3 transition を生成するツール「Ceaser」

CSS3のtransitionはアニメーションを設定できるプロパティだが。いざ「transition」を利用してウェブデザインのパーツにアニメーションの動きを付けるとき、実際のパーツを何度も動かしてアニメーションのスピードを調整するのは非常に面倒だ。そんな時に非常に便利なのが「Ceaser」（シーサー）だ。このツールは、サンプルパーツを自由に調整してオンライン上でコードを自動生成してくれる。

絶対に使いたい、modernizr 2.0

最近では、すっかりCSS3を利用する人には定着した「modernizr」当初は、CSS3の対応状況をチェックするツールと誤解をしていた人も多くいました。しかし、このツールは、CSS3やHTML5のサポート状況をclass名としてhtml要素に反映し、そのclass名を利用して「プログレッシブ・エンハンスメント」を適用するJavaScriptです。

IE6でも CSS3のセレクターを利用できる「Selectivizr」

最近では、IE6への対応は殆ど求められなくなってきていますが、IE7やIE8は今でもウェブサイトの制作では対象になることが多いです。その際に、IE7、IE8へCSS3のセレクターを利用できるようにする 「Selectivizr」というライブラリがあります。このjsライブラリは、海外の有名なデザイナーが最近ではこぞって利用しています。

box-shadow で作る、 ページカールエフェクト。

最近、アスキーさんでCSS3に関する記事を書かせてもらっています。先日、box-shadow について記述させていただいたいのですが関連内容を１つ。box-shadow で影をつける効果を紹介したのですが、これは凄く使えます。ギャラリーサイトなどを作成する際には、特に便利です。

隠れていたCSS3「Current Color」

皆さんは、CSS3を最近は勉強していますか？CSS3には様々なモジュールがあって、全部を把握するのは非常に大変です。今日は隠れたトリビア的なCSS3です。CSS Color Module Level 3 には「:currentcolor」なるものがあります。単純にいうと inheritみたいなものです。該当の要素に適用されていた色を継承させて適用できます。

Google のボタンをCSSだけでつくる

Googleのトップページの検索ボックスの横にある「Search」ボタンは2009年頃から 画像は使わずに CSS のみで作成されています。そこで、今日は簡単に CSSだけでつくるGoogle風のボタンを紹介します。CSSでつくる理由？それはスマートフォンです、画像でつくっていたりしたらページのダウンロードに時間がかかってしまいます。

HTMLソース と CSSソースは下記になります。<button>要素と<input />要素のバージョンを別々に用意しました。

CSS3 グラデーション WebkitとFirefoxが同じに！

2011年1月14日の Webkit.org の Surfin Safari にて CSS3 のグラデーションの記述が変更になったことが紹介されました。CSS3 グラデーション は、Webkit が2008年に最初に紹介した CSSのプロパティです。今回、この記述方法に変更がありました。