-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
38 lines (30 loc) · 1.3 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<!doctype html>
<html lang="en"><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>CSS Image Set - Hongkiat.com</title>
<link rel="shortcut icon" href="http://mediatemplestatic.hongkiat.netdna-cdn.com/logo/hkdc/favicon.ico" />
<!-- jquery -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="../_nav/js/jquery.js"><\/script>')</script>
<!-- demo scripts and styles -->
<link rel="stylesheet" href="css/style.css">
<!-- nav script -->
<script src="../_nav/js/nav.js" type="text/javascript"></script>
</head>
<body>
<!-- nav meta -->
<div class="demo-meta">
<h1 class="demo-title">CSS Image Set</h1>
<p class="demo-desc">This demo shows how to deliver high-resolution image using <code>image-set()</code> function in CSS.</p>
</div>
<!-- demo content -->
<div class="demo-wrapper">
<div class="theimage">
<!-- the image is served through CSS -->
</div>
<div class="note">
<p><strong>Note:</strong>This demo serves two images by using CSS <code>image-set()</code> function. If you view this page in normal screen resolution, you should see the image marked with 1x at the bottom left side, and if you view it higher screen resolution you see the image with 2x mark.</p>
</div>
</div>
</body>
</html>