-
Notifications
You must be signed in to change notification settings - Fork 0
/
hamster.small.css
119 lines (104 loc) · 2.56 KB
/
hamster.small.css
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
/* Gaonnuri Hamster Small v1.0.0 Build 2013-11-24
* Copyright (c) 2013. Intel of KSA Students Union */
.hamster {
width: 128px;
height: 128px;
display: inline-block;
position: relative;
overflow: hidden;
border: 1px solid #000000;
}
.hamster .ear, .hamster .eye, .hamster .eyelight, .hamster .whiskers, .hamster .snout, .hamster .mouth, .hamster .desk, .hamster .paw {
position: absolute;
}
/* ear */
.hamster .ear {
width: 30px;
height: 30px;
top: 14px;
background-image: linear-gradient(to bottom, #FAE5BF 77%, rgba(0,0,0,0) 77%);
background-image: -o-linear-gradient(top, #FAE5BF 77%, rgba(0,0,0,0) 77%);
background-image: -moz-linear-gradient(top, #FAE5BF 77%, rgba(0,0,0,0) 77%);
background-image: -webkit-linear-gradient(top, #FAE5BF 77%, rgba(0,0,0,0) 77%);
border-radius: 16px;
}
.hamster .ear.left {
left: 0px;
transform: rotate(-45deg);
-o-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
}
.hamster .ear.right {
left: 98px;
transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
}
/* eye */
.hamster .eye {
width: 22px;
height: 22px;
top: 48px;
background: #3A2005;
border-radius: 12px;
}
.hamster .eye.left {
left: 24px;
}
.hamster .eye.right {
left: 82px;
}
/* head */
.hamster .head {
width: 128px;
height: 128px;
margin: 16px auto 0;
background-image: linear-gradient(to bottom, #FAE5BF 77%, rgba(0,0,0,0) 77%);
background-image: -o-linear-gradient(top, #FAE5BF 77%, rgba(0,0,0,0) 77%);
background-image: -moz-linear-gradient(top, #FAE5BF 77%, rgba(0,0,0,0) 77%);
background-image: -webkit-linear-gradient(top, #FAE5BF 77%, rgba(0,0,0,0) 77%);
border-radius: 64px;
}
.hamster .head .snout {
width: 90px;
height: 90px;
left: 19px;
margin: 64px auto 0;
background: #FFFFFF;
border-radius: 45px;
}
/* mouth */
.hamster .mouth {
width: 24px;
height: 20px;
top: 90px;
left: 52px;
border-bottom-left-radius: 12px;
border-bottom-right-radius: 12px;
background: #FA9090;
}
.hamster .desk {
width: 128px;
height: 14px;
top: 114px;
background: rgb(197, 163, 126);
}
/* paw */
.hamster .paw {
width: 16px;
height: 16px;
top: 102px;
background: #FAF5F0;
border: 2px solid #3A2005;
border-radius: 10px;
}
.hamster .paw.left {
left: 14px;
}
.hamster .paw.right {
left: 98px;
}