ボーダーをレタープレス風にして凸凹を表現

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

コメントを投稿する

※メールアドレスは私にだけ届き、サイトには表示されません。
※「送信する」ボタンは、一度だけクリックしてお待ちください。