-
-
CSS transparent, transition, box-sizing
elm:hover { transition: all 1s linear; }elm { transition: all 1s linear; }
-
REM単位によるフォントサイズ指定
Font sizing with rem - Snook.ca.
pxによるサイズ指定は、変更が困難になり、emによるサイズ指定は、相対的なサイズであるが故に、ルールの重複などで、サイズに問題が出る
css3では、ルートフォントサイズに対する相対指定ができるremが使える、従来から指摘されてきた、emの問題点が解消すると考えられている
-
縦方向にセンタリング #CSS - Qiita
[css]
.outer {display: table;
height: 100px;}
.inner {display: table-cell;
height: 100%;
vertical-align: middle;}
[/css]
-
Inner border settings
ボーダーをhoverなどで表示させる事で、ボーダー分のレイアウト崩れを防ぐ、とても便利なアイディア
Image Rollover Borders That Do Not Change Layout | CSS-Tricks.
#example-one a img, #example-one a{ border: none; overflow: hidden; float: left; } #example-one a:hover { border: 3px solid bla ...
-
HTML5 scoped attribute
HTML5 scoped attribute - destroy/dstorey.
- http://www.w3schools.com/html5/att_style_scoped.asp(b:title)
- http://css-tricks.com/saving-the-day-with-scoped-css/(b:title)
Now browser not support
But jQuery help you.
- http://arleym.com/scoped ...
-
New Repeating Background Image Options in CSS3 - SitePoint
New Repeating Background Image Options in CSS3 - SitePoint.
background-repeat: round space; /* width resizes, height static */ background-repeat: space round; /* width static, height resizes */ background-repeat: space no-repeat; /* fit til ...
-
リンクを無効にするスタイル
No links anchor element with CSS
記述したリンクを無効にしたいといった事がたまにあります。
例えば、
電話番号リンク等を作成した場合、PCではうまく動作しないので、メディアクエリ―を使って、一定のブラウザサイズ以上では、電話番号リンクが動作しないようにするとか
WordPressのプライマリーメニューなどで、親になる項目は、hoverした時に、サブメニューを表示したいけど親ページには飛ばしたくないといったケース等
少し工夫すると、CSSだけ ...
