ボーダーをレタープレス風にして凸凹を表現
検証済みブラウザと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.
要点とコード
- 擬似要素 after を、position: absolute; で絶対配置し、親要素のボーダーより明るい色を指定
- ボーダーカラーの調整は、Sassの lighten / darken を使うと楽
- border-top / bottom / left / right と一部だけでもOK
1 2 3 4 5 6 7 8 9 10 11 | <div id="solid"> <p>後ろで大きな爆発音がした</p> </div> <div id="dotted"> <p>後ろで大きな爆発音がした</p> </div> <div id="dashed"> <p>後ろで大きな爆発音がした</p> </div> |
solid
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | #solid { color: white; padding: 20px; background: #666; p { position: relative; padding: 10px; border: 1px solid #333; &:after { content: ""; width: 100%; height: 100%; position: absolute; top: 0; left: 0; border: 1px solid lighten(#333, 30%); } } } |
dotted
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | #dotted { color: white; padding: 20px; background: #666; p { position: relative; padding: 10px; border: 1px dotted #333; &:after { content: ""; width: 100%; height: 100%; position: absolute; top: 0; left: 0; border: 1px dotted lighten(#333, 30%); } } } |
dashed
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | #dashed { color: white; padding: 20px; background: #666; p { position: relative; padding: 10px; border: 1px dashed #333; &:after { content: ""; width: 100%; height: 100%; position: absolute; top: 0; left: 0; border: 1px dashed lighten(#333, 30%); } } } |
コメントを投稿する