Ajax Loader
×

iinbox.google.com - slider tour

inbox.google.com - slider tour

Little hack for fun :)

HTML 
<div class="container--0" tabindex="-1">
1
<div class="container--0" tabindex="-1">
2
  <div class="container--1">
3
    <div class="container--2">
4
    
5
      <div class="slide">
6
        <img class="slide__img" srcset="//ssl.gstatic.com/bt/C3341AA7A1A076756462EE2E5CD71C11/1x/oobe_01/oobe_01_fr_r1.png 1x, //ssl.gstatic.com/bt/C3341AA7A1A076756462EE2E5CD71C11/2x/oobe_01/oobe_01_fr_r1_2x.png 2x" src="//ssl.gstatic.com/bt/C3341AA7A1A076756462EE2E5CD71C11/1x/oobe_01/oobe_01_fr_r1.png">
7
        <div class="slide__caption--rappel">
8
        
9
          <p class="slide__caption__text" jstcache="2013">Vous pouvez ajouter vos propres rappels en haut de la boîte de réception.</p>
10
        
11
        </div>
12
      </div>
13
    
14
      <div class="slide__footer">
15
        <button class="slide__button--dot"></button>
16
        <button class="slide__button--dot"></button>
17
        <button class="slide__button--dot--active"></button>
18
        <button class="slide__button--dot"></button>
19
      </div>
20
    
21
       <button class="slide__button--prev" title="Précédent"></button>
22
       <button class="slide__button--next" title="Suivant"></button>
23
    </div>
24
  </div>
25
</div>
 
CSS 
 
1
 
2
// Helpers
3
//
4
 
5
.fill{
6
  bottom: 0;
7
  left: 0;
8
  position: absolute;
9
  right: 0;
10
  top: 0;
11
}
12
 
13
// Normalized
14
//
15
16
body {
17
  font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif;
18
  font-size: 82.5%;
19
  margin: 0;
20
  min-width: 400px;
21
  overflow-x: hidden;
22
  overflow-y: scroll;
23
}
24
25
button{
26
  font-family: inherit;
27
  font-size: 1em;
28
 
29
  border: none;
30
  border-radius: 2px;
31
  cursor: pointer;
32
  display: inline-block;
33
  font-weight: bold;
34
  line-height: 2.5;
35
  margin: 4px 0;
36
  padding: 0 16px;
37
  text-transform: uppercase;
38
  transition: box-shadow .2s cubic-bezier(.4,0,.2,1),background-color .2s cubic-bezier(.4,0,.2,1);
39
  -webkit-font-smoothing: antialiased;
40
}
41
 
42
// Main
43
//
44
45
.container--0 {
46
  @extend .fill;
47
  background: rgba(0,0,0,.7);
48
  color: #fff;
49
  z-index: 50;
50
}
51
52
53
.container--1 {
54
  margin-top: -300px;
55
  position: absolute;
56
  top: 50%;
57
  width: 100%;
58
}
59
60
.container--2 {
61
  margin: 0 auto;
62
  position: relative;
63
  width: 800px;
64
}
65
 
66
.slide{
67
  background-color: #ececec;
68
  border-radius: 8px;
69
  box-shadow: 0 4px 32px rgba(0,0,0,.4);
70
    height: 600px;
71
    overflow: hidden;
72
    position: relative;
73
    width: 800px;
74
}
75
  
76
  
77
.slide__img{
78
  bottom: 220px;
79
  display: block;
80
  height: 320px;
81
  left: 50%;
82
  margin-left: -320px;
83
  position: absolute;
84
  width: 640px;
85
}
86
87
.slide__caption{
88
  background-position: 50px center;
89
  background-repeat: no-repeat;
90
  background-size: 120px;
91
  bottom: 0;
92
  font-size: 24px;
93
  height: 220px;
94
  left: 0;
95
  line-height: 1.5;
96
  padding-left: 220px;
97
  padding-right: 144px;
98
  position: absolute;
99
  right: 0;
100
  top: 380px;
101
  width: 436px;
102
  display: table;
103
}
104
  
105
.slide__caption__text{
106
  display: table-cell;
107
  vertical-align: middle;
108
}
109
    
110
.slide__caption--rappel{
111
  @extend .slide__caption;
112
    background-color: #4285f4;
113
    background-image: url(//ssl.gstatic.com/bt/C3341AA7A1A076756462EE2E5CD71C11/1x/ic_oobe_web_reminders_r1.png);
114
}
115
  
116
  
117
.slide__footer{
118
  line-height: 64px;
119
  position: absolute;
120
  text-align: center;
121
  top: 100%;
122
  width: 100%;
123
}
124
 
125
126
  
127
.slide__button{
128
  background-color: #f6f6f6;
129
  box-shadow: 0 0 2px rgba(0,0,0,.12),0 2px 4px rgba(0,0,0,.24);
130
  color: #212121;
131
}
132
133
.slide__button--img{
134
  @extend .slide__button;
135
  background-position: center;
136
  background-repeat: no-repeat;
137
  background-size: 24px;
138
  border-radius: 50%;
139
  box-shadow: 0 2px 6px rgba(0,0,0,.3);
140
  font-size: 1.1em;
141
  height: 48px;
142
  margin: -24px 48px;
143
  position: absolute;
144
  top: 50%;
145
  width: 48px;
146
}
147
148
.slide__button--prev{
149
  @extend .slide__button--img;
150
    background-image: url(//ssl.gstatic.com/bt/C3341AA7A1A076756462EE2E5CD71C11/1x/ic_oobe_back_24px.png);
151
    right: 100%;
152
}
153
  
154
.slide__button--next{
155
  @extend .slide__button--img;
156
   background-image: url(//ssl.gstatic.com/bt/C3341AA7A1A076756462EE2E5CD71C11/1x/ic_oobe_next_24px.png);
157
    left: 100%;
158
}
159
160
.slide__button--dot{
161
  background: transparent;
162
  border: none;
163
  height: 16px;
164
  margin: 0;
165
  opacity: .5;
166
  outline: none;
167
  padding: 0;
168
  -webkit-transition: all 120ms;
169
  transition: all 120ms;
170
  vertical-align: middle;
171
  width: 16px;
172
173
  &:after {
174
    background-color: #fff;
175
    border-radius: 50%;
176
    content: '';
177
    display: block;
178
    height: 50%;
179
    margin: 0 auto;
180
    width: 50%;
181
  }
182
}
183
  
184
.slide__button--dot--active{
185
  @extend .slide__button--dot;
186
  opacity: 1;
187
}
188
 

iinbox.google.com - slider tour

CSSDeck G+