最近よく聞くズルい線とは?【ズルいテクニック】の紹介

どうも!リリース間近で、あまり記事を更新できていないtomicciです。

昨日までは40℃近い熱を出していました!(笑)

最近、エンジニア同士の会話で、フォームエリアの境目はズルい線でコーディングしといて!と言って通じることが多くなった気がします。

…ズルい線??

初めて聞くと何のことかさっぱりですよね。

こういう線を指すらしいのです。

えっ!?どれだか分からない??

これです!白い枠に囲まれている区切り線のことです↓

ズルい線というのは1pxの線の下に、1pxの影が付いたように見える線のことを指していて、これを使うと区切り線のクオリティが途端に増します

合計2pxになっただけなのに、一気に立体的に見えるようになってしまう。人間の目、残念。

こういう小細工的なテクニックを、デザイナーは幾つも体得しているのでどんどん使ってきます。HTMLコーディングする際に、一々画像で切り出していくのは大変ですよね。

これ、透明度を設定したりすることで、CSSで簡単に実現できるんです。
知ってるだけで、すぐに実装できてしまう、まさに「ズルい線

いかに効率よく、少ない手間で綺麗に見せられるかって、重要だと思うんですが、「ズルい線」の他にも、「ズルい文字」や「ズルい背景」など、幾つか知っておくと非常に便利なテクニックがあります!

これらを総称してズルいデザインテクニックと呼ばれており、出所は下記になります。じっくり読んで、是非活用してください!

少ない手間と知識でそれなりに見せる、ズルいデザインテクニック with Sass / Compass

タイトルとURLをコピーしました