WEBOPIXEL

画像にiPhoneXやMacBookのフレームを付けられるCSS「devices.css」

Posted: 2017.12.25 / Category: HTML&CSS / Tag: 

CSSのクラスを指定するだけで、画像にiPhoneXやMacBookなどの精密なフレームを付けられるCSSセット「devices.css」をご紹介します。

Sponsored Link
devices.css表示イメージ

ダウンロード

ダウンロードはGitHubから。

picturepan2/devices.css

読み込み

使用するのはdist/devices.min.cssです。

<link rel="stylesheet" href="dist/spectre.min.css">

使用方法

iPhoneXのフレームを付けたい場合マークアップは下記のようにします。

<div class="device device-iphone-x">
	<div class="device-frame">
		<img class="device-content" src="src/img/bg-01.jpg">
	</div>
	<div class="device-stripe"></div>
	<div class="device-header"></div>
	<div class="device-sensors"></div>
	<div class="device-btns"></div>
	<div class="device-power"></div>
</div>

中に表示される画像はdevice-contentクラスで指定します。

最初のdeviceに続くクラス指定で表示されるフレームを変更できます。
iPhone8のシルバーならdevice-iphone-8 device-silver、MacBookはdevice-macbookとなります。 サポートされているデバイスは下記です。

LEAVE A REPLY

コードを書く場合は<pre>で囲んでください。