[CSS]box-shadowを使って、紙がふわりと浮かんだようなエフェクトをつけるスタイルシートのまとめ | コリス

2012/02/27 735 users コリス box-shadow Effec エフェクト CSS

デモ 実装 デモ デモはbox-shadowに対応した下記のブラウザでご覧ください。 対応ブラウザ Internet Explorer 9.0+ Firefox 3.5+ Chrome 1+ Safari 3+ Opera 10.5+ 実装 基本となるHTML 8つの各デモのHTMLの基本は同じで、class名が異なるだけです。 <div class="box effect"> <h3>Effec... 続きを読む

[CSS]hr要素をおしゃれにスタイリングする8つのテクニック | コリス

2011/11/23 613 users コリス background border CSS hr要素

デモページ CSS3を使った8つのテクニック デモページの8つの実装方法を個別に見てみましょう。 HTML HTMLは全デモ共通で、hr要素にclass名を付与するだけのシンプルな実装です。 <hr class="style-one"> 繊細なグラデーションを使ったデザインです。 hr.style-one { border: 0; height: 1px; background: #333; ba... 続きを読む

[CSS]スタイルシートの量を少し減らした、新しいclearfix -micro clearfix | コリス

2011/04/25 552 users コリス clearfix CSS 要素 スタイルシート

「clearfix」はフロートした要素が親要素からはみ出してしまうのを回避するもので、当サイトでもいくつか紹介してきました。 今回紹介するのは、スタイルシートの量を更に減らし（class名も短く）した「micro clearfix」です。 この新しいclearfixの対応ブラウザは、下記の通りです。 Firefox 2+ Safari 2+ Chrome Opera 9.27+ IE 6+, IE... 続きを読む

もう、class名やid名で悩まないんだからっ！！｜CSS HappyLife

2007/01/15 2391 users CSS HappyLife ID名 チョット ボク こっから

class名やid名って付ける時悩みませんか？ 今でもボクは結構悩むんですが、そんな悩みを解決する為に、人さまのソース覗きまくってよくあるclass名とid名を拾ってきました。 これで、チョットだけ作業効率アップ！？ ---- こっから続き 全体に使えそうな感じ wrap wrapper top-wrapper wrapperAll frame mframe all-frame container... 続きを読む