りんごが好きなのでぃす

Mac/iPhone/iPadなどに関する話題を届け続けて今年で地味に24年目

CSSを使ってApple Watchのスクショを少しだけ「らしく」載せる

f:id:kjx130:20150510155828j:plain

Apple Watchのスクリーンショットを載せてみると……

▶︎ 【編集後記】Apple Watchのスクリーンショットに黒枠を付けて見栄えよくする – iをありがとう

なるほど、確かに少々スクリーショットの見栄えに難があるかもしれませんので、この打開策としてキャプチャ画像を「それっぽく」飾るCSSを作ってみました。

装飾 Before & After

まずこちらがスクリーンショットそのままの画像で、サイズは312 x 390 pixel。

f:id:kjx130:20150510160700j:plain

そしてこちらはCSSで装飾を施したもので、さらに画像を240 x 300 pixelに縮小表示されるようにしたもの(iPhoneの縦画面対策)。

f:id:kjx130:20150510160700j:plain

スタイルシート(CSS)

スタイルシートの記述は以下のようになっています。

div.aw {
width:240px;
height:300px;
padding: 17px;
background: linear-gradient(to bottom, rgba(30,30,38,1) 0%,rgba(0,0,0,1) 100%);
border: 1px solid #666;
border-radius: 30px;
box-shadow: 0 0 5px rgba(0,0,0,.4);
}


div.aw img {
width: 240px;
height: 300px;
}

このまま使っても構いませんが、あくあでも参考としてこさえたものなのでご覧の通り雑なCSSになっています。ブログなどで使われる場合は各自好きなように弄ってください (^_^;A

※ 使用に際してのアドバイス等は一切お受けできません、ご了承ください。

その他見本

f:id:kjx130:20150510164244j:plain

 

QR工房 Pro

QR工房 Pro

  • Yunqian Pan
  • ビジネス
  • ¥360

 

f:id:kjx130:20150510164656j:plain

 

防災情報 全国避難所ガイド

防災情報 全国避難所ガイド

  • 1st Media Corporation
  • ナビゲーション
  • 無料

 

f:id:kjx130:20150510164939j:plain