纯CSS创设深花青MacBook Air(完整版)

2015/07/13 · CSS ·
CSS,
MacBook

初稿出处: Myvim   

写在前头的前方
前几日上课了协调用纯CSS绘制黑色MacBook
Air的事无巨细经过,由于篇幅较长就分了两片段介绍,后天本人将其合而为一方便大家查看,该作品用马克down+一丢丢的html编辑。

写在最近
近年来自个儿用CSS绘制了三个赫色的MacBook
Air,前几日把它从Computer硬盘深处挖了出去,作者把作者的思绪和想方设法写下去和友人们共享分享。先把最后的意义给大家。

银河国际平台官方网站 1
First 注:假诺图片显示过大未有完全浮现,请F5或Ctrl+F5。

Double 注:本文为Markdown+少量html编辑。

Triple 注:祝愿小朋侪们每日都过得笑容可掬。

那实质上是二个半产品,键盘上的别的Logo和文字都还不曾加,Logo的话能够用font-face,待笔者找着特出的书体Logo网站链接后给大家补全,同期也招待小伙伴们捣腾。

零、第零步
此间运用了CSS的before、after伪成分、渐变gradient、阴影、nth-child选拔器等相关内容,阴影和潜移暗化效果从图纸上可能看的不太明了,小同伙们得以去地方的Codepen上查看,文章的末段笔者会给出整个源代码,有意思味的可以和睦随便改换完善。

Ok,早先所行无忌地进去。

第一介绍一下绘制的布局。

对于键盘,正是白手起家了二个冬季列表ul,然后写上多少个li就能够,其余的用多少个div包裹就能够,先给出HTML结构:

XHTML

<div class=”board”> <div class=”blackbar”> </div>
<div class=”keyboard”> <ul> </ul> </div> <div
class=”touch”> </div> </div>

1
2
3
4
5
6
7
8
9
10
11
12
13
<div class="board">
<div class="blackbar">
 
</div>
<div class="keyboard">
<ul>
 
</ul>
</div>
<div class="touch">
 
</div>
</div>

4个div加上2个伪成分,总共多个部分组成整个MacBook Air。board是MacBook
Air的底座,blackbar是荧屏的不得了金红旋转轴,keyboard是键盘,touch是触控板;board:before是下面的盖子,border-bottom是盖子上面包车型地铁非凡橄榄黑细长条。Ok,那六局地构成了全体MacBook
Air。

没图笔者说个怎么着:

银河国际平台官方网站 2
接下去,小编遵照作者的绘图顺序一步步来介绍。口渴的朋侪能够先去沏杯茶。

一、第一步
先给出HTML,上面是一段十分短十分长可是却没什么商讨价值的冬季列表,让滚轮飞起来呢:

XHTML

<div class=”board”> <div class=”blackbar”> </div>
<div class=”keyboard”> <ul> <li></li>
<li></li> <li></li> <li></li>
<li></li> <li></li> <li></li>
<li></li> <li></li> <li></li>
<li></li> <li></li> <li></li>
<li></li> <li></li>
<li><span>!</span><span>1</span></li>
<li><span>@</span><span>2</span></li>
<li><span>#</span><span>3</span></li>
<li><span>$</span><span>4</span></li>
<li><span>%</span><span>5</span></li>
<li><span>^</span><span>6</span></li>
<li><span>&</span><span>7</span></li>
<li><span>*</span><span>8</span></li>
<li><span>(</span><span>9</span></li>
<li><span>)</span><span>0</span></li>
<li><span>—</span><span>-</span></li>
<li><span>+</span><span>=</span></li>
<li></li> <li></li> <li>Q</li>
<li>W</li> <li>E</li> <li>R</li>
<li>T</li> <li>Y</li> <li>U</li>
<li>I</li> <li>O</li> <li>P</li>
<li></li> <li></li> <li></li>
<li></li> <li>A</li> <li>S</li>
<li>D</li> <li>F</li> <li>G</li>
<li>H</li> <li>J</li> <li>K</li>
<li>L</li> <li></li> <li></li>
<li></li> <li></li> <li>Z</li>
<li>X</li> <li>C</li> <li>V</li>
<li>B</li> <li>N</li> <li>M</li>
<li></li> <li></li> <li></li>
<li></li> <li></li> <li></li>
<li></li> <li></li> <li>By Pure CSS.To Be
Continued.</li> <li></li> <li></li>
<li></li> <li></li> <li></li>
<li></li> </ul> </div> <div class=”touch”>
</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
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
<div class="board">
<div class="blackbar">
 
</div>
<div class="keyboard">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li><span>!</span><span>1</span></li>
<li><span>@</span><span>2</span></li>
<li><span>#</span><span>3</span></li>
<li><span>$</span><span>4</span></li>
<li><span>%</span><span>5</span></li>
<li><span>^</span><span>6</span></li>
<li><span>&</span><span>7</span></li>
<li><span>*</span><span>8</span></li>
<li><span>(</span><span>9</span></li>
<li><span>)</span><span>0</span></li>
<li><span>—</span><span>-</span></li>
<li><span>+</span><span>=</span></li>
<li></li>
<li></li>
<li>Q</li>
<li>W</li>
<li>E</li>
<li>R</li>
<li>T</li>
<li>Y</li>
<li>U</li>
<li>I</li>
<li>O</li>
<li>P</li>
<li></li>
<li></li>
<li></li>
<li></li>
<li>A</li>
<li>S</li>
<li>D</li>
<li>F</li>
<li>G</li>
<li>H</li>
<li>J</li>
<li>K</li>
<li>L</li>
<li></li>
<li></li>
<li></li>
<li></li>
<li>Z</li>
<li>X</li>
<li>C</li>
<li>V</li>
<li>B</li>
<li>N</li>
<li>M</li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li>By Pure CSS.To Be Continued.</li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div class="touch">
 
</div>
</div>

键盘按钮为多少个li,个中开关上有三个暗记的作者用八个span包了四起,像这么:

XHTML

<li><span>!</span><span>1</span></li>

1
<li><span>!</span><span>1</span></li>

因为它们最后式一上一下的69体位,用span包裹住便于分别摆放它们的职责。

先绘制一个600*450的div,并将board居中,给贰个梅红的color,这里用的是rgb(210,210,210),用border-radius绘制出八个20px的圆角,用box-shadow给出三个鲜黄的黑影,这里用的青莲是rgb(160,160,160),小同伙们能够协调选用相符的颜色,最后从div的左下角到右上角以60度加多叁个线性渐变linear-gradient,是从血牙红初阶从百分之二十出过渡到牡蛎白。因为今后的div会用到相对定位,所以在此先把其父成分board定位为relative。

总体的代码及效用如下:

CSS

.board{ margin: 0 auto; padding: 0 auto; width: 600px; height: 450px;
margin-top: 50px; background: rgb(210,210,210); border-radius: 20px;
position: relative; box-shadow: 0px 5px 6px rgb(160,160,160);
background:-webkit-linear-gradient(60deg,rgba(250,250,250,1)
25%,rgba(210,210,210,1)); }

1
2
3
4
5
6
7
8
9
10
11
12
.board{
margin: 0 auto;
padding: 0 auto;
width: 600px;
height: 450px;
margin-top: 50px;
background: rgb(210,210,210);
border-radius: 20px;
position: relative;
box-shadow: 0px 5px 6px rgb(160,160,160);
background:-webkit-linear-gradient(60deg,rgba(250,250,250,1) 25%,rgba(210,210,210,1));
}

银河国际平台官方网站 3

那样,多少个有影子和线性渐变过渡效果的面板就率先做到了。

二、第二步
接下去本身要画台式机盖子,用的是伪成分board:before。

因为盖子是翻起来的,所以从上往下看是二个窄边。把board:before填充为780px*20px的div,背景颜色为深绿。

实现及效果与利益如下:

CSS

.board:before{ content: ”; display: block; width: 780px; height: 20px;
background: rgb(210,210,210); }

1
2
3
4
5
6
7
.board:before{
content: ”;
display: block;
width: 780px;
height: 20px;
background: rgb(210,210,210);
}

银河国际平台官方网站 4
下一场调一下职责,board:before定位为相对定位,board宽600px,盖子宽780px,所以left=-(780-600)/2=-90px,top为board:before的高20px,顺带做出二个大弧形的成效,水平半径取大学一年级些,垂直半径取小一些,like
this:

CSS

border-top-left-radius: 390px 18px; border-top-right-radius: 390px 18px;

1
2
border-top-left-radius: 390px 18px;
border-top-right-radius: 390px 18px;

对border-radius不太熟稔的伴儿能够查看从前的《CSS3小分队——进击的border-radius》。

那会儿的意义如下:

银河国际平台官方网站 5

有那么个野趣了,为了做出立体的作用,大家给盖子从上到下加个渐变的连接效果:

CSS

background:-webkit-linear-gradient(top,rgb(210,210,210)
50%,rgb(255,255,255));

1
background:-webkit-linear-gradient(top,rgb(210,210,210) 50%,rgb(255,255,255));

再顺带把显示屏下的那条小黑条加上,一句话异常的粗略:

CSS

border-bottom: 2px solid rgb(0,0,0);

1
border-bottom: 2px solid rgb(0,0,0);

探问效果先:

银河国际平台官方网站 6

有未有认为有个别地点有个别违和?放大看一下那边:

银河国际平台官方网站 7

来个越发菊部的:

银河国际平台官方网站 8

对,就是那个小角处,给点功效:

CSS

border-bottom: 2px solid rgb(0,0,0);

1
border-bottom: 2px solid rgb(0,0,0);

再看看效果:

银河国际平台官方网站 9

这般黑边那也许有了小的细腻弧度过渡,显得尤为自然。

依靠这一步的完好代码和职能:

CSS

.board:before{ content: ”; display: block; width: 780px; height: 20px;
background: rgb(210,210,210); border-radius: 0px 0px 3px 3px;
border-top-left-radius: 390px 18px; border-top-right-radius: 390px 18px;
position: absolute; top:-20px; left: -90px; border-bottom: 2px solid
rgb(0,0,0); background:-webkit-linear-gradient(top,rgb(210,210,210)
50%,rgb(255,255,255)); }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.board:before{
content: ”;
display: block;
width: 780px;
height: 20px;
background: rgb(210,210,210);
border-radius: 0px 0px 3px 3px;
border-top-left-radius: 390px 18px;
border-top-right-radius: 390px 18px;
position: absolute;
top:-20px;
left: -90px;
border-bottom: 2px solid rgb(0,0,0);
background:-webkit-linear-gradient(top,rgb(210,210,210) 50%,rgb(255,255,255));
}

银河国际平台官方网站 10

三、第三步
这一步咱们来做荧屏旋转轴,也等于显示屏下方的那条霁青矩形blackbar。

平等先安装width和height,absolute定位,居中突显,移动的相距能够参谋下边的不二等秘书籍小算一下就足以了,加上2px的圆角,为了显得出旋转轴立体的水道,大家给blackbar类的底下框和左侧框加上2px的浅米灰实线,同有时间给blackbar三个从上到下的渐变,中间显示出窄窄的亮丽的反革命就能够,颜色和衔接的岗位小同伙们方可自行了断,oops,是机关把握。

金玉满堂和效应:

CSS

.blackbar{ width: 450px; height: 18px; position: absolute; left: 75px;
border-radius: 2px; border-bottom: 2px solid #ffffff; /* 小白边 */
border-right: 2px solid #ffffff; background:
-webkit-linear-gradient(top,rgb(30,30,30) ,rgb(60,60,60)
35%,rgb(100,100,100) 50%,rgb(30,30,30) 65%); background:
-linear-gradient(top,rgb(30,30,30) ,rgb(60,60,60) 35%,rgb(100,100,100)
50%,rgb(30,30,30) 65%); }

1
2
3
4
5
6
7
8
9
10
11
.blackbar{
width: 450px;
height: 18px;
position: absolute;
left: 75px;
border-radius: 2px;
border-bottom: 2px solid #ffffff; /* 小白边 */
border-right: 2px solid #ffffff;
background: -webkit-linear-gradient(top,rgb(30,30,30) ,rgb(60,60,60) 35%,rgb(100,100,100) 50%,rgb(30,30,30) 65%);
background: -linear-gradient(top,rgb(30,30,30) ,rgb(60,60,60) 35%,rgb(100,100,100) 50%,rgb(30,30,30) 65%);
}

银河国际平台官方网站 11

四、第四步
接下去正是MacBook
Air最醒目标有的了,那就是键盘部分,为啥明明呢,因为它占的地儿最大吧哈哈哈(倒霉笑的事也要大笑三声)。

在画键盘在此之前呢,小同伙们最好先算好一切键盘区域的深浅,各样按钮的轻重和排列,否则到时候只可以一丝丝重复调,很麻烦。好了,咱先把键盘区域画下来呢。

价值观步骤,设置宽高,相对定位,然后设置left、top居中,勾勒出1px solid
颜色为rgb(180,180,180)的border,8px的圆角,暗褐的背景颜色;

落到实处和功用如下:

CSS

.keyboard{ position: absolute; width:530px; height: 216px; left: 35px;
top: 35px; border: 1px solid rgb(180,180,180); border-radius: 8px;
background:rgba(250,250,250,1); }

1
2
3
4
5
6
7
8
9
10
.keyboard{
position: absolute;
width:530px;
height: 216px;
left: 35px;
top: 35px;
border: 1px solid rgb(180,180,180);
border-radius: 8px;
background:rgba(250,250,250,1);
}

银河国际平台官方网站 12

为了显得出立体的沟槽感,阴影又该出来了。大家用box-shadow给keyboard的四条边框增加四条内部inset阴影,关于box-shadow现在有机缘再讲,先把贯彻和效果与利益贴上:

CSS

box-shadow:2px 0px 2px rgb(180,180,180) inset, 0px 3px 3px
rgb(180,180,180) inset, -5px -0px 1px rgb(255,255,255) inset, 0px -3px
3px rgb(180,180,180) inset;

1
2
3
4
box-shadow:2px 0px 2px rgb(180,180,180) inset,
0px 3px 3px rgb(180,180,180) inset,
-5px -0px 1px rgb(255,255,255) inset,
0px -3px 3px rgb(180,180,180) inset;

银河国际平台官方网站 13

雏形出来了,接下去便是二个个的nth-child了。让大家随后生硬地荡起双桨吧。

五、第五步
就好像前面提到的,大家最棒事先先计算好各种按钮的分寸和职位,做到胸有定见,不至于到时候一片散乱,不然全数键盘就好像西晋末年似的这一块儿那一同。

首先是局地好端端的安装,去掉列表标识,margin、padding设置,列表的宽和高balabala,根据事先的总计,设置开关与按钮的间隔,大致排列下这么多少个按钮,并给按钮增多4px的圆角,为了展现立体效果,加上三个border:

CSS

border: 1px solid rgb(70,70,70);

1
border: 1px solid rgb(70,70,70);

并多个边加多阴影:

CSS

box-shadow: 1px 0px 0px rgb(0,0,0), 0px 1px 0px rgb(0,0,0), -1px 0px 0px
rgb(0,0,0), 0px -1px 0px rgb(0,0,0);

1
2
3
4
box-shadow: 1px 0px 0px rgb(0,0,0),
0px 1px 0px rgb(0,0,0),
-1px 0px 0px rgb(0,0,0),
0px -1px 0px rgb(0,0,0);

依靠代码和效果与利益:

CSS

ul,li{ list-style: none; margin:0 auto; padding:0 auto; display: block;
font-family: “Vrinda”; -webkit-user-select: none; -moz-user-select:
none; -ms-user-select: none; user-select: none; } ul{ width:530px;
margin-top: 8px; padding-left: 8px; /* border:2px solid black; */ }
li{ width:29px; height:29px; float: left; /* padding-left: 0px; */
margin-right: 5px; margin-bottom: 5px; background-color: rgb(30,30,30);
color: rgb(200,200,200); text-align: center; line-height: 28px;
font-size: 12px; border-radius: 4px; border: 1px solid rgb(70,70,70);
box-shadow: 1px 0px 0px rgb(0,0,0), 0px 1px 0px rgb(0,0,0), -1px 0px 0px
rgb(0,0,0), 0px -1px 0px rgb(0,0,0); }

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
ul,li{
list-style: none;
margin:0 auto;
padding:0 auto;
display: block;
font-family: "Vrinda";
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
 
ul{
width:530px;
margin-top: 8px;
padding-left: 8px;
/* border:2px solid black; */
}
 
li{
width:29px;
height:29px;
float: left;
/* padding-left: 0px; */
margin-right: 5px;
margin-bottom: 5px;
background-color: rgb(30,30,30);
color: rgb(200,200,200);
text-align: center;
line-height: 28px;
font-size: 12px;
border-radius: 4px;
border: 1px solid rgb(70,70,70);
box-shadow: 1px 0px 0px rgb(0,0,0),
0px 1px 0px rgb(0,0,0),
-1px 0px 0px rgb(0,0,0),
0px -1px 0px rgb(0,0,0);
}

银河国际平台官方网站 14
看上去还很乱,连文本都溢出了,可是阿妈说过,心急吃不了热水豆腐,稳步来,保准等会就驯服得她服服帖帖的。

Tips:请用力记住父老母的寿辰哦。

全面包车型大巴伴儿们会意识有一段代码,貌似不紧凑的也能觉察,正是这段:

CSS

-webkit-user-select: none; -moz-user-select: none; -ms-user-select:
none; user-select: none;

1
2
3
4
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;

那是怎么样意思呢?先来看下不加这段代码的意义:

银河国际平台官方网站 15

对,正是这一片的绿色,当用鼠标去键盘上拖着选中的时候,那么些个的li就能够被选中,增添这段代码就能够还大家一片巧克力键盘了,就会还大家八个洁白的蓝天了。

洁白…的…蓝天…^o^

我们先把键盘最下边的那一排成效键先捣腾好。这里大家用nth-child来摘取方面那一排小编没数错数量应该是14个的功用键,并给它们轻松设置样式。

贯彻和功用如下:

CSS

li:nth-child(1),li:nth-child(2),li:nth-child(3),li:nth-child(4),
li:nth-child(5),li:nth-child(6),li:nth-child(7),li:nth-child(8),
li:nth-child(9),li:nth-child(10),li:nth-child(11),li:nth-child(12),
li:nth-child(13),li:nth-child(14){ width:30px; height:15px; }

1
2
3
4
5
6
7
li:nth-child(1),li:nth-child(2),li:nth-child(3),li:nth-child(4),
li:nth-child(5),li:nth-child(6),li:nth-child(7),li:nth-child(8),
li:nth-child(9),li:nth-child(10),li:nth-child(11),li:nth-child(12),
li:nth-child(13),li:nth-child(14){
width:30px;
height:15px;
}

银河国际平台官方网站 16

接下去调节第二行的数字按钮上的那多少个数字和符号的一上一下的69体位,一样先用nth-child选中再设置样式:

CSS

li:nth-child(16) span,li:nth-child(17) span,li:nth-child(18)
span,li:nth-child(19) span,li:nth-child(20) span, li:nth-child(21)
span,li:nth-child(22) span,li:nth-child(23) span,li:nth-child(24)
span,li:nth-child(25) span, li:nth-child(26) span,li:nth-child(27) span{
display: block; margin-top: 5px; line-height: 0.5; }

1
2
3
4
5
6
7
li:nth-child(16) span,li:nth-child(17) span,li:nth-child(18) span,li:nth-child(19) span,li:nth-child(20) span,
li:nth-child(21) span,li:nth-child(22) span,li:nth-child(23) span,li:nth-child(24) span,li:nth-child(25) span,
li:nth-child(26) span,li:nth-child(27) span{
display: block;
margin-top: 5px;
line-height: 0.5;
}

然后设置除了最终的那四个趋势键外的别的键的深浅,很简短,算准写就行,要做二个了然于胸的男生,这块直接贴代码:

CSS

li:nth-child(28),li:nth-child(29){ width:45px; }
li:nth-child(43),li:nth-child(55){ width:55px; }
li:nth-child(56),li:nth-child(67){ width:73px; }
li:nth-child(68),li:nth-child(69),li:nth-child(70),li:nth-child(71),
li:nth-child(72),li:nth-child(73),li:nth-child(74){ height:33px; }
li:nth-child(72){ width:173px; } li:nth-child(71),li:nth-child(73){
width:37px; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
li:nth-child(28),li:nth-child(29){
width:45px;
}
li:nth-child(43),li:nth-child(55){
width:55px;
}
li:nth-child(56),li:nth-child(67){
width:73px;
}
li:nth-child(68),li:nth-child(69),li:nth-child(70),li:nth-child(71),
li:nth-child(72),li:nth-child(73),li:nth-child(74){
height:33px;
}
li:nth-child(72){
width:173px;
}
li:nth-child(71),li:nth-child(73){
width:37px;
}

找个驿站半路安息下先,顺带看下效果:

银河国际平台官方网站 17

除了这一个之外八个方向键,其余的按钮放置得还算能够,接着走。

多少个方向键设置也很轻巧,设置宽高,定位就可以,不罗嗦了,间接上:

CSS

li:nth-child(75),li:nth-child(77),li:nth-child(78){ margin-top: 18px;
height: 14px; } li:nth-child(76){ height: 13px; margin-top: 19px; }
li:nth-child(78){ position: absolute; bottom: 22px; right:38px; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
li:nth-child(75),li:nth-child(77),li:nth-child(78){
margin-top: 18px;
height: 14px;
}
 
li:nth-child(76){
height: 13px;
margin-top: 19px;
}
 
li:nth-child(78){
position: absolute;
bottom: 22px;
right:38px;
}

效果:

银河国际平台官方网站 18

恩,美感效果还在本身的审美范围以内。

六、第六步
最终一步正是触控板touch的绘图了,哈哈哈,终于要Norman底登入了,待笔者喝口菊花茶先。

触控板的绘图和键盘的绘图基本上是平等的,设置大小,定位,圆角,border就能够。直接上:

CSS

.touch{ position: absolute; width:200px; height:150px; border: 2px solid
rgb(190,190,190); bottom: 23px; left: 200px; border-radius: 8px; }

1
2
3
4
5
6
7
8
9
.touch{
position: absolute;
width:200px;
height:150px;
border: 2px solid rgb(190,190,190);
bottom: 23px;
left: 200px;
border-radius: 8px;
}

银河国际平台官方网站 19
七、小了个结
到此地,MacBook
Air就算实现了,仍旧那句话,是个半成品,一些字体图标还待用font-face来成功,当然仍可以够增加些动画,让它像产品旋转来展示等等,那只是进行试探而已,期望小同伴们越多奇思妙想。小同伙们有好的主见接待分享~~~

同伴们也足以猛戳这里Codepen上查看高清无码大图,给出链接:

See the Pen Airbook by pure css
by myvin (@myvin) on
CodePen.

2 赞 8 收藏
评论

银河国际平台官方网站 20

CSS3立体智能手提式有线电话机按键,网页按键超酷效果,css3超酷

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“;
<html xmlns=”;
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″
/>
<title>CSS3立体按键</title>
<script>
var snd = new Audio(”);
document.addEventListener(‘change’, function(e){
if(e.target.parentNode.className.indexOf(‘checkboxControl’) != -1){
snd.currentTime = 0;
snd.play();
}
});
</script>
<style>
*{ margin:0; padding:0; }
html, body{ height:100%; }
body{ font:15px/1 arial; text-align:center; background:#509DAD; }
body:before{ content:”; display:inline-block; height:100%;
vertical-align:middle; }
fieldset{ display:inline-block; vertical-align:middle; border:none;
width:370px; }
.legend{ color:rgba(0,0,0,.7); font-size:12px; margin-bottom:14px;
height:15px; border-color:#2E6677; border-style:solid; border-width:1px
1px 0 1px; box-shadow:1px 1px 0 rgba(255,255,255,0.2) inset;
text-shadow:0 1px rgba(255,255,255,.3); }
.legend span{ text-transform:uppercase; position:relative; top:-5px;
padding:0 10px; background:#509DAD; display:inline-block; }
.checkboxGroup{ display:inline-block; vertical-align:middle;
width:150px; border:none; }
.checkboxControl{
border:2px solid #102838; border-radius:7px; display:inline-block;
width:100px; height:50px; padding-top:1px; position:relative;
vertical-align:middle; margin:0 60px 10px 0; color:#297597;
box-shadow: 0 0 5px rgba(255,255,255,.4), 0 2px 1px -1px
rgba(255,255,255,.7) inset, 8px 0 5px -5px #02425C inset,-8px 0 5px
-5px #02425C inset;-moz-user-select:none; -webkit-user-select:none;
background:#80DCE9;
}
.checkboxControl input{ position:absolute; visibility:hidden; }
.checkboxControl > div{
background:-webkit-linear-gradient(left, #8FD9E4 0%,#A0F2FE
53%,#69DCF1 56%,#33AFCE 99%,#CEF5FF 100%);
background:linear-gradient(to right, #8FD9E4 0%,#银河国际平台官方网站,A0F2FE 53%,#69DCF1
56%,#33AFCE 99%,#CEF5FF 100%);
box-shadow:-2px 0 1px 0 #A6F2FE inset;
border-radius:5px; line-height:50px; font-weight:bold; cursor:pointer;
position:relative; z-index:1; text-shadow:0 1px rgba(255,255,255,0.5);

transform-origin:0 0; -webkit-transform-origin:0 0;
transform:scaleX(0.93); -webkit-transform:scaleX(0.93);
transition:.1s; -webkit-transition:0.1s;
}
.checkboxControl div:first-letter{ letter-spacing:55px; }
.checkboxControl :checked ~ div{
transform-origin:100% 0; -webkit-transform-origin:100% 0;
box-shadow:2px 0 1px 0 #A6F2FE inset;
background:-webkit-linear-gradient(left, #CEF5FF 0%,#33AFCE
1%,#69DCF1 47%,#A0F2FE 50%,#8FD9E4 100%);
background:linear-gradient(to right, #CEF5FF 0%,#33AFCE 1%,#69DCF1
47%,#A0F2FE 50%,#8FD9E4 100%);
}
.checkboxControl > b{ position:absolute; bottom:0; right:0;
width:50%; height:100%; border-radius:8px;
-webkit-transform:skewY(5deg); transform:skewY(5deg); box-shadow: 0 6px
8px -5px #000; }
.checkboxControl :checked ~ b{ right:auto; left:0;
-webkit-transform:skewY(-5deg); transform:skewY(-5deg); }
.checkboxControl .indicator{ position:absolute; top:14px; right:-20px;
width:8px; height:25px; box-shadow:0 0 8px #000 inset; border:1px solid
rgba(255,255,255,0.1); border-radius:15px; transition:0.2s;
-webkit-transition:0.2s; }
.checkboxControl .indicator:before{ content:”; display:inline-block;
margin-top:8px; width:2px; height:8px; border-radius:10px;
transition:0.5s; -webkit-transition:0.5s; }
.checkboxControl :checked ~ .indicator:before{ box-shadow:0 0 7px 6px
#BAFC58; width:6px; background:#F0F9E3; transition:0.1s;
-webkit-transition:0.1s; }
.checkboxControl2{
border:2px solid #102838; border-radius:7px; display:inline-block;
vertical-align:middle; font-weight:bold;
width:60px; height:100px; position:relative; margin:0 5px;
color:#12678C; box-shadow:0 0 5px rgba(255,255,255,.4);
}
.checkboxControl2 input{ position:absolute; visibility:hidden; }
.checkboxControl2 > div{
background:-webkit-linear-gradient(top, #002B44 0%, #0690AC 11%,
#038EAA 14%, #A0F2FE 58%, #91DBE7 96%, #B9E8E8 100%);
background:linear-gradient(to bottom, #002B44 0%, #0690AC 11%,
#038EAA 14%, #A0F2FE 58%, #91DBE7 96%, #B9E8E8 100%);
height:100%; border-radius:5px; line-height:50px; font-we0 0 3px 0px
#F95757 inset, 0 0 12px 6px #F95757tion:relative; z-index:1;
cursor:pointer; text-shadow:0 1px rgba(255,255,255,0.5);
}
.checkboxControl2 > div:after{
content:’Ο’; display:block; height:50%; line-height:4;
transform-origin:0 0; -webkit-transform-origin:0 0;
}
.checkboxControl2 > div:before{
content:’Ι’; display:block; height:50%; line-height:2.5;
border-radius:80%/5px;
box-shadow:0 8px 12px -13px #89DFED inset, 0 -2px 2px -1px
rgba(255,255,255,0.8);
transform-origin:0 100%; -webkit-transform-origin:0 100%;
transform:scaleY(0.7); -webkit-transform:scaleY(0.7);
}
.checkboxControl2 :checked ~ div{
background:-webkit-linear-gradient(bottom, #002B44 0%, #0690AC 11%,
#038EAA 14%, #A0F2FE 58%, #91DBE7 96%, #B9E8E8 100%);
background:linear-gradient(to top, #002B44 0%, #0690AC 11%, #038EAA
14%, #A0F2FE 58%, #91DBE7 96%, #B9E8E8 100%);
}
.checkboxControl2 :checked ~ div:before{
border-radius:0; box-shadow:none;
transform:none; -webkit-transform:none;
}
.checkboxControl2 :checked ~ div:after{
border-radius:80%/5px;
box-shadow:0 -8px 12px -5px #89DFED inset, 0 2px 2px 0 #0690AC;
transform:scaleY(0.7); -webkit-transform:scaleY(0.7);
}
.checkboxControl2 .indicator{ position:absolute; top:-20px; left:17px;
width:25px; height:8px; box-shadow:0 0 8px #000 inset; border:1px solid
rgba(255,255,255,0.1); border-radius:15px; transition:0.2s;
-webkit-transition:0.2s; }
.checkboxControl2 .indicator:before{ content:”; display:block;
margin:2px auto; width:8px; height:5px; border-radius:10px;
transition:0.5s; -webkit-transition:0.5s; }
.checkboxControl2 :checked ~ .indicator:before{ box-shadow:0 0 2px 0px
#F95757 inset, 0 0 12px 6px #F95757; background:#FFF;
transition:0.1s; -webkit-transition:0.1s; }
</style>
</head>
<body>
<div>;
<fieldset>
<div class=’legend’><span>power
switchs</span></div>
<div class=’checkboxGroup’>
<label class=’checkboxControl’>
<input type=’checkbox’ />
<div>ΟΙ</div><b></b>
<span class=’indicator’></span>
</label>
<label class=’checkboxControl’>
<input type=’checkbox’ />
<div>ΟΙ</div><b></b>
<span class=’indicator’></span>
</label>
</div>
<label class=’checkboxControl2′>
<input type=’checkbox’ />
<div></div>
<span class=’indicator’></span>
</label>
<label class=’checkboxControl2′>
<input type=’checkbox’ />
<div></div>
<span class=’indicator’></span>
</label>
</fieldset>
</body>
</html>

!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“…