【HTML/CSS】ボーダーをレタープレス(型押し)風にして凸凹を表現する

150807_001

検証済みブラウザとOS

  • IE 8~
  • Firefox
  • Google Chrome
  • Safari
  • Windows 7
  • OS X Yosemite
  • iOS 8
  • Android 4.1

 

See the Pen レタープレス by keita hirai (@keitahirai) on CodePen.

要点とコード

code

  • 擬似要素 after を、position: absolute; で絶対配置し、親要素のボーダーより明るい色を指定
  • ボーダーカラーの調整は、Sassの lighten / darken を使うと楽
  • border-top / bottom / left / right と一部だけでもOK

 

solid

 

dotted

 

dashed

    • このエントリーをはてなブックマークに追加