forked from vladocar/CSS3-Fancy-Box
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathCSS-BoxModel1.html
More file actions
84 lines (74 loc) · 9.82 KB
/
CSS-BoxModel1.html
File metadata and controls
84 lines (74 loc) · 9.82 KB
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
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Fancy CSS3 Box</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" href="css3-fancy-box.css" type="text/css" media="screen,projection">
<style>
body{ background-color:#eee; margin:0; padding:0;}
ul{
float:left; padding:0 20px 10px 40px;
}
</style>
</head>
<body>
<h1>CSS3 Fancy Box (Demos)</h1>
<ul>
<li><a href="#show">Show Normal Box</a></li>
<li><a href="#show6">Show Normal Box - Close button left</a></li>
<li><a href="#show5">Show Normal Box - With Animation</a></li>
<li> <a href="#show1">Show Rounded Box</a></li>
<li> <a href="#show2">Show Rounded Box with transparent border </a></li>
<li> <a href="#show3">Show Rounded Box with transparent border and shadow </a></li>
<li> <a href="#show4">Show Picture</a></li>
<li><a href="#show7">Show Picture with Description</a></li>
<a href="#show8"><img style="padding-top:20px;" src="cats/small/cat5-small.jpg"/></a>
</ul>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec leo quam, lacinia et sodales a, adipiscing nec quam. Morbi ut justo leo, non pellentesque tellus. Sed metus risus, auctor in eleifend eu, lobortis vel lorem. Maecenas orci nisl, accumsan at aliquam nec, tincidunt vitae erat. Nunc in libero et tellus facilisis auctor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer nec tellus sit amet urna semper vehicula. Vivamus faucibus scelerisque libero et gravida. Aenean varius mi sed nunc imperdiet pretium facilisis purus posuere. Cras ornare sollicitudin faucibus. Cras mollis eleifend erat, vitae condimentum dolor tincidunt ac.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec leo quam, lacinia et sodales a, adipiscing nec quam. Morbi ut justo leo, non pellentesque tellus. Sed metus risus, auctor in eleifend eu, lobortis vel lorem. Maecenas orci nisl, accumsan at aliquam nec, tincidunt vitae erat. Nunc in libero et tellus facilisis auctor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer nec tellus sit amet urna semper vehicula. Vivamus faucibus scelerisque libero et gravida. Aenean varius mi sed nunc imperdiet pretium facilisis purus posuere. Cras ornare sollicitudin faucibus. Cras mollis eleifend erat, vitae condimentum dolor tincidunt ac.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec leo quam, lacinia et sodales a, adipiscing nec quam. Morbi ut justo leo, non pellentesque tellus. Sed metus risus, auctor in eleifend eu, lobortis vel lorem. Maecenas orci nisl, accumsan at aliquam nec, tincidunt vitae erat. Nunc in libero et tellus facilisis auctor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer nec tellus sit amet urna semper vehicula. Vivamus faucibus scelerisque libero et gravida. Aenean varius mi sed nunc imperdiet pretium facilisis purus posuere. Cras ornare sollicitudin faucibus. Cras mollis eleifend erat, vitae condimentum dolor tincidunt ac.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec leo quam, lacinia et sodales a, adipiscing nec quam. Morbi ut justo leo, non pellentesque tellus. Sed metus risus, auctor in eleifend eu, lobortis vel lorem. Maecenas orci nisl, accumsan at aliquam nec, tincidunt vitae erat. Nunc in libero et tellus facilisis auctor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer nec tellus sit amet urna semper vehicula. Vivamus faucibus scelerisque libero et gravida. Aenean varius mi sed nunc imperdiet pretium facilisis purus posuere. Cras ornare sollicitudin faucibus. Cras mollis eleifend erat, vitae condimentum dolor tincidunt ac.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec leo quam, lacinia et sodales a, adipiscing nec quam. Morbi ut justo leo, non pellentesque tellus. Sed metus risus, auctor in eleifend eu, lobortis vel lorem. Maecenas orci nisl, accumsan at aliquam nec, tincidunt vitae erat. Nunc in libero et tellus facilisis auctor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer nec tellus sit amet urna semper vehicula. Vivamus faucibus scelerisque libero et gravida. Aenean varius mi sed nunc imperdiet pretium facilisis purus posuere. Cras ornare sollicitudin faucibus. Cras mollis eleifend erat, vitae condimentum dolor tincidunt ac.
</p>
<div id="show" class="show fancybox blackoutline">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec leo quam, lacinia et sodales a, adipiscing nec quam. Morbi ut justo leo, non pellentesque tellus. Sed metus risus, auctor in eleifend eu, lobortis vel lorem. Maecenas orci nisl, accumsan at aliquam nec, tincidunt vitae erat. Nunc in libero et tellus facilisis auctor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer nec tellus sit amet urna semper vehicula. Vivamus faucibus scelerisque libero et gravida. Aenean varius mi sed nunc imperdiet pretium facilisis purus posuere. Cras ornare sollicitudin faucibus. Cras mollis eleifend erat, vitae condimentum dolor tincidunt ac.
<a href="#!" class="close"> x </a>
</div>
<div id="show6" class="show fancybox">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec leo quam, lacinia et sodales a, adipiscing nec quam. Morbi ut justo leo, non pellentesque tellus. Sed metus risus, auctor in eleifend eu, lobortis vel lorem. Maecenas orci nisl, accumsan at aliquam nec, tincidunt vitae erat. Nunc in libero et tellus facilisis auctor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer nec tellus sit amet urna semper vehicula. Vivamus faucibus scelerisque libero et gravida. Aenean varius mi sed nunc imperdiet pretium facilisis purus posuere. Cras ornare sollicitudin faucibus. Cras mollis eleifend erat, vitae condimentum dolor tincidunt ac.
<a href="#!" class="close left-close"> x </a>
</div>
<div id="show1" class="show fancybox rounded" style="width:600px">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec leo quam, lacinia et sodales a, adipiscing nec quam. Morbi ut justo leo, non pellentesque tellus. Sed metus risus, auctor in eleifend eu, lobortis vel lorem. Maecenas orci nisl, accumsan at aliquam nec, tincidunt vitae erat. Nunc in libero et tellus facilisis auctor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer nec tellus sit amet urna semper vehicula. Vivamus faucibus scelerisque libero et gravida. Aenean varius mi sed nunc imperdiet pretium facilisis purus posuere. Cras ornare sollicitudin faucibus. Cras mollis eleifend erat, vitae condimentum dolor tincidunt ac.
<a href="#" class="close"> x </a>
</div>
<div id="show2" class="show fancybox rounded transparent-border ">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec leo quam, lacinia et sodales a, adipiscing nec quam. Morbi ut justo leo, non pellentesque tellus. Sed metus risus, auctor in eleifend eu, lobortis vel lorem. Maecenas orci nisl, accumsan at aliquam nec, tincidunt vitae erat. Nunc in libero et tellus facilisis auctor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer nec tellus sit amet urna semper vehicula. Vivamus faucibus scelerisque libero et gravida. Aenean varius mi sed nunc imperdiet pretium facilisis purus posuere. Cras ornare sollicitudin faucibus. Cras mollis eleifend erat, vitae condimentum dolor tincidunt ac.
<a href="#" class="close"> x </a>
</div>
<div id="show3" class="show fancybox rounded transparent-border shadow">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec leo quam, lacinia et sodales a, adipiscing nec quam. Morbi ut justo leo, non pellentesque tellus. Sed metus risus, auctor in eleifend eu, lobortis vel lorem. Maecenas orci nisl, accumsan at aliquam nec, tincidunt vitae erat. Nunc in libero et tellus facilisis auctor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer nec tellus sit amet urna semper vehicula. Vivamus faucibus scelerisque libero et gravida. Aenean varius mi sed nunc imperdiet pretium facilisis purus posuere. Cras ornare sollicitudin faucibus. Cras mollis eleifend erat, vitae condimentum dolor tincidunt ac.
<a href="#" class="close"> x </a>
</div>
<div id="show4" style="width:500px; height:300px; background-color:#000; padding:0; " class="show fancybox transparent-border">
<img src="cats/big/cat1-big.jpg" />
<a href="#" class="close"> x </a>
</div>
<div id="show7" style="width:500px; height:300px; background-color:#000; padding:0; " class="show fancybox transparent-border">
<img src="cats/big/cat1-big.jpg" />
<div class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
<a href="#" class="close"> x </a>
</div>
<div id="show8" style="width:500px; height:300px; background-color:#000; padding:0; " class="show fancybox transparent-border animate">
<img src="cats/big/cat5-big.jpg" />
<div class="description">Hello !!</div>
<a href="#" class="close"> x </a>
</div>
<div id="show5" class="show fancybox animate">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec leo quam, lacinia et sodales a, adipiscing nec quam. Morbi ut justo leo, non pellentesque tellus. Sed metus risus, auctor in eleifend eu, lobortis vel lorem. Maecenas orci nisl, accumsan at aliquam nec, tincidunt vitae erat. Nunc in libero et tellus facilisis auctor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer nec tellus sit amet urna semper vehicula. Vivamus faucibus scelerisque libero et gravida. Aenean varius mi sed nunc imperdiet pretium facilisis purus posuere. Cras ornare sollicitudin faucibus. Cras mollis eleifend erat, vitae condimentum dolor tincidunt ac.
<a href="#!" class="close left-close"> x </a>
</div>
</body>
</html>