kuroaka1871のブックマーク - はてなブックマーク

kuroaka1871 id:kuroaka1871

ブックマーク / squeeze.jp (3)

もうCSS設計で悩まない！「CSSコーディングガイドライン」策定のための参考記事・スライド 7選 / SQUEEZE - Web Design Studio -
構造やクラス名、プロパティの記述方法などをルール付ける「CSSコーディングガイドライン」策定のための参考記事を紹介します。チームでの共有、コーディング効率やメンテナンス性などの改善のためにも、これを機会にガイドラインを導入してみてはいかがでしょうか。コーディング規約を作ろう"制作チームの規模が大きくなればなるほど、コードの統一性は大切" ▶ コーディング規約を作ろう Webクリエイターボックスコーディング規約を見直すうえで抑えておくべきポイントを紹介。チェックポイントコーディング規約に含むべき項目・ディレクトリやファイルの階層・名前・記述順やインデント、単位などのフォーマット・ID,classなどの命名規則・対応ブラウザー CSSガイドラインを翻訳してみた"多くの開発者が関わる場合、メンテナンス可能、コード見通し良く、拡張可能にするために統一された方法を用いることが重要"
kuroaka1871 2013/09/15
CSS

コーディング

ガイドライン
リンク
Webデザインの参考にしたい遊び心あふれる「ページトップ」ボタン9個 / SQUEEZE - Web Design Studio -
Webサイトを閲覧中に、ページ上部に戻るための「ページトップ(スクロールトップ)」ボタン。ページの機能としての重要性は低く、あまり目立たない(目立たせない)ものです。そんな中でも、おっと思わせる遊び心のあふれる「ページトップ」ボタンをご紹介します。ページトップ(スクロールトップ) ボタン女子旅つくるプロジェクト｜JTB × KOBE COLLECTION / TOKYO RUNWAY http://jtpj.jp/ 旅のサイトということで、滑走路と雲が現れ、飛行機が離陸します。台東区でウェブ制作なら株式会社LIG [リグ] http://liginc.co.jp/ 凄い勢いで飛び出るアニメーションは、広告バナー付き。ブランディング、デザイン｜アートディレクションカンパニーDONGURI http://www.don-guri.com/ 一見、普通のボタンですがクリックすると、どんぐ
kuroaka1871 2013/09/11
*デザイン参考サイト

デザイン
リンク
H1一つでここまで出来るCSS見出しデザインのアイデア9個 / SQUEEZE - Web Design Studio -
HTMLはh1要素だけで、CSSの「border」や「box-shadow」「transf orm」「linear-gradient」、擬似要素の「:before」や「:after」を使った見出しデザインをご紹介します。まずはサンプルをご覧ください。サンプルページ » 01.切り取り線紙を切り取ったようなデザインです。サンプルとソースを見る » ポイント垂直方向の影のオフセット距離を設定しただけでは、左右両脇にも影ができてしまうので、一旦5px下に影をオフセットしたうえで、広がり距離を負の値(-4px)にし縮小することで、上部の影のみを残しています。 border-top:1px dashed #aaa; border-bottom:1px dashed #aaa; background:#eee; text-shadow:1px 1px 0 rgba(255,255,255,1);
kuroaka1871 2013/03/10
css

Webデザイン
リンク
1