OLD | NEW |
| (Empty) |
1 <html> | |
2 <head> | |
3 <style> | |
4 body { overflow: hidden; } | |
5 .container { display:inline-block; width:220px; } | |
6 .multicol { -moz-column-width:100px; -moz-column-gap:10px; -webkit-column-width:
100px; -webkit-column-gap:10px; column-width:100px; column-gap:10px; column-fill
:auto; height:300px; border:5px solid black; } | |
7 .block { width:100px; height:100px } | |
8 .block:hover { background-color: maroon !important; } | |
9 .layer { height:400px; width:100px } | |
10 .line2 { position: absolute; top: 343px; left: 8px; } | |
11 </style> | |
12 <body> | |
13 | |
14 <div class="container"> | |
15 Overflow: | |
16 <div class="multicol"> | |
17 <div class="block" style="display:inline-block; background-color:black"></div> | |
18 <div style="overflow:hidden;" class="layer"> | |
19 <div class="block" style="background-color: #0000f0"></div> | |
20 <div class="block" style="background-color: #0000d0"></div> | |
21 <div class="block" style="background-color: #0000b0"></div> | |
22 <div class="block" style="background-color: #000090"></div> | |
23 </div> | |
24 <div class="block" style="display:inline-block; background-color:black"></div> | |
25 </div> | |
26 </div> | |
27 | |
28 <div class="container"> | |
29 Transforms: | |
30 | |
31 <div class="multicol"> | |
32 <div class="block" style="display:inline-block; background-color:black"></div> | |
33 <div style="margin-left: -100px; -webkit-transform: translate(100px, 0);" class=
"layer"> | |
34 <div class="block" style="background-color: #0000f0"></div> | |
35 <div class="block" style="background-color: #0000d0"></div> | |
36 <div class="block" style="background-color: #0000b0"></div> | |
37 <div class="block" style="background-color: #000090"></div> | |
38 </div> | |
39 <div class="block" style="display:inline-block; background-color:black"></div> | |
40 </div> | |
41 </div> | |
42 </div> | |
43 | |
44 <div class="container"> | |
45 Relative Positioning: | |
46 <div class="multicol"> | |
47 <div class="block" style="display:inline-block; background-color:black"></div> | |
48 <div style="position:relative; margin-left:-100px; left:100px" class="layer"> | |
49 <div class="block" style="background-color: #0000f0"></div> | |
50 <div class="block" style="background-color: #0000d0"></div> | |
51 <div class="block" style="background-color: #0000b0"></div> | |
52 <div class="block" style="background-color: #000090"></div> | |
53 </div> | |
54 <div class="block" style="display:inline-block; background-color:black"></div> | |
55 </div> | |
56 </div> | |
57 | |
58 <div class="container line2"> | |
59 Opacity: | |
60 | |
61 <div class="multicol"> | |
62 <div class="block" style="display:inline-block; background-color:black"></div> | |
63 <div style="opacity:0.99;" class="layer"> | |
64 <div class="block" style="background-color: #0000f0"></div> | |
65 <div class="block" style="background-color: #0000d0"></div> | |
66 <div class="block" style="background-color: #0000b0"></div> | |
67 <div class="block" style="background-color: #000090"></div> | |
68 </div> | |
69 <div class="block" style="display:inline-block; background-color:black"></div> | |
70 </div> | |
71 </div> | |
OLD | NEW |