反射させて表示できる「box-reflect」 現状ではwebkit系のブラウザのみの対応のようです。鏡面効果もこのプロパティで実現することができます。 -webkit-box-reflect:right; これで右側に反転させて表示させます。 Yukimi Satoハック2014.04.17 581
CSSだけで括弧でくくっているようなボックスを作る CSSだけで、括弧でくくっているようなボックスを作ります。表示サンプルはこちら。 CSS .box{ width:10em; padding:.5em 1.5em; position:relative; backgrou… haradaハック2014.04.17 1,978
IE6~9までのCSSハック IE9 :root body { color:#000000 ¥0/; } IE8 body{ color: #000000¥9; } IE7 body{ *color: #000000; } IE6 body{ _co… Yukimi Satoハック2014.04.16 280
Sassで条件分岐(if)を使う 変数の値をもとに出力するCSSの分岐を行えます。 Sass $setting: true; @if $setting { //settingが有効(true)の場合出力される .test {margin: 0} } 上記… ゴトーハック2014.04.15 1,587
aタグの「target=”_blank”」だけCSSを指定する 見本はこちら CSS a[target="_blank"] { background:#0099FF; color:#FFFFFF; } HTML <p><a href="… Yukimi Satoハック2014.04.11 23,840
floatさせた画像の横のテキストが回り込まないようにする テキストをfloatさせた画像の横に並べた際に、テキストを画像の下に回りこませたくない場合、設定しておくと便利な一行です。表示サンプル CSS .textBox { overflow:hidden; } HTML <… haradaハック2014.04.11 681
inputがdisabledの時のCSSを指定する inputがdisabledの時のスタイルも指定することができます。 見本はこちら HTML <form> <p><input type="text" value=&qu… Yukimi Satoハック2014.04.11 40,402
【ボタンデザイン07】紫芋っぽい色のボタン 最近、紫芋を使ったスイーツが増えてきましたね。 見本はこちら http://jsdo.it/Yukimi.Sato/rBvF HTML <a class="btn gradation-purple&quo… Yukimi Satoハック2014.04.09 324
Compassで画像のパスを自動出力する Compassの「image-url」関数を使うことで、長い画像の参照パスを意識することなくCSSコーディングすることができます。 まずCompassの設定ファイル(config.rb)に下記設定があることを前提とします… ゴトーハック2014.04.07 551