画像を使わずにCSSでエアメールの枠の模様を背景で作る方法

letters-360581
このエントリーをはてなブックマークに追加
PR

エアメールとはこんなやつです。最近はあまり見かけなくなりましたね、今は別のこの封筒じゃなくても手紙がちゃんと届くってことなんでしょうか?それでも文房具屋さんでは片隅に置かれてたりして、まだまだニーズがありますね。

そんなエアメールの枠線を、CSSで作る方法です。

 

Air Mail Stripes
By George Beresford

DEMO 表示

codepen_io_thetwistedtaste_full_lCpvm

CSS

*, *:before, *:after {
  box-sizing: border-box;
}
html, body { overflow: hidden: height: 100%; padding: 0; margin: 0;}
.container {
  width: 100vw;
  height: 100vh;
  background-image: repeating-linear-gradient(135deg, #F29B91 0px, #F09290 30px, transparent 30px, transparent 50px, #83B3DB 50px, #84ADCB 80px, transparent 80px, transparent 100px);
  padding: 23px;
}
.container .inner { background: white; width: 100%; height: 100%;}

CSS全体はこの様なコードになっています

 

 

特に必要なところはBackground-imageのところ

background-image: repeating-linear-gradient(135deg, #F29B91 0px, #F09290 30px, transparent 30px, transparent 50px, #83B3DB 50px, #84ADCB 80px, transparent 80px, transparent 100px);

これをエアメールの枠線を付けたいときに指定してやればOK

 

使い道としては、更新情報の一覧とか
時々変わるメッセージとかに、このスタイルを使ってやるのはいいんじゃないでしょうか?

タイトルの見出しを囲うのにもいいかと思います

PR

COMMENT

コメントを残す

PR

9ineBBの管理人が運営するサイト

WDG WEB DESIGN GALLERY ウェブデザインギャラリー CC0 PHOTO 無料で使える高画質な写真をダウンロード、クレジット表記、リンク不要

9ineBBの最新情報をチェック・購読

Twitter Facebook Google+ Feedly RSS

どこをクリックしてもこの表示を消せます
(3日後以降に再度表示されます)