[CSS3] Animate.css – アニメーションに関するCSSフレームワーク
アニメーションに関するCSSフレームワーク。サイト上では多くのプリセットアニメーションが紹介されてて、ボタンごとに異なる動きが割り当てられてます。ダウンロードはGitHubから。ファイル一式をDLすると、アニメーションごとにCSSが分けて格納されてるので、必要な動きのみimportすれば使えます。ナイスですねーこれ。
Tag Archives: CSS
[CSS] Is your map boring? Fold it! – Google mapsのちょっと凝った見せ方
Googleマップをただ表示するだけではつまんないので、ちょっとかわいい感じにしてみたYO！という内容の記事。紙の地図っぽい折り目と浮きを、透過PNGを使って表現してます。最初mask-image使ってんのかと思ってソースを見たらそうでもなく、透過PNGのframe.pngをimgタグで配置して、classで背景要素としてGoogle mapsを個別に指定していました。なるほどなーって感じです。特別難しい事をしているわけでもなく、アイデアがナイスだなーと思いました。これGoogle mapsだけじゃなく画像のサムネール表示とかにも使えそうです。最近円形のマスクかけるの流行ってるけど、マスク芸ってのも今後バリエーションが色々増えてくんでしょうね。
[CSS] SpritePad – 画像を放り込むだけでCSS Spriteのコードを生成してくれるウェブサービス
コーディング手法のひとつ、CSSスプライトってわりとコード書くのメンドいっすよね。このサイトでは画像を放り込むだけでCSSコードを生成してくれます。SafariではできなかったのでFirefoxで試してみました。そしたらこれがなかなかの便利っぷりで、そっこーでブックマーク放り込みました。いやこれナイスですよ。スタートするとキャンバスが出てくるので、そこに必要な画像ファイルをポイポイ放り込んで行けばオッケー。最初からCSSスプライト用にまとめた画像1つでも、複数でも大丈夫です。放り込む課程でリアルタイムにCSSコードが生成されます。一通り画像の配置が終わったら、必要に応じて「Fit document」をしましょう。画像サイズが最適化されます。あとは「Download」ボタンでファイル一式をZipファイルで落とせます。またプレミアムユーザーになれば、複数画像のオートアラインなんかもできるみたいですが、無料でも全然使えるっていうか超便利です。コーダーの方にオススメ。
[CSS] How to Simulate CSS3 box-shadow in IE6-8 Without JavaScript. – JSを使わずにIE6〜8でbox-shadowをシミュレートする方法
CSS3のbox-shadowを、IE6〜8でシミュレートする方法についての記事。ブラウザ業界のできない子であるIE6〜8では言うまでもなくCSS3は認識できません。そこをJSを使って無理矢理描画させるという方法もあるようなのですが、この記事ではJSを使わない方法が紹介されてます。コード記述と描画サンプルが画像でまとめられており、どうしてもこれをやらなきゃいけない場面では役に立ちそうです。IE早く絶滅してくんないかなー。
How to Simulate CSS3 box-shadow in IE6-8 Without JavaScript.
[Generator] Ribbon Builder – リボンインターフェースのジェネレーター
Ui ParadeのLive Toolに新しいのが出てました。Button Builder、Form Builderに続いて次はRibbon Builderだそうです。名前の通りリボンインターフェースのジェネレーターで、リボンの幅、折り返し部分の大きさ、ステッチとシャドウの有無、テキストサイズ、リボンのグラデーション部分の色指定などわりと細かい部分までデザインできます。一通りデザインできたらページ下部のGenerateボタンでソースコードを生成できます。リボンインターフェースってコード書くの面倒なので、こういうのイイっすね。画像を使わずにCSS3だけで細かく描画できている点もナイス。
[Generator] PXtoEM.com – px指定からem指定へのコンバーター
フォントサイズをpx指定からem指定に変換するコンバーター。まぁ早い話がサイズの計算機です。機能としてはすごくシンプルだけど、このサイト使えますわ。ベースとなるBodyのフォントサイズをまず指定して、任意のフォントサイズにするには何emに指定すればいいのかすぐに分かります。最近じゃフォントサイズの指定はemで行う機会が多いので、このサイトは重宝しそう。とってもナイス。
[CSS3] CSS tips and tricks – RedTeamDesign – CSSに関するTipsを集めたブログ
CSSに関するTipsをブログ形式で紹介するサイト。1記事1作例で「これナイスだYO！」的な感じで紹介されてます。まぁウチのブログみたいなもんですね。紹介されてる作例がわりと実用的なものが多く（例えばナビゲーションやパンクズなど、パーツ単位のものが多い印象）、デザイナーの人ならダラダラと見てるだけで「今度これ使ってみよ」とか思えるものが多いです。ネタ収集に使えそう。
[CSS3] CSSDeck – CSSだけで描画した作例とソースのギャラリー
CSSだけで描画したアートワークやボタン、ナビゲーションメニューなどのギャラリーサイト。ページ下部の「Load More」ボタンを押すとページ内ロードされます。全部で3ページ分しかないので作例の数はそれほど多くないけど、見た目のキャプチャと動作デモ、ソースのそれぞれが分かりやすく掲載されているので、サクっとブラウズ＆流用できる点がナイス。スマートフォン向けサイトでのちょっとしたボタン作成時などに便利そうです。