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