ボックスの1辺だけに影をつける | Nuta.log
CSS3で追加されたbox-shadowを用いてボックスの1辺だけに影をつけたいと思います。 ※box-shadow対応ブラウザでご覧ください。 ぼかしの大きさが0の影の場合 単純に影を延ばす方向に影をずらすだけです。 box-shadow: 0 8px 0 #ccc; 右辺だけに影 ぼかしの大きさが0より大きい影の場合 上記と同じようにやると、ぼかした分影がボックスより大きくなっているため、他の辺からも影がはみ出てしまいます。 そこで、box-shadowに”影の広がり”の値を追加することによって影を小さくしてやります。この値は0の場合は省略してしまうのであまり見かけませんが、”ぼかしの大きさ”の後ろに指定します。 box-shadow: 0 9px 12px -9px #222; このように”影の広がり”に”影の大きさ”にネガティブ値を指定することによって、他の辺から影がはみ出なくなり
Animated Media Queries | CSS-Tricks
If you apply a transition on an element for a particular supported property, and that property ever changes, it will use that transition. If a class name on that element changes and the new class changes that property, it will transition (assuming what that class does isn’t remove the transition). If JavaScript literally changes the that style property, it will transition. Likewise, if a new media
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
