よく利用するのに思わず調べてしまうCSSのメモ
自身のコピペ用です。
CSS3
テキストの影効果
1 | text-shadow: 1px 1px #ddd; |
ボックスの影効果
1 2 3 | -moz-box-shadow:0px 0px 10px #ddd;-webkit-box-shadow:0px 0px 10px #ddd;box-shadow:0px 0px 10px #ddd; |
ボーダーの角丸
1 2 3 4 | border-radius: 10px;-webkit-border-radius: 10px;-moz-border-radius: 10px;// 上から、[CSS3]、[Safari,Google Chrome]、[Firefox] |
グラデーションは・・画像使うかなぁという感じでなし。
CSS3未満
ボーダーの線種。
1 2 3 4 5 6 | border: 1px dotted #ddd;solid // 1本線double // 2本線dashed // 破線dotted // 点線 |
位置指定
1 2 3 4 5 | position: absolute;relative // 相対位置absolute // 絶対位置fixed // スクロールしても絶対位置固定 |
要素指定。サイドバーのブロック要素リンク等で使用
1 2 3 4 | display: blockblock // ブロックレベルで表示inline // インラインレベルで表示 |
透過の設定。画像のキャプチャ等で使用
1 2 3 4 | filter: alpha(opacity=25);-moz-opacity:0.25;opacity:0.25;// 主要ブラウザに全対応。 |
テキストを隠して画像で表示させる。
SEOスパムと一時期話題になったが画像の代替テキスト程度であれば何ら問題なし。（google公表済み）
1 | text-indent: -9999px; |
回り込み解除
1 | clear: both; |
