CSSで値の複数指定
ショートハンドのことではありません。
あるCSSプロパティでは、「1つまたは2つ以上の値が指定できる」ということを、普段コーディングするときについ忘れてしまいがちです。
しかし、これを覚えておくことで、いろいろ便利な場面がでてくるでしょう。
例えばbackground-image
プロパティでは、画像の複数指定ができます。これを使うことで、「タイトルの左右にアイコンをつける」ということが簡単に出来るでしょう。
.title { background-image: url(emotion-smile.png), url(emotion-angry.png); background-repeat: no-repeat, no-repeat; background-position: left center, right center; background-size: 38px , 38px; }
このように1つのプロパティに対して複数の値が指定できるものは、他にbox-shadow
やtext-shadow
があります。
box-shadow
では、複数の影をつけることができます。
複数のボーダーを指定したいときなどに便利ですね。
.multiple-box-shadow { box-shadow: inset 0 0 0 1px #fff, inset 0 0 0 2px tomato, inset 0 0 0 3px #fff, inset 0 0 0 4px tomato, inset 0 0 0 5px #fff, inset 0 0 0 6px tomato, inset 0 0 0 7px #fff, inset 0 0 0 8px tomato, inset 0 0 0 9px #fff, inset 0 0 0 10px tomato, inset 0 0 0 11px #fff, inset 0 0 0 12px tomato, inset 0 0 0 13px #fff, inset 0 0 0 14px tomato, inset 0 0 0 15px #fff; }
text-shadow
では、box-shadow
と同じようなことが出来ます。
ソリッドシャドウをつけてみるのもおもしろいですね。
.multiple-text-shadow { text-shadow: 1px 1px SteelBlue, 2px 2px SteelBlue, 3px 3px SteelBlue, 4px 4px SteelBlue, 5px 5px SteelBlue, 6px 6px SteelBlue, 7px 7px SteelBlue, 8px 8px SteelBlue, 9px 9px SteelBlue, 10px 10px SteelBlue; }
まだ他にもあるかもしれませんが思いつかないので... とりあえず今頭に思い浮かんだものを書いてみました。
他に何かあるかな。