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