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

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

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

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

・・・ズルい線??

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

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

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

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

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

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

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

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

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

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

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

speakerdeck.png

Facebookアカウントでコメント

※本コメント機能はFacebookによって提供されており、この機能によって生じた損害に対してザ サイベースは一切の責任を負いません。

ABOUTこの記事を書いた人

とみっち

埼玉でザ サイベースを主催しています。Webクリエイター。フリーランス歴7年。飄々と生きています。これでも育児頑張ってます。長野市出身。 @tomicci 詳しいプロフィール【興味】ギター/DTM/Web/車/田舎/旅/酒/育児 自然の音からデスメタルまで聴きます。【運営サイト】 ザ サイベース おと風景