aboutsummaryrefslogtreecommitdiff
path: root/Back/jinwei.me/css/style4.css
diff options
context:
space:
mode:
Diffstat (limited to 'Back/jinwei.me/css/style4.css')
-rw-r--r--Back/jinwei.me/css/style4.css207
1 files changed, 207 insertions, 0 deletions
diff --git a/Back/jinwei.me/css/style4.css b/Back/jinwei.me/css/style4.css
new file mode 100644
index 0000000..04d74aa
--- /dev/null
+++ b/Back/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
168span.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
181span.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
Powered by cgit v1.2.3 (git 2.41.0)