A fishbowl
A Pen by Adam Henley on CodePen.
A fishbowl
A Pen by Adam Henley on CodePen.
<div id="backgrounddiv"> | |
<div id="plain_bowl" class="bowl_container"> | |
<div id="" class="glass rim bowl_rim"></div> | |
<div id="" class="bowl circle glass "> | |
<div id="" class="glass circle inner_bowl"> | |
</div> | |
</div> | |
<div class="liquid"></div> | |
</div> | |
<div id="health_bowl" class="bowl_container"> | |
<div id="" class="glass rim bowl_rim"></div> | |
<div id="" class="bowl circle glass outer_bowl"> | |
<div id="" class="glass circle inner_bowl"> | |
</div> | |
</div> | |
<div class="liquid"></div> | |
</div> | |
<div id="mana_bowl" class="bowl_container"> | |
<div id="" class="glass rim bowl_rim"></div> | |
<div id="" class="bowl circle glass outer_bowl"> | |
<div id="" class="glass circle inner_bowl"> | |
</div> | |
</div> | |
<div class="liquid"></div> | |
</div> | |
<div id="waste_bowl" class="bowl_container"> | |
<div id="" class="glass rim bowl_rim"></div> | |
<div id="" class="bowl circle glass outer_bowl"> | |
<div id="" class="glass circle inner_bowl"> | |
</div> | |
</div> | |
<div class="liquid"></div> | |
</div> | |
</div> |
.circle { | |
border-radius: 50%; | |
width: 200px; | |
height: 200px; | |
} | |
.glass { | |
background: -moz-radial-gradient(center, ellipse cover, rgba(240,249,255,0.9) 0%, rgba(214,239,255,0.5) 33%, rgba(203,235,255,0.5) 47%, rgba(188,229,255,0.5) 66%, rgba(161,219,255,0.9) 100%); /* FF3.6+ */ | |
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(240,249,255,0.9)), color-stop(33%,rgba(214,239,255,0.5)), color-stop(47%,rgba(203,235,255,0.5)), color-stop(66%,rgba(188,229,255,0.5)), color-stop(100%,rgba(161,219,255,0.9))); /* Chrome,Safari4+ */ | |
background: -webkit-radial-gradient(center, ellipse cover, rgba(240,249,255,0.9) 0%,rgba(214,239,255,0.5) 33%,rgba(203,235,255,0.5) 47%,rgba(188,229,255,0.5) 66%,rgba(161,219,255,0.9) 100%); /* Chrome10+,Safari5.1+ */ | |
background: -o-radial-gradient(center, ellipse cover, rgba(240,249,255,0.9) 0%,rgba(214,239,255,0.5) 33%,rgba(203,235,255,0.5) 47%,rgba(188,229,255,0.5) 66%,rgba(161,219,255,0.9) 100%); /* Opera 12+ */ | |
background: -ms-radial-gradient(center, ellipse cover, rgba(240,249,255,0.9) 0%,rgba(214,239,255,0.5) 33%,rgba(203,235,255,0.5) 47%,rgba(188,229,255,0.5) 66%,rgba(161,219,255,0.9) 100%); /* IE10+ */ | |
background: radial-gradient(ellipse at center, rgba(240,249,255,0.9) 0%,rgba(214,239,255,0.5) 33%,rgba(203,235,255,0.5) 47%,rgba(188,229,255,0.5) 66%,rgba(161,219,255,0.9) 100%); /* W3C */ | |
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e6f0f9ff', endColorstr='#e6a1dbff',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */ | |
} | |
.outer_bowl:before{ | |
content: " "; | |
height: 30px; | |
width:170px; | |
background-color:white; | |
position:absolute; | |
border-radius: 50%; | |
left:25px; | |
} | |
.inner_bowl { | |
width:190px; | |
height:190px; | |
position:relative; | |
top:5px; | |
left:5px; | |
z-index: 75 ; | |
} | |
.inner_bowl:before { | |
content: " "; | |
height: 30px; | |
width:170px; | |
background-color:white; | |
position:absolute; | |
border-radius: 50%; | |
left:25px; | |
} | |
.bowl_rim{ | |
content:" "; | |
height: 40px; | |
width:150px; | |
border-radius:80%; | |
position:relative; | |
left:26px; | |
top:44px; | |
z-index:100; | |
} | |
.bowl_rim:before{ | |
content: " "; | |
height: 200px; | |
width:700px; | |
background-color:white; | |
position:absolute; | |
border-radius: 50%; | |
top:-189px; | |
left:-275px; | |
z-index:100; | |
} | |
.outer_bowl{ | |
z-index:80; | |
} | |
#bowl_rim { | |
z-index:100; | |
} | |
.liquid { | |
z-index: -1; | |
height:190px; | |
width:190px; | |
border-radius:50%; | |
position:relative; | |
top:-195px; | |
left:5px; | |
} | |
.liquid:after { | |
content: " "; | |
height: 50px; | |
width:200px; | |
background-color:white; | |
position:absolute; | |
top:0px; | |
z-index:1; | |
} | |
#plain_bowl .liquid { background-color:rgba(205,230,230,0.9); } | |
#health_bowl .liquid { background-color: red;} | |
#mana_bowl .liquid { background-color: blue;} | |
#waste_bowl .liquid { background-color: #b6e026;} | |
.bowl_container{ | |
float:left; | |
margin-right:20px; | |
} |