diff options
Diffstat (limited to 'Code/uucky.me/Uucky的小站_files/style.css')
-rw-r--r-- | Code/uucky.me/Uucky的小站_files/style.css | 214 |
1 files changed, 0 insertions, 214 deletions
diff --git a/Code/uucky.me/Uucky的小站_files/style.css b/Code/uucky.me/Uucky的小站_files/style.css deleted file mode 100644 index 0e40cb1..0000000 --- a/Code/uucky.me/Uucky的小站_files/style.css +++ /dev/null | |||
@@ -1,214 +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(./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(./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: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(-157%) translateY(73px); | ||
155 | -moz-transform: rotate(-90deg) translateX(-157%) translateY(73px); | ||
156 | -o-transform: rotate(-90deg) translateX(-157%) translateY(73px); | ||
157 | -ms-transform: rotate(-90deg) translateX(-157%) translateY(73px); | ||
158 | transform: rotate(-90deg) translateX(-157%) translateY(73px); | ||
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-icon{ | ||
175 | display: block; | ||
176 | height: 70px; | ||
177 | width: 70px; | ||
178 | margin: 20px auto; | ||
179 | -webkit-touch-callout: none; | ||
180 | -webkit-user-select: none; | ||
181 | -khtml-user-select: none; | ||
182 | -moz-user-select: none; | ||
183 | -ms-user-select: none; | ||
184 | user-select: none; | ||
185 | } | ||
186 | |||
187 | span.sb-icon:before { | ||
188 | font-family: 'icons'; | ||
189 | font-style: normal; | ||
190 | font-weight: normal; | ||
191 | speak: none; | ||
192 | display: block; | ||
193 | text-decoration: inherit; | ||
194 | text-align: center; | ||
195 | text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); | ||
196 | line-height: 64px; | ||
197 | width: 100%; | ||
198 | font-size: 60px; | ||
199 | color: #000; | ||
200 | text-shadow: 0 0 1px #000; | ||
201 | } | ||
202 | |||
203 | .icon-emo-happy:before { content: '\e807'; } /* '' */ | ||
204 | .icon-googleplus:before { content: '\e808'; } /* '' */ | ||
205 | .icon-users:before { content: '\e80a'; } /* '' */ | ||
206 | .icon-picture:before { content: '\e80b'; } /* '' */ | ||
207 | .icon-rss:before { content: '\e806'; } /* '' */ | ||
208 | .icon-globe:before { content: '\e802'; } /* '' */ | ||
209 | .icon-heart:before { content: '\e805'; } /* '' */ | ||
210 | .icon-tumblr:before { content: '\e804'; } /* '' */ | ||
211 | .icon-twitter:before { content: '\e800'; } /* '' */ | ||
212 | .icon-weibo:before { content: '\e803'; } /* '' */ | ||
213 | .icon-youtube-play:before { content: '\e809'; } /* '' */ | ||
214 | .icon-github:before { content: '\e801'; } /* '' */ \ No newline at end of file | ||