<![CDATA[تالار میدوری - طرح های جالب با CSS ]]> http://www.midorinco.ir/ Tue, 17 Mar 2026 12:36:55 +0000 MyBB <![CDATA[نوشته های نئونی با CSS3]]> http://www.midorinco.ir/showthread.php?tid=1677 Sat, 25 Jun 2016 15:41:47 +0000 http://www.midorinco.ir/showthread.php?tid=1677 نوشته های نئونی با CSS3
نوشته هایی زیبا برای استفاده در سایت ها را برای دوستان قرار میدهم امیدوارم که بکار بیاید . این نوشته ها فقط با استفاده از کدهای CSS3 نوشته شده اند . نخست به نمونه ی زنده ی زیر نگاه کنید و اگر علاقه مند شدید, از کدهای داده شده در زیر استفاده کنید . ماوس را روی نوشته ها ببرید و نتیجه را ببینید . تغییرات هم بعهده ی خودتان است .


کد HTML: 
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<style>
body {
  background-color: #222222;
  background: repeating-linear-gradient(45deg, #2b2b2b 0%, #2b2b2b 10%, #222222 0%, #222222 50%) 0 / 15px 15px;
}
#container {
  width: 500px;
  margin: auto;
}
/*neeeeoooon*/
p {
  text-align: center;
  font-size: 7em;
  margin: 20px 0 20px 0;
}
a {
  text-decoration: none;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  transition: all 0.5s;
}
p:nth-child(1) a {
  color: #fff;
  font-family: Monoton;
  -webkit-animation: neon1 1.5s ease-in-out infinite alternate;
  -moz-animation: neon1 1.5s ease-in-out infinite alternate;
  animation: neon1 1.5s ease-in-out infinite alternate;
}
p:nth-child(1) a:hover {
  color: #FF1177;
  -webkit-animation: none;
  -moz-animation: none;
  animation: none;
}
p:nth-child(2) a {
  font-size: 1.5em;
  color: #228DFF;
  font-family: Iceland;
}
p:nth-child(2) a:hover {
  -webkit-animation: neon2 1.5s ease-in-out infinite alternate;
  -moz-animation: neon2 1.5s ease-in-out infinite alternate;
  animation: neon2 1.5s ease-in-out infinite alternate;
}
p:nth-child(3) a {
  color: #FFDD1B;
  font-family: Pacifico;
}
p:nth-child(3) a:hover {
  -webkit-animation: neon3 1.5s ease-in-out infinite alternate;
  -moz-animation: neon3 1.5s ease-in-out infinite alternate;
  animation: neon3 1.5s ease-in-out infinite alternate;
}
p:nth-child(4) a {
  color: #B6FF00;
  font-family: PressStart;
  font-size: 0.8em;
}
p:nth-child(4) a:hover {
  -webkit-animation: neon4 1.5s ease-in-out infinite alternate;
  -moz-animation: neon4 1.5s ease-in-out infinite alternate;
  animation: neon4 1.5s ease-in-out infinite alternate;
}
p:nth-child(5) a {
  color: #FF9900;
  font-family: Audiowide;
}
p:nth-child(5) a:hover {
  -webkit-animation: neon5 1.5s ease-in-out infinite alternate;
  -moz-animation: neon5 1.5s ease-in-out infinite alternate;
  animation: neon5 1.5s ease-in-out infinite alternate;
}
p:nth-child(6) a {
  color: #BA01FF;
  font-family: Vampiro One;
}
p:nth-child(6) a:hover {
  -webkit-animation: neon6 1.5s ease-in-out infinite alternate;
  -moz-animation: neon6 1.5s ease-in-out infinite alternate;
  animation: neon6 1.5s ease-in-out infinite alternate;
}
p a:hover {
  color: #ffffff;
}
/*glow for webkit*/
@-webkit-keyframes neon1 {
  from {
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #FF1177, 0 0 70px #FF1177, 0 0 80px #FF1177, 0 0 100px #FF1177, 0 0 150px #FF1177;
  }
  to {
    text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #FF1177, 0 0 35px #FF1177, 0 0 40px #FF1177, 0 0 50px #FF1177, 0 0 75px #FF1177;
  }
}
@-webkit-keyframes neon2 {
  from {
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #228DFF, 0 0 70px #228DFF, 0 0 80px #228DFF, 0 0 100px #228DFF, 0 0 150px #228DFF;
  }
  to {
    text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #228DFF, 0 0 35px #228DFF, 0 0 40px #228DFF, 0 0 50px #228DFF, 0 0 75px #228DFF;
  }
}
@-webkit-keyframes neon3 {
  from {
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #FFDD1B, 0 0 70px #FFDD1B, 0 0 80px #FFDD1B, 0 0 100px #FFDD1B, 0 0 150px #FFDD1B;
  }
  to {
    text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #FFDD1B, 0 0 35px #FFDD1B, 0 0 40px #FFDD1B, 0 0 50px #FFDD1B, 0 0 75px #FFDD1B;
  }
}
@-webkit-keyframes neon4 {
  from {
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #B6FF00, 0 0 70px #B6FF00, 0 0 80px #B6FF00, 0 0 100px #B6FF00, 0 0 150px #B6FF00;
  }
  to {
    text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #B6FF00, 0 0 35px #B6FF00, 0 0 40px #B6FF00, 0 0 50px #B6FF00, 0 0 75px #B6FF00;
  }
}
@-webkit-keyframes neon5 {
  from {
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #FF9900, 0 0 70px #FF9900, 0 0 80px #FF9900, 0 0 100px #FF9900, 0 0 150px #FF9900;
  }
  to {
    text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #FF9900, 0 0 35px #FF9900, 0 0 40px #FF9900, 0 0 50px #FF9900, 0 0 75px #FF9900;
  }
}
@-webkit-keyframes neon6 {
  from {
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #ff00de, 0 0 70px #ff00de, 0 0 80px #ff00de, 0 0 100px #ff00de, 0 0 150px #ff00de;
  }
  to {
    text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #ff00de, 0 0 35px #ff00de, 0 0 40px #ff00de, 0 0 50px #ff00de, 0 0 75px #ff00de;
  }
}
/*glow for mozilla*/
@-moz-keyframes neon1 {
  from {
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #FF1177, 0 0 70px #FF1177, 0 0 80px #FF1177, 0 0 100px #FF1177, 0 0 150px #FF1177;
  }
  to {
    text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #FF1177, 0 0 35px #FF1177, 0 0 40px #FF1177, 0 0 50px #FF1177, 0 0 75px #FF1177;
  }
}
@-moz-keyframes neon2 {
  from {
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #228DFF, 0 0 70px #228DFF, 0 0 80px #228DFF, 0 0 100px #228DFF, 0 0 150px #228DFF;
  }
  to {
    text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #228DFF, 0 0 35px #228DFF, 0 0 40px #228DFF, 0 0 50px #228DFF, 0 0 75px #228DFF;
  }
}
@-moz-keyframes neon3 {
  from {
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #FFDD1B, 0 0 70px #FFDD1B, 0 0 80px #FFDD1B, 0 0 100px #FFDD1B, 0 0 150px #FFDD1B;
  }
  to {
    text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #FFDD1B, 0 0 35px #FFDD1B, 0 0 40px #FFDD1B, 0 0 50px #FFDD1B, 0 0 75px #FFDD1B;
  }
}
@-moz-keyframes neon4 {
  from {
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #B6FF00, 0 0 70px #B6FF00, 0 0 80px #B6FF00, 0 0 100px #B6FF00, 0 0 150px #B6FF00;
  }
  to {
    text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #B6FF00, 0 0 35px #B6FF00, 0 0 40px #B6FF00, 0 0 50px #B6FF00, 0 0 75px #B6FF00;
  }
}
@-moz-keyframes neon5 {
  from {
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #FF9900, 0 0 70px #FF9900, 0 0 80px #FF9900, 0 0 100px #FF9900, 0 0 150px #FF9900;
  }
  to {
    text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #FF9900, 0 0 35px #FF9900, 0 0 40px #FF9900, 0 0 50px #FF9900, 0 0 75px #FF9900;
  }
}
@-moz-keyframes neon6 {
  from {
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #ff00de, 0 0 70px #ff00de, 0 0 80px #ff00de, 0 0 100px #ff00de, 0 0 150px #ff00de;
  }
  to {
    text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #ff00de, 0 0 35px #ff00de, 0 0 40px #ff00de, 0 0 50px #ff00de, 0 0 75px #ff00de;
  }
}
/*glow*/
@keyframes neon1 {
  from {
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #FF1177, 0 0 70px #FF1177, 0 0 80px #FF1177, 0 0 100px #FF1177, 0 0 150px #FF1177;
  }
  to {
    text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #FF1177, 0 0 35px #FF1177, 0 0 40px #FF1177, 0 0 50px #FF1177, 0 0 75px #FF1177;
  }
}
@keyframes neon2 {
  from {
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #228DFF, 0 0 70px #228DFF, 0 0 80px #228DFF, 0 0 100px #228DFF, 0 0 150px #228DFF;
  }
  to {
    text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #228DFF, 0 0 35px #228DFF, 0 0 40px #228DFF, 0 0 50px #228DFF, 0 0 75px #228DFF;
  }
}
@keyframes neon3 {
  from {
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #FFDD1B, 0 0 70px #FFDD1B, 0 0 80px #FFDD1B, 0 0 100px #FFDD1B, 0 0 150px #FFDD1B;
  }
  to {
    text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #FFDD1B, 0 0 35px #FFDD1B, 0 0 40px #FFDD1B, 0 0 50px #FFDD1B, 0 0 75px #FFDD1B;
  }
}
@keyframes neon4 {
  from {
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #B6FF00, 0 0 70px #B6FF00, 0 0 80px #B6FF00, 0 0 100px #B6FF00, 0 0 150px #B6FF00;
  }
  to {
    text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #B6FF00, 0 0 35px #B6FF00, 0 0 40px #B6FF00, 0 0 50px #B6FF00, 0 0 75px #B6FF00;
  }
}
@keyframes neon5 {
  from {
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #FF9900, 0 0 70px #FF9900, 0 0 80px #FF9900, 0 0 100px #FF9900, 0 0 150px #FF9900;
  }
  to {
    text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #FF9900, 0 0 35px #FF9900, 0 0 40px #FF9900, 0 0 50px #FF9900, 0 0 75px #FF9900;
  }
}
@keyframes neon6 {
  from {
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #ff00de, 0 0 70px #ff00de, 0 0 80px #ff00de, 0 0 100px #ff00de, 0 0 150px #ff00de;
  }
  to {
    text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #ff00de, 0 0 35px #ff00de, 0 0 40px #ff00de, 0 0 50px #ff00de, 0 0 75px #ff00de;
  }
}
/*REEEEEEEEEEESPONSIVE*/
@media (max-width: 650px) {
  #container {
    width: 100%;
  }
  p {
    font-size: 3.5em;
  }
}
</style>
<body>
<div id="container">
<p><a href="https://en.wikipedia.org/wiki/Red">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
RED
</a></p>
<p><a href="https://en.wikipedia.org/wiki/Blue" target="_blank">
BLUE
</a></p>
<p><a href="https://en.wikipedia.org/wiki/Yellow" target="_blank">
Yellow
</a></p>
<p><a href="https://en.wikipedia.org/wiki/Green" target="_blank">
میدوری
GREEN
</a></p>
<p><a href="https://en.wikipedia.org/wiki/Orange_(colour)" target="_blank">
ORANGE
</a></p>
<p><a href="https://en.wikipedia.org/wiki/Violet_(color)" target="_blank">
VIOLET
</a></p>
</div>
<div id="linkBack" style="position:absolute;right:0px;top:0px;background-color:#333;margin:0;width:180px;padding:5px"><a href="http://www.midorinco.ir" target="_blank" style="font-size:14px;text-decoration:none;color:#fff;padding:0 0 0 5px;font-family:Tahoma">منتشر شده در تالار میدوری</a></div>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273

]]> نوشته های نئونی با CSS3
نوشته هایی زیبا برای استفاده در سایت ها را برای دوستان قرار میدهم امیدوارم که بکار بیاید . این نوشته ها فقط با استفاده از کدهای CSS3 نوشته شده اند . نخست به نمونه ی زنده ی زیر نگاه کنید و اگر علاقه مند شدید, از کدهای داده شده در زیر استفاده کنید . ماوس را روی نوشته ها ببرید و نتیجه را ببینید . تغییرات هم بعهده ی خودتان است .


کد HTML: 
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<style>
body {
  background-color: #222222;
  background: repeating-linear-gradient(45deg, #2b2b2b 0%, #2b2b2b 10%, #222222 0%, #222222 50%) 0 / 15px 15px;
}
#container {
  width: 500px;
  margin: auto;
}
/*neeeeoooon*/
p {
  text-align: center;
  font-size: 7em;
  margin: 20px 0 20px 0;
}
a {
  text-decoration: none;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  transition: all 0.5s;
}
p:nth-child(1) a {
  color: #fff;
  font-family: Monoton;
  -webkit-animation: neon1 1.5s ease-in-out infinite alternate;
  -moz-animation: neon1 1.5s ease-in-out infinite alternate;
  animation: neon1 1.5s ease-in-out infinite alternate;
}
p:nth-child(1) a:hover {
  color: #FF1177;
  -webkit-animation: none;
  -moz-animation: none;
  animation: none;
}
p:nth-child(2) a {
  font-size: 1.5em;
  color: #228DFF;
  font-family: Iceland;
}
p:nth-child(2) a:hover {
  -webkit-animation: neon2 1.5s ease-in-out infinite alternate;
  -moz-animation: neon2 1.5s ease-in-out infinite alternate;
  animation: neon2 1.5s ease-in-out infinite alternate;
}
p:nth-child(3) a {
  color: #FFDD1B;
  font-family: Pacifico;
}
p:nth-child(3) a:hover {
  -webkit-animation: neon3 1.5s ease-in-out infinite alternate;
  -moz-animation: neon3 1.5s ease-in-out infinite alternate;
  animation: neon3 1.5s ease-in-out infinite alternate;
}
p:nth-child(4) a {
  color: #B6FF00;
  font-family: PressStart;
  font-size: 0.8em;
}
p:nth-child(4) a:hover {
  -webkit-animation: neon4 1.5s ease-in-out infinite alternate;
  -moz-animation: neon4 1.5s ease-in-out infinite alternate;
  animation: neon4 1.5s ease-in-out infinite alternate;
}
p:nth-child(5) a {
  color: #FF9900;
  font-family: Audiowide;
}
p:nth-child(5) a:hover {
  -webkit-animation: neon5 1.5s ease-in-out infinite alternate;
  -moz-animation: neon5 1.5s ease-in-out infinite alternate;
  animation: neon5 1.5s ease-in-out infinite alternate;
}
p:nth-child(6) a {
  color: #BA01FF;
  font-family: Vampiro One;
}
p:nth-child(6) a:hover {
  -webkit-animation: neon6 1.5s ease-in-out infinite alternate;
  -moz-animation: neon6 1.5s ease-in-out infinite alternate;
  animation: neon6 1.5s ease-in-out infinite alternate;
}
p a:hover {
  color: #ffffff;
}
/*glow for webkit*/
@-webkit-keyframes neon1 {
  from {
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #FF1177, 0 0 70px #FF1177, 0 0 80px #FF1177, 0 0 100px #FF1177, 0 0 150px #FF1177;
  }
  to {
    text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #FF1177, 0 0 35px #FF1177, 0 0 40px #FF1177, 0 0 50px #FF1177, 0 0 75px #FF1177;
  }
}
@-webkit-keyframes neon2 {
  from {
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #228DFF, 0 0 70px #228DFF, 0 0 80px #228DFF, 0 0 100px #228DFF, 0 0 150px #228DFF;
  }
  to {
    text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #228DFF, 0 0 35px #228DFF, 0 0 40px #228DFF, 0 0 50px #228DFF, 0 0 75px #228DFF;
  }
}
@-webkit-keyframes neon3 {
  from {
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #FFDD1B, 0 0 70px #FFDD1B, 0 0 80px #FFDD1B, 0 0 100px #FFDD1B, 0 0 150px #FFDD1B;
  }
  to {
    text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #FFDD1B, 0 0 35px #FFDD1B, 0 0 40px #FFDD1B, 0 0 50px #FFDD1B, 0 0 75px #FFDD1B;
  }
}
@-webkit-keyframes neon4 {
  from {
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #B6FF00, 0 0 70px #B6FF00, 0 0 80px #B6FF00, 0 0 100px #B6FF00, 0 0 150px #B6FF00;
  }
  to {
    text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #B6FF00, 0 0 35px #B6FF00, 0 0 40px #B6FF00, 0 0 50px #B6FF00, 0 0 75px #B6FF00;
  }
}
@-webkit-keyframes neon5 {
  from {
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #FF9900, 0 0 70px #FF9900, 0 0 80px #FF9900, 0 0 100px #FF9900, 0 0 150px #FF9900;
  }
  to {
    text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #FF9900, 0 0 35px #FF9900, 0 0 40px #FF9900, 0 0 50px #FF9900, 0 0 75px #FF9900;
  }
}
@-webkit-keyframes neon6 {
  from {
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #ff00de, 0 0 70px #ff00de, 0 0 80px #ff00de, 0 0 100px #ff00de, 0 0 150px #ff00de;
  }
  to {
    text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #ff00de, 0 0 35px #ff00de, 0 0 40px #ff00de, 0 0 50px #ff00de, 0 0 75px #ff00de;
  }
}
/*glow for mozilla*/
@-moz-keyframes neon1 {
  from {
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #FF1177, 0 0 70px #FF1177, 0 0 80px #FF1177, 0 0 100px #FF1177, 0 0 150px #FF1177;
  }
  to {
    text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #FF1177, 0 0 35px #FF1177, 0 0 40px #FF1177, 0 0 50px #FF1177, 0 0 75px #FF1177;
  }
}
@-moz-keyframes neon2 {
  from {
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #228DFF, 0 0 70px #228DFF, 0 0 80px #228DFF, 0 0 100px #228DFF, 0 0 150px #228DFF;
  }
  to {
    text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #228DFF, 0 0 35px #228DFF, 0 0 40px #228DFF, 0 0 50px #228DFF, 0 0 75px #228DFF;
  }
}
@-moz-keyframes neon3 {
  from {
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #FFDD1B, 0 0 70px #FFDD1B, 0 0 80px #FFDD1B, 0 0 100px #FFDD1B, 0 0 150px #FFDD1B;
  }
  to {
    text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #FFDD1B, 0 0 35px #FFDD1B, 0 0 40px #FFDD1B, 0 0 50px #FFDD1B, 0 0 75px #FFDD1B;
  }
}
@-moz-keyframes neon4 {
  from {
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #B6FF00, 0 0 70px #B6FF00, 0 0 80px #B6FF00, 0 0 100px #B6FF00, 0 0 150px #B6FF00;
  }
  to {
    text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #B6FF00, 0 0 35px #B6FF00, 0 0 40px #B6FF00, 0 0 50px #B6FF00, 0 0 75px #B6FF00;
  }
}
@-moz-keyframes neon5 {
  from {
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #FF9900, 0 0 70px #FF9900, 0 0 80px #FF9900, 0 0 100px #FF9900, 0 0 150px #FF9900;
  }
  to {
    text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #FF9900, 0 0 35px #FF9900, 0 0 40px #FF9900, 0 0 50px #FF9900, 0 0 75px #FF9900;
  }
}
@-moz-keyframes neon6 {
  from {
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #ff00de, 0 0 70px #ff00de, 0 0 80px #ff00de, 0 0 100px #ff00de, 0 0 150px #ff00de;
  }
  to {
    text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #ff00de, 0 0 35px #ff00de, 0 0 40px #ff00de, 0 0 50px #ff00de, 0 0 75px #ff00de;
  }
}
/*glow*/
@keyframes neon1 {
  from {
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #FF1177, 0 0 70px #FF1177, 0 0 80px #FF1177, 0 0 100px #FF1177, 0 0 150px #FF1177;
  }
  to {
    text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #FF1177, 0 0 35px #FF1177, 0 0 40px #FF1177, 0 0 50px #FF1177, 0 0 75px #FF1177;
  }
}
@keyframes neon2 {
  from {
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #228DFF, 0 0 70px #228DFF, 0 0 80px #228DFF, 0 0 100px #228DFF, 0 0 150px #228DFF;
  }
  to {
    text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #228DFF, 0 0 35px #228DFF, 0 0 40px #228DFF, 0 0 50px #228DFF, 0 0 75px #228DFF;
  }
}
@keyframes neon3 {
  from {
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #FFDD1B, 0 0 70px #FFDD1B, 0 0 80px #FFDD1B, 0 0 100px #FFDD1B, 0 0 150px #FFDD1B;
  }
  to {
    text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #FFDD1B, 0 0 35px #FFDD1B, 0 0 40px #FFDD1B, 0 0 50px #FFDD1B, 0 0 75px #FFDD1B;
  }
}
@keyframes neon4 {
  from {
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #B6FF00, 0 0 70px #B6FF00, 0 0 80px #B6FF00, 0 0 100px #B6FF00, 0 0 150px #B6FF00;
  }
  to {
    text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #B6FF00, 0 0 35px #B6FF00, 0 0 40px #B6FF00, 0 0 50px #B6FF00, 0 0 75px #B6FF00;
  }
}
@keyframes neon5 {
  from {
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #FF9900, 0 0 70px #FF9900, 0 0 80px #FF9900, 0 0 100px #FF9900, 0 0 150px #FF9900;
  }
  to {
    text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #FF9900, 0 0 35px #FF9900, 0 0 40px #FF9900, 0 0 50px #FF9900, 0 0 75px #FF9900;
  }
}
@keyframes neon6 {
  from {
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #ff00de, 0 0 70px #ff00de, 0 0 80px #ff00de, 0 0 100px #ff00de, 0 0 150px #ff00de;
  }
  to {
    text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #ff00de, 0 0 35px #ff00de, 0 0 40px #ff00de, 0 0 50px #ff00de, 0 0 75px #ff00de;
  }
}
/*REEEEEEEEEEESPONSIVE*/
@media (max-width: 650px) {
  #container {
    width: 100%;
  }
  p {
    font-size: 3.5em;
  }
}
</style>
<body>
<div id="container">
<p><a href="https://en.wikipedia.org/wiki/Red">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
RED
</a></p>
<p><a href="https://en.wikipedia.org/wiki/Blue" target="_blank">
BLUE
</a></p>
<p><a href="https://en.wikipedia.org/wiki/Yellow" target="_blank">
Yellow
</a></p>
<p><a href="https://en.wikipedia.org/wiki/Green" target="_blank">
میدوری
GREEN
</a></p>
<p><a href="https://en.wikipedia.org/wiki/Orange_(colour)" target="_blank">
ORANGE
</a></p>
<p><a href="https://en.wikipedia.org/wiki/Violet_(color)" target="_blank">
VIOLET
</a></p>
</div>
<div id="linkBack" style="position:absolute;right:0px;top:0px;background-color:#333;margin:0;width:180px;padding:5px"><a href="http://www.midorinco.ir" target="_blank" style="font-size:14px;text-decoration:none;color:#fff;padding:0 0 0 5px;font-family:Tahoma">منتشر شده در تالار میدوری</a></div>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273

]]> <![CDATA[اسلاید شوهای زیبا و ابتکاری با CSS3 (طرح چهلم)]]> http://www.midorinco.ir/showthread.php?tid=1676 Sun, 12 Jun 2016 13:35:26 +0000 http://www.midorinco.ir/showthread.php?tid=1676 اسلاید شوهای زیبا و ابتکاری با CSS3 (طرح چهلم)اسلاید شو یا گالری تصاویر برای نمایش تصاویر بصورتی زیبا و تکنیکی با استفاده از راه کارها و روش های گوناگون . برای دوستان چند مدل را گردآوری کرده ام که در اینجا قرار میدهم . نمونه ی زنده را در زیر ببینید و سپس برای بررسی و استفاده , از فایل های موجود در فایل فشرده استفاده کنید . تغییرات بعهده ی شماست .



CSS3-Slider.rar
 ارسال کننده فايل download
 نوع فايل .rar
 اندازه 318 KB
 دفعات دانلود 593 بار
 گيرنده(های) فايل
 زمان آخرین دانلود 1764886686
 یک سخنِ ناب

]]> اسلاید شوهای زیبا و ابتکاری با CSS3 (طرح چهلم)اسلاید شو یا گالری تصاویر برای نمایش تصاویر بصورتی زیبا و تکنیکی با استفاده از راه کارها و روش های گوناگون . برای دوستان چند مدل را گردآوری کرده ام که در اینجا قرار میدهم . نمونه ی زنده را در زیر ببینید و سپس برای بررسی و استفاده , از فایل های موجود در فایل فشرده استفاده کنید . تغییرات بعهده ی شماست .



CSS3-Slider.rar
 ارسال کننده فايل download
 نوع فايل .rar
 اندازه 318 KB
 دفعات دانلود 593 بار
 گيرنده(های) فايل
 زمان آخرین دانلود 1764886686
 یک سخنِ ناب

]]> <![CDATA[اسلاید شوهای زیبا و ابتکاری با CSS3 (طرح سی و نهم)]]> http://www.midorinco.ir/showthread.php?tid=1672 Tue, 17 May 2016 13:54:49 +0000 http://www.midorinco.ir/showthread.php?tid=1672 اسلاید شوهای زیبا و ابتکاری با CSS3 (طرح سی و نهم)اسلاید شو یا گالری تصاویر برای نمایش تصاویر بصورتی زیبا و تکنیکی با استفاده از راه کارها و روش های گوناگون . برای دوستان چند مدل را گردآوری کرده ام که در اینجا قرار میدهم . نمونه ی زنده را در زیر ببینید و سپس برای بررسی و چگونگی کار , از محتویات داخل فایل فشرده استفاده کنید . تغییرات بعهده ی شماست .


css3-image-slider.rar
 ارسال کننده فايل download
 نوع فايل .rar
 اندازه 71.9 KB
 دفعات دانلود 566 بار
 گيرنده(های) فايل
 زمان آخرین دانلود 1769695158
 یک سخنِ ناب

]]> اسلاید شوهای زیبا و ابتکاری با CSS3 (طرح سی و نهم)اسلاید شو یا گالری تصاویر برای نمایش تصاویر بصورتی زیبا و تکنیکی با استفاده از راه کارها و روش های گوناگون . برای دوستان چند مدل را گردآوری کرده ام که در اینجا قرار میدهم . نمونه ی زنده را در زیر ببینید و سپس برای بررسی و چگونگی کار , از محتویات داخل فایل فشرده استفاده کنید . تغییرات بعهده ی شماست .


css3-image-slider.rar
 ارسال کننده فايل download
 نوع فايل .rar
 اندازه 71.9 KB
 دفعات دانلود 566 بار
 گيرنده(های) فايل
 زمان آخرین دانلود 1769695158
 یک سخنِ ناب

]]> <![CDATA[چینش تصاویر در سایت بصورت ریسپانسیو با CSS]]> http://www.midorinco.ir/showthread.php?tid=1647 Wed, 20 Jan 2016 09:01:05 +0000 http://www.midorinco.ir/showthread.php?tid=1647 چینش تصاویر در سایت بصورت ریسپانسیو با CSS
شايد شما هم بخواهيد در سایت خودتان چندين تصوير را در کنار هم قرار دهید . برای این منظور راهکارهای زیادی وجود دارد ولی ساده ترین راه کار را با استفاده از تعریف کلاس سی اس اس برای دوستان قرار میدم . امید که بکار بیاید . در این روش با هر نوع پهنایی از صفحه تصاویر بهم ریخته نمیشوند و ترتیبشان را حفظ میکنند . نخست نمونه ی زنده را در زیر ببینید (پنجره ی مرورگر را کوچک و بزرگ کنید) و در صورت نیاز از کدهای داده شده برای این منظور استفاده کنید .


کد HTML: 
<style>
.content-four{width:95%;max-width:1024px;margin:10px auto 40px auto;background:#fff;
-webkit-columns:4 210px;-moz-columns:4 210px;columns:4 210px;}
.content-four img{display:inline-block;width:240px;max-width:100%;height:auto;margin:0 0 0.75em 0;}
</style>
<h1 style="text-align:center;">چینش تصویرها در سایت بصورت ریسپانسیو</h1>
<div class ="content-four">
<img src="images/p1.jpg" alt="">
<img src="images/p2.jpg" alt="">
<img src="images/p3.jpg" alt="">
<img src="images/p4.jpg" alt="">
<img src="images/p5.jpg" alt="">
<img src="images/p6.jpg" alt="">
<img src="images/p7.jpg" alt="">
<img src="images/p8.jpg" alt="">
<img src="images/p9.jpg" alt="">
<img src="images/p10.jpg" alt="">
<img src="images/p11.jpg" alt="">
<img src="images/p12.jpg" alt="">
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

]]> چینش تصاویر در سایت بصورت ریسپانسیو با CSS
شايد شما هم بخواهيد در سایت خودتان چندين تصوير را در کنار هم قرار دهید . برای این منظور راهکارهای زیادی وجود دارد ولی ساده ترین راه کار را با استفاده از تعریف کلاس سی اس اس برای دوستان قرار میدم . امید که بکار بیاید . در این روش با هر نوع پهنایی از صفحه تصاویر بهم ریخته نمیشوند و ترتیبشان را حفظ میکنند . نخست نمونه ی زنده را در زیر ببینید (پنجره ی مرورگر را کوچک و بزرگ کنید) و در صورت نیاز از کدهای داده شده برای این منظور استفاده کنید .


کد HTML: 
<style>
.content-four{width:95%;max-width:1024px;margin:10px auto 40px auto;background:#fff;
-webkit-columns:4 210px;-moz-columns:4 210px;columns:4 210px;}
.content-four img{display:inline-block;width:240px;max-width:100%;height:auto;margin:0 0 0.75em 0;}
</style>
<h1 style="text-align:center;">چینش تصویرها در سایت بصورت ریسپانسیو</h1>
<div class ="content-four">
<img src="images/p1.jpg" alt="">
<img src="images/p2.jpg" alt="">
<img src="images/p3.jpg" alt="">
<img src="images/p4.jpg" alt="">
<img src="images/p5.jpg" alt="">
<img src="images/p6.jpg" alt="">
<img src="images/p7.jpg" alt="">
<img src="images/p8.jpg" alt="">
<img src="images/p9.jpg" alt="">
<img src="images/p10.jpg" alt="">
<img src="images/p11.jpg" alt="">
<img src="images/p12.jpg" alt="">
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

]]> <![CDATA[چک باکس های زیبا با CSS]]> http://www.midorinco.ir/showthread.php?tid=1638 Tue, 01 Dec 2015 09:20:38 +0000 http://www.midorinco.ir/showthread.php?tid=1638 چک باکس های زیبا با CSSهشت مدل کليد یا سوییچ و یا چک باکس زیبا و جالب که توسط کدهای سی اس اس ایجاد میشوند را برای دوستان قرار می دهم . نمونه های زنده را در زیر ببینید و از کدهای داده شده استفاده کنید . تغییرات بعهده ی شماست .



کد HTML: 
<!DOCTYPE html>
<html><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta charset="UTF-8">
    <meta name="google" value="notranslate">
    <title>CodePen - Toggle Rebound</title>
    <link rel="stylesheet" href="wtFne_data/reset.css">
	   <style>
	 body {
  background : #d8d4d5;
}

#switch , #switch1 {
  position: absolute;
  left: -9999px;
}
.switch {
  display : block;
  width   : 170px;
  margin  : 50px auto;
  cursor  : pointer;
  border-radius : 25px;
  background    : #aae042;
  box-shadow    : inset 0 3px 7px 2px #444 , 0 -2px 5px 2px #888 , 0 -2px 3px 4px #eee , 0 2px 5px 3px #fefefe;
}
span {
  display : block;
  width   : 95px;
  height  : 44px;
  border-radius : inherit;
  background    : #D8D4D5;
  border-top    : 1px solid #eee;
  border-right  : 1px solid #ccc;
  box-shadow    :-1px 1px 5px 0 #000 , 0 5px 10px 0 #777;
  text-align    : center;
  position	 : relative;
  left		: 0;
}
.switch1 {
  background : #767477;
}
.switch1 span {
  left : 75px;
}
span i {
  display : inline-block;
  width   : 3px;
  height  : 16px;
  margin  : 12px auto;
  border-radius : 2px;
  margin-left   : 1px;
  background    : #dedadb;
  border-top    : 2px solid #eee;
  border-bottom : 2px solid #aaa;
  box-shadow    : -1px 0 1px 0 #bbb;
}
#switch:checked + .switch {
  background    : #767477;
}
#switch:checked + .switch span {
  left  : 75px;
}
#switch1:checked + .switch span {
  left  : 0;
}
#switch1:checked + .switch1 {
  background    : #aae042;
}
    </style>
    <script>
  window.console = window.console || function(t) {};
</script>
  </head>
  <body>
    <input name="switch" id="switch" type="checkbox">
<label for="switch" class ="switch">
  <span>
    <i></i>
    <i></i>
    <i></i>
    <i></i>
    <i></i>
  </span>
</label>
<input name="switch" id="switch1" type="checkbox">
<label for="switch1" class ="switch switch1">
  <span>
    <i></i>
    <i></i>
    <i></i>
    <i></i>
    <i></i>
  </span>
</label>
	<script>
  if (document.location.search.match(/type=embed/gi)) {
    window.parent.postMessage("resize", "*");
  }
</script>
 </body></html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100

==========================

کد HTML: 
<!DOCTYPE html>
<html class =" -moz-"><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta charset="UTF-8">
    <meta name="google" value="notranslate">
    <title>CodePen - FUN</title>
    <link rel="stylesheet" href="wtFne_data/reset.css">
	   <style>
	 body {
  background : #1b1b1b;
}
.container {
  width  : 400px;
  height : 150px;
  margin : 10px auto;
  padding-top: 100px;
}
#switch {
  position: absolute;
  left: -9999px;
}
.switch {
  display  : block;
  position : relative;
  width    : 190px;
  height   : 52px;
  margin   : auto;
  border-radius : 25px;
  box-shadow : 0 -2px 3px 0px rgba(0, 0, 0, 0.5) , 0 2px 3px 0px rgba(100, 100, 100, 0.5);
}
.switch > div {
  overflow : hidden;
  position : absolute;
  width    : inherit;
  height   : inherit;
  border-radius: inherit;
}
.switch .top , .switch .bottom {
  list-style-type : none;
  position : absolute;
  left	: 7px;
  width    : 200px;
  transition : all .5s linear;
}
.switch .top {
  top : -5px;
  transform : rotate(4deg);
}
.switch .bottom {
  bottom : -5px;
  transform : rotate(-4deg);
}
.switch li {
  width  : 15px;
  height : 10px;
  background : #fff;
  float  : left;
  margin-left: 5px;
  border-radius : 3px;
}
.top li {
  box-shadow : inset 0 0 10px 1px rgba(0, 0, 0, 0.8),0 0 10px 2px #000;
}
.bottom li {
  box-shadow : inset 0 0 10px 1px rgba(0, 0, 0, 0.3),0 0 10px 2px #000;    
}
label .button {
  display  : block;
  position : absolute;
  width    : 50px;
  height   : 50px;
  top	 : 1px;
  left	: 0;
  cursor   : pointer;
  border-radius : 50%;
  background : #1b1b1b;
  background-image : -webkit-linear-gradient(top, #32393a 10% , #1b1b1b 60% , ,#101718  100%);
  box-shadow : inset 0 1px 1px 0 #999 , inset 0 -1px 1px 0 #000,inset 0 0 15px 0 rgba(0,255, 0, 0.2);
  transition : left .5s linear , box-shadow .3s .2s linear;
}
label .button:after {
  display : block;
  content : '|||';
  text-align  : center;
  line-height : 44px;
  color	  : #000;
  text-shadow : 1px 0 0 rgba(200, 200, 200, 0.2);
  font-size   : 25px;
  font-weight : bold;
  letter-spacing : 3px;
}
.on , .off {
  display : block;
  position: absolute;
  width   : 20px;
  height  : 20px;
  border-radius : 50%;
  top	: -35px;
  transition : all .2s .3s linear;
}
.on {
  left : 20px;
  background : #0F0;
  box-shadow : inset 0 0 10px 2px #000,0 -1px 1px 1px #000,0 1px 1px 1px #333,0 0 30px 0 #0F0;
}

.off {
  right : 20px;
  background : #500;
  box-shadow : inset 0 0 10px 2px #000,0 -1px 1px 1px #000,0 1px 1px 1px #333;
}
.on:before , .off:before {
  position : absolute;
  top	 : -30px;
  font-size: 20px;
  font-family : corbel;
  transition : all .2s .3s linear;
}
.on:before {
  content : 'on';
  color    : #FFF;
}
.off:before {
  content : 'off';
  color    : rgba(250, 250, 250, 0.3);
}
#switch:checked + label .button {
  left : 140px;
  box-shadow : inset 0 1px 1px 0 #999 , inset 0 -1px 1px 0 #000,inset 0 0 15px 0 rgba(255, 0, 0, 0.2);
  transition : left .5s linear , box-shadow .3s .2s linear;
}
#switch:checked + label .top {
  transform : rotate(-4deg);
  transition : all .5s linear;
}
#switch:checked + label .bottom {
  transform : rotate(4deg);
  transition : all .5s linear;
}
#switch:checked + label .on {
  background : #050;
  box-shadow : inset 0 0 10px 2px #000,0 -1px 1px 1px #000,0 1px 1px 1px #333;
  transition : all .2s .3s linear;
}
#switch:checked + label .off {
  background : #F00;
  box-shadow : inset 0 0 10px 2px #000,0 -1px 1px 1px #000,0 1px 1px 1px #333,0 0 30px 0 #F00;
  transition : all .2s .3s linear;
}
#switch:checked + label .on:before {
  color : rgba(250, 250, 250, 0.3);
  transition : all .2s .3s linear;
}
#switch:checked + label .off:before {
  color : #FFF;
  transition : all .2s .3s linear;
}
    </style>
    <script>
  window.console = window.console || function(t) {};
</script>
	   <script src="wtFne_data/prefixfree.js"></script>
  </head>
  <body>
    <div class ="container">
  <input id="switch" type="checkbox">
  <label for="switch" class ="switch">
    <div>
	 <ul class ="top">
	   <li></li>
	   <li></li>
	   <li></li>
	   <li></li>
	   <li></li>
	   <li></li>
	   <li></li>
	   <li></li>
	 </ul>
	 <ul class ="bottom">
	   <li></li>
	   <li></li>
	   <li></li>
	   <li></li>
	   <li></li>
	   <li></li>
	   <li></li>
	   <li></li>
	 </ul>
	 <span class ="button"></span>
    </div>
    <span class ="on"></span>		  
    <span class ="off"></span>
  </label>
</div>
    <script>
  if (document.location.search.match(/type=embed/gi)) {
    window.parent.postMessage("resize", "*");
  }
</script>
</body></html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200

==========================

کد HTML: 
<!DOCTYPE html>
<html><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta charset="UTF-8">
    <meta name="google" value="notranslate">
    <title>CodePen - Pure CSS button switch</title>
    <link rel="stylesheet" href="wtFne_data/reset.css">
	   <style>
	 body {
  background: rgb(241,236,232);
  background: -moz-linear-gradient(top,  rgba(241,236,232,1) 0%, rgba(237,234,229,1) 23%, rgba(234,229,225,1) 35%, rgba(234,229,225,1) 47%, rgba(227,220,214,1) 100%);
  background: -webkit-linear-gradient(top,  rgba(241,236,232,1) 0%,rgba(237,234,229,1) 23%,rgba(234,229,225,1) 35%,rgba(234,229,225,1) 47%,rgba(227,220,214,1) 100%);
}
#switch {
  position: absolute;
  left: -9999px;
}
.switch {
  position	 : relative;
  display	  : block;
  width	    : 30px;
  padding	  : 15px;
  height	   : 19px;
  border-radius : 50%;
  margin	   : 100px auto; 
  border-bottom : 4px solid #b2afaa;
  box-shadow    : inset 0 2px 3px 0px #FFF , inset 0 -1px 2px 0px #999 , 0 3px 3px -1px #222;
  cursor	   : pointer;
  background: -moz-linear-gradient(top,  rgba(233,228,224,1) 0%, rgba(233,228,224,1) 67%, rgba(249,244,240,1) 75%, rgba(239,239,239,1) 100%);
  
  background: -webkit-linear-gradient(top,  rgba(233,228,224,1) 0%,rgba(233,228,224,1) 67%,rgba(249,244,240,1) 75%,rgba(239,239,239,1) 100%);
}
.switch:before {
  display  : block;
  content  : "";
  z-index  : -1;
  position : absolute;
  top	 : -6px;
  left	: -6px;
  width    : 68px;
  height   : 68px;
  border-radius : inherit;
  border   : 2px solid #eee;
  background: rgb(144,136,123);
  background: -moz-linear-gradient(top,  rgba(144,136,123,1) 0%, rgba(144,136,123,1) 21%, rgba(154,147,131,1) 29%, rgba(204,193,171,1) 50%, rgba(213,203,178,1) 55%, rgba(221,211,184,1) 61%, rgba(221,211,184,1) 100%);
  background: -webkit-linear-gradient(top,  rgba(144,136,123,1) 0%,rgba(144,136,123,1) 21%,rgba(154,147,131,1) 29%,rgba(204,193,171,1) 50%,rgba(213,203,178,1) 55%,rgba(221,211,184,1) 61%,rgba(221,211,184,1) 100%);
}
.switch:after {
  content : "ON";
  position : absolute;
  top	 : -40px;
  left	: 17px;
  color    : #daaa18;
  font-family : "Verdana";
  text-shadow : 0 -1px 0 #999 , 1px 1px 0 #FFF;
  font-size   : 14px;
}
.switch .bg {
  display : block;
  position: absolute;
  top	: 0;
  left    : 0;
  z-index : -1;
  width   : 60px;
  height  : 60px;
  border-radius : 50%;
  background : #daaa18;
}
i {
  float  : left;
  width  : 3px;
  height : 3px;
  border-radius : 50%;
  background  : #efefef;
  box-shadow  : 0 1px 1px 0 #999;
  margin	 : 2px 1px 2px 3px;
}
i:nth-child(14) , i:nth-child(15) , i:nth-child(16) , i:nth-child(17) {
  height : 1px;
}
#switch:checked + .switch {
  background    : #ede8e2;
  border	   : 1px solid #6f6658;
  height	   : 30px;
  box-shadow    : inset 0 2px 3px 0px #FFF , inset 0 -1px 2px 0px #999;
}
#switch:checked + .switch i {
  height : 3px;
}
#switch:checked + .switch:after {
  content : "OFF";
  color   : #aaa;
}
    </style>
    <script>
  window.console = window.console || function(t) {};
</script>
  </head>
  <body>
    <input name="switch" id="switch" type="checkbox">
<label for="switch" class ="switch">
  <span class ="bg"></span>
  <i></i>
  <i></i>
  <i></i>
  <i></i>
  <i></i>
  <i></i>
  <i></i>
  <i></i>
  <i></i>
  <i></i>
  <i></i>
  <i></i>
  <i></i>
  <i></i>
  <i></i>
  <i></i>
</label>
    <script>
  if (document.location.search.match(/type=embed/gi)) {
    window.parent.postMessage("resize", "*");
  }
</script>
</body></html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125

==========================

کد HTML: 
<!DOCTYPE html>
<html class =" -moz-"><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta charset="UTF-8">
    <meta name="google" value="notranslate">
    <title>CodePen - Button</title>
	<link rel="stylesheet" href="wtFne_data/reset.css">
	   <style>
	 body {
  background-color: #1b1b1b;
}
.container {
  width  : 150px;
  height : 130px;
  padding-top : 20px;
  margin : 50px auto ;
}
#power {
  position: absolute;
  left: -9999px;
}
label {
  display : block;
  width   : 100px;
  height  : 100px;
  border-radius : 50%;
  position   : relative;
  margin	: auto;
  border	: 4px solid #636679;
  background : -webkit-radial-gradient(center , ellipse cover, #efefef 0% , #EEE 80% , #FFF 100%);
  background :    -moz-radial-gradient(center , ellipse cover, #efefef 0% , #EEE 80% , #FFF 100%);
  background :	    radial-gradient(center , ellipse cover, #fefefe 0% , #EEE 80% , #FFF 100%);
  box-shadow : inset 0 -5px 10px 0 #d0d5eb , inset 0 5px 10px 0 #FFF , 0 0 0 1px #333;
  cursor	: pointer;
  text-align  : center;
  font-size   : 40px;
  color	  : #0f0;
  line-height : 100px;
  text-shadow : -1px -1px 0px #FFF , 1px 1px 0px #FFF;
  transition : all .1s ease-in-out;
}
label:after , label:before {
  display : block;
  content : "";
  position: absolute;
}
label:before {
  width  : 150px;
  height : 150px;
  border-radius : 20px;
  background    : -webkit-linear-gradient(top,  #fefefe 0%, #eee 30%, #ddd 82%,#ddd 100%);
  background    :    -moz-linear-gradient(top,  #fefefe 0%, #eee 30%, #ddd 82%,#ddd 100%);
  background    :	    linear-gradient(top,  #fefefe 0%, #eee 30%, #ddd 82%,#ddd 100%);
  box-shadow    : 0 10px 30px 0 #000 ;
  top	: -25px;
  left    : -25px;
  z-index : -2;
}
label:after {
  width  : 130px;
  height : 130px;
  border-radius : 50%;
  background : #fff;
  top  : -15px;
  left : -15px;
  z-index : -1;
  box-shadow : 0 -2px 5px 0px #fefefe , 0 2px 5px 0 #ccc;
  background: rgb(210,215,237);
  background: -webkit-linear-gradient(top,  #ddd 0%, #ddd 30%, #eee 82%,#efefef 100%);
  background:    -moz-linear-gradient(top,  #ddd 0%, #ddd 30%, #eee 82%,#efefef 100%);
  background:	    linear-gradient(top,  #ddd 0%, #ddd 30%, #eee 82%,#efefef 100%);
}
.light {
  display    : block;
  width	 : 12px;
  height	: 12px;
  position   : absolute;
  top	   : -12px;
  right	 : -12px;
  background : -webkit-radial-gradient(center , ellipse cover, #fff 0% , #d6f804 80% , #bade32 100%);
  background :    -moz-radial-gradient(center , ellipse cover, #fff 0% , #d6f804 80% , #bade32 100%);
  background :	    radial-gradient(center , ellipse cover, #fff 0% , #d6f804 80% , #bade32 100%);
  box-shadow : inset 0 1px 1px 0 #333 ,inset 0 -1px 1px 0 #333 , 0 0 5px 1px #bade32;
  border-radius : 50%;
  transition : all .1s ease-in-out;
}
.icon-off {
  position : absolute;
  top	 : 0;
  left	: 0;
  right    : 0;
  bottom   : 0;
  margin   : auto;
  width    : 40px;
  height   : 40px;
  border-radius : 50%;
  background : #d6f804;
  box-shadow : inset 0 0 4px 0 #999;
  transition : all .1s ease-in-out;
}
.icon-off:after {
  display  : block;
  content  : '';
  position : absolute;
  top	 : 0; bottom : 0;
  left	: 0; right  : 0;
  margin   : auto;
  width    : 26px;
  height   : 26px;
  border-radius : 50%;
  background    : #eee;
  box-shadow : 0 0 3px 0 #999;
  z-index    : 2;
}
.icon-off:before {
  display  : block;
  content  : '';
  position : absolute;
  top	 : -5px;
  left	: 0; right  : 0;
  margin   : auto;
  width    : 8px;
  height   : 25px;
  background : #d6f804;
  box-shadow : inherit;
  border-radius : 10px;
  border-style  : solid;
  border-width  : 0 3px 0;
  border-color  : #EEE;
  z-index    : 3;
  transition : all .1s ease-in-out;
}
#power:checked + label {
  background : -webkit-radial-gradient(center , ellipse cover, #ddd 0% , #EEE 80% , #efefef 100%);
  background :	    radial-gradient(center , ellipse cover, #ddd 0% , #EEE 80% , #efefef 100%);
  background :	    radial-gradient(center , ellipse cover, #ddd 0% , #EEE 80% , #efefef 100%);
  box-shadow : inset 0 -5px 10px 0 #aaa , inset 0 5px 10px 0 #aaa , 0 0 0 1px #333;
  transition : all .1s linear;
  
}
#power:checked + label .light {
  background : -webkit-radial-gradient(center , ellipse cover, #fcc 0% , #f88 60% , #f00 100%);
  background :    -moz-radial-gradient(center , ellipse cover, #fcc 0% , #f88 60% , #f00 100%);
  background :	    radial-gradient(center , ellipse cover, #fcc 0% , #f88 60% , #f00 100%);
  box-shadow : inset 0 1px 1px 0 #555 ,inset 0 -1px 1px 0 #555 , 0 0 5px 0 #f55;
  transition : all .1s linear;
}
#power:checked + label .icon-off {
  background : transparent;
  box-shadow : inset 0 0 5px 0 #777;
  transition : all .1s linear;
} 
#power:checked + label .icon-off:after {
  background : inherit;
  box-shadow : 0 0 5px 0 #777;
} 
#power:checked + label .icon-off:before {
  background   : #ddd;
  border-color : #dfdfdf;
  box-shadow   : inherit;
  transition : all .1s linear;
} 
    </style>
    <script>
  window.console = window.console || function(t) {};
</script>
	   <script src="wtFne_data/prefixfree.js"></script>
  </head>
  <body>
    <div class ="container">
	   <input id="power" name="power" type="checkbox">
	   <label for="power" class ="power">
		  <span class ="icon-off"></span>
		  <span class ="light"></span>
	   </label>
</div>
    <script>
  if (document.location.search.match(/type=embed/gi)) {
    window.parent.postMessage("resize", "*");
  }
</script>
</body></html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182

==========================

کد HTML: 
<!DOCTYPE html>
<html class =" -moz-"><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta charset="UTF-8">
    <meta name="google" value="notranslate">
    <title>CodePen - Switching</title>
    <link rel="stylesheet" href="wtFne_data/reset.css">
	   <style>
	 body {
  background : #1b1b1b;	 
}
.toggle , .toggle1{
  cursor  : pointer;
  display : block;
  width   : 130px;
  height  : 130px;
  position: relative;
}
.toggle {
  float : left;
  margin: 30px 0 0 400px;
}
.toggle1 {
  float : right;
  margin: 30px 400px 0 0;
}
.a , .b{
  position : absolute;
  top   : 0;
  left  : 0;
  width : 130px;
  height: 130px;
  background  : #b1bb1b;
  text-align  : center;
  font-size   : 90px;
  line-height : 130px;
  font-family : georgia;
  font-weight : bold;
  color	  : #1b1b1b;
  border-radius : 15px;
  border : 2px dotted rgba(0,0,0,.5);
  text-shadow : 1px 1px 0 rgba(250, 250, 250, 0.5);
}
.a {
  z-index : 1;
}
.b {
  background : #b1bbfb;
  z-index : 2;
}
#switch , #switch1 {
  position: absolute;
  left: -9999px;
}
#switch:checked ~ .toggle .b {
  animation : move-r 1s both;
}
#switch:not(:checked) ~ .toggle .b{
  animation : move-l 1s both;
}
@keyframes move-r {
  40% {
    transform : rotate(500deg) scale(1.1);
    left : 130%;
  }
  
  100% {
    left    : 0;
    z-index : -1;
  }
  
}
@keyframes move-l {
  0% {
    -webkit-transform : rotate(0deg);
    left    : 0;
    z-index : -1;
  }
  50% {
    transform : rotate(900deg) scale(.6);
    left    : -130%;
    z-index : -1;
  }
  100% {
    left    : 0;
    z-index : 2;
  } 
}
/* toggle1 */
#switch1:checked ~ .toggle1 .b {
  animation : move 1s both;
}
#switch1:checked ~ .toggle1 .a {
  animation : face 1s both;
}
#switch1:not(:checked) ~ .toggle1 .a{
  animation : move 1s both;
}

#switch1:not(:checked) ~ .toggle1 .b{
  animation : face 1s both;
}
@keyframes move {
  0% {
    z-index : 3;
  }
  50% {
    transform : rotate(15deg) scale(.6);
    left    : 130%;
    z-index : 3;
  }
  100% {
    left    : 0;
    z-index : 0;
  }
}
@keyframes  face {
  to {
    z-index : 3;
  }
}
    </style>
    <script>
  window.console = window.console || function(t) {};
</script>
	   <script src="wtFne_data/prefixfree.js"></script>
  </head>

  <body>
    <input id="switch" type="checkbox">
<label class ="toggle" for="switch">
  <div class ="a">♣</div>
  <div class ="b">☺</div>
</label>

<input id="switch1" type="checkbox">
<label class ="toggle1" for="switch1">
  <div class ="a">☺</div>
  <div class ="b">♥</div>
</label>
<script>
  if (document.location.search.match(/type=embed/gi)) {
    window.parent.postMessage("resize", "*");
  }
</script>
</body></html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146

==========================

کد HTML: 
<!DOCTYPE html>
<html><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta charset="UTF-8">
    <meta name="google" value="notranslate">
    <title>CodePen - Pure CSS Toggles</title>
    <title>Pure Toggle Effects, by RGG</title>
	   <meta charset="UTF-8">
	   <meta name="viewport" content="width=device-width, initial-scale=1.0">
	   <style>
	 @charset "UTF-8";
@import url(weloveiconfonts.com.css);
@import url(http://fonts.googleapis.com/css?family=Open+Sans:700,300);
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  font-size: 100%;
  vertical-align: baseline;
}
html {
  line-height: 1;
}
ol, ul {
  list-style: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
caption, th, td {
  text-align: left;
  font-weight: normal;
  vertical-align: middle;
}
q, blockquote {
  quotes: none;
}
q:before, q:after, blockquote:before, blockquote:after {
  content: "";
  content: none;
}
a img {
  border: none;
}

article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
  display: block;
}
body {
  background-color: #d0d0d0;
  text-align: center;
  font-family: "Open Sans", sans-serif;
  font-size: 16px;
  color: #444444;
}
header {
  margin-bottom: 2em;
}
h1 {
  font-size: 2em;
  margin: 2em 0 1em;
}
strong {
  font-weight: 700;
}
legend {
  font-size: 1.5em;
  line-height: 1em;
  margin-bottom: 1.9em;
  padding-bottom: 1.5em;
  border-bottom: 1px solid #444444;
  width: 100%;
}
div {
  margin-bottom: 1em;
}
fieldset {
  border: 0;
  padding: 0 2em 2em;
}
.pure-toggle {
  cursor: pointer;
  font-size: 1.5em;
  width: 6em;
  height: 3em;
  display: inline-block;
  position: relative;
  background: white;
  text-align: left;
  line-height: 3em;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -moz-perspective: 300px;
  -webkit-perspective: 300px;
  perspective: 300px;
}
.pure-toggle:before {
  width: 3em;
  height: 3em;
  position: absolute;
  right: 0;
  top: 0;
  background-color: #f5f5f5;
  display: inline-block;
  text-align: center;
  font-family: 'FontAwesome', sans-serif;
  content: "···";
  color: #ffffff;
  -moz-transition: all 1s ease-in-out;
  -o-transition: all 1s ease-in-out;
  -webkit-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
  -moz-transform-origin: 0% 50%;
  -ms-transform-origin: 0% 50%;
  -webkit-transform-origin: 0% 50%;
  transform-origin: 0% 50%;
  /*@include box-shadow(0.1em 0 0.2em rgba(0,0,0,0.3));*/
}
.pure-toggle [class^='fontawesome-'] {
  padding: 1em;
  line-height: inherit;
  font-family: 'FontAwesome', sans-serif;
  -moz-transition: all 1s ease-in-out;
  -o-transition: all 1s ease-in-out;
  -webkit-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
}
.pure-toggle.flip:before {
  -moz-transform-origin: 50% 50%;
  -ms-transform-origin: 50% 50%;
  -webkit-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
}
.pure-toggle.brick {
  background-color: white;
  border: 1px solid #d9d9d9;
  border-bottom-color: #e6e6e6;
  -moz-box-shadow: inset 0 0.1em 0.03em rgba(0, 0, 0, 0.2), inset 0 0.1em 0.3em rgba(0, 0, 0, 0.3), 0 0 2em rgba(255, 255, 255, 0.6);
  -webkit-box-shadow: inset 0 0.1em 0.03em rgba(0, 0, 0, 0.2), inset 0 0.1em 0.3em rgba(0, 0, 0, 0.3), 0 0 2em rgba(255, 255, 255, 0.6);
  box-shadow: inset 0 0.1em 0.03em rgba(0, 0, 0, 0.2), inset 0 0.1em 0.3em rgba(0, 0, 0, 0.3), 0 0 2em rgba(255, 255, 255, 0.6);
}
.pure-toggle.brick:before {
  margin-right: -1px;
  margin-top: -0.14em;
  -moz-box-shadow: 0 0.12em 0.01em #3ba5bc, 0 0.12em 0.3em rgba(59, 165, 188, 0.6), 0 0.12em 2em rgba(0, 0, 0, 0.3), -0.12em 0.15em 0.2em rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: 0 0.12em 0.01em #3ba5bc, 0 0.12em 0.3em rgba(59, 165, 188, 0.6), 0 0.12em 2em rgba(0, 0, 0, 0.3), -0.12em 0.15em 0.2em rgba(0, 0, 0, 0.2);
  box-shadow: 0 0.12em 0.01em #3ba5bc, 0 0.12em 0.3em rgba(59, 165, 188, 0.6), 0 0.12em 2em rgba(0, 0, 0, 0.3), -0.12em 0.15em 0.2em rgba(0, 0, 0, 0.2);
  -moz-transition-duration: 0.66667s;
  -o-transition-duration: 0.66667s;
  -webkit-transition-duration: 0.66667s;
  transition-duration: 0.66667s;
  -moz-transition-timing-function: cubic-bezier(0.52, -0.41, 0.55, 1.46);
  -o-transition-timing-function: cubic-bezier(0.52, -0.41, 0.55, 1.46);
  -webkit-transition-timing-function: cubic-bezier(0.52, -0.41, 0.55, 1.46);
  transition-timing-function: cubic-bezier(0.52, -0.41, 0.55, 1.46);
}
.pure-toggle.brick.switch {
  background: transparent;
  -moz-box-shadow: inset 0 0 0.03em transparent, inset 0 0 0.3em transparent, 0 0 2em rgba(255, 255, 255, 0);
  -webkit-box-shadow: inset 0 0 0.03em transparent, inset 0 0 0.3em transparent, 0 0 2em rgba(255, 255, 255, 0);
  box-shadow: inset 0 0 0.03em transparent, inset 0 0 0.3em transparent, 0 0 2em rgba(255, 255, 255, 0);
  border: 0;
}
.pure-toggle.brick.switch:before {
  display: none;
}
.pure-toggle.brick.switch .ok {
  color: white;
  top: 0;
  left: 1px;
  line-height: 1em;
  padding: 1em 1.045em;
  position: relative;
  background: #5EB9CC;
  -moz-box-shadow: 0 0.12em 0.01em #3ba5bc, 0 0.12em 0.3em rgba(59, 165, 188, 0.6), 0 0.12em 2em rgba(0, 0, 0, 0.3), -0.12em 0.15em 0.2em rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: 0 0.12em 0.01em #3ba5bc, 0 0.12em 0.3em rgba(59, 165, 188, 0.6), 0 0.12em 2em rgba(0, 0, 0, 0.3), -0.12em 0.15em 0.2em rgba(0, 0, 0, 0.2);
  box-shadow: 0 0.12em 0.01em #3ba5bc, 0 0.12em 0.3em rgba(59, 165, 188, 0.6), 0 0.12em 2em rgba(0, 0, 0, 0.3), -0.12em 0.15em 0.2em rgba(0, 0, 0, 0.2);
  -moz-transition-duration: 0.33333s;
  -o-transition-duration: 0.33333s;
  -webkit-transition-duration: 0.33333s;
  transition-duration: 0.33333s;
}
.pure-toggle.brick.switch .ok.no {
  top: 0.14em;
  background: transparent;
  background: #cc0966;
  -moz-box-shadow: 0 0 0.01em #9b074e, 0 0 0.3em rgba(155, 7, 78, 0.6), 0 0.12em 2em transparent, -0.12em 0.15em 0.2em transparent;
  -webkit-box-shadow: 0 0 0.01em #9b074e, 0 0 0.3em rgba(155, 7, 78, 0.6), 0 0.12em 2em transparent, -0.12em 0.15em 0.2em transparent;
  box-shadow: 0 0 0.01em #9b074e, 0 0 0.3em rgba(155, 7, 78, 0.6), 0 0.12em 2em transparent, -0.12em 0.15em 0.2em transparent;
}
input[type='checkbox'] + .pure-toggle:before {
  -moz-transform: rotateY(0deg);
  -ms-transform: rotateY(0deg);
  -webkit-transform: rotateY(0deg);
  transform: rotateY(0deg);
  background-color: #5EB9CC;
}
input[type='checkbox'] + .pure-toggle [class^="fontawesome-"],
input[type='checkbox'] + .pure-toggle [class*="fontawesome-"] {
  color: #5EB9CC;
}
input[type='checkbox'] + .pure-toggle.wide:before {
  -moz-transform: rotateY(0deg);
  -ms-transform: rotateY(0deg);
  -webkit-transform: rotateY(0deg);
  transform: rotateY(0deg);
  -moz-animation: contract 1s ease-in-out forwards;
  -webkit-animation: contract 1s ease-in-out forwards;
  animation: contract 1s ease-in-out forwards;
}
input[type='checkbox'] + .pure-toggle.brick:before {
  border-bottom: 0.03em solid #71c1d2;
  text-shadow: 0 0.05em 0 #4bb1c6;
  -moz-transform: rotateY(0deg);
  -ms-transform: rotateY(0deg);
  -webkit-transform: rotateY(0deg);
  transform: rotateY(0deg);
}
input[type='checkbox'] + .pure-toggle.brick.switch .ok {
  color: white;
}
input[type='checkbox'] + .pure-toggle.flip:before {
  -moz-animation: flip 0.5s ease-in-out forwards;
  -webkit-animation: flip 0.5s ease-in-out forwards;
  animation: flip 0.5s ease-in-out forwards;
}
input[type='checkbox'] + .pure-toggle.impossible:before {
  -moz-animation: impossible 0.5s ease-in-out forwards;
  -webkit-animation: impossible 0.5s ease-in-out forwards;
  animation: impossible 0.5s ease-in-out forwards;
}
input[type='checkbox']:checked + .pure-toggle:before {
  -moz-transform: rotateY(-180deg);
  -ms-transform: rotateY(-180deg);
  -webkit-transform: rotateY(-180deg);
  transform: rotateY(-180deg);
  background-color: #cc0966;
}
input[type='checkbox']:checked + .pure-toggle [class^="fontawesome-"],
input[type='checkbox']:checked + .pure-toggle [class*="fontawesome-"] {
  color: #cc0966;
}
input[type='checkbox']:checked + .pure-toggle.wide:before {
  -moz-transform: rotateY(0deg);
  -ms-transform: rotateY(0deg);
  -webkit-transform: rotateY(0deg);
  transform: rotateY(0deg);
  -moz-animation: expand 1s ease-in-out forwards;
  -webkit-animation: expand 1s ease-in-out forwards;
  animation: expand 1s ease-in-out forwards;
}
input[type='checkbox']:checked + .pure-toggle.brick:before {
  margin-right: 3em;
  border-bottom: 0.03em solid #f5137f;
  text-shadow: 0 0.05em 0 #9b074e;
  -moz-transform: rotateY(0deg);
  -ms-transform: rotateY(0deg);
  -webkit-transform: rotateY(0deg);
  transform: rotateY(0deg);
  -moz-box-shadow: 0 0.12em 0.01em #9b074e, 0 0.12em 0.3em rgba(155, 7, 78, 0.6), 0 0.12em 2em rgba(0, 0, 0, 0.3), 0.12em 0.15em 0.2em rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: 0 0.12em 0.01em #9b074e, 0 0.12em 0.3em rgba(155, 7, 78, 0.6), 0 0.12em 2em rgba(0, 0, 0, 0.3), 0.12em 0.15em 0.2em rgba(0, 0, 0, 0.2);
  box-shadow: 0 0.12em 0.01em #9b074e, 0 0.12em 0.3em rgba(155, 7, 78, 0.6), 0 0.12em 2em rgba(0, 0, 0, 0.3), 0.12em 0.15em 0.2em rgba(0, 0, 0, 0.2);
}
input[type='checkbox']:checked + .pure-toggle.brick.switch:before {
  display: none;
}
input[type='checkbox']:checked + .pure-toggle.brick.switch .ok {
  top: 0.14em;
  -moz-box-shadow: 0 0 0.01em #3ba5bc, 0 0 0.3em rgba(59, 165, 188, 0.6), 0 0.12em 2em transparent, -0.12em 0.15em 0.2em transparent;
  -webkit-box-shadow: 0 0 0.01em #3ba5bc, 0 0 0.3em rgba(59, 165, 188, 0.6), 0 0.12em 2em transparent, -0.12em 0.15em 0.2em transparent;
  box-shadow: 0 0 0.01em #3ba5bc, 0 0 0.3em rgba(59, 165, 188, 0.6), 0 0.12em 2em transparent, -0.12em 0.15em 0.2em transparent;
}
input[type='checkbox']:checked + .pure-toggle.brick.switch .ok.no {
  top: 0;
  background: #cc0966;
  -moz-box-shadow: 0 0.12em 0.01em #9b074e, 0 0.12em 0.3em rgba(155, 7, 78, 0.6), 0 0.12em 2em rgba(0, 0, 0, 0.3), 0.12em 0.15em 0.2em rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: 0 0.12em 0.01em #9b074e, 0 0.12em 0.3em rgba(155, 7, 78, 0.6), 0 0.12em 2em rgba(0, 0, 0, 0.3), 0.12em 0.15em 0.2em rgba(0, 0, 0, 0.2);
  box-shadow: 0 0.12em 0.01em #9b074e, 0 0.12em 0.3em rgba(155, 7, 78, 0.6), 0 0.12em 2em rgba(0, 0, 0, 0.3), 0.12em 0.15em 0.2em rgba(0, 0, 0, 0.2);
}
input[type='checkbox']:checked + .pure-toggle.flip:before {
  -moz-animation: flip-back 0.5s ease-in-out forwards;
  -webkit-animation: flip-back 0.5s ease-in-out forwards;
  animation: flip-back 0.5s ease-in-out forwards;
}
input[type='checkbox']:checked + .pure-toggle.impossible:before {
  -moz-animation: impossible-back 0.5s ease-in-out forwards;
  -webkit-animation: impossible-back 0.5s ease-in-out forwards;
  animation: impossible-back 0.5s ease-in-out forwards;
}
@keyframes flip-back {
  0% {
    -moz-transform: rotateY(0deg) translateX(0) scale(1);
    -ms-transform: rotateY(0deg) translateX(0) scale(1);
    -webkit-transform: rotateY(0deg) translateX(0) scale(1);
    transform: rotateY(0deg) translateX(0) scale(1);
  }
  60%,
    80% {
    -moz-transform: rotateY(-360deg) translateX(0) scale(1.3);
    -ms-transform: rotateY(-360deg) translateX(0) scale(1.3);
    -webkit-transform: rotateY(-360deg) translateX(0) scale(1.3);
    transform: rotateY(-360deg) translateX(0) scale(1.3);
  }
  100% {
    margin-right: 3em;
    -moz-transform: rotateY(-360deg) translateX(0) scale(1);
    -ms-transform: rotateY(-360deg) translateX(0) scale(1);
    -webkit-transform: rotateY(-360deg) translateX(0) scale(1);
    transform: rotateY(-360deg) translateX(0) scale(1);
  }
}
@keyframes flip {
  0% {
    margin-right: 3em;
    -moz-transform: rotateY(0deg) translateX(0) scale(1);
    -ms-transform: rotateY(0deg) translateX(0) scale(1);
    -webkit-transform: rotateY(0deg) translateX(0) scale(1);
    transform: rotateY(0deg) translateX(0) scale(1);
  }
  60%,
    80% {
    -moz-transform: rotateY(360deg) translateX(0) scale(1.3);
    -ms-transform: rotateY(360deg) translateX(0) scale(1.3);
    -webkit-transform: rotateY(360deg) translateX(0) scale(1.3);
    transform: rotateY(360deg) translateX(0) scale(1.3);
  }
  100% {
    margin-right: 0;
    -moz-transform: rotateY(360deg) translateX(0) scale(1);
    -ms-transform: rotateY(360deg) translateX(0) scale(1);
    -webkit-transform: rotateY(360deg) translateX(0) scale(1);
    transform: rotateY(360deg) translateX(0) scale(1);
  }
}
@keyframes impossible-back {
  0% {
    -moz-transform: rotateX(0deg) translateX(0) scale(1);
    -ms-transform: rotateX(0deg) translateX(0) scale(1);
    -webkit-transform: rotateX(0deg) translateX(0) scale(1);
    transform: rotateX(0deg) translateX(0) scale(1);
  }
  60%,
    80% {
    -moz-transform: rotateX(-360deg) translateX(0) scale(1.3);
    -ms-transform: rotateX(-360deg) translateX(0) scale(1.3);
    -webkit-transform: rotateX(-360deg) translateX(0) scale(1.3);
    transform: rotateX(-360deg) translateX(0) scale(1.3);
  }
  100% {
    margin-right: 3em;
    -moz-transform: rotateX(-360deg) translateX(0) scale(1);
    -ms-transform: rotateX(-360deg) translateX(0) scale(1);
    -webkit-transform: rotateX(-360deg) translateX(0) scale(1);
    transform: rotateX(-360deg) translateX(0) scale(1);
  }
}
@keyframes impossible {
  0% {
    margin-right: 3em;
    -moz-transform: rotateX(0deg) translateX(0) scale(1);
    -ms-transform: rotateX(0deg) translateX(0) scale(1);
    -webkit-transform: rotateX(0deg) translateX(0) scale(1);
    transform: rotateX(0deg) translateX(0) scale(1);
  }
  60%,
    80% {
    -moz-transform: rotateX(360deg) translateX(0) scale(1.3);
    -ms-transform: rotateX(360deg) translateX(0) scale(1.3);
    -webkit-transform: rotateX(360deg) translateX(0) scale(1.3);
    transform: rotateX(360deg) translateX(0) scale(1.3);
  }
  100% {
    margin-right: 0;
    -moz-transform: rotateX(360deg) translateX(0) scale(1);
    -ms-transform: rotateX(360deg) translateX(0) scale(1);
    -webkit-transform: rotateX(360deg) translateX(0) scale(1);
    transform: rotateX(360deg) translateX(0) scale(1);
  }
}
@keyframes expand {
  0% {
    right: 0;
    width: 3em;
  }
  25% {
    right: 0;
    width: 100%;
  }
  50% {
    right: auto;
    width: 100%;
    left: 0;
  }
  100% {
    left: 0;
    width: 3em;
  }
}
@keyframes contract {
  0% {
    left: 0;
    width: 3em;
  }
  25% {
    left: 0;
    width: 100%;
  }
  50% {
    right: 0;
    width: 100%;
    left: auto;
  }
  100% {
    right: 0;
    width: 3em;
  }
}
@-webkit-keyframes flip-back {
  0% {
    -moz-transform: rotateY(0deg) translateX(0) scale(1);
    -ms-transform: rotateY(0deg) translateX(0) scale(1);
    -webkit-transform: rotateY(0deg) translateX(0) scale(1);
    transform: rotateY(0deg) translateX(0) scale(1);
  }
  60%,
    80% {
    -moz-transform: rotateY(-360deg) translateX(0) scale(1.3);
    -ms-transform: rotateY(-360deg) translateX(0) scale(1.3);
    -webkit-transform: rotateY(-360deg) translateX(0) scale(1.3);
    transform: rotateY(-360deg) translateX(0) scale(1.3);
  }
  100% {
    margin-right: 3em;
    -moz-transform: rotateY(-360deg) translateX(0) scale(1);
    -ms-transform: rotateY(-360deg) translateX(0) scale(1);
    -webkit-transform: rotateY(-360deg) translateX(0) scale(1);
    transform: rotateY(-360deg) translateX(0) scale(1);
  }
}
@-webkit-keyframes flip {
  0% {
    margin-right: 3em;
    -moz-transform: rotateY(0deg) translateX(0) scale(1);
    -ms-transform: rotateY(0deg) translateX(0) scale(1);
    -webkit-transform: rotateY(0deg) translateX(0) scale(1);
    transform: rotateY(0deg) translateX(0) scale(1);
  }
  60%,
    80% {
    -moz-transform: rotateY(360deg) translateX(0) scale(1.3);
    -ms-transform: rotateY(360deg) translateX(0) scale(1.3);
    -webkit-transform: rotateY(360deg) translateX(0) scale(1.3);
    transform: rotateY(360deg) translateX(0) scale(1.3);
  }
  100% {
    margin-right: 0;
    -moz-transform: rotateY(360deg) translateX(0) scale(1);
    -ms-transform: rotateY(360deg) translateX(0) scale(1);
    -webkit-transform: rotateY(360deg) translateX(0) scale(1);
    transform: rotateY(360deg) translateX(0) scale(1);
  }
}
@-webkit-keyframes impossible-back {
  0% {
    -moz-transform: rotateX(0deg) translateX(0) scale(1);
    -ms-transform: rotateX(0deg) translateX(0) scale(1);
    -webkit-transform: rotateX(0deg) translateX(0) scale(1);
    transform: rotateX(0deg) translateX(0) scale(1);
  }
  60%,
    80% {
    -moz-transform: rotateX(-360deg) translateX(0) scale(1.3);
    -ms-transform: rotateX(-360deg) translateX(0) scale(1.3);
    -webkit-transform: rotateX(-360deg) translateX(0) scale(1.3);
    transform: rotateX(-360deg) translateX(0) scale(1.3);
  }
  100% {
    margin-right: 3em;
    -moz-transform: rotateX(-360deg) translateX(0) scale(1);
    -ms-transform: rotateX(-360deg) translateX(0) scale(1);
    -webkit-transform: rotateX(-360deg) translateX(0) scale(1);
    transform: rotateX(-360deg) translateX(0) scale(1);
  }
}
@-webkit-keyframes impossible {
  0% {
    margin-right: 3em;
    -moz-transform: rotateX(0deg) translateX(0) scale(1);
    -ms-transform: rotateX(0deg) translateX(0) scale(1);
    -webkit-transform: rotateX(0deg) translateX(0) scale(1);
    transform: rotateX(0deg) translateX(0) scale(1);
  }
  60%,
    80% {
    -moz-transform: rotateX(360deg) translateX(0) scale(1.3);
    -ms-transform: rotateX(360deg) translateX(0) scale(1.3);
    -webkit-transform: rotateX(360deg) translateX(0) scale(1.3);
    transform: rotateX(360deg) translateX(0) scale(1.3);
  }
  100% {
    margin-right: 0;
    -moz-transform: rotateX(360deg) translateX(0) scale(1);
    -ms-transform: rotateX(360deg) translateX(0) scale(1);
    -webkit-transform: rotateX(360deg) translateX(0) scale(1);
    transform: rotateX(360deg) translateX(0) scale(1);
  }
}
@-webkit-keyframes expand {
  0% {
    right: 0;
    width: 3em;
  }
  25% {
    right: 0;
    width: 100%;
  }
  50% {
    right: auto;
    width: 100%;
    left: 0;
  }
  100% {
    left: 0;
    width: 3em;
  }
}
@-webkit-keyframes contract {
  0% {
    left: 0;
    width: 3em;
  }
  25% {
    left: 0;
    width: 100%;
  }
  50% {
    right: 0;
    width: 100%;
    left: auto;
  }
  100% {
    right: 0;
    width: 3em;
  }
}
    </style>
    <script>
  window.console = window.console || function(t) {};
</script>
  </head>
  <body class ="content">
  <header>
    <h1>Pure <strong>CSS</strong> Toggles</h1>
  </header>
  <form>
    <fieldset>
	 <legend>Flat look</legend>
	 <div>
	   <input id="pure-toggle-0" hidden="" type="checkbox">
	   <label class ="pure-toggle" for="pure-toggle-0"><span class ="fontawesome-ok"></span><span class ="fontawesome-remove"></span></label>
	 </div>
	 <div>
	   <input id="pure-toggle-1" checked="checked" hidden="" type="checkbox">
	   <label class ="pure-toggle flip" for="pure-toggle-1"><span class ="fontawesome-ok"></span><span class ="fontawesome-remove"></span></label>
	 </div>
	 <div>
	   <input id="pure-toggle-2" hidden="" type="checkbox">
	   <label class ="pure-toggle impossible" for="pure-toggle-2"><span class ="fontawesome-ok"></span><span class ="fontawesome-remove"></span></label>
	 </div>
	 <div>
	   <input id="pure-toggle-3" checked="checked" hidden="" type="checkbox">
	   <label class ="pure-toggle wide" for="pure-toggle-3"><span class ="fontawesome-ok"></span><span class ="fontawesome-remove"></span></label>
	 </div>
    </fieldset>
    <fieldset>
	 <legend>3D look</legend>
	 <div>
	   <input id="pure-toggle-4" hidden="" type="checkbox">
	   <label class ="pure-toggle brick" for="pure-toggle-4"><span class ="fontawesome-ok"></span><span class ="fontawesome-remove"></span></label>
	 </div>
	 <div>
	   <input id="pure-toggle-5" hidden="" type="checkbox">
	   <label class ="pure-toggle brick switch" for="pure-toggle-5"><span class ="fontawesome-ok ok"></span><span class ="fontawesome-remove no ok"></span></label>
	 </div>
    </fieldset>
  </form>
<script>
  if (document.location.search.match(/type=embed/gi)) {
    window.parent.postMessage("resize", "*");
  }
</script>
</body></html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607

==========================

کد HTML: 
<!DOCTYPE html>
<html><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta charset="UTF-8">
    <meta name="google" value="notranslate">
    <title>CodePen - Pure Css "day and night" toggle</title>
    <link href="WQBNxO_data/css.css" rel="stylesheet" type="text/css">
	   <style>
	 body {
  background-color: #1E314F;
  font-family: 'Helvetica Rounded', 'Arial Rounded MT Bold','Montserrat', sans-serif;
  color: #fff;
}
.toggleWrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  overflow: hidden;
  padding: 0 200px;
  transform: translate3d(-50%, -50%, 0);
}
.toggleWrapper input {
  position: absolute;
  left: -99em;
}
.toggle {
  cursor: pointer;
  display: inline-block;
  position: relative;
  width: 90px;
  height: 50px;
  background-color: #83D8FF;
  border-radius: 84px;
  transition: background-color 200ms cubic-bezier(0.445, 0.05, 0.55, 0.95);
}
.toggle:before {
  content: 'AM';
  position: absolute;
  left: -50px;
  top: 15px;
  font-size: 18px;
}
.toggle:after {
  content: 'PM';
  position: absolute;
  right: -48px;
  top: 15px;
  font-size: 18px;
  color: #749ED7;
}
.toggle__handler {
  display: inline-block;
  position: relative;
  z-index: 1;
  top: 3px;
  left: 3px;
  width: 44px;
  height: 44px;
  background-color: #FFCF96;
  border-radius: 50px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  transition: all 400ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
  transform: rotate(-45deg);
}
.toggle__handler .crater {
  position: absolute;
  background-color: #E8CDA5;
  opacity: 0;
  transition: opacity 200ms ease-in-out;
  border-radius: 100%;
}
.toggle__handler .crater--1 {
  top: 18px;
  left: 10px;
  width: 4px;
  height: 4px;
}
.toggle__handler .crater--2 {
  top: 28px;
  left: 22px;
  width: 6px;
  height: 6px;
}
.toggle__handler .crater--3 {
  top: 10px;
  left: 25px;
  width: 8px;
  height: 8px;
}
.star {
  position: absolute;
  background-color: #ffffff;
  transition: all 300ms cubic-bezier(0.445, 0.05, 0.55, 0.95);
  border-radius: 50%;
}
.star--1 {
  top: 10px;
  left: 35px;
  z-index: 0;
  width: 30px;
  height: 3px;
}
.star--2 {
  top: 18px;
  left: 28px;
  z-index: 1;
  width: 30px;
  height: 3px;
}
.star--3 {
  top: 27px;
  left: 40px;
  z-index: 0;
  width: 30px;
  height: 3px;
}
.star--4,
.star--5,
.star--6 {
  opacity: 0;
  transition: all 300ms 0 cubic-bezier(0.445, 0.05, 0.55, 0.95);
}
.star--4 {
  top: 16px;
  left: 11px;
  z-index: 0;
  width: 2px;
  height: 2px;
  transform: translate3d(3px, 0, 0);
}
.star--5 {
  top: 32px;
  left: 17px;
  z-index: 0;
  width: 3px;
  height: 3px;
  transform: translate3d(3px, 0, 0);
}
.star--6 {
  top: 36px;
  left: 28px;
  z-index: 0;
  width: 2px;
  height: 2px;
  transform: translate3d(3px, 0, 0);
}
input:checked + .toggle {
  background-color: #749DD6;
}
input:checked + .toggle:before {
  color: #749ED7;
}
input:checked + .toggle:after {
  color: #ffffff;
}
input:checked + .toggle .toggle__handler {
  background-color: #FFE5B5;
  transform: translate3d(40px, 0, 0) rotate(0);
}
input:checked + .toggle .toggle__handler .crater {
  opacity: 1;
}
input:checked + .toggle .star--1 {
  width: 2px;
  height: 2px;
}
input:checked + .toggle .star--2 {
  width: 4px;
  height: 4px;
  transform: translate3d(-5px, 0, 0);
}
input:checked + .toggle .star--3 {
  width: 2px;
  height: 2px;
  transform: translate3d(-7px, 0, 0);
}
input:checked + .toggle .star--4,
input:checked + .toggle .star--5,
input:checked + .toggle .star--6 {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}
input:checked + .toggle .star--4 {
  transition: all 300ms 200ms cubic-bezier(0.445, 0.05, 0.55, 0.95);
}
input:checked + .toggle .star--5 {
  transition: all 300ms 300ms cubic-bezier(0.445, 0.05, 0.55, 0.95);
}
input:checked + .toggle .star--6 {
  transition: all 300ms 400ms cubic-bezier(0.445, 0.05, 0.55, 0.95);
}
    </style>
    <script>
  window.console = window.console || function(t) {};
</script>
  </head>
  <body>
 <div class ="toggleWrapper">
  <input class ="dn" id="dn" type="checkbox">
  <label for="dn" class ="toggle">
    <span class ="toggle__handler">
	 <span class ="crater crater--1"></span>
	 <span class ="crater crater--2"></span>
	 <span class ="crater crater--3"></span>
    </span>
    <span class ="star star--1"></span>
    <span class ="star star--2"></span>
    <span class ="star star--3"></span>
    <span class ="star star--4"></span>
    <span class ="star star--5"></span>
    <span class ="star star--6"></span>
  </label>
</div>
<script>
  if (document.location.search.match(/type=embed/gi)) {
    window.parent.postMessage("resize", "*");
  }
</script>
</body></html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219

==========================

کد HTML: 
<!DOCTYPE html>
<html class =" -moz-"><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta charset="UTF-8">
    <meta name="google" value="notranslate">
    <title>CodePen - Funny toggle switch</title>
    <link rel="stylesheet" href="wtFne_data/reset.css">
	   <style>
	 body {
  background : #eee;
  padding-top : 20px;
}
#switch , #switch1 {
  position: absolute;
  left: -9999px;
}
.switch {
  display : block;
  position: relative;
  width   : 120px;
  padding : 3px;
  margin  : 20px auto;
  cursor  : pointer;
  border-radius : 33px;
  background    : #ffcc00;
  box-shadow    :  0 1px 1px 0 rgba(0,0,0,.3);
}
.switch:before , .switch:after {
  display : block;
  color   : #fff;
  position : absolute;
  font-size : 30px;
  top : 15px;
  z-index : 0;
}
.switch:before {
  left : 15px;
  content : '✔';
}
.switch:after {
  right : 15px;
  content : '✖';
}
span {
  display : block;
  width   : 39px;
  height  : 41px;
  border  : 7px solid #848484;
  border-radius : 50%;
  position	 : relative;
  left		: 0;
  transition : 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) left;
}
.switch span {
  left : 68px;
}
.switch1 span {
  left : 0px;
}

span:after , span:before { 
  display : block;
  content : ' ';
  position: absolute;
  z-index : 999;
  transition : 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) all;	   
}
span:before {
  width  : 100%;
  height : 34px;
  top  : 0; 
  left : 0;
  background-color: #fff;
  border-radius : inherit;
  border-top    : 4px solid #ffcc00;
  border-bottom : 3px solid #ffcc00;
}
.switch1 span:before {
  border-top-width : 20px;
  height : 19px;
}
span:after {
  width  : 3px;
  height : 3px;		
  top : 0;
  left : 0;
  bottom : 0;
  right : 0;
  margin : auto;
  background-color: #000;
  box-shadow : -2px -2px 0 0px #fff , 0 0 1px 3px #4e341c ;
  border-radius : 50%;
}
.switch1 span:after {
  top : 10px;
  left : -20px;
}
#switch:checked + .switch span {
  transition : 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) left;
  left  : 0px;
}
#switch:checked + .switch span:before {
  transition : 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) all;
  border-top-width : 20px;
  height : 19px;
}
#switch:checked + .switch span:after{
  transition : 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) all;
  top : 10px;
  left : -20px;
}
#switch1:checked + .switch span {
  transition : 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) left;
  left  : 68px;
}
#switch1:checked + .switch span:before {
  transition : 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) all;
  border-top-width : 4px;
  height : 34px;
}
#switch1:checked + .switch span:after{
  transition : 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) all;
  top  : 0;
  left : 0;
}
    </style>
    <script>
  window.console = window.console || function(t) {};
</script>
	   <script src="wtFne_data/prefixfree.js"></script>
  </head>
  <body>
    <input name="switch" id="switch" type="checkbox">
<label for="switch" class ="switch">
  <span></span>
</label>
<input name="switch" id="switch1" type="checkbox">
<label for="switch1" class ="switch switch1">
  <span></span>
</label>
    <script>
  if (document.location.search.match(/type=embed/gi)) {
    window.parent.postMessage("resize", "*");
  }
</script>
</body></html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146

]]> چک باکس های زیبا با CSSهشت مدل کليد یا سوییچ و یا چک باکس زیبا و جالب که توسط کدهای سی اس اس ایجاد میشوند را برای دوستان قرار می دهم . نمونه های زنده را در زیر ببینید و از کدهای داده شده استفاده کنید . تغییرات بعهده ی شماست .



کد HTML: 
<!DOCTYPE html>
<html><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta charset="UTF-8">
    <meta name="google" value="notranslate">
    <title>CodePen - Toggle Rebound</title>
    <link rel="stylesheet" href="wtFne_data/reset.css">
	   <style>
	 body {
  background : #d8d4d5;
}

#switch , #switch1 {
  position: absolute;
  left: -9999px;
}
.switch {
  display : block;
  width   : 170px;
  margin  : 50px auto;
  cursor  : pointer;
  border-radius : 25px;
  background    : #aae042;
  box-shadow    : inset 0 3px 7px 2px #444 , 0 -2px 5px 2px #888 , 0 -2px 3px 4px #eee , 0 2px 5px 3px #fefefe;
}
span {
  display : block;
  width   : 95px;
  height  : 44px;
  border-radius : inherit;
  background    : #D8D4D5;
  border-top    : 1px solid #eee;
  border-right  : 1px solid #ccc;
  box-shadow    :-1px 1px 5px 0 #000 , 0 5px 10px 0 #777;
  text-align    : center;
  position	 : relative;
  left		: 0;
}
.switch1 {
  background : #767477;
}
.switch1 span {
  left : 75px;
}
span i {
  display : inline-block;
  width   : 3px;
  height  : 16px;
  margin  : 12px auto;
  border-radius : 2px;
  margin-left   : 1px;
  background    : #dedadb;
  border-top    : 2px solid #eee;
  border-bottom : 2px solid #aaa;
  box-shadow    : -1px 0 1px 0 #bbb;
}
#switch:checked + .switch {
  background    : #767477;
}
#switch:checked + .switch span {
  left  : 75px;
}
#switch1:checked + .switch span {
  left  : 0;
}
#switch1:checked + .switch1 {
  background    : #aae042;
}
    </style>
    <script>
  window.console = window.console || function(t) {};
</script>
  </head>
  <body>
    <input name="switch" id="switch" type="checkbox">
<label for="switch" class ="switch">
  <span>
    <i></i>
    <i></i>
    <i></i>
    <i></i>
    <i></i>
  </span>
</label>
<input name="switch" id="switch1" type="checkbox">
<label for="switch1" class ="switch switch1">
  <span>
    <i></i>
    <i></i>
    <i></i>
    <i></i>
    <i></i>
  </span>
</label>
	<script>
  if (document.location.search.match(/type=embed/gi)) {
    window.parent.postMessage("resize", "*");
  }
</script>
 </body></html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100

==========================

کد HTML: 
<!DOCTYPE html>
<html class =" -moz-"><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta charset="UTF-8">
    <meta name="google" value="notranslate">
    <title>CodePen - FUN</title>
    <link rel="stylesheet" href="wtFne_data/reset.css">
	   <style>
	 body {
  background : #1b1b1b;
}
.container {
  width  : 400px;
  height : 150px;
  margin : 10px auto;
  padding-top: 100px;
}
#switch {
  position: absolute;
  left: -9999px;
}
.switch {
  display  : block;
  position : relative;
  width    : 190px;
  height   : 52px;
  margin   : auto;
  border-radius : 25px;
  box-shadow : 0 -2px 3px 0px rgba(0, 0, 0, 0.5) , 0 2px 3px 0px rgba(100, 100, 100, 0.5);
}
.switch > div {
  overflow : hidden;
  position : absolute;
  width    : inherit;
  height   : inherit;
  border-radius: inherit;
}
.switch .top , .switch .bottom {
  list-style-type : none;
  position : absolute;
  left	: 7px;
  width    : 200px;
  transition : all .5s linear;
}
.switch .top {
  top : -5px;
  transform : rotate(4deg);
}
.switch .bottom {
  bottom : -5px;
  transform : rotate(-4deg);
}
.switch li {
  width  : 15px;
  height : 10px;
  background : #fff;
  float  : left;
  margin-left: 5px;
  border-radius : 3px;
}
.top li {
  box-shadow : inset 0 0 10px 1px rgba(0, 0, 0, 0.8),0 0 10px 2px #000;
}
.bottom li {
  box-shadow : inset 0 0 10px 1px rgba(0, 0, 0, 0.3),0 0 10px 2px #000;    
}
label .button {
  display  : block;
  position : absolute;
  width    : 50px;
  height   : 50px;
  top	 : 1px;
  left	: 0;
  cursor   : pointer;
  border-radius : 50%;
  background : #1b1b1b;
  background-image : -webkit-linear-gradient(top, #32393a 10% , #1b1b1b 60% , ,#101718  100%);
  box-shadow : inset 0 1px 1px 0 #999 , inset 0 -1px 1px 0 #000,inset 0 0 15px 0 rgba(0,255, 0, 0.2);
  transition : left .5s linear , box-shadow .3s .2s linear;
}
label .button:after {
  display : block;
  content : '|||';
  text-align  : center;
  line-height : 44px;
  color	  : #000;
  text-shadow : 1px 0 0 rgba(200, 200, 200, 0.2);
  font-size   : 25px;
  font-weight : bold;
  letter-spacing : 3px;
}
.on , .off {
  display : block;
  position: absolute;
  width   : 20px;
  height  : 20px;
  border-radius : 50%;
  top	: -35px;
  transition : all .2s .3s linear;
}
.on {
  left : 20px;
  background : #0F0;
  box-shadow : inset 0 0 10px 2px #000,0 -1px 1px 1px #000,0 1px 1px 1px #333,0 0 30px 0 #0F0;
}

.off {
  right : 20px;
  background : #500;
  box-shadow : inset 0 0 10px 2px #000,0 -1px 1px 1px #000,0 1px 1px 1px #333;
}
.on:before , .off:before {
  position : absolute;
  top	 : -30px;
  font-size: 20px;
  font-family : corbel;
  transition : all .2s .3s linear;
}
.on:before {
  content : 'on';
  color    : #FFF;
}
.off:before {
  content : 'off';
  color    : rgba(250, 250, 250, 0.3);
}
#switch:checked + label .button {
  left : 140px;
  box-shadow : inset 0 1px 1px 0 #999 , inset 0 -1px 1px 0 #000,inset 0 0 15px 0 rgba(255, 0, 0, 0.2);
  transition : left .5s linear , box-shadow .3s .2s linear;
}
#switch:checked + label .top {
  transform : rotate(-4deg);
  transition : all .5s linear;
}
#switch:checked + label .bottom {
  transform : rotate(4deg);
  transition : all .5s linear;
}
#switch:checked + label .on {
  background : #050;
  box-shadow : inset 0 0 10px 2px #000,0 -1px 1px 1px #000,0 1px 1px 1px #333;
  transition : all .2s .3s linear;
}
#switch:checked + label .off {
  background : #F00;
  box-shadow : inset 0 0 10px 2px #000,0 -1px 1px 1px #000,0 1px 1px 1px #333,0 0 30px 0 #F00;
  transition : all .2s .3s linear;
}
#switch:checked + label .on:before {
  color : rgba(250, 250, 250, 0.3);
  transition : all .2s .3s linear;
}
#switch:checked + label .off:before {
  color : #FFF;
  transition : all .2s .3s linear;
}
    </style>
    <script>
  window.console = window.console || function(t) {};
</script>
	   <script src="wtFne_data/prefixfree.js"></script>
  </head>
  <body>
    <div class ="container">
  <input id="switch" type="checkbox">
  <label for="switch" class ="switch">
    <div>
	 <ul class ="top">
	   <li></li>
	   <li></li>
	   <li></li>
	   <li></li>
	   <li></li>
	   <li></li>
	   <li></li>
	   <li></li>
	 </ul>
	 <ul class ="bottom">
	   <li></li>
	   <li></li>
	   <li></li>
	   <li></li>
	   <li></li>
	   <li></li>
	   <li></li>
	   <li></li>
	 </ul>
	 <span class ="button"></span>
    </div>
    <span class ="on"></span>		  
    <span class ="off"></span>
  </label>
</div>
    <script>
  if (document.location.search.match(/type=embed/gi)) {
    window.parent.postMessage("resize", "*");
  }
</script>
</body></html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200

==========================

کد HTML: 
<!DOCTYPE html>
<html><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta charset="UTF-8">
    <meta name="google" value="notranslate">
    <title>CodePen - Pure CSS button switch</title>
    <link rel="stylesheet" href="wtFne_data/reset.css">
	   <style>
	 body {
  background: rgb(241,236,232);
  background: -moz-linear-gradient(top,  rgba(241,236,232,1) 0%, rgba(237,234,229,1) 23%, rgba(234,229,225,1) 35%, rgba(234,229,225,1) 47%, rgba(227,220,214,1) 100%);
  background: -webkit-linear-gradient(top,  rgba(241,236,232,1) 0%,rgba(237,234,229,1) 23%,rgba(234,229,225,1) 35%,rgba(234,229,225,1) 47%,rgba(227,220,214,1) 100%);
}
#switch {
  position: absolute;
  left: -9999px;
}
.switch {
  position	 : relative;
  display	  : block;
  width	    : 30px;
  padding	  : 15px;
  height	   : 19px;
  border-radius : 50%;
  margin	   : 100px auto; 
  border-bottom : 4px solid #b2afaa;
  box-shadow    : inset 0 2px 3px 0px #FFF , inset 0 -1px 2px 0px #999 , 0 3px 3px -1px #222;
  cursor	   : pointer;
  background: -moz-linear-gradient(top,  rgba(233,228,224,1) 0%, rgba(233,228,224,1) 67%, rgba(249,244,240,1) 75%, rgba(239,239,239,1) 100%);
  
  background: -webkit-linear-gradient(top,  rgba(233,228,224,1) 0%,rgba(233,228,224,1) 67%,rgba(249,244,240,1) 75%,rgba(239,239,239,1) 100%);
}
.switch:before {
  display  : block;
  content  : "";
  z-index  : -1;
  position : absolute;
  top	 : -6px;
  left	: -6px;
  width    : 68px;
  height   : 68px;
  border-radius : inherit;
  border   : 2px solid #eee;
  background: rgb(144,136,123);
  background: -moz-linear-gradient(top,  rgba(144,136,123,1) 0%, rgba(144,136,123,1) 21%, rgba(154,147,131,1) 29%, rgba(204,193,171,1) 50%, rgba(213,203,178,1) 55%, rgba(221,211,184,1) 61%, rgba(221,211,184,1) 100%);
  background: -webkit-linear-gradient(top,  rgba(144,136,123,1) 0%,rgba(144,136,123,1) 21%,rgba(154,147,131,1) 29%,rgba(204,193,171,1) 50%,rgba(213,203,178,1) 55%,rgba(221,211,184,1) 61%,rgba(221,211,184,1) 100%);
}
.switch:after {
  content : "ON";
  position : absolute;
  top	 : -40px;
  left	: 17px;
  color    : #daaa18;
  font-family : "Verdana";
  text-shadow : 0 -1px 0 #999 , 1px 1px 0 #FFF;
  font-size   : 14px;
}
.switch .bg {
  display : block;
  position: absolute;
  top	: 0;
  left    : 0;
  z-index : -1;
  width   : 60px;
  height  : 60px;
  border-radius : 50%;
  background : #daaa18;
}
i {
  float  : left;
  width  : 3px;
  height : 3px;
  border-radius : 50%;
  background  : #efefef;
  box-shadow  : 0 1px 1px 0 #999;
  margin	 : 2px 1px 2px 3px;
}
i:nth-child(14) , i:nth-child(15) , i:nth-child(16) , i:nth-child(17) {
  height : 1px;
}
#switch:checked + .switch {
  background    : #ede8e2;
  border	   : 1px solid #6f6658;
  height	   : 30px;
  box-shadow    : inset 0 2px 3px 0px #FFF , inset 0 -1px 2px 0px #999;
}
#switch:checked + .switch i {
  height : 3px;
}
#switch:checked + .switch:after {
  content : "OFF";
  color   : #aaa;
}
    </style>
    <script>
  window.console = window.console || function(t) {};
</script>
  </head>
  <body>
    <input name="switch" id="switch" type="checkbox">
<label for="switch" class ="switch">
  <span class ="bg"></span>
  <i></i>
  <i></i>
  <i></i>
  <i></i>
  <i></i>
  <i></i>
  <i></i>
  <i></i>
  <i></i>
  <i></i>
  <i></i>
  <i></i>
  <i></i>
  <i></i>
  <i></i>
  <i></i>
</label>
    <script>
  if (document.location.search.match(/type=embed/gi)) {
    window.parent.postMessage("resize", "*");
  }
</script>
</body></html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125

==========================

کد HTML: 
<!DOCTYPE html>
<html class =" -moz-"><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta charset="UTF-8">
    <meta name="google" value="notranslate">
    <title>CodePen - Button</title>
	<link rel="stylesheet" href="wtFne_data/reset.css">
	   <style>
	 body {
  background-color: #1b1b1b;
}
.container {
  width  : 150px;
  height : 130px;
  padding-top : 20px;
  margin : 50px auto ;
}
#power {
  position: absolute;
  left: -9999px;
}
label {
  display : block;
  width   : 100px;
  height  : 100px;
  border-radius : 50%;
  position   : relative;
  margin	: auto;
  border	: 4px solid #636679;
  background : -webkit-radial-gradient(center , ellipse cover, #efefef 0% , #EEE 80% , #FFF 100%);
  background :    -moz-radial-gradient(center , ellipse cover, #efefef 0% , #EEE 80% , #FFF 100%);
  background :	    radial-gradient(center , ellipse cover, #fefefe 0% , #EEE 80% , #FFF 100%);
  box-shadow : inset 0 -5px 10px 0 #d0d5eb , inset 0 5px 10px 0 #FFF , 0 0 0 1px #333;
  cursor	: pointer;
  text-align  : center;
  font-size   : 40px;
  color	  : #0f0;
  line-height : 100px;
  text-shadow : -1px -1px 0px #FFF , 1px 1px 0px #FFF;
  transition : all .1s ease-in-out;
}
label:after , label:before {
  display : block;
  content : "";
  position: absolute;
}
label:before {
  width  : 150px;
  height : 150px;
  border-radius : 20px;
  background    : -webkit-linear-gradient(top,  #fefefe 0%, #eee 30%, #ddd 82%,#ddd 100%);
  background    :    -moz-linear-gradient(top,  #fefefe 0%, #eee 30%, #ddd 82%,#ddd 100%);
  background    :	    linear-gradient(top,  #fefefe 0%, #eee 30%, #ddd 82%,#ddd 100%);
  box-shadow    : 0 10px 30px 0 #000 ;
  top	: -25px;
  left    : -25px;
  z-index : -2;
}
label:after {
  width  : 130px;
  height : 130px;
  border-radius : 50%;
  background : #fff;
  top  : -15px;
  left : -15px;
  z-index : -1;
  box-shadow : 0 -2px 5px 0px #fefefe , 0 2px 5px 0 #ccc;
  background: rgb(210,215,237);
  background: -webkit-linear-gradient(top,  #ddd 0%, #ddd 30%, #eee 82%,#efefef 100%);
  background:    -moz-linear-gradient(top,  #ddd 0%, #ddd 30%, #eee 82%,#efefef 100%);
  background:	    linear-gradient(top,  #ddd 0%, #ddd 30%, #eee 82%,#efefef 100%);
}
.light {
  display    : block;
  width	 : 12px;
  height	: 12px;
  position   : absolute;
  top	   : -12px;
  right	 : -12px;
  background : -webkit-radial-gradient(center , ellipse cover, #fff 0% , #d6f804 80% , #bade32 100%);
  background :    -moz-radial-gradient(center , ellipse cover, #fff 0% , #d6f804 80% , #bade32 100%);
  background :	    radial-gradient(center , ellipse cover, #fff 0% , #d6f804 80% , #bade32 100%);
  box-shadow : inset 0 1px 1px 0 #333 ,inset 0 -1px 1px 0 #333 , 0 0 5px 1px #bade32;
  border-radius : 50%;
  transition : all .1s ease-in-out;
}
.icon-off {
  position : absolute;
  top	 : 0;
  left	: 0;
  right    : 0;
  bottom   : 0;
  margin   : auto;
  width    : 40px;
  height   : 40px;
  border-radius : 50%;
  background : #d6f804;
  box-shadow : inset 0 0 4px 0 #999;
  transition : all .1s ease-in-out;
}
.icon-off:after {
  display  : block;
  content  : '';
  position : absolute;
  top	 : 0; bottom : 0;
  left	: 0; right  : 0;
  margin   : auto;
  width    : 26px;
  height   : 26px;
  border-radius : 50%;
  background    : #eee;
  box-shadow : 0 0 3px 0 #999;
  z-index    : 2;
}
.icon-off:before {
  display  : block;
  content  : '';
  position : absolute;
  top	 : -5px;
  left	: 0; right  : 0;
  margin   : auto;
  width    : 8px;
  height   : 25px;
  background : #d6f804;
  box-shadow : inherit;
  border-radius : 10px;
  border-style  : solid;
  border-width  : 0 3px 0;
  border-color  : #EEE;
  z-index    : 3;
  transition : all .1s ease-in-out;
}
#power:checked + label {
  background : -webkit-radial-gradient(center , ellipse cover, #ddd 0% , #EEE 80% , #efefef 100%);
  background :	    radial-gradient(center , ellipse cover, #ddd 0% , #EEE 80% , #efefef 100%);
  background :	    radial-gradient(center , ellipse cover, #ddd 0% , #EEE 80% , #efefef 100%);
  box-shadow : inset 0 -5px 10px 0 #aaa , inset 0 5px 10px 0 #aaa , 0 0 0 1px #333;
  transition : all .1s linear;
  
}
#power:checked + label .light {
  background : -webkit-radial-gradient(center , ellipse cover, #fcc 0% , #f88 60% , #f00 100%);
  background :    -moz-radial-gradient(center , ellipse cover, #fcc 0% , #f88 60% , #f00 100%);
  background :	    radial-gradient(center , ellipse cover, #fcc 0% , #f88 60% , #f00 100%);
  box-shadow : inset 0 1px 1px 0 #555 ,inset 0 -1px 1px 0 #555 , 0 0 5px 0 #f55;
  transition : all .1s linear;
}
#power:checked + label .icon-off {
  background : transparent;
  box-shadow : inset 0 0 5px 0 #777;
  transition : all .1s linear;
} 
#power:checked + label .icon-off:after {
  background : inherit;
  box-shadow : 0 0 5px 0 #777;
} 
#power:checked + label .icon-off:before {
  background   : #ddd;
  border-color : #dfdfdf;
  box-shadow   : inherit;
  transition : all .1s linear;
} 
    </style>
    <script>
  window.console = window.console || function(t) {};
</script>
	   <script src="wtFne_data/prefixfree.js"></script>
  </head>
  <body>
    <div class ="container">
	   <input id="power" name="power" type="checkbox">
	   <label for="power" class ="power">
		  <span class ="icon-off"></span>
		  <span class ="light"></span>
	   </label>
</div>
    <script>
  if (document.location.search.match(/type=embed/gi)) {
    window.parent.postMessage("resize", "*");
  }
</script>
</body></html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182

==========================

کد HTML: 
<!DOCTYPE html>
<html class =" -moz-"><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta charset="UTF-8">
    <meta name="google" value="notranslate">
    <title>CodePen - Switching</title>
    <link rel="stylesheet" href="wtFne_data/reset.css">
	   <style>
	 body {
  background : #1b1b1b;	 
}
.toggle , .toggle1{
  cursor  : pointer;
  display : block;
  width   : 130px;
  height  : 130px;
  position: relative;
}
.toggle {
  float : left;
  margin: 30px 0 0 400px;
}
.toggle1 {
  float : right;
  margin: 30px 400px 0 0;
}
.a , .b{
  position : absolute;
  top   : 0;
  left  : 0;
  width : 130px;
  height: 130px;
  background  : #b1bb1b;
  text-align  : center;
  font-size   : 90px;
  line-height : 130px;
  font-family : georgia;
  font-weight : bold;
  color	  : #1b1b1b;
  border-radius : 15px;
  border : 2px dotted rgba(0,0,0,.5);
  text-shadow : 1px 1px 0 rgba(250, 250, 250, 0.5);
}
.a {
  z-index : 1;
}
.b {
  background : #b1bbfb;
  z-index : 2;
}
#switch , #switch1 {
  position: absolute;
  left: -9999px;
}
#switch:checked ~ .toggle .b {
  animation : move-r 1s both;
}
#switch:not(:checked) ~ .toggle .b{
  animation : move-l 1s both;
}
@keyframes move-r {
  40% {
    transform : rotate(500deg) scale(1.1);
    left : 130%;
  }
  
  100% {
    left    : 0;
    z-index : -1;
  }
  
}
@keyframes move-l {
  0% {
    -webkit-transform : rotate(0deg);
    left    : 0;
    z-index : -1;
  }
  50% {
    transform : rotate(900deg) scale(.6);
    left    : -130%;
    z-index : -1;
  }
  100% {
    left    : 0;
    z-index : 2;
  } 
}
/* toggle1 */
#switch1:checked ~ .toggle1 .b {
  animation : move 1s both;
}
#switch1:checked ~ .toggle1 .a {
  animation : face 1s both;
}
#switch1:not(:checked) ~ .toggle1 .a{
  animation : move 1s both;
}

#switch1:not(:checked) ~ .toggle1 .b{
  animation : face 1s both;
}
@keyframes move {
  0% {
    z-index : 3;
  }
  50% {
    transform : rotate(15deg) scale(.6);
    left    : 130%;
    z-index : 3;
  }
  100% {
    left    : 0;
    z-index : 0;
  }
}
@keyframes  face {
  to {
    z-index : 3;
  }
}
    </style>
    <script>
  window.console = window.console || function(t) {};
</script>
	   <script src="wtFne_data/prefixfree.js"></script>
  </head>

  <body>
    <input id="switch" type="checkbox">
<label class ="toggle" for="switch">
  <div class ="a">♣</div>
  <div class ="b">☺</div>
</label>

<input id="switch1" type="checkbox">
<label class ="toggle1" for="switch1">
  <div class ="a">☺</div>
  <div class ="b">♥</div>
</label>
<script>
  if (document.location.search.match(/type=embed/gi)) {
    window.parent.postMessage("resize", "*");
  }
</script>
</body></html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146

==========================

کد HTML: 
<!DOCTYPE html>
<html><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta charset="UTF-8">
    <meta name="google" value="notranslate">
    <title>CodePen - Pure CSS Toggles</title>
    <title>Pure Toggle Effects, by RGG</title>
	   <meta charset="UTF-8">
	   <meta name="viewport" content="width=device-width, initial-scale=1.0">
	   <style>
	 @charset "UTF-8";
@import url(weloveiconfonts.com.css);
@import url(http://fonts.googleapis.com/css?family=Open+Sans:700,300);
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  font-size: 100%;
  vertical-align: baseline;
}
html {
  line-height: 1;
}
ol, ul {
  list-style: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
caption, th, td {
  text-align: left;
  font-weight: normal;
  vertical-align: middle;
}
q, blockquote {
  quotes: none;
}
q:before, q:after, blockquote:before, blockquote:after {
  content: "";
  content: none;
}
a img {
  border: none;
}

article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
  display: block;
}
body {
  background-color: #d0d0d0;
  text-align: center;
  font-family: "Open Sans", sans-serif;
  font-size: 16px;
  color: #444444;
}
header {
  margin-bottom: 2em;
}
h1 {
  font-size: 2em;
  margin: 2em 0 1em;
}
strong {
  font-weight: 700;
}
legend {
  font-size: 1.5em;
  line-height: 1em;
  margin-bottom: 1.9em;
  padding-bottom: 1.5em;
  border-bottom: 1px solid #444444;
  width: 100%;
}
div {
  margin-bottom: 1em;
}
fieldset {
  border: 0;
  padding: 0 2em 2em;
}
.pure-toggle {
  cursor: pointer;
  font-size: 1.5em;
  width: 6em;
  height: 3em;
  display: inline-block;
  position: relative;
  background: white;
  text-align: left;
  line-height: 3em;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -moz-perspective: 300px;
  -webkit-perspective: 300px;
  perspective: 300px;
}
.pure-toggle:before {
  width: 3em;
  height: 3em;
  position: absolute;
  right: 0;
  top: 0;
  background-color: #f5f5f5;
  display: inline-block;
  text-align: center;
  font-family: 'FontAwesome', sans-serif;
  content: "···";
  color: #ffffff;
  -moz-transition: all 1s ease-in-out;
  -o-transition: all 1s ease-in-out;
  -webkit-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
  -moz-transform-origin: 0% 50%;
  -ms-transform-origin: 0% 50%;
  -webkit-transform-origin: 0% 50%;
  transform-origin: 0% 50%;
  /*@include box-shadow(0.1em 0 0.2em rgba(0,0,0,0.3));*/
}
.pure-toggle [class^='fontawesome-'] {
  padding: 1em;
  line-height: inherit;
  font-family: 'FontAwesome', sans-serif;
  -moz-transition: all 1s ease-in-out;
  -o-transition: all 1s ease-in-out;
  -webkit-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
}
.pure-toggle.flip:before {
  -moz-transform-origin: 50% 50%;
  -ms-transform-origin: 50% 50%;
  -webkit-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
}
.pure-toggle.brick {
  background-color: white;
  border: 1px solid #d9d9d9;
  border-bottom-color: #e6e6e6;
  -moz-box-shadow: inset 0 0.1em 0.03em rgba(0, 0, 0, 0.2), inset 0 0.1em 0.3em rgba(0, 0, 0, 0.3), 0 0 2em rgba(255, 255, 255, 0.6);
  -webkit-box-shadow: inset 0 0.1em 0.03em rgba(0, 0, 0, 0.2), inset 0 0.1em 0.3em rgba(0, 0, 0, 0.3), 0 0 2em rgba(255, 255, 255, 0.6);
  box-shadow: inset 0 0.1em 0.03em rgba(0, 0, 0, 0.2), inset 0 0.1em 0.3em rgba(0, 0, 0, 0.3), 0 0 2em rgba(255, 255, 255, 0.6);
}
.pure-toggle.brick:before {
  margin-right: -1px;
  margin-top: -0.14em;
  -moz-box-shadow: 0 0.12em 0.01em #3ba5bc, 0 0.12em 0.3em rgba(59, 165, 188, 0.6), 0 0.12em 2em rgba(0, 0, 0, 0.3), -0.12em 0.15em 0.2em rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: 0 0.12em 0.01em #3ba5bc, 0 0.12em 0.3em rgba(59, 165, 188, 0.6), 0 0.12em 2em rgba(0, 0, 0, 0.3), -0.12em 0.15em 0.2em rgba(0, 0, 0, 0.2);
  box-shadow: 0 0.12em 0.01em #3ba5bc, 0 0.12em 0.3em rgba(59, 165, 188, 0.6), 0 0.12em 2em rgba(0, 0, 0, 0.3), -0.12em 0.15em 0.2em rgba(0, 0, 0, 0.2);
  -moz-transition-duration: 0.66667s;
  -o-transition-duration: 0.66667s;
  -webkit-transition-duration: 0.66667s;
  transition-duration: 0.66667s;
  -moz-transition-timing-function: cubic-bezier(0.52, -0.41, 0.55, 1.46);
  -o-transition-timing-function: cubic-bezier(0.52, -0.41, 0.55, 1.46);
  -webkit-transition-timing-function: cubic-bezier(0.52, -0.41, 0.55, 1.46);
  transition-timing-function: cubic-bezier(0.52, -0.41, 0.55, 1.46);
}
.pure-toggle.brick.switch {
  background: transparent;
  -moz-box-shadow: inset 0 0 0.03em transparent, inset 0 0 0.3em transparent, 0 0 2em rgba(255, 255, 255, 0);
  -webkit-box-shadow: inset 0 0 0.03em transparent, inset 0 0 0.3em transparent, 0 0 2em rgba(255, 255, 255, 0);
  box-shadow: inset 0 0 0.03em transparent, inset 0 0 0.3em transparent, 0 0 2em rgba(255, 255, 255, 0);
  border: 0;
}
.pure-toggle.brick.switch:before {
  display: none;
}
.pure-toggle.brick.switch .ok {
  color: white;
  top: 0;
  left: 1px;
  line-height: 1em;
  padding: 1em 1.045em;
  position: relative;
  background: #5EB9CC;
  -moz-box-shadow: 0 0.12em 0.01em #3ba5bc, 0 0.12em 0.3em rgba(59, 165, 188, 0.6), 0 0.12em 2em rgba(0, 0, 0, 0.3), -0.12em 0.15em 0.2em rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: 0 0.12em 0.01em #3ba5bc, 0 0.12em 0.3em rgba(59, 165, 188, 0.6), 0 0.12em 2em rgba(0, 0, 0, 0.3), -0.12em 0.15em 0.2em rgba(0, 0, 0, 0.2);
  box-shadow: 0 0.12em 0.01em #3ba5bc, 0 0.12em 0.3em rgba(59, 165, 188, 0.6), 0 0.12em 2em rgba(0, 0, 0, 0.3), -0.12em 0.15em 0.2em rgba(0, 0, 0, 0.2);
  -moz-transition-duration: 0.33333s;
  -o-transition-duration: 0.33333s;
  -webkit-transition-duration: 0.33333s;
  transition-duration: 0.33333s;
}
.pure-toggle.brick.switch .ok.no {
  top: 0.14em;
  background: transparent;
  background: #cc0966;
  -moz-box-shadow: 0 0 0.01em #9b074e, 0 0 0.3em rgba(155, 7, 78, 0.6), 0 0.12em 2em transparent, -0.12em 0.15em 0.2em transparent;
  -webkit-box-shadow: 0 0 0.01em #9b074e, 0 0 0.3em rgba(155, 7, 78, 0.6), 0 0.12em 2em transparent, -0.12em 0.15em 0.2em transparent;
  box-shadow: 0 0 0.01em #9b074e, 0 0 0.3em rgba(155, 7, 78, 0.6), 0 0.12em 2em transparent, -0.12em 0.15em 0.2em transparent;
}
input[type='checkbox'] + .pure-toggle:before {
  -moz-transform: rotateY(0deg);
  -ms-transform: rotateY(0deg);
  -webkit-transform: rotateY(0deg);
  transform: rotateY(0deg);
  background-color: #5EB9CC;
}
input[type='checkbox'] + .pure-toggle [class^="fontawesome-"],
input[type='checkbox'] + .pure-toggle [class*="fontawesome-"] {
  color: #5EB9CC;
}
input[type='checkbox'] + .pure-toggle.wide:before {
  -moz-transform: rotateY(0deg);
  -ms-transform: rotateY(0deg);
  -webkit-transform: rotateY(0deg);
  transform: rotateY(0deg);
  -moz-animation: contract 1s ease-in-out forwards;
  -webkit-animation: contract 1s ease-in-out forwards;
  animation: contract 1s ease-in-out forwards;
}
input[type='checkbox'] + .pure-toggle.brick:before {
  border-bottom: 0.03em solid #71c1d2;
  text-shadow: 0 0.05em 0 #4bb1c6;
  -moz-transform: rotateY(0deg);
  -ms-transform: rotateY(0deg);
  -webkit-transform: rotateY(0deg);
  transform: rotateY(0deg);
}
input[type='checkbox'] + .pure-toggle.brick.switch .ok {
  color: white;
}
input[type='checkbox'] + .pure-toggle.flip:before {
  -moz-animation: flip 0.5s ease-in-out forwards;
  -webkit-animation: flip 0.5s ease-in-out forwards;
  animation: flip 0.5s ease-in-out forwards;
}
input[type='checkbox'] + .pure-toggle.impossible:before {
  -moz-animation: impossible 0.5s ease-in-out forwards;
  -webkit-animation: impossible 0.5s ease-in-out forwards;
  animation: impossible 0.5s ease-in-out forwards;
}
input[type='checkbox']:checked + .pure-toggle:before {
  -moz-transform: rotateY(-180deg);
  -ms-transform: rotateY(-180deg);
  -webkit-transform: rotateY(-180deg);
  transform: rotateY(-180deg);
  background-color: #cc0966;
}
input[type='checkbox']:checked + .pure-toggle [class^="fontawesome-"],
input[type='checkbox']:checked + .pure-toggle [class*="fontawesome-"] {
  color: #cc0966;
}
input[type='checkbox']:checked + .pure-toggle.wide:before {
  -moz-transform: rotateY(0deg);
  -ms-transform: rotateY(0deg);
  -webkit-transform: rotateY(0deg);
  transform: rotateY(0deg);
  -moz-animation: expand 1s ease-in-out forwards;
  -webkit-animation: expand 1s ease-in-out forwards;
  animation: expand 1s ease-in-out forwards;
}
input[type='checkbox']:checked + .pure-toggle.brick:before {
  margin-right: 3em;
  border-bottom: 0.03em solid #f5137f;
  text-shadow: 0 0.05em 0 #9b074e;
  -moz-transform: rotateY(0deg);
  -ms-transform: rotateY(0deg);
  -webkit-transform: rotateY(0deg);
  transform: rotateY(0deg);
  -moz-box-shadow: 0 0.12em 0.01em #9b074e, 0 0.12em 0.3em rgba(155, 7, 78, 0.6), 0 0.12em 2em rgba(0, 0, 0, 0.3), 0.12em 0.15em 0.2em rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: 0 0.12em 0.01em #9b074e, 0 0.12em 0.3em rgba(155, 7, 78, 0.6), 0 0.12em 2em rgba(0, 0, 0, 0.3), 0.12em 0.15em 0.2em rgba(0, 0, 0, 0.2);
  box-shadow: 0 0.12em 0.01em #9b074e, 0 0.12em 0.3em rgba(155, 7, 78, 0.6), 0 0.12em 2em rgba(0, 0, 0, 0.3), 0.12em 0.15em 0.2em rgba(0, 0, 0, 0.2);
}
input[type='checkbox']:checked + .pure-toggle.brick.switch:before {
  display: none;
}
input[type='checkbox']:checked + .pure-toggle.brick.switch .ok {
  top: 0.14em;
  -moz-box-shadow: 0 0 0.01em #3ba5bc, 0 0 0.3em rgba(59, 165, 188, 0.6), 0 0.12em 2em transparent, -0.12em 0.15em 0.2em transparent;
  -webkit-box-shadow: 0 0 0.01em #3ba5bc, 0 0 0.3em rgba(59, 165, 188, 0.6), 0 0.12em 2em transparent, -0.12em 0.15em 0.2em transparent;
  box-shadow: 0 0 0.01em #3ba5bc, 0 0 0.3em rgba(59, 165, 188, 0.6), 0 0.12em 2em transparent, -0.12em 0.15em 0.2em transparent;
}
input[type='checkbox']:checked + .pure-toggle.brick.switch .ok.no {
  top: 0;
  background: #cc0966;
  -moz-box-shadow: 0 0.12em 0.01em #9b074e, 0 0.12em 0.3em rgba(155, 7, 78, 0.6), 0 0.12em 2em rgba(0, 0, 0, 0.3), 0.12em 0.15em 0.2em rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: 0 0.12em 0.01em #9b074e, 0 0.12em 0.3em rgba(155, 7, 78, 0.6), 0 0.12em 2em rgba(0, 0, 0, 0.3), 0.12em 0.15em 0.2em rgba(0, 0, 0, 0.2);
  box-shadow: 0 0.12em 0.01em #9b074e, 0 0.12em 0.3em rgba(155, 7, 78, 0.6), 0 0.12em 2em rgba(0, 0, 0, 0.3), 0.12em 0.15em 0.2em rgba(0, 0, 0, 0.2);
}
input[type='checkbox']:checked + .pure-toggle.flip:before {
  -moz-animation: flip-back 0.5s ease-in-out forwards;
  -webkit-animation: flip-back 0.5s ease-in-out forwards;
  animation: flip-back 0.5s ease-in-out forwards;
}
input[type='checkbox']:checked + .pure-toggle.impossible:before {
  -moz-animation: impossible-back 0.5s ease-in-out forwards;
  -webkit-animation: impossible-back 0.5s ease-in-out forwards;
  animation: impossible-back 0.5s ease-in-out forwards;
}
@keyframes flip-back {
  0% {
    -moz-transform: rotateY(0deg) translateX(0) scale(1);
    -ms-transform: rotateY(0deg) translateX(0) scale(1);
    -webkit-transform: rotateY(0deg) translateX(0) scale(1);
    transform: rotateY(0deg) translateX(0) scale(1);
  }
  60%,
    80% {
    -moz-transform: rotateY(-360deg) translateX(0) scale(1.3);
    -ms-transform: rotateY(-360deg) translateX(0) scale(1.3);
    -webkit-transform: rotateY(-360deg) translateX(0) scale(1.3);
    transform: rotateY(-360deg) translateX(0) scale(1.3);
  }
  100% {
    margin-right: 3em;
    -moz-transform: rotateY(-360deg) translateX(0) scale(1);
    -ms-transform: rotateY(-360deg) translateX(0) scale(1);
    -webkit-transform: rotateY(-360deg) translateX(0) scale(1);
    transform: rotateY(-360deg) translateX(0) scale(1);
  }
}
@keyframes flip {
  0% {
    margin-right: 3em;
    -moz-transform: rotateY(0deg) translateX(0) scale(1);
    -ms-transform: rotateY(0deg) translateX(0) scale(1);
    -webkit-transform: rotateY(0deg) translateX(0) scale(1);
    transform: rotateY(0deg) translateX(0) scale(1);
  }
  60%,
    80% {
    -moz-transform: rotateY(360deg) translateX(0) scale(1.3);
    -ms-transform: rotateY(360deg) translateX(0) scale(1.3);
    -webkit-transform: rotateY(360deg) translateX(0) scale(1.3);
    transform: rotateY(360deg) translateX(0) scale(1.3);
  }
  100% {
    margin-right: 0;
    -moz-transform: rotateY(360deg) translateX(0) scale(1);
    -ms-transform: rotateY(360deg) translateX(0) scale(1);
    -webkit-transform: rotateY(360deg) translateX(0) scale(1);
    transform: rotateY(360deg) translateX(0) scale(1);
  }
}
@keyframes impossible-back {
  0% {
    -moz-transform: rotateX(0deg) translateX(0) scale(1);
    -ms-transform: rotateX(0deg) translateX(0) scale(1);
    -webkit-transform: rotateX(0deg) translateX(0) scale(1);
    transform: rotateX(0deg) translateX(0) scale(1);
  }
  60%,
    80% {
    -moz-transform: rotateX(-360deg) translateX(0) scale(1.3);
    -ms-transform: rotateX(-360deg) translateX(0) scale(1.3);
    -webkit-transform: rotateX(-360deg) translateX(0) scale(1.3);
    transform: rotateX(-360deg) translateX(0) scale(1.3);
  }
  100% {
    margin-right: 3em;
    -moz-transform: rotateX(-360deg) translateX(0) scale(1);
    -ms-transform: rotateX(-360deg) translateX(0) scale(1);
    -webkit-transform: rotateX(-360deg) translateX(0) scale(1);
    transform: rotateX(-360deg) translateX(0) scale(1);
  }
}
@keyframes impossible {
  0% {
    margin-right: 3em;
    -moz-transform: rotateX(0deg) translateX(0) scale(1);
    -ms-transform: rotateX(0deg) translateX(0) scale(1);
    -webkit-transform: rotateX(0deg) translateX(0) scale(1);
    transform: rotateX(0deg) translateX(0) scale(1);
  }
  60%,
    80% {
    -moz-transform: rotateX(360deg) translateX(0) scale(1.3);
    -ms-transform: rotateX(360deg) translateX(0) scale(1.3);
    -webkit-transform: rotateX(360deg) translateX(0) scale(1.3);
    transform: rotateX(360deg) translateX(0) scale(1.3);
  }
  100% {
    margin-right: 0;
    -moz-transform: rotateX(360deg) translateX(0) scale(1);
    -ms-transform: rotateX(360deg) translateX(0) scale(1);
    -webkit-transform: rotateX(360deg) translateX(0) scale(1);
    transform: rotateX(360deg) translateX(0) scale(1);
  }
}
@keyframes expand {
  0% {
    right: 0;
    width: 3em;
  }
  25% {
    right: 0;
    width: 100%;
  }
  50% {
    right: auto;
    width: 100%;
    left: 0;
  }
  100% {
    left: 0;
    width: 3em;
  }
}
@keyframes contract {
  0% {
    left: 0;
    width: 3em;
  }
  25% {
    left: 0;
    width: 100%;
  }
  50% {
    right: 0;
    width: 100%;
    left: auto;
  }
  100% {
    right: 0;
    width: 3em;
  }
}
@-webkit-keyframes flip-back {
  0% {
    -moz-transform: rotateY(0deg) translateX(0) scale(1);
    -ms-transform: rotateY(0deg) translateX(0) scale(1);
    -webkit-transform: rotateY(0deg) translateX(0) scale(1);
    transform: rotateY(0deg) translateX(0) scale(1);
  }
  60%,
    80% {
    -moz-transform: rotateY(-360deg) translateX(0) scale(1.3);
    -ms-transform: rotateY(-360deg) translateX(0) scale(1.3);
    -webkit-transform: rotateY(-360deg) translateX(0) scale(1.3);
    transform: rotateY(-360deg) translateX(0) scale(1.3);
  }
  100% {
    margin-right: 3em;
    -moz-transform: rotateY(-360deg) translateX(0) scale(1);
    -ms-transform: rotateY(-360deg) translateX(0) scale(1);
    -webkit-transform: rotateY(-360deg) translateX(0) scale(1);
    transform: rotateY(-360deg) translateX(0) scale(1);
  }
}
@-webkit-keyframes flip {
  0% {
    margin-right: 3em;
    -moz-transform: rotateY(0deg) translateX(0) scale(1);
    -ms-transform: rotateY(0deg) translateX(0) scale(1);
    -webkit-transform: rotateY(0deg) translateX(0) scale(1);
    transform: rotateY(0deg) translateX(0) scale(1);
  }
  60%,
    80% {
    -moz-transform: rotateY(360deg) translateX(0) scale(1.3);
    -ms-transform: rotateY(360deg) translateX(0) scale(1.3);
    -webkit-transform: rotateY(360deg) translateX(0) scale(1.3);
    transform: rotateY(360deg) translateX(0) scale(1.3);
  }
  100% {
    margin-right: 0;
    -moz-transform: rotateY(360deg) translateX(0) scale(1);
    -ms-transform: rotateY(360deg) translateX(0) scale(1);
    -webkit-transform: rotateY(360deg) translateX(0) scale(1);
    transform: rotateY(360deg) translateX(0) scale(1);
  }
}
@-webkit-keyframes impossible-back {
  0% {
    -moz-transform: rotateX(0deg) translateX(0) scale(1);
    -ms-transform: rotateX(0deg) translateX(0) scale(1);
    -webkit-transform: rotateX(0deg) translateX(0) scale(1);
    transform: rotateX(0deg) translateX(0) scale(1);
  }
  60%,
    80% {
    -moz-transform: rotateX(-360deg) translateX(0) scale(1.3);
    -ms-transform: rotateX(-360deg) translateX(0) scale(1.3);
    -webkit-transform: rotateX(-360deg) translateX(0) scale(1.3);
    transform: rotateX(-360deg) translateX(0) scale(1.3);
  }
  100% {
    margin-right: 3em;
    -moz-transform: rotateX(-360deg) translateX(0) scale(1);
    -ms-transform: rotateX(-360deg) translateX(0) scale(1);
    -webkit-transform: rotateX(-360deg) translateX(0) scale(1);
    transform: rotateX(-360deg) translateX(0) scale(1);
  }
}
@-webkit-keyframes impossible {
  0% {
    margin-right: 3em;
    -moz-transform: rotateX(0deg) translateX(0) scale(1);
    -ms-transform: rotateX(0deg) translateX(0) scale(1);
    -webkit-transform: rotateX(0deg) translateX(0) scale(1);
    transform: rotateX(0deg) translateX(0) scale(1);
  }
  60%,
    80% {
    -moz-transform: rotateX(360deg) translateX(0) scale(1.3);
    -ms-transform: rotateX(360deg) translateX(0) scale(1.3);
    -webkit-transform: rotateX(360deg) translateX(0) scale(1.3);
    transform: rotateX(360deg) translateX(0) scale(1.3);
  }
  100% {
    margin-right: 0;
    -moz-transform: rotateX(360deg) translateX(0) scale(1);
    -ms-transform: rotateX(360deg) translateX(0) scale(1);
    -webkit-transform: rotateX(360deg) translateX(0) scale(1);
    transform: rotateX(360deg) translateX(0) scale(1);
  }
}
@-webkit-keyframes expand {
  0% {
    right: 0;
    width: 3em;
  }
  25% {
    right: 0;
    width: 100%;
  }
  50% {
    right: auto;
    width: 100%;
    left: 0;
  }
  100% {
    left: 0;
    width: 3em;
  }
}
@-webkit-keyframes contract {
  0% {
    left: 0;
    width: 3em;
  }
  25% {
    left: 0;
    width: 100%;
  }
  50% {
    right: 0;
    width: 100%;
    left: auto;
  }
  100% {
    right: 0;
    width: 3em;
  }
}
    </style>
    <script>
  window.console = window.console || function(t) {};
</script>
  </head>
  <body class ="content">
  <header>
    <h1>Pure <strong>CSS</strong> Toggles</h1>
  </header>
  <form>
    <fieldset>
	 <legend>Flat look</legend>
	 <div>
	   <input id="pure-toggle-0" hidden="" type="checkbox">
	   <label class ="pure-toggle" for="pure-toggle-0"><span class ="fontawesome-ok"></span><span class ="fontawesome-remove"></span></label>
	 </div>
	 <div>
	   <input id="pure-toggle-1" checked="checked" hidden="" type="checkbox">
	   <label class ="pure-toggle flip" for="pure-toggle-1"><span class ="fontawesome-ok"></span><span class ="fontawesome-remove"></span></label>
	 </div>
	 <div>
	   <input id="pure-toggle-2" hidden="" type="checkbox">
	   <label class ="pure-toggle impossible" for="pure-toggle-2"><span class ="fontawesome-ok"></span><span class ="fontawesome-remove"></span></label>
	 </div>
	 <div>
	   <input id="pure-toggle-3" checked="checked" hidden="" type="checkbox">
	   <label class ="pure-toggle wide" for="pure-toggle-3"><span class ="fontawesome-ok"></span><span class ="fontawesome-remove"></span></label>
	 </div>
    </fieldset>
    <fieldset>
	 <legend>3D look</legend>
	 <div>
	   <input id="pure-toggle-4" hidden="" type="checkbox">
	   <label class ="pure-toggle brick" for="pure-toggle-4"><span class ="fontawesome-ok"></span><span class ="fontawesome-remove"></span></label>
	 </div>
	 <div>
	   <input id="pure-toggle-5" hidden="" type="checkbox">
	   <label class ="pure-toggle brick switch" for="pure-toggle-5"><span class ="fontawesome-ok ok"></span><span class ="fontawesome-remove no ok"></span></label>
	 </div>
    </fieldset>
  </form>
<script>
  if (document.location.search.match(/type=embed/gi)) {
    window.parent.postMessage("resize", "*");
  }
</script>
</body></html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607

==========================

کد HTML: 
<!DOCTYPE html>
<html><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta charset="UTF-8">
    <meta name="google" value="notranslate">
    <title>CodePen - Pure Css "day and night" toggle</title>
    <link href="WQBNxO_data/css.css" rel="stylesheet" type="text/css">
	   <style>
	 body {
  background-color: #1E314F;
  font-family: 'Helvetica Rounded', 'Arial Rounded MT Bold','Montserrat', sans-serif;
  color: #fff;
}
.toggleWrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  overflow: hidden;
  padding: 0 200px;
  transform: translate3d(-50%, -50%, 0);
}
.toggleWrapper input {
  position: absolute;
  left: -99em;
}
.toggle {
  cursor: pointer;
  display: inline-block;
  position: relative;
  width: 90px;
  height: 50px;
  background-color: #83D8FF;
  border-radius: 84px;
  transition: background-color 200ms cubic-bezier(0.445, 0.05, 0.55, 0.95);
}
.toggle:before {
  content: 'AM';
  position: absolute;
  left: -50px;
  top: 15px;
  font-size: 18px;
}
.toggle:after {
  content: 'PM';
  position: absolute;
  right: -48px;
  top: 15px;
  font-size: 18px;
  color: #749ED7;
}
.toggle__handler {
  display: inline-block;
  position: relative;
  z-index: 1;
  top: 3px;
  left: 3px;
  width: 44px;
  height: 44px;
  background-color: #FFCF96;
  border-radius: 50px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  transition: all 400ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
  transform: rotate(-45deg);
}
.toggle__handler .crater {
  position: absolute;
  background-color: #E8CDA5;
  opacity: 0;
  transition: opacity 200ms ease-in-out;
  border-radius: 100%;
}
.toggle__handler .crater--1 {
  top: 18px;
  left: 10px;
  width: 4px;
  height: 4px;
}
.toggle__handler .crater--2 {
  top: 28px;
  left: 22px;
  width: 6px;
  height: 6px;
}
.toggle__handler .crater--3 {
  top: 10px;
  left: 25px;
  width: 8px;
  height: 8px;
}
.star {
  position: absolute;
  background-color: #ffffff;
  transition: all 300ms cubic-bezier(0.445, 0.05, 0.55, 0.95);
  border-radius: 50%;
}
.star--1 {
  top: 10px;
  left: 35px;
  z-index: 0;
  width: 30px;
  height: 3px;
}
.star--2 {
  top: 18px;
  left: 28px;
  z-index: 1;
  width: 30px;
  height: 3px;
}
.star--3 {
  top: 27px;
  left: 40px;
  z-index: 0;
  width: 30px;
  height: 3px;
}
.star--4,
.star--5,
.star--6 {
  opacity: 0;
  transition: all 300ms 0 cubic-bezier(0.445, 0.05, 0.55, 0.95);
}
.star--4 {
  top: 16px;
  left: 11px;
  z-index: 0;
  width: 2px;
  height: 2px;
  transform: translate3d(3px, 0, 0);
}
.star--5 {
  top: 32px;
  left: 17px;
  z-index: 0;
  width: 3px;
  height: 3px;
  transform: translate3d(3px, 0, 0);
}
.star--6 {
  top: 36px;
  left: 28px;
  z-index: 0;
  width: 2px;
  height: 2px;
  transform: translate3d(3px, 0, 0);
}
input:checked + .toggle {
  background-color: #749DD6;
}
input:checked + .toggle:before {
  color: #749ED7;
}
input:checked + .toggle:after {
  color: #ffffff;
}
input:checked + .toggle .toggle__handler {
  background-color: #FFE5B5;
  transform: translate3d(40px, 0, 0) rotate(0);
}
input:checked + .toggle .toggle__handler .crater {
  opacity: 1;
}
input:checked + .toggle .star--1 {
  width: 2px;
  height: 2px;
}
input:checked + .toggle .star--2 {
  width: 4px;
  height: 4px;
  transform: translate3d(-5px, 0, 0);
}
input:checked + .toggle .star--3 {
  width: 2px;
  height: 2px;
  transform: translate3d(-7px, 0, 0);
}
input:checked + .toggle .star--4,
input:checked + .toggle .star--5,
input:checked + .toggle .star--6 {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}
input:checked + .toggle .star--4 {
  transition: all 300ms 200ms cubic-bezier(0.445, 0.05, 0.55, 0.95);
}
input:checked + .toggle .star--5 {
  transition: all 300ms 300ms cubic-bezier(0.445, 0.05, 0.55, 0.95);
}
input:checked + .toggle .star--6 {
  transition: all 300ms 400ms cubic-bezier(0.445, 0.05, 0.55, 0.95);
}
    </style>
    <script>
  window.console = window.console || function(t) {};
</script>
  </head>
  <body>
 <div class ="toggleWrapper">
  <input class ="dn" id="dn" type="checkbox">
  <label for="dn" class ="toggle">
    <span class ="toggle__handler">
	 <span class ="crater crater--1"></span>
	 <span class ="crater crater--2"></span>
	 <span class ="crater crater--3"></span>
    </span>
    <span class ="star star--1"></span>
    <span class ="star star--2"></span>
    <span class ="star star--3"></span>
    <span class ="star star--4"></span>
    <span class ="star star--5"></span>
    <span class ="star star--6"></span>
  </label>
</div>
<script>
  if (document.location.search.match(/type=embed/gi)) {
    window.parent.postMessage("resize", "*");
  }
</script>
</body></html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219

==========================

کد HTML: 
<!DOCTYPE html>
<html class =" -moz-"><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta charset="UTF-8">
    <meta name="google" value="notranslate">
    <title>CodePen - Funny toggle switch</title>
    <link rel="stylesheet" href="wtFne_data/reset.css">
	   <style>
	 body {
  background : #eee;
  padding-top : 20px;
}
#switch , #switch1 {
  position: absolute;
  left: -9999px;
}
.switch {
  display : block;
  position: relative;
  width   : 120px;
  padding : 3px;
  margin  : 20px auto;
  cursor  : pointer;
  border-radius : 33px;
  background    : #ffcc00;
  box-shadow    :  0 1px 1px 0 rgba(0,0,0,.3);
}
.switch:before , .switch:after {
  display : block;
  color   : #fff;
  position : absolute;
  font-size : 30px;
  top : 15px;
  z-index : 0;
}
.switch:before {
  left : 15px;
  content : '✔';
}
.switch:after {
  right : 15px;
  content : '✖';
}
span {
  display : block;
  width   : 39px;
  height  : 41px;
  border  : 7px solid #848484;
  border-radius : 50%;
  position	 : relative;
  left		: 0;
  transition : 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) left;
}
.switch span {
  left : 68px;
}
.switch1 span {
  left : 0px;
}

span:after , span:before { 
  display : block;
  content : ' ';
  position: absolute;
  z-index : 999;
  transition : 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) all;	   
}
span:before {
  width  : 100%;
  height : 34px;
  top  : 0; 
  left : 0;
  background-color: #fff;
  border-radius : inherit;
  border-top    : 4px solid #ffcc00;
  border-bottom : 3px solid #ffcc00;
}
.switch1 span:before {
  border-top-width : 20px;
  height : 19px;
}
span:after {
  width  : 3px;
  height : 3px;		
  top : 0;
  left : 0;
  bottom : 0;
  right : 0;
  margin : auto;
  background-color: #000;
  box-shadow : -2px -2px 0 0px #fff , 0 0 1px 3px #4e341c ;
  border-radius : 50%;
}
.switch1 span:after {
  top : 10px;
  left : -20px;
}
#switch:checked + .switch span {
  transition : 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) left;
  left  : 0px;
}
#switch:checked + .switch span:before {
  transition : 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) all;
  border-top-width : 20px;
  height : 19px;
}
#switch:checked + .switch span:after{
  transition : 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) all;
  top : 10px;
  left : -20px;
}
#switch1:checked + .switch span {
  transition : 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) left;
  left  : 68px;
}
#switch1:checked + .switch span:before {
  transition : 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) all;
  border-top-width : 4px;
  height : 34px;
}
#switch1:checked + .switch span:after{
  transition : 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) all;
  top  : 0;
  left : 0;
}
    </style>
    <script>
  window.console = window.console || function(t) {};
</script>
	   <script src="wtFne_data/prefixfree.js"></script>
  </head>
  <body>
    <input name="switch" id="switch" type="checkbox">
<label for="switch" class ="switch">
  <span></span>
</label>
<input name="switch" id="switch1" type="checkbox">
<label for="switch1" class ="switch switch1">
  <span></span>
</label>
    <script>
  if (document.location.search.match(/type=embed/gi)) {
    window.parent.postMessage("resize", "*");
  }
</script>
</body></html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146

]]> <![CDATA[اسلاید شوهای زیبا و ابتکاری با CSS3 (طرح سی و هشتم)]]> http://www.midorinco.ir/showthread.php?tid=1624 Wed, 23 Sep 2015 10:26:14 +0000 http://www.midorinco.ir/showthread.php?tid=1624 اسلاید شوهای زیبا و ابتکاری با CSS3 (طرح سی و هشتم)اسلاید شو یا گالری تصاویر برای نمایش تصاویر بصورتی زیبا و تکنیکی با استفاده از راه کارها و روش های گوناگون . برای دوستان چند مدل را گردآوری کرده ام که در اینجا قرار میدهم . نمونه ی زنده را در زیر ببینید و سپس برای بررسی و استفاده , از کد های داده شده استفاده کنید . تغییرات بعهده ی شماست . فایل های مورد استفاده در این پروژه هم در فایل فشرده موجود هستند.

کد HTML: 
<div class ="content">
    <h1>Pure CSS3 Cycle Slider</h1>
</div>

<div class ="container">
    <div id="content-slider">
	   <div id="slider">
		  <div id="mask">
		  <ul>
			<li id="first" class ="firstanimation">
		  <a href="#">
		  <img src="images/img_1.jpg" alt="Cougar"/>
		  </a>
		  <div class ="tooltip">
		  <h1>Cougar</h1>
		  </div>
		  </li>

		  <li id="second" class ="secondanimation">
		  <a href="#">
		  <img src="images/img_2.jpg" alt="Lions"/>
		  </a>
		  <div class ="tooltip">
		  <h1>Lions</h1>
		  </div>
		  </li>

		  <li id="third" class ="thirdanimation">
		  <a href="#">
		  <img src="images/img_3.jpg" alt="Snowalker"/>
		  </a>
		  <div class ="tooltip">
		  <h1>Snowalker</h1>
		  </div>
		  </li>

		  <li id="fourth" class ="fourthanimation">
		  <a href="#">
		  <img src="images/img_4.jpg" alt="Howling"/>
		  </a>
		  <div class ="tooltip">
		  <h1>Howling</h1>
		  </div>
		  </li>

		  <li id="fifth" class ="fifthanimation">
		  <a href="#">
		  <img src="images/img_5.jpg" alt="Sunbathing"/>
		  </a>
		  <div class ="tooltip">
		  <h1>Sunbathing</h1>
		  </div>
		  </li>
		  </ul>
		  </div>
		  <div class ="progress-bar"></div>
	   </div>
    </div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59



CSS3-Slider.rar
 ارسال کننده فايل download
 نوع فايل .rar
 اندازه 317 KB
 دفعات دانلود 548 بار
 گيرنده(های) فايل
 زمان آخرین دانلود 1771916323
 یک سخنِ ناب

]]> اسلاید شوهای زیبا و ابتکاری با CSS3 (طرح سی و هشتم)اسلاید شو یا گالری تصاویر برای نمایش تصاویر بصورتی زیبا و تکنیکی با استفاده از راه کارها و روش های گوناگون . برای دوستان چند مدل را گردآوری کرده ام که در اینجا قرار میدهم . نمونه ی زنده را در زیر ببینید و سپس برای بررسی و استفاده , از کد های داده شده استفاده کنید . تغییرات بعهده ی شماست . فایل های مورد استفاده در این پروژه هم در فایل فشرده موجود هستند.

کد HTML: 
<div class ="content">
    <h1>Pure CSS3 Cycle Slider</h1>
</div>

<div class ="container">
    <div id="content-slider">
	   <div id="slider">
		  <div id="mask">
		  <ul>
			<li id="first" class ="firstanimation">
		  <a href="#">
		  <img src="images/img_1.jpg" alt="Cougar"/>
		  </a>
		  <div class ="tooltip">
		  <h1>Cougar</h1>
		  </div>
		  </li>

		  <li id="second" class ="secondanimation">
		  <a href="#">
		  <img src="images/img_2.jpg" alt="Lions"/>
		  </a>
		  <div class ="tooltip">
		  <h1>Lions</h1>
		  </div>
		  </li>

		  <li id="third" class ="thirdanimation">
		  <a href="#">
		  <img src="images/img_3.jpg" alt="Snowalker"/>
		  </a>
		  <div class ="tooltip">
		  <h1>Snowalker</h1>
		  </div>
		  </li>

		  <li id="fourth" class ="fourthanimation">
		  <a href="#">
		  <img src="images/img_4.jpg" alt="Howling"/>
		  </a>
		  <div class ="tooltip">
		  <h1>Howling</h1>
		  </div>
		  </li>

		  <li id="fifth" class ="fifthanimation">
		  <a href="#">
		  <img src="images/img_5.jpg" alt="Sunbathing"/>
		  </a>
		  <div class ="tooltip">
		  <h1>Sunbathing</h1>
		  </div>
		  </li>
		  </ul>
		  </div>
		  <div class ="progress-bar"></div>
	   </div>
    </div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59



CSS3-Slider.rar
 ارسال کننده فايل download
 نوع فايل .rar
 اندازه 317 KB
 دفعات دانلود 548 بار
 گيرنده(های) فايل
 زمان آخرین دانلود 1771916323
 یک سخنِ ناب

]]> <![CDATA[ايجاد نوشته یا تصویر رمزگونه در سایت ها با Css]]> http://www.midorinco.ir/showthread.php?tid=1596 Sun, 15 Mar 2015 08:51:38 +0000 http://www.midorinco.ir/showthread.php?tid=1596 ايجاد نوشته یا تصویر رمزگونه در سایت ها با Css
اگر اهل رمز و راز هستید راه کار زیر بکارتان می آید . نخست نمونه ی زنده زیر را ببینید و در صورت علاقه مند شدن فایل فشرده را دانلود کرده و استفاده کنید . اسکرول را به پایین بیاورید و کشف رمز کنید .



SecretMessage.rar
 ارسال کننده فايل download
 نوع فايل .rar
 اندازه 5.88 KB
 دفعات دانلود 619 بار
 گيرنده(های) فايل
 زمان آخرین دانلود 1771634341
 یک سخنِ ناب

]]> ايجاد نوشته یا تصویر رمزگونه در سایت ها با Css
اگر اهل رمز و راز هستید راه کار زیر بکارتان می آید . نخست نمونه ی زنده زیر را ببینید و در صورت علاقه مند شدن فایل فشرده را دانلود کرده و استفاده کنید . اسکرول را به پایین بیاورید و کشف رمز کنید .



SecretMessage.rar
 ارسال کننده فايل download
 نوع فايل .rar
 اندازه 5.88 KB
 دفعات دانلود 619 بار
 گيرنده(های) فايل
 زمان آخرین دانلود 1771634341
 یک سخنِ ناب

]]> <![CDATA[فرم تماس زیبا برای سایت ها با CSS]]> http://www.midorinco.ir/showthread.php?tid=1591 Wed, 11 Mar 2015 11:32:19 +0000 http://www.midorinco.ir/showthread.php?tid=1591 فرم تماس زیبا برای سایت ها با CSS
اگر دنبال فرم تماس زيبا و ساده می گرديد این نمونه ی زیبا را استفاده کنید . نخست نمونه ی زنده را در زیر ببینید و در صورت علاقه مند شدن از کدهای داده شده استفاده کنید . برای دیدن زیبایی کار روی کادرها کلیک کنید . تغییرات بعهده ی شماست .


کد HTML: 
<style>
form div.dynamiclabel{ /* div container for each form field with pop up label */
  display: block;
  margin: 30px;
  font: 16px;
  position: relative;
}
form div.dynamiclabel input[type="text"], form div.dynamiclabel textarea{
  width: 320px;
  padding: 10px;
  border: 1px solid #c3c3c3;
  border-radius: 7px;
}
form div.dynamiclabel textarea{
    height: 200px;
}
form div.dynamiclabel label{ /* pop up label style */
  position: absolute;
  left: 0;
  background: lightyellow;
  border: 1px solid yellow;
  border-radius: 2px;
  padding: 3px 10px;
  box-shadow: 4px 1px 5px gray;
  font-weight: bold;
  -webkit-backface-visibility: hidden;
  top: 10px; /* initial top position of label relative to dynamiclabel container */
  -moz-transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  -webkit-transition: all 0.4s ease-in-out; /* Safari doesn't seem to support cubic-bezier values beyond 0 to 1, so use keyword value instead */
  -o-transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  opacity: 0;
  z-index: -1;
}
form div.dynamiclabel > *:focus{ /* when user focuses on child element inside div.dynamiclabel */
  border: 1px solid #45bcd2;
  box-shadow: 0 0 8px 2px #98d865;
}
form div.dynamiclabel > *:focus + label{ /* label style when user focuses on child element inside div.dynamiclabel */
  opacity: 1;
  z-index:100;
  top: -35px; /* Post top position of label on focus relative to dynamiclabel container */
  -ms-transform: rotate(-3deg);
  -moz-transform: rotate(-3deg);
  -webkit-transform: rotate(-3deg);
  transform: rotate(-3deg);
}
</style>
<br /><br />
 <form>
  <div class ="dynamiclabel">
    <input id="name" placeholder="Name" type="text">
    <label for="name">Name</label>
  </div>
  <div class ="dynamiclabel">
    <input id="email" placeholder="Email Address" type="text">
    <label for="email">Email Address</label>
  </div>
  <div class ="dynamiclabel">
    <textarea id="feedback" placeholder="Feedback"></textarea>
    <label for="feedback">Feedback</label>
  </div>
</form>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63

]]> فرم تماس زیبا برای سایت ها با CSS
اگر دنبال فرم تماس زيبا و ساده می گرديد این نمونه ی زیبا را استفاده کنید . نخست نمونه ی زنده را در زیر ببینید و در صورت علاقه مند شدن از کدهای داده شده استفاده کنید . برای دیدن زیبایی کار روی کادرها کلیک کنید . تغییرات بعهده ی شماست .


کد HTML: 
<style>
form div.dynamiclabel{ /* div container for each form field with pop up label */
  display: block;
  margin: 30px;
  font: 16px;
  position: relative;
}
form div.dynamiclabel input[type="text"], form div.dynamiclabel textarea{
  width: 320px;
  padding: 10px;
  border: 1px solid #c3c3c3;
  border-radius: 7px;
}
form div.dynamiclabel textarea{
    height: 200px;
}
form div.dynamiclabel label{ /* pop up label style */
  position: absolute;
  left: 0;
  background: lightyellow;
  border: 1px solid yellow;
  border-radius: 2px;
  padding: 3px 10px;
  box-shadow: 4px 1px 5px gray;
  font-weight: bold;
  -webkit-backface-visibility: hidden;
  top: 10px; /* initial top position of label relative to dynamiclabel container */
  -moz-transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  -webkit-transition: all 0.4s ease-in-out; /* Safari doesn't seem to support cubic-bezier values beyond 0 to 1, so use keyword value instead */
  -o-transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  opacity: 0;
  z-index: -1;
}
form div.dynamiclabel > *:focus{ /* when user focuses on child element inside div.dynamiclabel */
  border: 1px solid #45bcd2;
  box-shadow: 0 0 8px 2px #98d865;
}
form div.dynamiclabel > *:focus + label{ /* label style when user focuses on child element inside div.dynamiclabel */
  opacity: 1;
  z-index:100;
  top: -35px; /* Post top position of label on focus relative to dynamiclabel container */
  -ms-transform: rotate(-3deg);
  -moz-transform: rotate(-3deg);
  -webkit-transform: rotate(-3deg);
  transform: rotate(-3deg);
}
</style>
<br /><br />
 <form>
  <div class ="dynamiclabel">
    <input id="name" placeholder="Name" type="text">
    <label for="name">Name</label>
  </div>
  <div class ="dynamiclabel">
    <input id="email" placeholder="Email Address" type="text">
    <label for="email">Email Address</label>
  </div>
  <div class ="dynamiclabel">
    <textarea id="feedback" placeholder="Feedback"></textarea>
    <label for="feedback">Feedback</label>
  </div>
</form>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63

]]> <![CDATA[ایجاد شکل های ابتکاری و زیبا با استفاده از CSS]]> http://www.midorinco.ir/showthread.php?tid=1564 Wed, 04 Feb 2015 06:55:53 +0000 http://www.midorinco.ir/showthread.php?tid=1564 ایجاد شکل های ابتکاری و زیبا با استفاده از CSS
چهل و یک طرح زیبا و ابتکاری که فقط با استفاده از کدهای سی اس اس درست شده اند را برای دوستان قرار می دهم . نمونه ی زنده ی زیر را ببینید و در صورت علاقه مند شدن از کدهای داده شده استفاده کنید . (اگر شما هم کدی غیر از اینها دارید به اشتراک بگذارید).

]]> ایجاد شکل های ابتکاری و زیبا با استفاده از CSS
چهل و یک طرح زیبا و ابتکاری که فقط با استفاده از کدهای سی اس اس درست شده اند را برای دوستان قرار می دهم . نمونه ی زنده ی زیر را ببینید و در صورت علاقه مند شدن از کدهای داده شده استفاده کنید . (اگر شما هم کدی غیر از اینها دارید به اشتراک بگذارید).

]]> <![CDATA[مدلی متحرک و زیبا از چرخ دندانه ها با CSS3]]> http://www.midorinco.ir/showthread.php?tid=1553 Thu, 22 Jan 2015 16:56:56 +0000 http://www.midorinco.ir/showthread.php?tid=1553 مدلی متحرک و زیبا از چرخ دندانه ها با CSS3
يک مدل زيبا برای نمایش قدرت کدهای CSS3 . نخست نمونه ی زنده ی زیر را ببینید در صورت نیاز , فایل فشرده را دانلود و استفاده کنید . نوع مصرف و تغییرات بعهده ی شماست .



gears-css3.rar
 ارسال کننده فايل download
 نوع فايل .rar
 اندازه 183.89 KB
 دفعات دانلود 506 بار
 گيرنده(های) فايل
 زمان آخرین دانلود 1771570685
 یک سخنِ ناب

]]> مدلی متحرک و زیبا از چرخ دندانه ها با CSS3
يک مدل زيبا برای نمایش قدرت کدهای CSS3 . نخست نمونه ی زنده ی زیر را ببینید در صورت نیاز , فایل فشرده را دانلود و استفاده کنید . نوع مصرف و تغییرات بعهده ی شماست .



gears-css3.rar
 ارسال کننده فايل download
 نوع فايل .rar
 اندازه 183.89 KB
 دفعات دانلود 506 بار
 گيرنده(های) فايل
 زمان آخرین دانلود 1771570685
 یک سخنِ ناب

]]> <![CDATA[جدول های زیبا و ابتکاری با CSS3]]> http://www.midorinco.ir/showthread.php?tid=1551 Tue, 20 Jan 2015 20:52:42 +0000 http://www.midorinco.ir/showthread.php?tid=1551 جدول های زیبا و ابتکاری با CSS3
برای ایجاد جدول در سایت ها از کدهای HTML استفاده می شد ولی با استفاده از کدهای CSS3 می توانید جدول هایی به مراتب زیباتر درست کنید . نخست نمونه ی زیر را ببینید و در صورت علاقه مند شدن و نیاز به این جدول ها , فایل فشرده را دانلود و استفاده کنید . تغییرات بعهده ی شماست .



Beautiful-Table-Plugin-with-CSS3.rar
 ارسال کننده فايل download
 نوع فايل .rar
 اندازه 14.19 KB
 دفعات دانلود 521 بار
 گيرنده(های) فايل
 زمان آخرین دانلود 1764912998
 یک سخنِ ناب

]]> جدول های زیبا و ابتکاری با CSS3
برای ایجاد جدول در سایت ها از کدهای HTML استفاده می شد ولی با استفاده از کدهای CSS3 می توانید جدول هایی به مراتب زیباتر درست کنید . نخست نمونه ی زیر را ببینید و در صورت علاقه مند شدن و نیاز به این جدول ها , فایل فشرده را دانلود و استفاده کنید . تغییرات بعهده ی شماست .



Beautiful-Table-Plugin-with-CSS3.rar
 ارسال کننده فايل download
 نوع فايل .rar
 اندازه 14.19 KB
 دفعات دانلود 521 بار
 گيرنده(های) فايل
 زمان آخرین دانلود 1764912998
 یک سخنِ ناب

]]> <![CDATA[یک ساید بار زیبا و سریع با کدهای CSS3]]> http://www.midorinco.ir/showthread.php?tid=1550 Tue, 20 Jan 2015 20:39:40 +0000 http://www.midorinco.ir/showthread.php?tid=1550 یک ساید بار زیبا و سریع با کدهای CSS3
اين سايد بار از چپ براست باز می شود و بدون نیاز به تصویر است . بسیار سریع عمل می کند و تداخلی هم با سایر کدها پیدا نخواهد کرد . نخست نمونه ی زنده ی زیر را ببینید در صورت علاقه از کدهای داده شده استفاده کنید . مورد استفاده و تغییرات بعهده ی شماست .

کد HTML: 
<!doctype html>
<html>
    <head>
	   <title>Demo: Pure CSS Drawer Menu</title>
	   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	   <style>
		  * {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: .25s ease-in-out;
    -moz-transition: .25s ease-in-out;
    -o-transition: .25s ease-in-out;
    transition: .25s ease-in-out;
    margin: 0;
    padding: 0;
    -webkit-text-size-adjust: none;
}
/* Makes sure that everything is 100% height */
html,body {
    height: 100%;
    overflow: hidden;
}
/* gets the actual input out of the way; we're going to style the label instead */
#drawer-toggle {
    position: absolute;
    opacity: 0;
}
#drawer-toggle-label {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    left: 0px;
    height:50px;
    width: 50px;
    display: block;
    position: fixed;
    background: rgba(255,255,255,.0);
    z-index: 1;
}
/* adds our "hamburger" menu icon */
#drawer-toggle-label:before {
    content: '';
    display: block;
    position: absolute;
    height: 2px;
    width: 24px;
    background: #8d8d8d;
    left: 13px;
    top: 18px;
    box-shadow: 0 6px 0 #8d8d8d, 0 12px 0 #8d8d8d;
}
header {
    width: 100%;
    position: fixed;
    left: 0px;
    background: #efefef;
    padding: 10px 10px 10px 50px;
    font-size: 30px;
    line-height: 30px;
    z-index: 0;
}
/* drawer menu pane - note the 0px width */
#drawer {
    position: fixed;
    top: 0;
    left:-300px;
    height: 100%;
    width: 300px;
    background: #2f2f2f;
    overflow-x: hidden;
    overflow-y: scroll;
    padding: 20px;
    -webkit-overflow-scrolling: touch;
}
/* actual page content pane */
#page-content {
    margin-left: 0px;
    margin-top: 50px;
    width: 100%;
    height: calc(100% - 50px);
    overflow-x:hidden;
    overflow-y:scroll;
    -webkit-overflow-scrolling: touch;
    padding: 20px;
}
/* checked styles (menu open state) */
#drawer-toggle:checked ~ #drawer-toggle-label {
    height: 100%;
    width: calc(100% - 300px);
    background: rgba(255,255,255,.8);
}
#drawer-toggle:checked ~ #drawer {
    left:0;
}
#drawer-toggle:checked ~ #drawer-toggle-label, #drawer-toggle:checked ~ header {
    left: 300px;
}
#drawer-toggle:checked ~ #page-content {
    margin-left: 300px;
}
/* Menu item styles */
#drawer ul {
    list-style-type:none;
}
#drawer ul a {
    display:block;
    padding:10px;
    color:#c7c7c7;
    text-decoration:none;
}
#drawer ul a:hover {
    color:white;
}
/* Responsive MQ */
@media all and (max-width:350px) {
    #drawer-toggle:checked ~ #drawer-toggle-label {
	   height: 100%;
	   width: 50px;
    }
	   #drawer-toggle:checked ~ #drawer-toggle-label, #drawer-toggle:checked ~ header {
	   left: calc(100% - 50px);
    }
	   #drawer {
	   width:calc(100% - 50px);
	   left: -100%;
    }
	   #drawer-toggle:checked ~ #page-content {
	   margin-left: calc(100% - 50px);
    }
}
	   </style>
    </head>
    <body>
	   <input  type="checkbox" id="drawer-toggle" name="drawer-toggle"/>
	   <label for="drawer-toggle" id="drawer-toggle-label"></label>
	   <header>عنوان سایت شما</header>
	   <nav id="drawer">
		  <ul>
			 <li><a href="demos/pure-css-drawer-menu.html#">منوی یکم</a></li>
			 <li><a href="demos/pure-css-drawer-menu.html#">منوی دوم</a></li>
			 <li><a href="demos/pure-css-drawer-menu.html#">منوی سوم</a></li>
			 <li><a href="demos/pure-css-drawer-menu.html#">منوی چهارم</a></li>
		  </ul>
	   </nav>
	   <div id="page-content">
<p>یک ساید بار زیبا و سریع برای استفاده در سایت ها فقط با استفاده از کدهای سی اس اس</p>
	   </div>
    </body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155

]]> یک ساید بار زیبا و سریع با کدهای CSS3
اين سايد بار از چپ براست باز می شود و بدون نیاز به تصویر است . بسیار سریع عمل می کند و تداخلی هم با سایر کدها پیدا نخواهد کرد . نخست نمونه ی زنده ی زیر را ببینید در صورت علاقه از کدهای داده شده استفاده کنید . مورد استفاده و تغییرات بعهده ی شماست .

کد HTML: 
<!doctype html>
<html>
    <head>
	   <title>Demo: Pure CSS Drawer Menu</title>
	   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	   <style>
		  * {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: .25s ease-in-out;
    -moz-transition: .25s ease-in-out;
    -o-transition: .25s ease-in-out;
    transition: .25s ease-in-out;
    margin: 0;
    padding: 0;
    -webkit-text-size-adjust: none;
}
/* Makes sure that everything is 100% height */
html,body {
    height: 100%;
    overflow: hidden;
}
/* gets the actual input out of the way; we're going to style the label instead */
#drawer-toggle {
    position: absolute;
    opacity: 0;
}
#drawer-toggle-label {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    left: 0px;
    height:50px;
    width: 50px;
    display: block;
    position: fixed;
    background: rgba(255,255,255,.0);
    z-index: 1;
}
/* adds our "hamburger" menu icon */
#drawer-toggle-label:before {
    content: '';
    display: block;
    position: absolute;
    height: 2px;
    width: 24px;
    background: #8d8d8d;
    left: 13px;
    top: 18px;
    box-shadow: 0 6px 0 #8d8d8d, 0 12px 0 #8d8d8d;
}
header {
    width: 100%;
    position: fixed;
    left: 0px;
    background: #efefef;
    padding: 10px 10px 10px 50px;
    font-size: 30px;
    line-height: 30px;
    z-index: 0;
}
/* drawer menu pane - note the 0px width */
#drawer {
    position: fixed;
    top: 0;
    left:-300px;
    height: 100%;
    width: 300px;
    background: #2f2f2f;
    overflow-x: hidden;
    overflow-y: scroll;
    padding: 20px;
    -webkit-overflow-scrolling: touch;
}
/* actual page content pane */
#page-content {
    margin-left: 0px;
    margin-top: 50px;
    width: 100%;
    height: calc(100% - 50px);
    overflow-x:hidden;
    overflow-y:scroll;
    -webkit-overflow-scrolling: touch;
    padding: 20px;
}
/* checked styles (menu open state) */
#drawer-toggle:checked ~ #drawer-toggle-label {
    height: 100%;
    width: calc(100% - 300px);
    background: rgba(255,255,255,.8);
}
#drawer-toggle:checked ~ #drawer {
    left:0;
}
#drawer-toggle:checked ~ #drawer-toggle-label, #drawer-toggle:checked ~ header {
    left: 300px;
}
#drawer-toggle:checked ~ #page-content {
    margin-left: 300px;
}
/* Menu item styles */
#drawer ul {
    list-style-type:none;
}
#drawer ul a {
    display:block;
    padding:10px;
    color:#c7c7c7;
    text-decoration:none;
}
#drawer ul a:hover {
    color:white;
}
/* Responsive MQ */
@media all and (max-width:350px) {
    #drawer-toggle:checked ~ #drawer-toggle-label {
	   height: 100%;
	   width: 50px;
    }
	   #drawer-toggle:checked ~ #drawer-toggle-label, #drawer-toggle:checked ~ header {
	   left: calc(100% - 50px);
    }
	   #drawer {
	   width:calc(100% - 50px);
	   left: -100%;
    }
	   #drawer-toggle:checked ~ #page-content {
	   margin-left: calc(100% - 50px);
    }
}
	   </style>
    </head>
    <body>
	   <input  type="checkbox" id="drawer-toggle" name="drawer-toggle"/>
	   <label for="drawer-toggle" id="drawer-toggle-label"></label>
	   <header>عنوان سایت شما</header>
	   <nav id="drawer">
		  <ul>
			 <li><a href="demos/pure-css-drawer-menu.html#">منوی یکم</a></li>
			 <li><a href="demos/pure-css-drawer-menu.html#">منوی دوم</a></li>
			 <li><a href="demos/pure-css-drawer-menu.html#">منوی سوم</a></li>
			 <li><a href="demos/pure-css-drawer-menu.html#">منوی چهارم</a></li>
		  </ul>
	   </nav>
	   <div id="page-content">
<p>یک ساید بار زیبا و سریع برای استفاده در سایت ها فقط با استفاده از کدهای سی اس اس</p>
	   </div>
    </body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155

]]> <![CDATA[منوهایی زیبا برای سایت ها از آینده با CSS3 (مدل هفتاد و دوم)]]> http://www.midorinco.ir/showthread.php?tid=1522 Tue, 13 Jan 2015 22:19:39 +0000 http://www.midorinco.ir/showthread.php?tid=1522 منوهایی زیبا برای سایت ها از آینده با CSS3 (مدل هفتاد و دوم)منو های زیبا و ابتکاری برای استفاده در سایت ها مدل هایی که بسیار ابتکاری هستند و رویایی و فقط با استفاده از کد های CSS3 . برای استفاده ابتدا نمونه ی زنده ی زیر را با مرورگرهای گوناگون ببینید و سپس در صورت علاقه مند شدن از کدهای داده شده استفاده کنید . تغییرات بعهده ی شماست . Cool



کد HTML: 
<style type="text/css">
.holder {padding:10px; background:#ddd; float:left; margin-left:2px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border-radius: 15px;
}
ul.social, ul.network {margin:0; padding:0; list-style:none;}
ul.social {position:relative; z-index:100;}
ul.social li {float:left;}
ul.social li a {display:block; width:64px; height:64px; padding:1px;}
ul.social li a img {display:block; border:0;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
ul.network {position:absolute; width:66px; height:66px; top:-10px; left:-10px; z-index:-1; border:10px solid #ddd; background:#ddd;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border-radius: 15px;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
ul.network li a {position:absolute; top:0; left:0;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
ul.network li a.p1 {left:0;}
ul.network li a.p2 {left:0;}
ul.network li a.p3 {left:0;}
ul.network li a.p4 {left:0;}
ul.network li a.p5 {left:0;}
ul.network li a.p6 {left:0;}
ul.network li a.p7 {left:0;}
ul.network li a.p8 {left:0;}
ul.network li a.p9 {left:0;}
ul.network li a.p10 {left:0;}
ul.network li a.p1 img {width:28px; padding:18px;}
ul.network li a.p2 img {width:32px; padding:16px;}
ul.network li a.p3 img {width:36px; padding:14px;}
ul.network li a.p4 img {width:40px; padding:12px;}
ul.network li a.p5 img {width:44px; padding:10px;}
ul.network li a.p6 img {width:48px; padding:8px;}
ul.network li a.p7 img {width:52px; padding:6px;}
ul.network li a.p8 img {width:56px; padding:4px;}
ul.network li a.p9 img {width:60px; padding:2px;}
ul.network li a.p10 img {width:64px; padding:0;}
ul.social li:hover ul.network {width:660px; left:56px;}
ul.social li:hover ul.network li a.p1 {left:90%;}
ul.social li:hover ul.network li a.p2 {left:80%;}
ul.social li:hover ul.network li a.p3 {left:70%;}
ul.social li:hover ul.network li a.p4 {left:60%;}
ul.social li:hover ul.network li a.p5 {left:50%;}
ul.social li:hover ul.network li a.p6 {left:40%;}
ul.social li:hover ul.network li a.p7 {left:30%;}
ul.social li:hover ul.network li a.p8 {left:20%;}
ul.social li:hover ul.network li a.p9 {left:10%;}
ul.social li:hover ul.network li a.p10 {left:0%;}
ul.social li:hover ul.network li a img {width:64px; padding:0;}
ul.social li.close {position:absolute; left:-9999px; top:-20px;  width:50px; height:50px; background:url(modo/close.png); opacity:0;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-ms-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
transition-delay: 1s;
-o-transition-delay: 1s;
-moz-transition-delay: 1s;
-ms-transition-delay: 1s;
-webkit-transition-delay: 1s;
}
.clear {clear:both;}
</style>
<style type="text/css" media="only screen and (max-device-width: 768px)">
/* for iPhone, iPad and iPod Touch */
ul.social li:hover + li.close {left:700px; opacity:1;}
</style>
<br><br><br>
<div class ="holder">
    <ul class ="social">
	   <li><a href="#url"><img src="network.png" alt="Social Networks">
		  </a><ul class ="network"><a href="#url">
			 </a><li><a href="#url"></a><a class ="p1" href="#url"><img src="digg.png" alt="digg"></a></li>
			 <li><a class ="p2" href="#url"><img src="reddit.png" alt="reddit"></a></li>
			 <li><a class ="p3" href="#url"><img src="myspace.png" alt="myspace"></a></li>
			 <li><a class ="p4" href="#url"><img src="twitter_002.png" alt="twitter"></a></li>
			 <li><a class ="p5" href="#url"><img src="stumbleupon.png" alt="stumbleupon"></a></li>
			 <li><a class ="p6" href="#url"><img src="youtube.png" alt="youtube"></a></li>
			 <li><a class ="p7" href="#url"><img src="linkedin.png" alt="linkedin"></a></li>
			 <li><a class ="p8" href="#url"><img src="yahoo.png" alt="yahoo"></a></li>
			 <li><a class ="p9" href="#url"><img src="delicious.png" alt="delicious"></a></li>
			 <li><a class ="p10" href="#url"><img src="facebook_002.png" alt="facebook"></a></li>
		  </ul>
	   </li>
	   <li class ="close"><a href="#url"></a></li>
    </ul>
</div>
<br class ="clear"><br><br><br><br>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105

]]> منوهایی زیبا برای سایت ها از آینده با CSS3 (مدل هفتاد و دوم)منو های زیبا و ابتکاری برای استفاده در سایت ها مدل هایی که بسیار ابتکاری هستند و رویایی و فقط با استفاده از کد های CSS3 . برای استفاده ابتدا نمونه ی زنده ی زیر را با مرورگرهای گوناگون ببینید و سپس در صورت علاقه مند شدن از کدهای داده شده استفاده کنید . تغییرات بعهده ی شماست . Cool



کد HTML: 
<style type="text/css">
.holder {padding:10px; background:#ddd; float:left; margin-left:2px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border-radius: 15px;
}
ul.social, ul.network {margin:0; padding:0; list-style:none;}
ul.social {position:relative; z-index:100;}
ul.social li {float:left;}
ul.social li a {display:block; width:64px; height:64px; padding:1px;}
ul.social li a img {display:block; border:0;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
ul.network {position:absolute; width:66px; height:66px; top:-10px; left:-10px; z-index:-1; border:10px solid #ddd; background:#ddd;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border-radius: 15px;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
ul.network li a {position:absolute; top:0; left:0;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
ul.network li a.p1 {left:0;}
ul.network li a.p2 {left:0;}
ul.network li a.p3 {left:0;}
ul.network li a.p4 {left:0;}
ul.network li a.p5 {left:0;}
ul.network li a.p6 {left:0;}
ul.network li a.p7 {left:0;}
ul.network li a.p8 {left:0;}
ul.network li a.p9 {left:0;}
ul.network li a.p10 {left:0;}
ul.network li a.p1 img {width:28px; padding:18px;}
ul.network li a.p2 img {width:32px; padding:16px;}
ul.network li a.p3 img {width:36px; padding:14px;}
ul.network li a.p4 img {width:40px; padding:12px;}
ul.network li a.p5 img {width:44px; padding:10px;}
ul.network li a.p6 img {width:48px; padding:8px;}
ul.network li a.p7 img {width:52px; padding:6px;}
ul.network li a.p8 img {width:56px; padding:4px;}
ul.network li a.p9 img {width:60px; padding:2px;}
ul.network li a.p10 img {width:64px; padding:0;}
ul.social li:hover ul.network {width:660px; left:56px;}
ul.social li:hover ul.network li a.p1 {left:90%;}
ul.social li:hover ul.network li a.p2 {left:80%;}
ul.social li:hover ul.network li a.p3 {left:70%;}
ul.social li:hover ul.network li a.p4 {left:60%;}
ul.social li:hover ul.network li a.p5 {left:50%;}
ul.social li:hover ul.network li a.p6 {left:40%;}
ul.social li:hover ul.network li a.p7 {left:30%;}
ul.social li:hover ul.network li a.p8 {left:20%;}
ul.social li:hover ul.network li a.p9 {left:10%;}
ul.social li:hover ul.network li a.p10 {left:0%;}
ul.social li:hover ul.network li a img {width:64px; padding:0;}
ul.social li.close {position:absolute; left:-9999px; top:-20px;  width:50px; height:50px; background:url(modo/close.png); opacity:0;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-ms-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
transition-delay: 1s;
-o-transition-delay: 1s;
-moz-transition-delay: 1s;
-ms-transition-delay: 1s;
-webkit-transition-delay: 1s;
}
.clear {clear:both;}
</style>
<style type="text/css" media="only screen and (max-device-width: 768px)">
/* for iPhone, iPad and iPod Touch */
ul.social li:hover + li.close {left:700px; opacity:1;}
</style>
<br><br><br>
<div class ="holder">
    <ul class ="social">
	   <li><a href="#url"><img src="network.png" alt="Social Networks">
		  </a><ul class ="network"><a href="#url">
			 </a><li><a href="#url"></a><a class ="p1" href="#url"><img src="digg.png" alt="digg"></a></li>
			 <li><a class ="p2" href="#url"><img src="reddit.png" alt="reddit"></a></li>
			 <li><a class ="p3" href="#url"><img src="myspace.png" alt="myspace"></a></li>
			 <li><a class ="p4" href="#url"><img src="twitter_002.png" alt="twitter"></a></li>
			 <li><a class ="p5" href="#url"><img src="stumbleupon.png" alt="stumbleupon"></a></li>
			 <li><a class ="p6" href="#url"><img src="youtube.png" alt="youtube"></a></li>
			 <li><a class ="p7" href="#url"><img src="linkedin.png" alt="linkedin"></a></li>
			 <li><a class ="p8" href="#url"><img src="yahoo.png" alt="yahoo"></a></li>
			 <li><a class ="p9" href="#url"><img src="delicious.png" alt="delicious"></a></li>
			 <li><a class ="p10" href="#url"><img src="facebook_002.png" alt="facebook"></a></li>
		  </ul>
	   </li>
	   <li class ="close"><a href="#url"></a></li>
    </ul>
</div>
<br class ="clear"><br><br><br><br>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105

]]> <![CDATA[شبیه ساز بارش برف در پس زمینه با CSS3]]> http://www.midorinco.ir/showthread.php?tid=1497 Thu, 01 Jan 2015 09:29:57 +0000 http://www.midorinco.ir/showthread.php?tid=1497 شبیه ساز بارش برف در پس زمینه با CSS3

شبیه ساز بارش برف زیاد است ولی بارش در پس زمینه که زیاد هم مزاحم بازدید کنندگان از سایت نشود کم پیدا میشود . یک نمونه از این شبیه سازی را به مناسبت زمستان و سال نو میلادی برای دوستان قرار می دهم . نخست به نمونه ی زنده ی زیر نگاه کنید , سپس در صورت علاقه فایل پیوستی را دانلود و استفاده کنید . این کار با تصویر و کدهای سی اس اس انجام میگیرد . تغییرات بعهده ی شماست .



LetitSnow.rar
 ارسال کننده فايل download
 نوع فايل .rar
 اندازه 35.05 KB
 دفعات دانلود 585 بار
 گيرنده(های) فايل
 زمان آخرین دانلود 1762711782
 یک سخنِ ناب

]]> شبیه ساز بارش برف در پس زمینه با CSS3

شبیه ساز بارش برف زیاد است ولی بارش در پس زمینه که زیاد هم مزاحم بازدید کنندگان از سایت نشود کم پیدا میشود . یک نمونه از این شبیه سازی را به مناسبت زمستان و سال نو میلادی برای دوستان قرار می دهم . نخست به نمونه ی زنده ی زیر نگاه کنید , سپس در صورت علاقه فایل پیوستی را دانلود و استفاده کنید . این کار با تصویر و کدهای سی اس اس انجام میگیرد . تغییرات بعهده ی شماست .



LetitSnow.rar
 ارسال کننده فايل download
 نوع فايل .rar
 اندازه 35.05 KB
 دفعات دانلود 585 بار
 گيرنده(های) فايل
 زمان آخرین دانلود 1762711782
 یک سخنِ ناب

]]> <![CDATA[کادر چشمک زن با استفاده از CSS3]]> http://www.midorinco.ir/showthread.php?tid=1479 Fri, 19 Dec 2014 21:20:59 +0000 http://www.midorinco.ir/showthread.php?tid=1479 کادر چشمک زن با استفاده از CSS3
برای چشمک زن کردن کادر , ترفندی برای دوستان قرار میدهم امید که بکار بیاید . نخست نمونه ی زنده ی زیر را ببینید و در صورت نیاز از کدهای داده شده استفاده کنید . رنگ زمینه و نوشته و کادر را می توانید بدلخواه تغییر دهید .




کد HTML: 
<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<style>
@keyframes blink { 50% { border-color: #ff0000; }  }
table{
    border: 8px solid #000000 ;
    position: fixed ;
    top: 50% ;
    right: 50% ;
    width: 20em ;
    height: 5em ;
    margin: -2.5em -10em ;
    text-align:center ;
    font-family: monospace ;
    font-size: 25px ;
    font-weight: bold
    color: #ff0000 ;
    background-color: #000000 ;
    animation: blink .5s step-end infinite alternate;
}

body{
    background-color: #000000 ;
    text-align:center ;
    font-family: arcade, monospace ;
    font-size: 15px ;
    font-weight: bold ;
    color: #ff0000 ;

}

</style>
<body>
<table>
<tr><td>کادر چشمک زن </td></tr>
<tr><td>CSS3 با استفاده از </td></tr>
<tr><td>منتشر شده در تالار ميدوری</td></tr>
</table>
</body>

</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

]]> کادر چشمک زن با استفاده از CSS3
برای چشمک زن کردن کادر , ترفندی برای دوستان قرار میدهم امید که بکار بیاید . نخست نمونه ی زنده ی زیر را ببینید و در صورت نیاز از کدهای داده شده استفاده کنید . رنگ زمینه و نوشته و کادر را می توانید بدلخواه تغییر دهید .




کد HTML: 
<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<style>
@keyframes blink { 50% { border-color: #ff0000; }  }
table{
    border: 8px solid #000000 ;
    position: fixed ;
    top: 50% ;
    right: 50% ;
    width: 20em ;
    height: 5em ;
    margin: -2.5em -10em ;
    text-align:center ;
    font-family: monospace ;
    font-size: 25px ;
    font-weight: bold
    color: #ff0000 ;
    background-color: #000000 ;
    animation: blink .5s step-end infinite alternate;
}

body{
    background-color: #000000 ;
    text-align:center ;
    font-family: arcade, monospace ;
    font-size: 15px ;
    font-weight: bold ;
    color: #ff0000 ;

}

</style>
<body>
<table>
<tr><td>کادر چشمک زن </td></tr>
<tr><td>CSS3 با استفاده از </td></tr>
<tr><td>منتشر شده در تالار ميدوری</td></tr>
</table>
</body>

</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

]]> <![CDATA[نوار پیشرفت پروژه ی رنگین و متحرک با CSS3]]> http://www.midorinco.ir/showthread.php?tid=1431 Sun, 02 Nov 2014 21:11:17 +0000 http://www.midorinco.ir/showthread.php?tid=1431 نوار پیشرفت پروژه ی رنگین و متحرک با CSS3
نوارهای نمایش دهنده ی پیشرفت پروژه یا کار در سایت ها بسیار استفاده می شوند . طرحی متحرک برای دوستان قرار می دهم که به رنگ های دلخواه می توانید استفاده کنید . این نوارها فقط با کدهای CSS3 درست شده اند . نخست نمونه های زیر را ببینید و در صورت علاقه از کدهای داده شده در زیر استفاده کنید . تغییرات بعهده ی شماست .


کد HTML: 
<!DOCTYPE html>
<head>
    <title>Animated Bar</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<style type="text/css">
* {
    font-family:source-sans-pro;
    font-size: 16px;
    color:#282828;
}
.wrapper {
    position:relative;
    width:80%;
    margin:20px auto;
}
/* Defining the animation */
@-webkit-keyframes progress
{
    to {background-position: 30px 0;}
}
@-moz-keyframes progress
{
  to {background-position: 30px 0;}
}
@keyframes progress
{
  to {background-position: 30px 0;}
}
/* Set the base of our loader */
.barBg {
    background:#282828;
    width:100%;
    height:15px;
    border:10px solid #282828;
    border-radius: 20px;
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    box-shadow: 0px 5px 17px rgba(40, 40, 40, 0.5);
    margin-bottom:30px;
}
.bar {
    background: #7aff32;
    height:30px;
    height: 15px;
    border-radius: 12px;
    -moz-border-radius: 12px;
    -webkit-border-radius: 10px;
}
/* Set the linear gradient tile for the animation and the playback */
.barFill {
    width: 100%;
    height: 15px;
    border-radius: 20px;
    -webkit-animation: progress 1s linear infinite;
    -moz-animation: progress 1s linear infinite;
    animation: progress 1s linear infinite;
    background-repeat: repeat-x;
    background-size: 30px 30px;
    background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, 
transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
    background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, 
transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
}
/* Here's some predefined widths to control the fill. Add these classes to the "bar" div */
.ten {
    width: 10%; /* Sets the progress to 10% */
}
.twenty {
    width: 20%; /* Sets the progress to 20% */
}
.thirty {
    width: 30%; /* Sets the progress to 30% */
}
.forty {
    width: 40%; /* Sets the progress to 40% */
}
.fifty {
    width: 50%; /* Sets the progress to 50% */
}
.sixty {
    width: 60%; /* Sets the progress to 60% */
}
.seventy {
    width: 70%; /* Sets the progress to 70% */
}
.eighty {
    width: 80%; /* Sets the progress to 80% */
}
.ninety {
    width: 90%; /* Sets the progress to 90% */
}
.hundred {
    width: 100%; /* Sets the progress to 100% */
}
/* Some colour classes to get you started. Add the colour class to the "bar" div */
.aquaGradient{
    background: -moz-linear-gradient(top,  #7aff32 0%, #54a6e5 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7aff32), color-stop(100%,#54a6e5));
    background: -webkit-linear-gradient(top,  #7aff32 0%,#54a6e5 100%);
    background: -o-linear-gradient(top,  #7aff32 0%,#54a6e5 100%);
    background: -ms-linear-gradient(top,  #7aff32 0%,#54a6e5 100%);
    background: linear-gradient(to bottom,  #7aff32 0%,#54a6e5 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7aff32', endColorstr='#54a6e5',GradientType=0 );
}
.roseGradient {
    background: #ff3232;
    background: -moz-linear-gradient(top,  #ff3232 0%, #ed89ff 47%, #ff8989 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff3232), color-stop(47%,#ed89ff), color-stop(100%,#ff8989));
    background: -webkit-linear-gradient(top,  #ff3232 0%,#ed89ff 47%,#ff8989 100%);
    background: -o-linear-gradient(top,  #ff3232 0%,#ed89ff 47%,#ff8989 100%);
    background: -ms-linear-gradient(top,  #ff3232 0%,#ed89ff 47%,#ff8989 100%);
    background: linear-gradient(to bottom,  #ff3232 0%,#ed89ff 47%,#ff8989 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff3232', endColorstr='#ff8989',GradientType=0 );
}
.madras { /* Credit to Divya Manian via http://lea.verou.me/css3patterns/#madras */
    background-color: hsl(34, 53%, 82%);
    background-image: -webkit-repeating-linear-gradient(45deg, transparent 5px, hsla(197, 62%, 11%, 0.5) 5px, hsla(197, 62%, 11%, 0.5) 10px,
	 hsla(5, 53%, 63%, 0) 10px, hsla(5, 53%, 63%, 0) 35px, hsla(5, 53%, 63%, 0.5) 35px, hsla(5, 53%, 63%, 0.5) 40px,
	 hsla(197, 62%, 11%, 0.5) 40px, hsla(197, 62%, 11%, 0.5) 50px, hsla(197, 62%, 11%, 0) 50px, hsla(197, 62%, 11%, 0) 60px,
	 hsla(5, 53%, 63%, 0.5) 60px, hsla(5, 53%, 63%, 0.5) 70px, hsla(35, 91%, 65%, 0.5) 70px, hsla(35, 91%, 65%, 0.5) 80px,
	 hsla(35, 91%, 65%, 0) 80px, hsla(35, 91%, 65%, 0) 90px, hsla(5, 53%, 63%, 0.5) 90px, hsla(5, 53%, 63%, 0.5) 110px,
	 hsla(5, 53%, 63%, 0) 110px, hsla(5, 53%, 63%, 0) 120px, hsla(197, 62%, 11%, 0.5) 120px, hsla(197, 62%, 11%, 0.5) 140px
	 ),
    -webkit-repeating-linear-gradient(-45deg, transparent 5px, hsla(197, 62%, 11%, 0.5) 5px, hsla(197, 62%, 11%, 0.5) 10px,
	 hsla(5, 53%, 63%, 0) 10px, hsla(5, 53%, 63%, 0) 35px, hsla(5, 53%, 63%, 0.5) 35px, hsla(5, 53%, 63%, 0.5) 40px,
	 hsla(197, 62%, 11%, 0.5) 40px, hsla(197, 62%, 11%, 0.5) 50px, hsla(197, 62%, 11%, 0) 50px, hsla(197, 62%, 11%, 0) 60px,
	 hsla(5, 53%, 63%, 0.5) 60px, hsla(5, 53%, 63%, 0.5) 70px, hsla(35, 91%, 65%, 0.5) 70px, hsla(35, 91%, 65%, 0.5) 80px,
	 hsla(35, 91%, 65%, 0) 80px, hsla(35, 91%, 65%, 0) 90px, hsla(5, 53%, 63%, 0.5) 90px, hsla(5, 53%, 63%, 0.5) 110px,
	 hsla(5, 53%, 63%, 0) 110px, hsla(5, 53%, 63%, 0) 140px, hsla(197, 62%, 11%, 0.5) 140px, hsla(197, 62%, 11%, 0.5) 160px
    );; background-color: hsl(34, 53%, 82%);
    background-image: -webkit-repeating-linear-gradient(45deg, transparent 5px, hsla(197, 62%, 11%, 0.5) 5px, hsla(197, 62%, 11%, 0.5) 10px,
	 hsla(5, 53%, 63%, 0) 10px, hsla(5, 53%, 63%, 0) 35px, hsla(5, 53%, 63%, 0.5) 35px, hsla(5, 53%, 63%, 0.5) 40px,
	 hsla(197, 62%, 11%, 0.5) 40px, hsla(197, 62%, 11%, 0.5) 50px, hsla(197, 62%, 11%, 0) 50px, hsla(197, 62%, 11%, 0) 60px,
	 hsla(5, 53%, 63%, 0.5) 60px, hsla(5, 53%, 63%, 0.5) 70px, hsla(35, 91%, 65%, 0.5) 70px, hsla(35, 91%, 65%, 0.5) 80px,
	 hsla(35, 91%, 65%, 0) 80px, hsla(35, 91%, 65%, 0) 90px, hsla(5, 53%, 63%, 0.5) 90px, hsla(5, 53%, 63%, 0.5) 110px,
	 hsla(5, 53%, 63%, 0) 110px, hsla(5, 53%, 63%, 0) 120px, hsla(197, 62%, 11%, 0.5) 120px, hsla(197, 62%, 11%, 0.5) 140px
	 ),
    -webkit-repeating-linear-gradient(-45deg, transparent 5px, hsla(197, 62%, 11%, 0.5) 5px, hsla(197, 62%, 11%, 0.5) 10px,
	 hsla(5, 53%, 63%, 0) 10px, hsla(5, 53%, 63%, 0) 35px, hsla(5, 53%, 63%, 0.5) 35px, hsla(5, 53%, 63%, 0.5) 40px,
	 hsla(197, 62%, 11%, 0.5) 40px, hsla(197, 62%, 11%, 0.5) 50px, hsla(197, 62%, 11%, 0) 50px, hsla(197, 62%, 11%, 0) 60px,
	 hsla(5, 53%, 63%, 0.5) 60px, hsla(5, 53%, 63%, 0.5) 70px, hsla(35, 91%, 65%, 0.5) 70px, hsla(35, 91%, 65%, 0.5) 80px,
	 hsla(35, 91%, 65%, 0) 80px, hsla(35, 91%, 65%, 0) 90px, hsla(5, 53%, 63%, 0.5) 90px, hsla(5, 53%, 63%, 0.5) 110px,
	 hsla(5, 53%, 63%, 0) 110px, hsla(5, 53%, 63%, 0) 140px, hsla(197, 62%, 11%, 0.5) 140px, hsla(197, 62%, 11%, 0.5) 160px
    );
}
.cornflowerblue {
    background-color: CornflowerBlue;
    box-shadow:inset 0px 0px 6px 2px rgba(255,255,255,.3);
}
.carrot {
    background: #f2a130;
    background: -moz-linear-gradient(-45deg,  #f2a130 0%, #e5bd6e 100%);
    background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#f2a130), color-stop(100%,#e5bd6e));
    background: -webkit-linear-gradient(-45deg,  #f2a130 0%,#e5bd6e 100%);
    background: -o-linear-gradient(-45deg,  #f2a130 0%,#e5bd6e 100%);
    background: -ms-linear-gradient(-45deg,  #f2a130 0%,#e5bd6e 100%);
    background: linear-gradient(135deg,  #f2a130 0%,#e5bd6e 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2a130', endColorstr='#e5bd6e',GradientType=1 );
}
</style>
<body>
<div class ="wrapper">
100% Fill, Aqua Gradient
<div class ="barBg">
    <div class ="bar hundred aquaGradient">
	   <div class ="barFill"></div>
    </div>
</div>
90% Fill, Rose Gradient
<div class ="barBg">
    <div class ="bar ninety roseGradient">
	   <div class ="barFill"></div>
    </div>
</div>
70% Fill, Madras
<div class ="barBg">
    <div class ="bar seventy madras">
	   <div class ="barFill"></div>
    </div>
</div>
60% Fill, Cornflower Blue
<div class ="barBg">
    <div class ="bar sixty cornflowerblue">
	   <div class ="barFill"></div>
    </div>
</div>
40% Fill, Carrot
<div class ="barBg">
    <div class ="bar forty carrot">
	   <div class ="barFill"></div>
    </div>
</div><center>
<a href="http://www.midorinco.ir" target="_blank">منتشر شده در تالار میدوری</a></center>
</div>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196

]]> نوار پیشرفت پروژه ی رنگین و متحرک با CSS3
نوارهای نمایش دهنده ی پیشرفت پروژه یا کار در سایت ها بسیار استفاده می شوند . طرحی متحرک برای دوستان قرار می دهم که به رنگ های دلخواه می توانید استفاده کنید . این نوارها فقط با کدهای CSS3 درست شده اند . نخست نمونه های زیر را ببینید و در صورت علاقه از کدهای داده شده در زیر استفاده کنید . تغییرات بعهده ی شماست .


کد HTML: 
<!DOCTYPE html>
<head>
    <title>Animated Bar</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<style type="text/css">
* {
    font-family:source-sans-pro;
    font-size: 16px;
    color:#282828;
}
.wrapper {
    position:relative;
    width:80%;
    margin:20px auto;
}
/* Defining the animation */
@-webkit-keyframes progress
{
    to {background-position: 30px 0;}
}
@-moz-keyframes progress
{
  to {background-position: 30px 0;}
}
@keyframes progress
{
  to {background-position: 30px 0;}
}
/* Set the base of our loader */
.barBg {
    background:#282828;
    width:100%;
    height:15px;
    border:10px solid #282828;
    border-radius: 20px;
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    box-shadow: 0px 5px 17px rgba(40, 40, 40, 0.5);
    margin-bottom:30px;
}
.bar {
    background: #7aff32;
    height:30px;
    height: 15px;
    border-radius: 12px;
    -moz-border-radius: 12px;
    -webkit-border-radius: 10px;
}
/* Set the linear gradient tile for the animation and the playback */
.barFill {
    width: 100%;
    height: 15px;
    border-radius: 20px;
    -webkit-animation: progress 1s linear infinite;
    -moz-animation: progress 1s linear infinite;
    animation: progress 1s linear infinite;
    background-repeat: repeat-x;
    background-size: 30px 30px;
    background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, 
transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
    background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, 
transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
}
/* Here's some predefined widths to control the fill. Add these classes to the "bar" div */
.ten {
    width: 10%; /* Sets the progress to 10% */
}
.twenty {
    width: 20%; /* Sets the progress to 20% */
}
.thirty {
    width: 30%; /* Sets the progress to 30% */
}
.forty {
    width: 40%; /* Sets the progress to 40% */
}
.fifty {
    width: 50%; /* Sets the progress to 50% */
}
.sixty {
    width: 60%; /* Sets the progress to 60% */
}
.seventy {
    width: 70%; /* Sets the progress to 70% */
}
.eighty {
    width: 80%; /* Sets the progress to 80% */
}
.ninety {
    width: 90%; /* Sets the progress to 90% */
}
.hundred {
    width: 100%; /* Sets the progress to 100% */
}
/* Some colour classes to get you started. Add the colour class to the "bar" div */
.aquaGradient{
    background: -moz-linear-gradient(top,  #7aff32 0%, #54a6e5 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7aff32), color-stop(100%,#54a6e5));
    background: -webkit-linear-gradient(top,  #7aff32 0%,#54a6e5 100%);
    background: -o-linear-gradient(top,  #7aff32 0%,#54a6e5 100%);
    background: -ms-linear-gradient(top,  #7aff32 0%,#54a6e5 100%);
    background: linear-gradient(to bottom,  #7aff32 0%,#54a6e5 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7aff32', endColorstr='#54a6e5',GradientType=0 );
}
.roseGradient {
    background: #ff3232;
    background: -moz-linear-gradient(top,  #ff3232 0%, #ed89ff 47%, #ff8989 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff3232), color-stop(47%,#ed89ff), color-stop(100%,#ff8989));
    background: -webkit-linear-gradient(top,  #ff3232 0%,#ed89ff 47%,#ff8989 100%);
    background: -o-linear-gradient(top,  #ff3232 0%,#ed89ff 47%,#ff8989 100%);
    background: -ms-linear-gradient(top,  #ff3232 0%,#ed89ff 47%,#ff8989 100%);
    background: linear-gradient(to bottom,  #ff3232 0%,#ed89ff 47%,#ff8989 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff3232', endColorstr='#ff8989',GradientType=0 );
}
.madras { /* Credit to Divya Manian via http://lea.verou.me/css3patterns/#madras */
    background-color: hsl(34, 53%, 82%);
    background-image: -webkit-repeating-linear-gradient(45deg, transparent 5px, hsla(197, 62%, 11%, 0.5) 5px, hsla(197, 62%, 11%, 0.5) 10px,
	 hsla(5, 53%, 63%, 0) 10px, hsla(5, 53%, 63%, 0) 35px, hsla(5, 53%, 63%, 0.5) 35px, hsla(5, 53%, 63%, 0.5) 40px,
	 hsla(197, 62%, 11%, 0.5) 40px, hsla(197, 62%, 11%, 0.5) 50px, hsla(197, 62%, 11%, 0) 50px, hsla(197, 62%, 11%, 0) 60px,
	 hsla(5, 53%, 63%, 0.5) 60px, hsla(5, 53%, 63%, 0.5) 70px, hsla(35, 91%, 65%, 0.5) 70px, hsla(35, 91%, 65%, 0.5) 80px,
	 hsla(35, 91%, 65%, 0) 80px, hsla(35, 91%, 65%, 0) 90px, hsla(5, 53%, 63%, 0.5) 90px, hsla(5, 53%, 63%, 0.5) 110px,
	 hsla(5, 53%, 63%, 0) 110px, hsla(5, 53%, 63%, 0) 120px, hsla(197, 62%, 11%, 0.5) 120px, hsla(197, 62%, 11%, 0.5) 140px
	 ),
    -webkit-repeating-linear-gradient(-45deg, transparent 5px, hsla(197, 62%, 11%, 0.5) 5px, hsla(197, 62%, 11%, 0.5) 10px,
	 hsla(5, 53%, 63%, 0) 10px, hsla(5, 53%, 63%, 0) 35px, hsla(5, 53%, 63%, 0.5) 35px, hsla(5, 53%, 63%, 0.5) 40px,
	 hsla(197, 62%, 11%, 0.5) 40px, hsla(197, 62%, 11%, 0.5) 50px, hsla(197, 62%, 11%, 0) 50px, hsla(197, 62%, 11%, 0) 60px,
	 hsla(5, 53%, 63%, 0.5) 60px, hsla(5, 53%, 63%, 0.5) 70px, hsla(35, 91%, 65%, 0.5) 70px, hsla(35, 91%, 65%, 0.5) 80px,
	 hsla(35, 91%, 65%, 0) 80px, hsla(35, 91%, 65%, 0) 90px, hsla(5, 53%, 63%, 0.5) 90px, hsla(5, 53%, 63%, 0.5) 110px,
	 hsla(5, 53%, 63%, 0) 110px, hsla(5, 53%, 63%, 0) 140px, hsla(197, 62%, 11%, 0.5) 140px, hsla(197, 62%, 11%, 0.5) 160px
    );; background-color: hsl(34, 53%, 82%);
    background-image: -webkit-repeating-linear-gradient(45deg, transparent 5px, hsla(197, 62%, 11%, 0.5) 5px, hsla(197, 62%, 11%, 0.5) 10px,
	 hsla(5, 53%, 63%, 0) 10px, hsla(5, 53%, 63%, 0) 35px, hsla(5, 53%, 63%, 0.5) 35px, hsla(5, 53%, 63%, 0.5) 40px,
	 hsla(197, 62%, 11%, 0.5) 40px, hsla(197, 62%, 11%, 0.5) 50px, hsla(197, 62%, 11%, 0) 50px, hsla(197, 62%, 11%, 0) 60px,
	 hsla(5, 53%, 63%, 0.5) 60px, hsla(5, 53%, 63%, 0.5) 70px, hsla(35, 91%, 65%, 0.5) 70px, hsla(35, 91%, 65%, 0.5) 80px,
	 hsla(35, 91%, 65%, 0) 80px, hsla(35, 91%, 65%, 0) 90px, hsla(5, 53%, 63%, 0.5) 90px, hsla(5, 53%, 63%, 0.5) 110px,
	 hsla(5, 53%, 63%, 0) 110px, hsla(5, 53%, 63%, 0) 120px, hsla(197, 62%, 11%, 0.5) 120px, hsla(197, 62%, 11%, 0.5) 140px
	 ),
    -webkit-repeating-linear-gradient(-45deg, transparent 5px, hsla(197, 62%, 11%, 0.5) 5px, hsla(197, 62%, 11%, 0.5) 10px,
	 hsla(5, 53%, 63%, 0) 10px, hsla(5, 53%, 63%, 0) 35px, hsla(5, 53%, 63%, 0.5) 35px, hsla(5, 53%, 63%, 0.5) 40px,
	 hsla(197, 62%, 11%, 0.5) 40px, hsla(197, 62%, 11%, 0.5) 50px, hsla(197, 62%, 11%, 0) 50px, hsla(197, 62%, 11%, 0) 60px,
	 hsla(5, 53%, 63%, 0.5) 60px, hsla(5, 53%, 63%, 0.5) 70px, hsla(35, 91%, 65%, 0.5) 70px, hsla(35, 91%, 65%, 0.5) 80px,
	 hsla(35, 91%, 65%, 0) 80px, hsla(35, 91%, 65%, 0) 90px, hsla(5, 53%, 63%, 0.5) 90px, hsla(5, 53%, 63%, 0.5) 110px,
	 hsla(5, 53%, 63%, 0) 110px, hsla(5, 53%, 63%, 0) 140px, hsla(197, 62%, 11%, 0.5) 140px, hsla(197, 62%, 11%, 0.5) 160px
    );
}
.cornflowerblue {
    background-color: CornflowerBlue;
    box-shadow:inset 0px 0px 6px 2px rgba(255,255,255,.3);
}
.carrot {
    background: #f2a130;
    background: -moz-linear-gradient(-45deg,  #f2a130 0%, #e5bd6e 100%);
    background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#f2a130), color-stop(100%,#e5bd6e));
    background: -webkit-linear-gradient(-45deg,  #f2a130 0%,#e5bd6e 100%);
    background: -o-linear-gradient(-45deg,  #f2a130 0%,#e5bd6e 100%);
    background: -ms-linear-gradient(-45deg,  #f2a130 0%,#e5bd6e 100%);
    background: linear-gradient(135deg,  #f2a130 0%,#e5bd6e 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2a130', endColorstr='#e5bd6e',GradientType=1 );
}
</style>
<body>
<div class ="wrapper">
100% Fill, Aqua Gradient
<div class ="barBg">
    <div class ="bar hundred aquaGradient">
	   <div class ="barFill"></div>
    </div>
</div>
90% Fill, Rose Gradient
<div class ="barBg">
    <div class ="bar ninety roseGradient">
	   <div class ="barFill"></div>
    </div>
</div>
70% Fill, Madras
<div class ="barBg">
    <div class ="bar seventy madras">
	   <div class ="barFill"></div>
    </div>
</div>
60% Fill, Cornflower Blue
<div class ="barBg">
    <div class ="bar sixty cornflowerblue">
	   <div class ="barFill"></div>
    </div>
</div>
40% Fill, Carrot
<div class ="barBg">
    <div class ="bar forty carrot">
	   <div class ="barFill"></div>
    </div>
</div><center>
<a href="http://www.midorinco.ir" target="_blank">منتشر شده در تالار میدوری</a></center>
</div>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196

]]> <![CDATA[ده مدل منوی خواستنی برای سایت ها با CSS3]]> http://www.midorinco.ir/showthread.php?tid=1430 Sat, 01 Nov 2014 21:30:47 +0000 http://www.midorinco.ir/showthread.php?tid=1430 ده مدل منوی خواستنی برای سایت ها با CSS3
ده مدل منوی بسیار زیبا و خواستنی برای سایت ها . این منوها فقط با کدهای پرقدرت CSS3 و فونت های تصویری ایجاد شده اند . نخست نمونه ی زنده ی زیر را ببینید و در صورت علاقه به داشتن آنها فایل فشرده ی پیوستی را دانلود و استفاده کنید . تغییرات بعهده ی شماست .



CreativeCSS3AnimationMenus.rar
 ارسال کننده فايل download
 نوع فايل .rar
 اندازه 214.28 KB
 دفعات دانلود 603 بار
 گيرنده(های) فايل
 زمان آخرین دانلود 1769704271
 یک سخنِ ناب

]]> ده مدل منوی خواستنی برای سایت ها با CSS3
ده مدل منوی بسیار زیبا و خواستنی برای سایت ها . این منوها فقط با کدهای پرقدرت CSS3 و فونت های تصویری ایجاد شده اند . نخست نمونه ی زنده ی زیر را ببینید و در صورت علاقه به داشتن آنها فایل فشرده ی پیوستی را دانلود و استفاده کنید . تغییرات بعهده ی شماست .



CreativeCSS3AnimationMenus.rar
 ارسال کننده فايل download
 نوع فايل .rar
 اندازه 214.28 KB
 دفعات دانلود 603 بار
 گيرنده(های) فايل
 زمان آخرین دانلود 1769704271
 یک سخنِ ناب

]]> <![CDATA[کادر متحرک با استفاده از CSS3]]> http://www.midorinco.ir/showthread.php?tid=1414 Sat, 25 Oct 2014 10:02:30 +0000 http://www.midorinco.ir/showthread.php?tid=1414 کادر متحرک با استفاده از CSS3
برای متن ها و یا تصویرهای خودتان با استفاده از چند خط کدنویسی ساده کادری متحرک درست کنید . نمونه ی زنده زیر را ببینید و در صورت علاقه مند شدن از کدهای داده شده استفاده کنید . تغییرات بعهده ی شماست .


کد HTML: 
<!DOCTYPE html>
<html>
<head>
<style> 
#myDIV {
    width: 300px;
    height: 200px;
    border: 1px solid black;
    -webkit-animation: mymove 5s infinite; /* Chrome, Safari, Opera */
    animation: mymove 5s infinite;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes mymove {
    50% {border-radius: 50px;}
}

/* Standard syntax */
@keyframes mymove {
    50% {border-radius: 50px;}
}
</style>
</head>
<body>
<center>
<p>تغییر گردی کادر از صفر تا پنجاه پیکسل</p>
<div id="myDIV"><br><br><center><b>متحرک سازی با سی اس اس</b></center></div>

<p>منتشر شده در تالار میدوری</p>
<p><b>توجه :</b>متحرک سازی با سی اس اس در اکسپلورر نگارش 9 به پایین کارایی ندارد</p>
</center>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

]]> کادر متحرک با استفاده از CSS3
برای متن ها و یا تصویرهای خودتان با استفاده از چند خط کدنویسی ساده کادری متحرک درست کنید . نمونه ی زنده زیر را ببینید و در صورت علاقه مند شدن از کدهای داده شده استفاده کنید . تغییرات بعهده ی شماست .


کد HTML: 
<!DOCTYPE html>
<html>
<head>
<style> 
#myDIV {
    width: 300px;
    height: 200px;
    border: 1px solid black;
    -webkit-animation: mymove 5s infinite; /* Chrome, Safari, Opera */
    animation: mymove 5s infinite;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes mymove {
    50% {border-radius: 50px;}
}

/* Standard syntax */
@keyframes mymove {
    50% {border-radius: 50px;}
}
</style>
</head>
<body>
<center>
<p>تغییر گردی کادر از صفر تا پنجاه پیکسل</p>
<div id="myDIV"><br><br><center><b>متحرک سازی با سی اس اس</b></center></div>

<p>منتشر شده در تالار میدوری</p>
<p><b>توجه :</b>متحرک سازی با سی اس اس در اکسپلورر نگارش 9 به پایین کارایی ندارد</p>
</center>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

]]> <![CDATA[منوهایی زیبا برای سایت ها از آینده با CSS3 (مدل هفتاد و یکم)]]> http://www.midorinco.ir/showthread.php?tid=1408 Wed, 22 Oct 2014 11:14:59 +0000 http://www.midorinco.ir/showthread.php?tid=1408 منوهایی زیبا برای سایت ها از آینده با CSS3 (مدل هفتاد و یکم)منو های زیبا و ابتکاری برای استفاده در سایت ها مدل هایی که بسیار ابتکاری هستند و رویایی و فقط با استفاده از کد های CSS3 . برای استفاده ابتدا نمونه ی زنده ی زیر را با مرورگرهای گوناگون ببینید و سپس در صورت علاقه مند شدن , فایل پیوستی را دانلود و استفاده کنید . تغییرات بعهده ی شماست . Cool


]]> منوهایی زیبا برای سایت ها از آینده با CSS3 (مدل هفتاد و یکم)منو های زیبا و ابتکاری برای استفاده در سایت ها مدل هایی که بسیار ابتکاری هستند و رویایی و فقط با استفاده از کد های CSS3 . برای استفاده ابتدا نمونه ی زنده ی زیر را با مرورگرهای گوناگون ببینید و سپس در صورت علاقه مند شدن , فایل پیوستی را دانلود و استفاده کنید . تغییرات بعهده ی شماست . Cool


]]> <![CDATA[تولتیپ های زیبای رنگین و تصویری یا CSS]]> http://www.midorinco.ir/showthread.php?tid=1405 Thu, 16 Oct 2014 14:48:18 +0000 http://www.midorinco.ir/showthread.php?tid=1405 تولتیپ های زیبای رنگین و تصویری یا CSS
تولتیپ های زیبا و ابتکاری با استفاده از رنگ و تصویر می توانند جلوه ی زیباتری به سایت ها بدهند . نمونه ی زیر را ببینید (اشاره گر را روی نوشته ها ببرید) . در صورت علاقه مند شدن و استفاده و یا بررسی کدهای این پروژه را قرار داده ام و تصویرهای استفاده شده هم به پیوست هستند . تغییرات بعهده ی شماست .




کد HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
	   <meta http-equiv="content-type" content="text/html; charset=utf-8" />
	   <title>CSS3 تول تیپ های زیبا و تصویری با</title>
	   <style type="text/css">
	   .tooltip {
		  border-bottom: 1px dotted #000000; color: #000000; outline: none;
		  cursor: help; text-decoration: none;
		  position: relative;
	   }
	   .tooltip span {
		  margin-left: -999em;
		  position: absolute;
	   }
	   .tooltip:hover span {
		  border-radius: 5px 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;
		  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 5px 5px rgba(0, 0, 0, 0.1); 
-moz-box-shadow: 5px 5px rgba(0, 0, 0, 0.1);
		  font-family: Calibri, Tahoma, Geneva, sans-serif;
		  position: absolute; left: 1em; top: 2em; z-index: 99;
		  margin-left: 0; width: 250px;
	   }
	   .tooltip:hover img {
		  border: 0; margin: -10px 0 0 -55px;
		  float: left; position: absolute;
	   }
	   .tooltip:hover em {
		  font-family: Candara, Tahoma, Geneva, sans-serif; font-size: 1.2em; font-weight: bold;
		  display: block; padding: 0.2em 0 0.6em 0;
	   }
	   .classic { padding: 0.8em 1em; }
	   .custom { padding: 0.5em 0.8em 0.8em 2em; }
	   * html a:hover { background: transparent; }
	   .classic {background: #FFFFAA; border: 1px solid #FFAD33; }
	   .critical { background: #FFCCAA; border: 1px solid #FF3334;    }
	   .help { background: #9FDAEE; border: 1px solid #2BB0D7;    }
	   .info { background: #9FDAEE; border: 1px solid #2BB0D7;    }
	   .warning { background: #FFFFAA; border: 1px solid #FFAD33; }
	   </style>
    </head>
    <body><center>
<h1>CSS3 تول تیپ های زیبا و تصویری با</h1>
<p>نمونه های تول تیپ</p></center><br /><p style="text-align:center">
<a class ="tooltip" href="#">نمونه ی نخست<span class ="classic">نمونه ی نخست : ساده و با رنگ پس زمینه و کادر رنگی</span>
</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a class ="tooltip" href="#">نمونه ی دوم<span class ="custom critical">
<img src="Critical.png" alt="Error" height="48" width="48" /><em>نمونه ی دوم</em>با تصویر و زیبا سازی</span>
</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a class ="tooltip" href="#">نمونه ی سوم<span class ="custom help">
<img src="Help.png" alt="Help" height="48" width="48" /><em>نمونه ی سوم</em>با تصویر و زیبا سازی</span>
</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a class ="tooltip" href="#">نمونه ی چهارم<span class ="custom info">
<img src="Info.png" alt="Information" height="48" width="48" /><em>نمونه ی چهارم</em>با تصویر و زیبا سازی</span>
</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a class ="tooltip" href="#">نمونه ی پنجم<span class ="custom warning">
<img src="Warning.png" alt="Warning" height="48" width="48" /><em>نمونه ی پنجم</em>با تصویر و زیبا سازی</span>
</a></p><center><p>و</p><p>نمونه های بیشتر با تغییرات و سلیقه ی زیبای شما انجام می شود</p><p>منتشر شده در تالار میدوری</p>
</center></body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56

==========
تصویرهای استفاده شده در این پروژه

css-tooltips.rar
 ارسال کننده فايل download
 نوع فايل .rar
 اندازه 17.01 KB
 دفعات دانلود 512 بار
 گيرنده(های) فايل
 زمان آخرین دانلود 1764903310
 یک سخنِ ناب

]]> تولتیپ های زیبای رنگین و تصویری یا CSS
تولتیپ های زیبا و ابتکاری با استفاده از رنگ و تصویر می توانند جلوه ی زیباتری به سایت ها بدهند . نمونه ی زیر را ببینید (اشاره گر را روی نوشته ها ببرید) . در صورت علاقه مند شدن و استفاده و یا بررسی کدهای این پروژه را قرار داده ام و تصویرهای استفاده شده هم به پیوست هستند . تغییرات بعهده ی شماست .




کد HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
	   <meta http-equiv="content-type" content="text/html; charset=utf-8" />
	   <title>CSS3 تول تیپ های زیبا و تصویری با</title>
	   <style type="text/css">
	   .tooltip {
		  border-bottom: 1px dotted #000000; color: #000000; outline: none;
		  cursor: help; text-decoration: none;
		  position: relative;
	   }
	   .tooltip span {
		  margin-left: -999em;
		  position: absolute;
	   }
	   .tooltip:hover span {
		  border-radius: 5px 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;
		  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 5px 5px rgba(0, 0, 0, 0.1); 
-moz-box-shadow: 5px 5px rgba(0, 0, 0, 0.1);
		  font-family: Calibri, Tahoma, Geneva, sans-serif;
		  position: absolute; left: 1em; top: 2em; z-index: 99;
		  margin-left: 0; width: 250px;
	   }
	   .tooltip:hover img {
		  border: 0; margin: -10px 0 0 -55px;
		  float: left; position: absolute;
	   }
	   .tooltip:hover em {
		  font-family: Candara, Tahoma, Geneva, sans-serif; font-size: 1.2em; font-weight: bold;
		  display: block; padding: 0.2em 0 0.6em 0;
	   }
	   .classic { padding: 0.8em 1em; }
	   .custom { padding: 0.5em 0.8em 0.8em 2em; }
	   * html a:hover { background: transparent; }
	   .classic {background: #FFFFAA; border: 1px solid #FFAD33; }
	   .critical { background: #FFCCAA; border: 1px solid #FF3334;    }
	   .help { background: #9FDAEE; border: 1px solid #2BB0D7;    }
	   .info { background: #9FDAEE; border: 1px solid #2BB0D7;    }
	   .warning { background: #FFFFAA; border: 1px solid #FFAD33; }
	   </style>
    </head>
    <body><center>
<h1>CSS3 تول تیپ های زیبا و تصویری با</h1>
<p>نمونه های تول تیپ</p></center><br /><p style="text-align:center">
<a class ="tooltip" href="#">نمونه ی نخست<span class ="classic">نمونه ی نخست : ساده و با رنگ پس زمینه و کادر رنگی</span>
</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a class ="tooltip" href="#">نمونه ی دوم<span class ="custom critical">
<img src="Critical.png" alt="Error" height="48" width="48" /><em>نمونه ی دوم</em>با تصویر و زیبا سازی</span>
</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a class ="tooltip" href="#">نمونه ی سوم<span class ="custom help">
<img src="Help.png" alt="Help" height="48" width="48" /><em>نمونه ی سوم</em>با تصویر و زیبا سازی</span>
</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a class ="tooltip" href="#">نمونه ی چهارم<span class ="custom info">
<img src="Info.png" alt="Information" height="48" width="48" /><em>نمونه ی چهارم</em>با تصویر و زیبا سازی</span>
</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a class ="tooltip" href="#">نمونه ی پنجم<span class ="custom warning">
<img src="Warning.png" alt="Warning" height="48" width="48" /><em>نمونه ی پنجم</em>با تصویر و زیبا سازی</span>
</a></p><center><p>و</p><p>نمونه های بیشتر با تغییرات و سلیقه ی زیبای شما انجام می شود</p><p>منتشر شده در تالار میدوری</p>
</center></body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56

==========
تصویرهای استفاده شده در این پروژه

css-tooltips.rar
 ارسال کننده فايل download
 نوع فايل .rar
 اندازه 17.01 KB
 دفعات دانلود 512 بار
 گيرنده(های) فايل
 زمان آخرین دانلود 1764903310
 یک سخنِ ناب

]]>