Skip to content

Instantly share code, notes, and snippets.

@marquinhusgoncalves-zz

marquinhusgoncalves-zz/VLPvQJ.markdown

Created May 28, 2015 18:33
Show Gist options
  • Save marquinhusgoncalves-zz/a23dc9c27553d9287a85 to your computer and use it in GitHub Desktop.
Save marquinhusgoncalves-zz/a23dc9c27553d9287a85 to your computer and use it in GitHub Desktop.
Download ZIP
VLPvQJ
Raw
index.html
<body>
<div class="box">
<div class="box_int1">
</div>
<div class="box_int2">
</div>
<div class="box_int3">
</div>
</div>
<div class="box1">
</div>
<div class="box2">
</div>
<div class="box3">
</div>
</body>
Raw
style.css
body {
position: relative;
/*border: 1px solid #000;*/
position: relative;
margin: 0 auto;
height: 350px;
width: 200px;
}
.box {
background: linear-gradient(to bottom, #959595 0%,#0d0d0d 35%,#606060 70%,#1b1b1b 100%);
width: 60px;
height: 130px;
position: absolute;
top: 10px;
border-radius: 10px;
}
.box1 {
background: black;
width: 30px;
height: 10px;
position: absolute;
top: 60px;
left: 60px;
border-radius: 0 10px 0 0;
}
.box2 {
background: black;
width: 10px;
height: 290px;
position: absolute;
top: 60px;
left: 80px;
border-radius: 0 10px 0 0;
}
.box3 {
position: absolute;
border-left: 40px solid transparent;
border-right: 40px solid transparent;
border-bottom: 70px solid #000;
top: 300px;
left: 45px;
}
.box_int1 {
background: linear-gradient(to bottom, #53a82f 0%,#8bd317 80%); /* W3C */
width: 40px;
height: 40px;
position: absolute;
top: 2px;
left: 10px;
border-radius: 50%;
}
.box_int1:hover {
background: lightgreen;
}
.box_int2 {
background: linear-gradient(to bottom, #f1da36 0%,#fcf294 80%);
width: 40px;
height: 40px;
position: absolute;
left: 10px;
top: 45px;
border-radius: 50%;
}
.box_int2:hover {
background: gold;
}
.box_int3 {
background: linear-gradient(to bottom, #cf0404 0%,#ff5b4c 80%);
width: 40px;
height: 40px;
position: absolute;
left: 10px;
top: 88px;
border-radius: 50%;
}
.box_int3:hover {
background: orangered;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment