[B! CSS][javascript] megamakのブックマーク

Site Under Maintenance

We'll be back soon! Our site is currently undergoing maintenance. Please check back later.

megamak 2013/08/30

リンク

[CSS]永遠にスクロールしていたくなる、気持ちいいエフェクト -CSS Scroll Effects

CSS Scroll Effects [ad#ad-2] スクロールのエフェクトは全部で9種類あり、どれもかっこよく気持ちいいです。デモはFirefox, Chrome, Safari でご覧ください。

megamak 2013/06/13

スクロールもたくさんあるなー

リンク

CSSのfloatを解除（クリア）する方法をまとめてみました。以前、floatを解除するテクニックとして以下の記事をエントリーしたのですが、その後色々なテクニックがあることに気がつきました。 CSS の after 擬似要素で回り込みを解除するということで、そもそものfloatの問題（というか仕様）と、その対処方法についてネットで調べた情報を一通りまとめました。１．floatにより親要素の高さが出なくなる（＝背景がなくなる）問題親要素の中にある子要素にfloatプロパティが設定されていると、内容をもたない親要素の高さが0になるという仕様になっています。例えば、次のCSSとHTMLを例にします。 <style> #container { width: 200px; background: #ddd; } .box { width: 25px; margin: 10px; paddi

megamak 2013/04/22

リンク

float解除の決定版。clearfixを考えたら、進化した。

現在この中でclearfixでよく使用されているプロパティは display:inline-block; height:1%(min-height:1%) zoom:1; でも良く考えたら、全て微妙です。 zoom:1はIEの独自仕様ですし、heightを使用する場合は、IE6,7に対応させるために2つのプロパティが必要です。 display:inline-blockもボックスの要素を変形させることになります。 hasLayoutのスイッチを見た時に、一番理に適ったプロパティはwidthかなと思いました。子要素を囲む要素として、divやulなどデフォルトCSSがdisplay:blockのプロパティのものが多く、display:blockのプロパティの場合、width:100%で問題ないと思ったからです。現在のブラウザ状況に適したclearfix 上記を踏まえ見直したclearfixが

megamak 2013/04/22

リンク

[JS]レイヤーに要素を配置し、分離して3Dにぐるぐる回転させるスクリプト -CSSMatrix

jQueryのプラグイン「CSSMatrix」を使って、不連続のレイヤーに要素を配置し、それぞれを分離して3Dにぐるぐる回転して表示するデモを紹介します。

megamak 2013/04/22

リンク

SQLのEXPLAINをCSSにも。スタイルシートデザインのお供に·CSS Explain MOONGIFT

CSS Explainはセレクターを入力すると、その解析結果を表示してくれるライブラリです。 CSSはWebデザインと構造とを切り離すために使われていますが、JavaScriptから指定することも多くある意味でプログラマブルな存在です。そんなスタイル設定をSQLのExplainライクに解析するのがCSS Explainです。トップページです。 bodyはTagとして認識されています。細かな情報はconsoleで確認すると分かります。 CSS Explainでは入力したセレクター、個別のパーツに分解した結果、セレクターの詳細度、id/tag/クラスおよびユニバーサルのカテゴリー、キー、スコア、メッセージが返ってきます。そのまま使うというよりも、デザインする上で詳細を調べたいという時に使えそうなソフトウェアです。 CSS Explainはnode.js/JavaScript製のオープンソー

megamak 2013/04/22

きになるねー

リンク

HTML5 × CSS3 × jQueryを真面目に勉強 – #17 Bootstrap をカスタマイズしてオリジナルテーマを作ってみた | DevelopersIO

トレンディ且つナウい Web ページを構築するための CSS フレームワーク（※枠組み）です。フレームワークというとなんだか大袈裟な響きですが、実態は単なる CSS と JavaScript という２つのテキストファイルだけで特別な使い方等もありません。利用者はこれらを HTML ファイルに読み込ませたのち、Bootstrap 側で既に定義済みのクラスを各 HTML 要素に指定するだけで、自分は一行も CSS を書くことなく高品質な Web ページが作れてしまったりします。 Twitter Bootstrap うろ覚えですが、2011年の夏頃に最初のメジャーバージョンがリリースされました *1。当時 Twitter のエンジニアで現在は Github にお勤め中の Mark Otto 氏によって開発され、2013年4月時点ではバージョン2.3.1が最新版となっています。またバージョン3.0