-
Notifications
You must be signed in to change notification settings - Fork 3
/
Copy pathguitar.css
96 lines (83 loc) · 2.38 KB
/
guitar.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
section {
background: aqua;
display: block;
height: 1000px;
margin: auto;
padding: 10px;
}
#guitar-fret-box {
width: 50%;
height: 1000px;
background: purple;
float: left;
text-align:center;
}
#buttons {
background: purple;
float: left;
height: 1000px;
width: 50%;
}
/*Contains guitar fret and question-mark frets*/
#guitar-fret-container {
position:relative;
display:inline-block;
}
/*Actual image of guitar fret */
#guitar-fret {
position:relative;
}
/*Question marks on frets*/
#guitar-fret-container > button {
position: absolute;
background-size: 100%;
background-image: url(http://findicons.com/files/icons/2227/picol/32/questionmark_32.png);
width: 2em; height: 2em;
}
#buttons > button {
-moz-box-shadow: inset 0px 1px 0px 0px #fce2c1;
-webkit-box-shadow: inset 0px 1px 0px 0px #fce2c1;
box-shadow: inset 0px 1px 0px 0px #fce2c1;
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
box-sizing: content-box;
background-color: #ffc477;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ffc477), color-stop(1, #fb9e25));
background: -webkit-linear-gradient(top, #ffc477 5%, #fb9e25 100%);
background: -moz-linear-gradient(top, #ffc477 5%, #fb9e25 100%);
background: linear-gradient(to bottom, #ffc477 5%, #fb9e25 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffc477', endColorstr='#fb9e25');
border: 1px solid #eeb44f;
-webkit-border-radius: 20px;
border-radius: 20px;
display: inline-block;
color: #ffffff;
font-family: Comic Sans MS;
font-size: 15px;
font-weight: bold;
font-style: normal;
line-height: 50px;
height: 50px;
width: 100px;
text-decoration: none;
text-align: center;
text-shadow: 1px 1px 0px #cc9f52;
margin: 10px;
padding: 0;
}
#buttons > button:hover {
background-color: #fb9e25;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #fb9e25), color-stop(1, #ffc477));
background: -webkit-linear-gradient(top, #fb9e25 5%, #ffc477 100%);
background: -moz-linear-gradient(top, #fb9e25 5%, #ffc477 100%);
background: linear-gradient(to bottom, #fb9e25 5%, #ffc477 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fb9e25', endColorstr='#ffc477');
}
#footer {
position: fixed;
bottom: 0;
width: 100%;
text-align:center;
font-size:40px;
color:blue;
}