CSS小技系

CSS小技系を集めてみました。

上下左右ど真ん中

サムネイル画像などをトリミング

かなり簡単にできる。調べるのが難しかったくらい(=_=;)
1行追加でOK！CSSだけで画像をトリミングできる「object-fit」プロパティー
image clipping

影とか浮かんだりとか

Gist埋め込み1に使ってます。
Webデザインにシャドウを取り入れる時のポイントいろいろ

紙が重なっている感じに

元ネタどこ行ったんだろ…
こんな感じに数枚の紙を重ねた感じになります。
一番上の紙の内側に薄く影を入れてありますので、不要な場合は最後のinset 0 0 15px rgba(0,0,0,0.05)を削除してください。
影の濃さは0.05で微調整を。

.pile-up {
    box-shadow:1px 1px 1px 1px rgba(0,0,0,0.1),10px 10px 0 -5px #ffffff,10px 10px 4px -5px rgba(0,0,0,0.3),13px 13px 0 -5px #ffffff,13px 13px 8px -5px rgba(0,0,0,0.5),16px 16px 0 -5px #ffffff,16px 16px 12px -5px rgba(0,0,0,0.7),19px 19px 0 -5px #ffffff,19px 19px 16px -5px rgba(0,0,0,0.9), inset 0 0 15px rgba(0,0,0,0.05);
    padding:30px;
}

  1. 撤去しましたが、一応記録として。あとGitHub Pages - Theme CustomizeでSCSSを紹介してますが、ここではCSSにコンパイルしてあります。SCSSに関してはSCSSの記事参照。 ↩