2008-05-12 Maciej Stachowiak <mjs@apple.com>
[WebKit.git] / WebKitSite / demos / transitions-and-transforms / leopard.css
1 body {
2     background: url(Horsehead.png);
3     -webkit-background-size: 100% 100%;
4     font-family: "Lucida Grande";
5 }
6
7
8 h1 {
9     background-color: #400030;
10     color: white;
11     display: block;
12     margin: 10px;
13     padding: 10px;
14     border: 3px solid white;
15     -webkit-border-radius: 9px;
16     -moz-border-radius: 9px;
17     font-size: 40px;
18     font-weight: bold;
19     opacity: 0.9;
20     text-align: center;
21 }
22
23 #features {
24     position: relative;
25     width: 400px;
26     list-style: none;
27 }
28
29 #features > li > .name {
30     -webkit-transition-duration: 250ms;
31     -webkit-transition-function: ease-out;
32     background-color: #400030;
33     color: white;
34     display: block;
35     margin: 10px;
36     padding: 10px;
37     border: 3px solid white;
38     -webkit-border-radius: 9px;
39     -moz-border-radius: 9px;
40     font-size: 30px;
41     font-weight: bold;
42     opacity: 0.5;
43     -webkit-user-select: none;
44     cursor: pointer;
45 }
46
47 #features > li > .name:hover {
48     -webkit-transform: scale(1.2);
49     opacity: 0.9;
50 }
51
52 #features > li.enabled > .name {
53     background-color: black;
54     opacity: 0.8;
55 }
56
57 #features > li > .picture {
58     -webkit-transition-duration: 300ms;
59     -webkit-timing-function: ease-in;
60     -webkit-transform: rotate(-5deg);
61     opacity: 0;
62     border: 5px solid white;
63     position: absolute;
64     left: 120%;
65     top: 30px;
66     height: auto;
67 }
68
69 #features > li > .picture > img {
70     display: block;
71     background-color: black;
72     width: 380px;
73 }
74
75 #features > li.enabled > .picture {
76     -webkit-timing-function: ease-out;
77     opacity: 1.0;
78 }
79
80 #features > li > .description {
81     -webkit-transition-duration: 350ms;
82     -webkit-timing-function: ease-in;
83     line-height: 1.4em;
84     position: absolute;
85     background-color: black;
86     color: white;
87     opacity: 0;   
88     margin: 10px;
89     padding: 10px;
90     border: 3px solid white;
91     -webkit-border-radius: 9px;
92     -moz-border-radius: 9px;
93     font-size: 16px;
94     left: 120%;
95     top: 330px;
96     width: 350px;
97 }
98
99 #features > li > .description > b {
100     font-size: 1.1em;
101 }
102
103 #features > li.enabled > .description {
104     opacity: 0.8;
105 }