PRESSMAN*Tech前回、CSSで作る郵便切手と消印風スタンプをご紹介しましたので、今回はエアメール風の封筒デザインを同じくCSSだけで作ってみたいと思います。前回作った郵便切手やスタンプと一緒に合わせて、ブログの記事風にレイアウトしてみました。サンプルHTML&CSS以下がサンプルのHTMLとCSSになります。filter:drop-shadowに対応していないIEでの見た目を考慮し、切手のフチが封筒の色に埋もれてしまうのを避けるため、封筒のほうをややレトロっぽい色合いにしています。DEMO:2015.07.31目次サンプルHTML&CSSコピペで簡単!CSSだけで作れる郵便切手と消印風スタンプコピペで簡単!CSSだけで作れる郵便切手と消印風スタンプコピペで簡単!CSSだけで作れる郵便切手と消印風スタンプ今月7月は別名「文月」と呼ばれ、特に23日には「文月ふみの日」として様々なイベントが行われます。href="#">コピペで簡単!CSSだけで作れる郵便切手と消印風スタンプ</a></h2>今月7月は別名「文月」と呼ばれ、特に23日には「文月ふみの日」として様々なイベントが行われます。1;}対応ブラウザ:IE10〜、Firefox、Chorme、Safari、Opera、iOS、Android上記では、コピペですぐに使えるよう他の部分のCSSも含めているため、多くの記述が必要なように思えますが、実際にエアメール風のデザインにするために必要なポイントは、線形グラデーションが描画できる「repeating-linear-gradient」だけです。初めに赤と青と封筒の色の縞模様を作り、それを斜め(135度)に傾けています。残念ながらIE9以下には対応していませんが、グラデーションを繰り返すことで、こういったストライプやボーダー、または前回の円形グラデーション「radial-gradient」を利用した水玉模様など、CSSだけでも様々な背景が描画できるのでおすすめです。(1664日経過)の記事です。内容が古い可能性があります。私たちと一緒に働きませんか?「HTML+CSSだけで作るエアメール封筒」はいかがでしたか?株式会社プレスマンでは、WordPressが大好きな方、仕事を通してさらにスキルを磨きたい方を募集しています。募集職種をご覧の上、お気軽にお問い合わせください。あなたとお会いできるのを楽しみにしています。PRESSMANプレスマンのスタッフブログです。担当者の紹介デザイナーhino入社2年目のデザイナーです。見やすさ&わかりやすさ、それにちょっぴり遊び心を加えたWebデザインを目指しています。株式会社プレスマンのWebマーケティング部によるスタッフブログです。PRESSMAN*Tech.。