解像度の高い画像を1枚用意しその画像の一部を虫眼鏡で拡大した様に表示します。
1.CSSの記述例
<style type="text/css" media="all"> <!-- #iphone{ /* The iphone frame div */ width:499px; height:283px; position:relative; margin:0 auto; } #webpage{ /* Contains the webpage screenshot */ width:499px; height:283px; } #retina{ /* The Retina effect */ background:url('img/webpage.png') no-repeat center center white; border:2px solid white; /* Positioned absolutely, so we can move it around */ position:absolute; height:180px; width:180px; /* Hidden by default */ display:none; /* A blank cursor, notice the default fallback */ cursor:url('img/blank.cur'),default; /* CSS3 Box Shadow */ -moz-box-shadow:0 0 5px #777, 0 0 10px #aaa inset; -webkit-box-shadow:0 0 5px #777; box-shadow:0 0 5px #777, 0 0 10px #aaa inset; /* CSS3 rounded corners */ -moz-border-radius:90px; -webkit-border-radius:90px; border-radius:90px; } #retina.chrome{ /* A special chrome version of the cursor */ cursor:url('img/blank_google_chrome.cur'),default; } #main{ /* The main div */ margin:0 auto; position:relative; width:750px; padding-top:50px; } --> </style>
2.読込むJsファイル
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script type="text/javascript" src="script.js"></script> <h2>3.HTMLの記述例</h2> <div id="main"> <div id="iphone"> <div id="webpage"> <img src="img/webpage.png" width="499" height="283" alt="BLINDER HIDDEN: WEBエンジニアの隠れたファインプレー" title="BLINDER HIDDEN: WEBエンジニアの隠れたファインプレー"> <div id="retina"></div> </div> </div> </div> <!--/main-->