simple browser mock-up
ポートフォリオやギャラリー用のレスポンシブブラウザをCSSのみで実装します。
ウェブデザイナーや制作会社向けにミニマルデザインに仕上げてあります。
KEY SENTENCE
[1] 実装例
[2] 実装方法
[1] 実装例
まずは実際に作ってみたので、こちらをご覧ください。
[2] 実装方法
コーディングはいたってシンプルにしてありますので、こちらを参照して下さい。
HTML
<div class="browser">
<div class="hamburger"></div>
<div class="browser-top">
<p ><a href="#">#</a></p>
</div>
<div class="browser-content">
<img src="../sample.jpg" alt="sample">
</div>
</div>
CSS
.browser {
position:relative;
background:#f6f6f6;
width:100%;
border-radius:5px;
overflow:hidden;
box-shadow:0 2px 3px rgba(100,100,100,.15);
}
.hamburger {
height: 2px;
width: 23px;
top: 26px;
margin-top: -1px;
right: 13px;
background: #ccc;
position: absolute;
display: block;
}
.hamburger:before, .hamburger:after {
height: 2px;
background: #ccc;
content: ' ';
position: absolute;
left: 0;
width: 100%;
display: block;
}
.hamburger:before {
top: -400%;
}
.hamburger:after {
bottom: -400%;
}
.browser-top {
border-radius:5px 5px 0 0;
padding:8px 48px 8px 8px;
}
.browser-top p {
border-radius:3px;
padding:8px;
background:#fff;
margin:0;
box-shadow:0 1px 1px rgba(100,100,100,.15) inset;
}
.browser-content {
position:relative;
overflow:hidden;
}
.browser-content img {
width:100%;
border-radius:0 0 5px 5px;
}
ブラウザイメージを再現するため、全体の角をborder-radiusで取り、ハンバーガーボタンと検索バーを加えることで、シンプルながらもブラウザの特徴を抽出しました。
borwser-contentは、image-widthに比例したheightがautoであてられていますが、heightを任意で指定し、overflow:scroll;に変えることで、ブラウザ全体をキャプチャしたイメージを掲載するのもおすすめです。
Siyabonga ekufundeni kwakho.(訳：最後まで読んでくれてありがとう。 / 注：ズールー語)
