Card by Pradeepsaranbishnoi

Made by

@Pradeepsaranbishnoi

Theme:

Light

#animation#card#dark#theme#light

#e8e8e8

25K views

CSSAdd prefixes

1/* GENERAL */
2
3.credit {
4  position: fixed;
5  right: 2rem;
6  bottom: 2rem;
7  color: white;
8}
9
10.credit a {
11  color: inherit;
12}
13
14/* Main Circle */
15.main-circle {
16  width: 40rem;
17  height: 40rem;
18  border-radius: 100%;
19  background: linear-gradient(40deg, #FF0080,#FF8C00 70%);
20  position: absolute;
21  z-index: 1;
22  left: 50%;
23  -webkit-transform: translate(-50%, -70%);
24  -ms-transform: translate(-50%, -70%);
25  transform: translate(-50%, -70%)
26}
27
28/* Phone */
29.phone {
30  position: relative;
31  z-index: 2;
32  width: 18rem;
33  height: 17rem;
34  background-color: inherit;
35  -webkit-box-shadow: 0 4px 35px rgba(0,0,0,.1);
36  box-shadow: 0 4px 35px rgba(0,0,0,.1);
37  border-radius: 40px;
38  display: -webkit-box;
39  display: -ms-flexbox;
40  display: flex;
41  -webkit-box-orient: vertical;
42  -webkit-box-direction: normal;
43  -ms-flex-direction: column;
44  flex-direction: column;
45}
46
47
48
49/* Top */
50.menu {
51/*   background-color: blue; */
52  font-size: 80%;
53  opacity: .4;
54  padding: .8rem 1.8rem;
55  display: -webkit-box;
56  display: -ms-flexbox;
57  display: flex;
58  -webkit-box-pack: justify;
59  -ms-flex-pack: justify;
60  justify-content: space-between;
61  -webkit-box-align: center;
62  -ms-flex-align: center;
63  align-items: center;
64}
65
66.icons {
67  display: -webkit-box;
68  display: -ms-flexbox;
69  display: flex;
70  margin-top: .5rem;
71}
72
73.battery {
74  width: .85rem;
75  height: .45rem;
76  background-color: black;
77}
78
79.network {
80  width: 0;
81  height: 0;
82  border-style: solid;
83  border-width: 0 6.8px 7.2px 6.8px;
84  border-color: transparent transparent black transparent;
85  -webkit-transform: rotate(135deg);
86  -ms-transform: rotate(135deg);
87  transform: rotate(135deg);
88  margin: .12rem .5rem;
89}
90
91/* Middle */
92.content {
93  display: -webkit-box;
94  display: -ms-flexbox;
95  display: flex;
96  -webkit-box-orient: vertical;
97  -webkit-box-direction: normal;
98  -ms-flex-direction: column;
99  flex-direction: column;
100  margin: auto;
101  text-align: center;
102  width: 70%;
103  -webkit-transform: translateY(5%);
104  -ms-transform: translateY(5%);
105  transform: translateY(5%);
106}
107
108.circle {
109  position: relative;
110  border-radius: 100%;
111  width: 8rem;
112  height: 8rem;
113  background: linear-gradient(40deg, #FF0080,#FF8C00 70%);
114  margin: auto;
115}
116
117.crescent {
118  position: absolute;
119  border-radius: 100%;
120  right: 0;
121  width: 6rem;
122  height: 6rem;
123  background: white;
124  -webkit-transform: scale(0);
125  -ms-transform: scale(0);
126  transform: scale(0);
127  -webkit-transform-origin: top right;
128  -ms-transform-origin: top right;
129  transform-origin: top right;
130  -webkit-transition: -webkit-transform .6s cubic-bezier(0.645, 0.045, 0.355, 1);
131  transition: -webkit-transform .6s cubic-bezier(0.645, 0.045, 0.355, 1);
132  transition: transform .6s cubic-bezier(0.645, 0.045, 0.355, 1);
133  transition: transform .6s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform .6s cubic-bezier(0.645, 0.045, 0.355, 1);
134}
135
136label, .toggle {
137  height: 2.8rem;
138  border-radius: 100px;
139}
140
141label {
142  width: 100%;
143  background-color: rgba(0,0,0,.1);
144  border-radius: 100px;
145  position: relative;
146  margin: 1.8rem 0 4rem 0;
147  cursor: pointer;
148}
149
150.toggle {
151  position: absolute;
152  width: 50%;
153  background-color: #fff;
154  -webkit-box-shadow: 0 2px 15px rgba(0,0,0,.15);
155  box-shadow: 0 2px 15px rgba(0,0,0,.15);
156  -webkit-transition: -webkit-transform .3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
157  transition: -webkit-transform .3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
158  transition: transform .3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
159  transition: transform .3s cubic-bezier(0.25, 0.46, 0.45, 0.94), -webkit-transform .3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
160}
161
162.names {
163  font-size: 90%;
164  font-weight: bolder;
165  color: black;
166  width: 65%;
167  margin-left: 17.5%;
168  margin-top: 6.5%;
169  position: absolute;
170  display: -webkit-box;
171  display: -ms-flexbox;
172  display: flex;
173  -webkit-box-pack: justify;
174  -ms-flex-pack: justify;
175  justify-content: space-between;
176  -webkit-user-select: none;
177  -moz-user-select: none;
178  -ms-user-select: none;
179  user-select: none;
180}
181
182.dark {
183  opacity: .5;
184}
185
186.mark {
187  border-radius: 100px;
188  background-color: black;
189}
190
191.time {
192  color: black;
193}
194/* -------- Switch Styles ------------*/
195[type="checkbox"] {
196  display: none;
197}
198/* Toggle */
199[type="checkbox"]:checked + .app .toggle {
200  -webkit-transform: translateX(100%);
201  -ms-transform: translateX(100%);
202  transform: translateX(100%);
203  background-color: #34323D;
204}
205
206[type="checkbox"]:checked + .app .dark {
207  opacity: 1;
208  color: white;
209}
210
211[type="checkbox"]:checked + .app .light {
212  opacity: 1;
213  color: white;
214}
215/* App */
216[type="checkbox"]:checked + .app .body {
217  background-color: #26242E;
218  color: white;
219}
220/* Circle */
221[type="checkbox"]:checked + .app .crescent {
222  -webkit-transform: scale(1);
223  -ms-transform: scale(1);
224  transform: scale(1);
225  background: #26242E;
226}
227
228[type="checkbox"]:checked + .app .circle {
229  background: linear-gradient(40deg, #8983F7, #A3DAFB 70%);
230}
231
232[type="checkbox"]:checked + .app .main-circle {
233  background: linear-gradient(40deg, #8983F7, #A3DAFB 70%);
234}
235
236[type="checkbox"]:checked + .time {
237  color: white;
238}
239
240[type="checkbox"]:checked + .app .body .phone .menu .time {
241  color: white;
242}
243
244[type="checkbox"]:checked + .app .body .phone .menu .icons .network {
245  border-color: transparent transparent white transparent;
246}
247
248[type="checkbox"]:checked + .app .body .phone .menu .icons .battery {
249  background-color: white;
250}
251
252[type="checkbox"]:checked + .app .body {
253  border-radius: 40px;
254  ;
255}
256
257.menu {
258/*   background-color: blue; */
259  font-size: 80%;
260  opacity: .4;
261  padding: .8rem 1.8rem;
262  display: -webkit-box;
263  display: -ms-flexbox;
264  display: flex;
265  -webkit-box-pack: justify;
266  -ms-flex-pack: justify;
267  justify-content: space-between;
268  -webkit-box-align: center;
269  -ms-flex-align: center;
270  align-items: center;
271}
272

/* GENERAL */

.credit {
  position: fixed;
  right: 2rem;
  bottom: 2rem;
  color: white;
}

.credit a {
  color: inherit;
}

/* Main Circle */
.main-circle {
  width: 40rem;
  height: 40rem;
  border-radius: 100%;
  background: linear-gradient(40deg, #FF0080,#FF8C00 70%);
  position: absolute;
  z-index: 1;
  left: 50%;
  -webkit-transform: translate(-50%, -70%);
  -ms-transform: translate(-50%, -70%);
  transform: translate(-50%, -70%)
}

/* Phone */
.phone {
  position: relative;
  z-index: 2;
  width: 18rem;
  height: 17rem;
  background-color: inherit;
  -webkit-box-shadow: 0 4px 35px rgba(0,0,0,.1);
  box-shadow: 0 4px 35px rgba(0,0,0,.1);
  border-radius: 40px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}



/* Top */
.menu {
/*   background-color: blue; */
  font-size: 80%;
  opacity: .4;
  padding: .8rem 1.8rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.icons {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-top: .5rem;
}

.battery {
  width: .85rem;
  height: .45rem;
  background-color: black;
}

.network {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 6.8px 7.2px 6.8px;
  border-color: transparent transparent black transparent;
  -webkit-transform: rotate(135deg);
  -ms-transform: rotate(135deg);
  transform: rotate(135deg);
  margin: .12rem .5rem;
}

/* Middle */
.content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  margin: auto;
  text-align: center;
  width: 70%;
  -webkit-transform: translateY(5%);
  -ms-transform: translateY(5%);
  transform: translateY(5%);
}

.circle {
  position: relative;
  border-radius: 100%;
  width: 8rem;
  height: 8rem;
  background: linear-gradient(40deg, #FF0080,#FF8C00 70%);
  margin: auto;
}

.crescent {
  position: absolute;
  border-radius: 100%;
  right: 0;
  width: 6rem;
  height: 6rem;
  background: white;
  -webkit-transform: scale(0);
  -ms-transform: scale(0);
  transform: scale(0);
  -webkit-transform-origin: top right;
  -ms-transform-origin: top right;
  transform-origin: top right;
  -webkit-transition: -webkit-transform .6s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: -webkit-transform .6s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: transform .6s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: transform .6s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform .6s cubic-bezier(0.645, 0.045, 0.355, 1);
}

label, .toggle {
  height: 2.8rem;
  border-radius: 100px;
}

label {
  width: 100%;
  background-color: rgba(0,0,0,.1);
  border-radius: 100px;
  position: relative;
  margin: 1.8rem 0 4rem 0;
  cursor: pointer;
}

.toggle {
  position: absolute;
  width: 50%;
  background-color: #fff;
  -webkit-box-shadow: 0 2px 15px rgba(0,0,0,.15);
  box-shadow: 0 2px 15px rgba(0,0,0,.15);
  -webkit-transition: -webkit-transform .3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transition: -webkit-transform .3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transition: transform .3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transition: transform .3s cubic-bezier(0.25, 0.46, 0.45, 0.94), -webkit-transform .3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.names {
  font-size: 90%;
  font-weight: bolder;
  color: black;
  width: 65%;
  margin-left: 17.5%;
  margin-top: 6.5%;
  position: absolute;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.dark {
  opacity: .5;
}

.mark {
  border-radius: 100px;
  background-color: black;
}

.time {
  color: black;
}
/* -------- Switch Styles ------------*/
[type="checkbox"] {
  display: none;
}
/* Toggle */
[type="checkbox"]:checked + .app .toggle {
  -webkit-transform: translateX(100%);
  -ms-transform: translateX(100%);
  transform: translateX(100%);
  background-color: #34323D;
}

[type="checkbox"]:checked + .app .dark {
  opacity: 1;
  color: white;
}

[type="checkbox"]:checked + .app .light {
  opacity: 1;
  color: white;
}
/* App */
[type="checkbox"]:checked + .app .body {
  background-color: #26242E;
  color: white;
}
/* Circle */
[type="checkbox"]:checked + .app .crescent {
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
  background: #26242E;
}

[type="checkbox"]:checked + .app .circle {
  background: linear-gradient(40deg, #8983F7, #A3DAFB 70%);
}

[type="checkbox"]:checked + .app .main-circle {
  background: linear-gradient(40deg, #8983F7, #A3DAFB 70%);
}

[type="checkbox"]:checked + .time {
  color: white;
}

[type="checkbox"]:checked + .app .body .phone .menu .time {
  color: white;
}

[type="checkbox"]:checked + .app .body .phone .menu .icons .network {
  border-color: transparent transparent white transparent;
}

[type="checkbox"]:checked + .app .body .phone .menu .icons .battery {
  background-color: white;
}

[type="checkbox"]:checked + .app .body {
  border-radius: 40px;
  ;
}

.menu {
/*   background-color: blue; */
  font-size: 80%;
  opacity: .4;
  padding: .8rem 1.8rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

HTML

1<input id="switch" type="checkbox">
2<div class="app">
3  <div class="body">
4    
5    <div class="phone">
6    
7      <div class="menu">
8        <div class="time">4:20</div>
9        <div class="icons">
10          <div class="network"></div>
11          <div class="battery"></div>
12        </div>
13      </div>
14    
15      <div class="content">
16        <div class="circle">
17          <div class="crescent"></div>
18        </div>
19       
20        <label for="switch">
21          <div class="toggle"></div>
22          <div class="names">
23            <p class="light">Light</p>
24            <p class="dark">Dark</p>
25          </div>
26        </label>
27        
28       
29      </div>
30      
31    </div>
32  </div>
33  
34</div>

<input id="switch" type="checkbox">
<div class="app">
  <div class="body">
    
    <div class="phone">
    
      <div class="menu">
        <div class="time">4:20</div>
        <div class="icons">
          <div class="network"></div>
          <div class="battery"></div>
        </div>
      </div>
    
      <div class="content">
        <div class="circle">
          <div class="crescent"></div>
        </div>
       
        <label for="switch">
          <div class="toggle"></div>
          <div class="names">
            <p class="light">Light</p>
            <p class="dark">Dark</p>
          </div>
        </label>
        
       
      </div>
      
    </div>
  </div>
  
</div>