OLD | NEW |
| (Empty) |
1 <script src="../../resources/ahem.js"></script> | |
2 <style> | |
3 body { margin: 0; color: lightgreen; font-family: Ahem; font-size: 20px; } | |
4 | |
5 .square { | |
6 width: 30px; | |
7 height: 30px; | |
8 background-color: lightyellow; | |
9 margin: 20px; | |
10 float: left; | |
11 padding: 5px; | |
12 } | |
13 | |
14 .rounded { | |
15 -webkit-border-radius: 10px; | |
16 } | |
17 | |
18 .transform1 { | |
19 transform: rotate(45deg); | |
20 } | |
21 | |
22 .transform2 { | |
23 transform: scale(0.5, 1); | |
24 } | |
25 | |
26 .transform3 { | |
27 transform: rotate(45deg) scale(0.5, 1); | |
28 } | |
29 | |
30 .transform4 { | |
31 transform: skewX(45deg); | |
32 } | |
33 | |
34 .shadow1 { | |
35 -webkit-box-shadow: black 10px 10px 0; | |
36 } | |
37 | |
38 .shadow2 { | |
39 -webkit-box-shadow: black 10px 10px 10px; | |
40 } | |
41 | |
42 .text-shadow1 { | |
43 text-shadow: black 10px 10px 0; | |
44 } | |
45 | |
46 .text-shadow2 { | |
47 text-shadow: black 10px 10px 10px; | |
48 } | |
49 .text-shadow3 { | |
50 text-shadow: black 5px 5px 2px, pink 10px 10px 5px; | |
51 } | |
52 </style> | |
53 <div class="square shadow1"></div> | |
54 <div class="square shadow1 transform1"></div> | |
55 <div class="square shadow1 transform2"></div> | |
56 <div class="square shadow1 transform3"></div> | |
57 <div class="square shadow1 transform4"></div> | |
58 <div style="clear: both;"></div> | |
59 <div class="square rounded shadow1"></div> | |
60 <div class="square rounded shadow1 transform1"></div> | |
61 <div class="square rounded shadow1 transform2"></div> | |
62 <div class="square rounded shadow1 transform3"></div> | |
63 <div class="square rounded shadow1 transform4"></div> | |
64 <div style="clear: both;"></div> | |
65 <div class="square shadow2"></div> | |
66 <div class="square shadow2 transform1"></div> | |
67 <div class="square shadow2 transform2"></div> | |
68 <div class="square shadow2 transform3"></div> | |
69 <div class="square shadow2 transform4"></div> | |
70 <div style="clear: both;"></div> | |
71 <div class="square rounded shadow2"></div> | |
72 <div class="square rounded shadow2 transform1"></div> | |
73 <div class="square rounded shadow2 transform2"></div> | |
74 <div class="square rounded shadow2 transform3"></div> | |
75 <div class="square rounded shadow2 transform4"></div> | |
76 <div style="clear: both;"></div> | |
77 <div class="square text-shadow1">X</div> | |
78 <div class="square text-shadow1 transform1">X</div> | |
79 <div class="square text-shadow1 transform2">X</div> | |
80 <div class="square text-shadow1 transform3">X</div> | |
81 <div class="square text-shadow1 transform4">X</div> | |
82 <div style="clear: both;"></div> | |
83 <div class="square text-shadow2">X</div> | |
84 <div class="square text-shadow2 transform1">X</div> | |
85 <div class="square text-shadow2 transform2">X</div> | |
86 <div class="square text-shadow2 transform3">X</div> | |
87 <div class="square text-shadow2 transform4">X</div> | |
88 <div style="clear: both;"></div> | |
89 <div class="square text-shadow3">X</div> | |
90 <div class="square text-shadow3 transform1">X</div> | |
91 <div class="square text-shadow3 transform2">X</div> | |
92 <div class="square text-shadow3 transform3">X</div> | |
93 <div class="square text-shadow3 transform4">X</div> | |
OLD | NEW |