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