See the Pen CSSで画像をぼかしてオンマウスした画像だけ鮮明に by maru (@maru0014) on CodePen.
img { width:30%; -webkit-filter: blur(2px); filter: blur(2px); }
filterプロパティはその名のとおり画像にフィルターをかけることができます。
これを使って画像をぼかして、hover時に通常表示に直しています。
img { width:30%; -webkit-filter: grayscale(100%); filter: grayscale(100%); } img:hover { -webkit-filter: grayscale(0%); filter: grayscale(0%); }
その他にも色々なエフェクトがかけれる！ ↓こちらが参考になります。
ECサイトなどでタグの規制があり、JavaScriptが使えない環境下でもこれなら可能。
jQueryなどで実装する場合はスクロールイベントを拾ってきて表示させるんじゃないかと思いますが、 この場合はheader部分の背面にフローティングメニューを隠しておくイメージです。
z-index:2;を指定するz-indexを指定するにはpositionの指定も必要なので、position:relative;も指定します。
これでheaderが最前面に表示されることになります。
z-index:1;を指定するこちらはフローティング化するので、
position:fixed;とtop:0;を指定します。
これでheaderの背面に隠れることになります。
See the Pen CSSのみで「スクロールすると表示されるフローティングメニュー」 by maru (@maru0014) on CodePen.
headerに背景色もしくは背景画像を付けるのを忘れずにね！
HTML5&CSS3デザインブック (ステップバイステップ形式でマスターできる)
今日のお題は「きっちり」三等分できる書き方。 どんな書き方を想像しましたか？
この書き方を知るまで僕は
.col3 li { width : 33.33333% ; }
のような書き方をしていました。
実際にこの書き方をしているウェブサイトもよく見かけます。 が、性格の問題もあるかもしれませんが割り切れない 余り があるのがちょっと許せない。
width: 1/3;
みたいな書き方ができたらいいのになー って思ってました。 で、探してみたところ発見！
1/3サイズを指定する方法があったんです！ 感動(´ｪ`)
対応ブラウザ：IE9以降、Safari6以降、Google Chrome19以降、Firefox4以降
使い方：
.col3 li { width : calc(100% / 3) ; }
これだけ！ 簡単ですね。全体の幅100%の3分の1サイズという、まさに僕が探していた等分指定！！！
上記にさらにベンダープレフィックスを付け加えて・・・
li.3col { width : 33.33333% ; /* 未対応ブラウザ用フォールバック */ width : -webkit-calc(100% / 3) ; width : calc(100% / 3) ; }
これで完成形です！！
See the Pen width: calc() by maru (@maru0014) on CodePen.
ウェブページ製作で実際に使う場面としては、ランキングのトップ3を横並びにさせたい時なんかオススメです。
参考: Can I use... Support tables for HTML5, CSS3, etc
執筆時点の2015年においては未対応ブラウザに留意すべきと考えられましたが、現状の主要ブラウザは全て対応済みなのでベンダープレフィックスやフォールバックも不要かもしれません。
※個人的な意見です。実装の際はアナリティクスで利用者の使用ブラウザを調査した後判断しましょう。
見出しの背景画像として、幅1pxの画像をリピート表示させようとしたところAndroid標準ブラウザでのみ機能しなかったお話。
ChromeやSafariでは正常に表示されたがAndroid標準ブラウザのみ背景が表示されなかった。
background-sizeを backgroundプロパティにショートハンドで
例) background: url(image.jpg) repeat-x center center / contain rgba(0, 0, 0, 0);
などと書いた場合にAndroid標準ブラウザで機能しないという記事をいくつか見つけたが、今回はきちんと別で書いている。
次に考えられる要因は"サイズ指定自体が間違っている"
結論から言えばこれでした。
他のブラウザでは幅100%か原寸の幅1pxとして認識されていたautoがAndroid標準ブラウザでは読み込まれず、背景画像自体が一切表示されなかった。
今回は下記のように記述を変えることで対応。
もう一つやり方があるとすれば、リピートではなく幅100%にしてしまう方法
Android標準ブラウザでも背景画像が表示される（幅100%指定）
まぁ文字数も大して変わらないのでどちらでも良いと思いますが。
楽天 スマホ商品ページ共通説明文の画像CSSが書き換えられていた
商品ページ共通説明文の画像に対して厄介なCSSが記述されていました。
共通説明文内の画像すべてに
block表示
横幅最大100％
余白0
が、!importantで強制的に適用されるというふざけた記述。
importantつけてんじゃねえよ！ヽ(｀Д´#)ﾉ ｳﾜｰﾝ
サイドフローティングバナーなどを使っている店舗は強制的に画面幅いっぱいに表示されたり、
display:none;で一時的にバナーを非表示にしていたりする店舗は勝手にdisplay:block;で上書きされて表示されていたり・・・。
要注意ですね。
対策としては楽天のCSSよりも要素名を詳細に指定してimportantをさらに上書きすること。
#shopCommonText img よりも詳細に
div#shopCommonText img と指定し、プロパティにも !important をつければOKです。
というかんじですね。
今回の仕様変更、CSSを適用していない店舗ならばwidth="100%"の指定が省けるので大助かりでしょうけど独自にCSSを適用している店舗はorz
朝から1時間ほど無駄にしました。
