on css | css3 | html

最近写的两个CSS3图标

        <p>原本是老师布置的作业里的素材，强迫症犯了忍受不了图片，于是都写成CSS的了</p>

DOWNLOAD
APTANA STUDIO

LOGO 结构

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<div class="csslogo">  
    <div class="chilun">
        <div class="circle-matrix">
            <div class="c c1"></div>
            <div class="c c2"></div>
            <div class="c c3"></div>
            <div class="c c4"></div>
            <div class="c c5"></div>
            <div class="c c6"></div>
            <div class="c c7"></div>
            <div class="c c8"></div>
        </div>
        <div class="chilun-center"></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
60
61
62

/*--------CSS LOGO---------*/  
.csslogo{position:relative;width:46px;height:45px;border-radius: 4px;  
background-color: #f4922f;  
background: -webkit-linear-gradient(#f6853a,#c4551e);  
background: -moz-linear-gradient(#f6853a,#c4551e);  
background: -o-linear-gradient(#f6853a,#c4551e);  
background: linear-gradient(#f6853a,#c4551e);  
box-shadow: 0 1px 2px #111,0 0 1px 1px #ce6e3b inset;  
}  
 
.circle-matrix{position:absolute;top:8px;left:8px;width:30px;height:30px;}  
.c{position:absolute;width:7px;height:7px;background:#efefef;border-radius: 3px;}  
.c1{top:0;left:0;  
-webkit-transform:rotate(45deg);
-moz-transform:rotate(45deg);
-o-transform:rotate(45deg);
transform:rotate(45deg);  
border-top-right-radius:0;  
border-bottom-right-radius:0;  
}  
.c2{top:-5px;left:11px;  
border-bottom-right-radius:0;  
border-bottom-left-radius:0;  
}  
.c3{top:0;right:0;  
-webkit-transform:rotate(45deg);
-moz-transform:rotate(45deg);
-o-transform:rotate(45deg);
transform:rotate(45deg);  
border-bottom-right-radius:0;  
border-bottom-left-radius:0;  
}  
.c4{top:11px;left:-5px;  
border-top-right-radius:0;  
border-bottom-right-radius:0;  
}  
.c5{top:11px;right:-5px;  
border-top-left-radius:0;  
border-bottom-left-radius:0;  
}  
.c6{bottom:0;left:0;  
-webkit-transform:rotate(45deg);
-moz-transform:rotate(45deg);
-o-transform:rotate(45deg);
transform:rotate(45deg);  
border-top-left-radius:0;  
border-top-right-radius:0;  
}  
.c7{bottom:-5px;left:11px;  
border-top-left-radius:0;  
border-top-right-radius:0;  
}  
.c8{bottom:0;right:0;  
-webkit-transform:rotate(45deg);
-moz-transform:rotate(45deg);
-o-transform:rotate(45deg);
transform:rotate(45deg);  
border-top-left-radius:0;  
border-bottom-left-radius:0;  
}  
.chilun{position:absolute;top:-1px;left:0;}  
.chilun-center{position:absolute;top:9px;left:9px;width:16px;height:16px;border:6px solid #efefef;border-radius: 20px;}

按钮结构

1
2
3
4
5
6
7
8

<a class="footer-button" href="#">  
    <div class="arrow">
        <div class="big"></div>
        <div class="small-1"></div>
        <div class="small-2"></div>
    </div>
    <h2>DOWNLOAD<br/>APTANA STUDIO</h2>
</a>

样式

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

.footer-button{display:block;height:47px;width:195px;background: #1db5de;position:relative;  
background: -webkit-linear-gradient(#21bfe6,#1070aa);  
background: -moz-linear-gradient(#21bfe6,#1070aa);  
background: -o-linear-gradient(#21bfe6,#1070aa);  
background: linear-gradient(#21bfe6,#1070aa);  
border-radius:10px;  
}  
.footer-button:hover{opacity: 0.9;box-shadow: 0 0 2px #333 inset;}  
.arrow{height:25px;width:28px;position:absolute;top:12px;left:14px;overflow: hidden;}  
.big{height:24px;width:24px;  
background: -webkit-linear-gradient(-45deg,#00202f,#1a76ad);  
background: -moz-linear-gradient(-45deg,#00202f,#1a76ad);  
background: -o-linear-gradient(-45deg,#00202f,#1a76ad);  
background: linear-gradient(-45deg,#00202f,#1a76ad);  
-webkit-transform:rotate(45deg);
-moz-transform:rotate(45deg);
-o-transform:rotate(45deg);
transform:rotate(45deg);  
position:absolute;top:-4px;left:2px;  
box-shadow: 1px 1px 2px #36a0d2;}  
.small-1{width:9px;height:10px;  
background:-webkit-linear-gradient(#20acdd,#1d9dcc);  
background:-moz-linear-gradient(#20acdd,#1d9dcc);  
background:-o-linear-gradient(#20acdd,#1d9dcc);  
background:linear-gradient(#20acdd,#1d9dcc);  
position:absolute;  
top:0;left:0;  
}  
.small-2{width:9px;height:10px;  
background:-webkit-linear-gradient(#20acdd,#1d9dcc);  
background:-moz-linear-gradient(#20acdd,#1d9dcc);  
background:-o-linear-gradient(#20acdd,#1d9dcc);  
background:linear-gradient(#20acdd,#1d9dcc);  
position:absolute;  
top:0;right:0;  
}  
.footer-button h2{position:absolute;top:10px;left:54px;font-size:14px;color:#fff;line-height: 14px;text-shadow:0 -1px 1px #1683a0;font-weight:bold;}

Ruosen

Be a Geek, Do the right thing;