diff options
Diffstat (limited to 'Back/jinwei.me/css/style5.css')
-rw-r--r-- | Back/jinwei.me/css/style5.css | 223 |
1 files changed, 0 insertions, 223 deletions
diff --git a/Back/jinwei.me/css/style5.css b/Back/jinwei.me/css/style5.css deleted file mode 100644 index 1388559..0000000 --- a/Back/jinwei.me/css/style5.css +++ /dev/null | |||
@@ -1,223 +0,0 @@ | |||
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 | border-radius: 5px; | ||
16 | cursor: pointer; | ||
17 | text-align: center; | ||
18 | background-image: url(../images/fabric.png); | ||
19 | |||
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(0,0,0,0.5), 1px 1px 1px rgba(255,255,255,0.1); | ||
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 h4 a{ | ||
141 | color: rgba(0,0,0,0.9); | ||
142 | text-shadow: 0 1px 1px rgba(255,255,255,0.4); | ||
143 | } | ||
144 | |||
145 | .sb-container div h4 a:hover{ | ||
146 | color: rgba(255,255,255,0.9); | ||
147 | text-shadow: 1px 1px 1px rgba(0,0,0,0.2); | ||
148 | } | ||
149 | |||
150 | .sb-container div:last-child h5{ | ||
151 | font-size: 50px; | ||
152 | white-space: nowrap; | ||
153 | text-align: left; | ||
154 | margin: 0; | ||
155 | padding: 0; | ||
156 | position: absolute; | ||
157 | line-height: 50px; | ||
158 | top: 0px; | ||
159 | left: 0px; | ||
160 | color: #111; | ||
161 | text-shadow: -1px -1px 1px rgba(255,255,255,0.1); | ||
162 | text-transform: uppercase; | ||
163 | |||
164 | -webkit-transform: rotate(-90deg) translateX(-157%) translateY(73px); | ||
165 | -moz-transform: rotate(-90deg) translateX(-157%) translateY(73px); | ||
166 | -o-transform: rotate(-90deg) translateX(-157%) translateY(73px); | ||
167 | -ms-transform: rotate(-90deg) translateX(-157%) translateY(73px); | ||
168 | transform: rotate(-90deg) translateX(-157%) translateY(73px); | ||
169 | |||
170 | -webkit-transform-origin: 0 0; | ||
171 | -moz-transform-origin: 0 0; | ||
172 | -o-transform-origin: 0 0; | ||
173 | -ms-transform-origin: 0 0; | ||
174 | transform-origin: 0 0; | ||
175 | |||
176 | -webkit-touch-callout: none; | ||
177 | -webkit-user-select: none; | ||
178 | -khtml-user-select: none; | ||
179 | -moz-user-select: none; | ||
180 | -ms-user-select: none; | ||
181 | user-select: none; | ||
182 | } | ||
183 | |||
184 | span.sb-icon{ | ||
185 | display: block; | ||
186 | height: 70px; | ||
187 | width: 70px; | ||
188 | margin: 20px auto; | ||
189 | -webkit-touch-callout: none; | ||
190 | -webkit-user-select: none; | ||
191 | -khtml-user-select: none; | ||
192 | -moz-user-select: none; | ||
193 | -ms-user-select: none; | ||
194 | user-select: none; | ||
195 | } | ||
196 | |||
197 | span.sb-icon:before { | ||
198 | font-family: 'icons'; | ||
199 | font-style: normal; | ||
200 | font-weight: normal; | ||
201 | speak: none; | ||
202 | display: block; | ||
203 | text-decoration: inherit; | ||
204 | text-align: center; | ||
205 | text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); | ||
206 | line-height: 64px; | ||
207 | width: 100%; | ||
208 | font-size: 60px; | ||
209 | color: #000; | ||
210 | text-shadow: 0 0 1px #000; | ||
211 | } | ||
212 | |||
213 | .icon-cog:before { content: '\35'; } /* '5' */ | ||
214 | .icon-flight:before { content: '\37'; } /* '7' */ | ||
215 | .icon-eye:before { content: '\34'; } /* '4' */ | ||
216 | .icon-install:before { content: '\39'; } /* '9' */ | ||
217 | .icon-bag:before { content: '\36'; } /* '6' */ | ||
218 | .icon-globe:before { content: '\38'; } /* '8' */ | ||
219 | .icon-picture:before { content: '\32'; } /* '2' */ | ||
220 | .icon-video:before { content: '\30'; } /* '0' */ | ||
221 | .icon-download:before { content: '\41'; } /* 'A' */ | ||
222 | .icon-mobile:before { content: '\42'; } /* 'B' */ | ||
223 | .icon-camera:before { content: '\33'; } /* '3' */ \ No newline at end of file | ||