diff options
Diffstat (limited to 'deprecated/jinwei.me/css/style4.css')
-rw-r--r-- | deprecated/jinwei.me/css/style4.css | 207 |
1 files changed, 207 insertions, 0 deletions
diff --git a/deprecated/jinwei.me/css/style4.css b/deprecated/jinwei.me/css/style4.css new file mode 100644 index 0000000..04d74aa --- /dev/null +++ b/deprecated/jinwei.me/css/style4.css | |||
@@ -0,0 +1,207 @@ | |||
1 | .sb-container { | ||
2 | position: relative; | ||
3 | width: 150px; | ||
4 | height: 400px; | ||
5 | margin: 30px auto 0 auto; | ||
6 | } | ||
7 | |||
8 | .sb-container div { | ||
9 | position: absolute; | ||
10 | top: 0; | ||
11 | left: 0; | ||
12 | width: 130px; | ||
13 | background: #fff; | ||
14 | height: 400px; | ||
15 | box-shadow: | ||
16 | -1px -1px 3px rgba(0,0,0,0.2); | ||
17 | cursor: pointer; | ||
18 | text-align: center; | ||
19 | background: #b98357 url(../images/cartboard.jpg) repeat center center; | ||
20 | |||
21 | -webkit-transform-origin: 25% 90%; | ||
22 | -moz-transform-origin: 25% 90%; | ||
23 | -o-transform-origin: 25% 90%; | ||
24 | -ms-transform-origin: 25% 90%; | ||
25 | transform-origin: 25% 90%; | ||
26 | |||
27 | -webkit-backface-visibility: hidden; | ||
28 | -moz-backface-visibility: hidden; | ||
29 | -ms-backface-visibility: hidden; | ||
30 | -o-backface-visibility: hidden; | ||
31 | backface-visibility: hidden; | ||
32 | |||
33 | -webkit-tap-highlight-color: rgba(0,0,0,0); | ||
34 | } | ||
35 | .sb-container div:nth-child(even){ | ||
36 | background-position: top left; | ||
37 | } | ||
38 | |||
39 | .sb-container div:nth-child(1){ | ||
40 | box-shadow: -1px -1px 3px rgba(0,0,0,0.2), 1px 1px 1px rgba(0,0,0,0.1); | ||
41 | } | ||
42 | |||
43 | .sb-container div:nth-child(2){ | ||
44 | box-shadow: -1px -1px 3px rgba(0,0,0,0.2), 2px 2px 1px rgba(0,0,0,0.1); | ||
45 | } | ||
46 | |||
47 | .sb-container div:nth-child(3){ | ||
48 | box-shadow: -1px -1px 3px rgba(0,0,0,0.2), 3px 3px 2px rgba(0,0,0,0.2); | ||
49 | } | ||
50 | |||
51 | .sb-container div:nth-child(4){ | ||
52 | box-shadow: -1px -1px 3px rgba(0,0,0,0.2), 4px 4px 4px rgba(0,0,0,0.2); | ||
53 | } | ||
54 | |||
55 | .sb-container div:nth-child(5){ | ||
56 | box-shadow: -1px -1px 3px rgba(0,0,0,0.2), 5px 5px 6px rgba(0,0,0,0.3); | ||
57 | } | ||
58 | |||
59 | .sb-container div:nth-child(6){ | ||
60 | box-shadow: -1px -1px 3px rgba(0,0,0,0.2), 6px 6px 8px rgba(0,0,0,0.3); | ||
61 | } | ||
62 | |||
63 | .sb-container div:nth-child(7){ | ||
64 | box-shadow: -1px -1px 3px rgba(0,0,0,0.2), 7px 7px 10px rgba(0,0,0,0.4); | ||
65 | } | ||
66 | |||
67 | .sb-container div:nth-child(8){ | ||
68 | box-shadow: -1px -1px 3px rgba(0,0,0,0.2), 8px 8px 12px rgba(0,0,0,0.4); | ||
69 | } | ||
70 | |||
71 | .sb-container div:nth-child(9){ | ||
72 | box-shadow: -1px -1px 3px rgba(0,0,0,0.2), 9px 9px 14px rgba(0,0,0,0.4); | ||
73 | } | ||
74 | |||
75 | .sb-container div:nth-child(10){ | ||
76 | box-shadow: -1px -1px 3px rgba(0,0,0,0.2), 10px 10px 16px rgba(0,0,0,0.4); | ||
77 | } | ||
78 | |||
79 | .sb-container div:nth-child(11){ | ||
80 | box-shadow: -1px -1px 3px rgba(0,0,0,0.2), 11px 11px 18px rgba(0,0,0,0.4); | ||
81 | } | ||
82 | |||
83 | .sb-container div:last-child{ | ||
84 | background: #645b5c url(../images/cover2.jpg) repeat center center; | ||
85 | box-shadow: | ||
86 | -1px -1px 3px rgba(0,0,0,0.2), | ||
87 | 12px 12px 20px rgba(0,0,0,0.6), | ||
88 | inset 2px 2px 0 rgba(255, 255, 255, 0.1); | ||
89 | } | ||
90 | |||
91 | .sb-container div:last-child:after{ | ||
92 | content: ''; | ||
93 | position: absolute; | ||
94 | bottom: 15px; | ||
95 | left: 15px; | ||
96 | width: 20px; | ||
97 | height: 20px; | ||
98 | border-radius: 50%; | ||
99 | background: #dddddd; | ||
100 | background: -moz-linear-gradient(-45deg, #dddddd 0%, #58535e 48%, #889396 100%); | ||
101 | background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#dddddd), color-stop(48%,#58535e), color-stop(100%,#889396)); | ||
102 | background: -webkit-linear-gradient(-45deg, #dddddd 0%,#58535e 48%,#889396 100%); | ||
103 | background: -o-linear-gradient(-45deg, #dddddd 0%,#58535e 48%,#889396 100%); | ||
104 | background: -ms-linear-gradient(-45deg, #dddddd 0%,#58535e 48%,#889396 100%); | ||
105 | background: linear-gradient(135deg, #dddddd 0%,#58535e 48%,#889396 100%); | ||
106 | filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dddddd', endColorstr='#889396',GradientType=1 ); | ||
107 | box-shadow: -1px -1px 1px rgba(0,0,0,0.7), 1px 1px 1px rgba(255,255,255,0.1); | ||
108 | } | ||
109 | |||
110 | .sb-container div h4{ | ||
111 | color: rgba(255,255,255,0.9); | ||
112 | text-shadow: 1px 1px 1px rgba(0,0,0,0.2); | ||
113 | font-weight: 700; | ||
114 | font-size: 16px; | ||
115 | text-transform: uppercase; | ||
116 | border-top: 1px dashed rgba(0,0,0,0.1); | ||
117 | border-bottom: 1px dashed rgba(0,0,0,0.1); | ||
118 | margin: 5px; | ||
119 | padding: 5px; | ||
120 | |||
121 | -webkit-touch-callout: none; | ||
122 | -webkit-user-select: none; | ||
123 | -khtml-user-select: none; | ||
124 | -moz-user-select: none; | ||
125 | -ms-user-select: none; | ||
126 | user-select: none; | ||
127 | } | ||
128 | |||
129 | .sb-container div:last-child h4{ | ||
130 | background: rgba(0,0,0,0.2); | ||
131 | box-shadow: 0 1px 1px rgba(255,255,255,0.1); | ||
132 | } | ||
133 | |||
134 | .sb-container div:last-child h5{ | ||
135 | font-size: 50px; | ||
136 | white-space: nowrap; | ||
137 | text-align: left; | ||
138 | margin: 0; | ||
139 | padding: 0; | ||
140 | position: absolute; | ||
141 | line-height: 50px; | ||
142 | top: 0px; | ||
143 | left: 0px; | ||
144 | color: #111; | ||
145 | text-shadow: -1px -1px 1px rgba(255,255,255,0.1); | ||
146 | text-transform: uppercase; | ||
147 | |||
148 | -webkit-transform: rotate(-90deg) translateX(-157%) translateY(73px); | ||
149 | -moz-transform: rotate(-90deg) translateX(-157%) translateY(73px); | ||
150 | -o-transform: rotate(-90deg) translateX(-157%) translateY(73px); | ||
151 | -ms-transform: rotate(-90deg) translateX(-157%) translateY(73px); | ||
152 | transform: rotate(-90deg) translateX(-157%) translateY(73px); | ||
153 | |||
154 | -webkit-transform-origin: 0 0; | ||
155 | -moz-transform-origin: 0 0; | ||
156 | -o-transform-origin: 0 0; | ||
157 | -ms-transform-origin: 0 0; | ||
158 | transform-origin: 0 0; | ||
159 | |||
160 | -webkit-touch-callout: none; | ||
161 | -webkit-user-select: none; | ||
162 | -khtml-user-select: none; | ||
163 | -moz-user-select: none; | ||
164 | -ms-user-select: none; | ||
165 | user-select: none; | ||
166 | } | ||
167 | |||
168 | span.sb-icon{ | ||
169 | display: block; | ||
170 | height: 70px; | ||
171 | width: 70px; | ||
172 | margin: 20px auto; | ||
173 | -webkit-touch-callout: none; | ||
174 | -webkit-user-select: none; | ||
175 | -khtml-user-select: none; | ||
176 | -moz-user-select: none; | ||
177 | -ms-user-select: none; | ||
178 | user-select: none; | ||
179 | } | ||
180 | |||
181 | span.sb-icon:before { | ||
182 | font-family: 'icons'; | ||
183 | font-style: normal; | ||
184 | font-weight: normal; | ||
185 | speak: none; | ||
186 | display: block; | ||
187 | text-decoration: inherit; | ||
188 | text-align: center; | ||
189 | text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); | ||
190 | line-height: 64px; | ||
191 | width: 100%; | ||
192 | font-size: 60px; | ||
193 | color: rgba(113,72,39,0.8); | ||
194 | text-shadow: 1px 1px 1px rgba(255,255,255,0.3); | ||
195 | } | ||
196 | |||
197 | .icon-cog:before { content: '\35'; } /* '5' */ | ||
198 | .icon-flight:before { content: '\37'; } /* '7' */ | ||
199 | .icon-eye:before { content: '\34'; } /* '4' */ | ||
200 | .icon-install:before { content: '\39'; } /* '9' */ | ||
201 | .icon-bag:before { content: '\36'; } /* '6' */ | ||
202 | .icon-globe:before { content: '\38'; } /* '8' */ | ||
203 | .icon-picture:before { content: '\32'; } /* '2' */ | ||
204 | .icon-video:before { content: '\30'; } /* '0' */ | ||
205 | .icon-download:before { content: '\41'; } /* 'A' */ | ||
206 | .icon-mobile:before { content: '\42'; } /* 'B' */ | ||
207 | .icon-camera:before { content: '\33'; } /* '3' */ \ No newline at end of file | ||