[B! *Code][Code_CSS] arata3da4のブックマーク

コーディングの必須ツールになりそう。ステキなCSSスタイルガイドを生成する｢styleDocco｣の導入とgrunt.jsでの自動化のメモ | Mnemoniqs Web Designer Blog

プロジェクトでコーディングする時に、複数の作業者がいる場合にスタイルガイドはとても重要です。特にスマートフォン向けのサービスでは、モジュールの共通化や画像のスプライト化がもろにページ表示速度に影響するため、より精度が高く細かいアップデートに耐えうるCSSスタイルガイドが必要になります。これをExcelやPowerPointで管理していると、細かい変更の反映が大変だし、なにより見にくい。そんな時、こちらの記事「CSSプリプロセッサでスタイルガイド」 inkdesignの中で、スタイルガイドは”生きている”ドキュメントでなければいけないというシビレるキャッチで紹介されていた「styleDocco」というスタイルガイドジェネレータを発見。これはなんだか良さそうだ！とプロジェクトに取り入れてみることにしたので、導入とか設定とかをメモ。「styleDocco」ってなに？「style

arata3da4 2012/12/17

リンク

[CSS]コピペでOK！画像のホバー時用のかっこいい新しいエフェクトのまとめ

HTML 各デモのベースとなるHTMLです。 div要素のclassを変更して利用します。 <div class="pic"> <img src="image.jpg"> </div> 各デモで共通で使用するスタイルです。 * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; } body { background: #333; } .pic { border: 10px solid #fff; float: left; height: 300px; width: 300px; margin: 20px; overflow: hidden; -webkit-box-shadow: 5px 5px 5px #111