Iceberg (Only CSS)

HTML
<div class="contenedor"> <div class="iceberg"> <ul class="ices"> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> <div class="ice"> <span class="ice30"></span> <span class="ice3"></span> <span class="ice5"></span> </div> </div> </div>
CSS
body{ background:black; } .contenedor{ position:relative; width:500px; height:500px; border-radius:100%; background: #aebac4; background: -moz-linear-gradient(top, #aebac4 50%, #579cc6 50%, #579cc6 50%); background: -webkit-gradient(linear, left top, left bottom, color-stop(50%,#aebac4), color-stop(50%,#579cc6), color-stop(50%,#579cc6)); background: -webkit-linear-gradient(top, #aebac4 50%,#579cc6 50%,#579cc6 50%); background: -o-linear-gradient(top, #aebac4 50%,#579cc6 50%,#579cc6 50%); background: -ms-linear-gradient(top, #aebac4 50%,#579cc6 50%,#579cc6 50%); background: linear-gradient(to bottom, #aebac4 50%,#579cc6 50%,#579cc6 50%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#aebac4', endColorstr='#579cc6',GradientType=0 ); margin:212px auto; } .iceberg{ position:absolute; width:30px; height:30px; margin:0 0px; animation:flo 3s alternate infinite; -moz-animation:flo 3s alternate infinite; -webkit-animation:flo 3s alternate infinite; } ul.ices{ position:absolute; width:400px; height:121px; margin:117px 112px; list-style:none; } ul.ices li{ display:inline-block; width: 0; height: 0; border-left: 25px solid transparent; border-right: 25px solid transparent; border-bottom: 132px solid white; opacity:.7; margin:0px 3px } ul.ices li:nth-child(1){ width: 0; height: 0; border-left: 12px solid transparent; border-right: 40px solid transparent; border-bottom: 132px solid white; margin:0px 0px; opacity:1; } ul.ices li:nth-child(1)::before{ content:""; display:block; width: 0; height: 0; border-left: 30px solid transparent; border-right: 21px solid transparent; border-bottom: 112px solid #999; opacity:.5; margin:21px -9px } ul.ices li:nth-child(2){ width: 0; height: 0; border-left: 25px solid transparent; border-right: 25px solid transparent; border-bottom: 70px solid white; margin:0px -35px; } ul.ices li:nth-child(2)::before{ content:""; display:block; width: 0; height: 0; border-left: 0px solid transparent; border-right: 70px solid transparent; border-bottom: 30px solid #999; margin:39px 3px; opacity:.5; } ul.ices li:nth-child(3){ width: 0; height: 0; border-left: 30px solid transparent; border-right: 30px solid transparent; border-bottom: 112px solid white; margin:0px 0px; opacity:1; } ul.ices li:nth-child(3)::before{ content:""; display:block; width: 0; height: 0; border-left: 21px solid transparent; border-right: 0px solid transparent; border-bottom: 70px solid #999; margin:43px 0px; opacity:.7; } ul.ices li:nth-child(4){ width: 0; height: 0; border-left: 12px solid transparent; border-right: 12px solid transparent; border-bottom: 80px solid white; margin:0px -21px; opacity:1; } ul.ices li:nth-child(4)::before{ content:""; display:block; width: 0; height: 0; border-left: 0px solid transparent; border-right: 33px solid transparent; border-bottom: 30px solid #999; margin:50px -7px; opacity:.9; } ul.ices li:nth-child(5){ width: 0; height: 0; border-left: 21px solid transparent; border-right: 21px solid transparent; border-bottom: 90px solid white; margin:0px 0px; opacity:.5; } ul.ices li:nth-child(5)::before{ content:""; display:block; width: 0; height: 0; border-left: 21px solid transparent; border-right: 21px solid transparent; border-bottom: 90px solid white; margin:-30px 12px; opacity:1; } ul.ices li:nth-child(6){ width: 0; height: 0; border-left: 21px solid transparent; border-right: 21px solid transparent; border-bottom: 102px solid white; margin:0px -35px; opacity:.9; } ul.ices li:nth-child(6)::before{ content:""; display:block; width: 0; height: 0; border-left: 30px solid transparent; border-right: 21px solid transparent; border-bottom: 112px solid white; margin:-21px 12px; opacity:.3; } ul.ices li:nth-child(7){ width: 0; height: 0; border-left: 3px solid transparent; border-right: 30px solid transparent; border-bottom: 90px solid #999; margin:0px 9px; opacity:.7; } ul.ices li:nth-child(7)::before{ content:""; display:block; width: 0; height: 0; border-left: 12px solid transparent; border-right: 30px solid transparent; border-bottom: 90px solid #999; margin:-9px 12px; opacity:1; } ul.ices li:nth-child(8){ width: 0; height: 0; border-left: 21px solid transparent; border-right: 21px solid transparent; border-bottom: 70px solid white; margin:0px -37px; opacity:.7; } ul.ices li:nth-child(8)::before{ content:""; display:block; width: 0; height: 0; border-left: 21px solid transparent; border-right: 12px solid transparent; border-bottom: 50px solid #999; margin:30px -35px; opacity:.7; } ul.ices li:nth-child(9){ width: 0; height: 0; border-left: 35px solid transparent; border-right: 21px solid transparent; border-bottom: 112px solid white; margin:0px 14px; opacity:.9; } ul.ices li:nth-child(9)::before{ content:""; display:block; width: 0; height: 0; border-left: 55px solid transparent; border-right: 3px solid transparent; border-bottom: 30px solid #999; margin:83px -37px; opacity:.3; } .ice{ position:absolute; width: 0; height: 0; border-top:30px solid #37739B; border-left: 50px solid transparent; margin:248px 152px; } .ice::before{ content:""; display:block; width: 0; height: 0; border-left: 50px solid transparent; border-right:50px solid transparent; border-bottom:30px solid #1a6295; ; opacity:.5; -webkit-transform: rotate(63deg); -moz-transform: rotate(63deg); transform: rotate(63deg); margin:-3px -65px; } .ice::after{ content:""; display:block; width: 0; height: 0; border-left: 25px solid transparent; border-right:40px solid transparent; border-top: 30px solid #345D96; opacity:.9; margin:-55px 12px; } .ice3{ position:absolute; width: 0; height: 0; border-left: 21px solid transparent; border-right: 12px solid transparent; border-bottom: 93px solid #0e3450; opacity:.5; margin:-53px -9px; -webkit-transform: rotate(-9deg); -moz-transform: rotate(-9deg); transform: rotate(-9deg); } .ice3::before{ content:""; display:block; width: 0; height: 0; border-left: 27px solid transparent; border-right: 9px solid transparent; border-bottom: 87px solid #345D96; margin:-0px -5px; -webkit-transform: rotate(-25deg); -moz-transform: rotate(-25deg); transform: rotate(-25deg); } .ice3:after{ content:""; display:block; width: 0; height: 0; border-top: 40px solid transparent; border-right: 33px solid #083956; border-bottom: 25px solid transparent; -webkit-transform: rotate(22deg); -moz-transform: rotate(22deg); transform: rotate(22deg); margin: -83px 32px } .ice5{ position:absolute; width: 0; height: 0; border-left: 40px solid transparent; border-right: 25px solid transparent; border-top: 40px solid #214360; opacity:.7; margin:-53px 90px } .ice5::before{ content:""; display:block; width: 0; height: 0; border-top: 43px solid transparent; border-left: 73px solid #214360; border-bottom: 40px solid transparent; opacity:.6; -webkit-transform: rotate(14deg); -moz-transform: rotate(14deg); transform: rotate(14deg); margin:-30px -55px; } .ice5::after{ content:""; display:block; width: 0; height: 0; border-left: 12px solid transparent; border-right: 0px solid transparent; border-bottom: 43px solid #0e3450; margin:-90px 9px; -webkit-transform: rotate(16deg); -moz-transform: rotate(16deg); transform: rotate(16deg); } .ice30{ position:absolute; width: 0; height: 0; border-left: 90px solid transparent; border-right: 70px solid transparent; border-top: 212px solid #214360; opacity:.3; margin:-55px -55px } .ice30::before{ content:""; display:block; width: 0; height: 0; border-left: 121px solid transparent; border-right: 50px solid transparent; border-top: 172px solid #214360; opacity:.5; margin:-212px -45px } .ice30::after{ content:""; display:block; width: 0; height: 0; border-left: 132px solid transparent; border-right: 33px solid transparent; border-top: 231px solid #214360; opacity:.5; margin:40px -75px } .ice6{ position:absolute; width: 0; height: 0; border-left: 21px solid transparent; border-right: 21px solid transparent; border-bottom: 50px solid #cee4f4; margin:-104px -50px } .ice6::before{ content:""; display:block; width: 0; height: 0; border-left: 21px solid transparent; border-right: 21px solid transparent; border-bottom: 90px solid #cee4f4; margin:-40px 0px } .ice7{ position:absolute; width: 0; height: 0; border-left: 16px solid transparent; border-right: 16px solid transparent; border-bottom: 50px solid white; margin:-104px -47px } .ice7::before{ content:""; display:block; width: 0; height: 0; border-left: 16px solid transparent; border-right: 16px solid transparent; border-bottom: 90px solid white; margin:-40px 3px } .ice8::before{ content:""; display:block; width: 30px; height: 17px; border-left: 21px solid transparent; border-right: 21px solid transparent; border-bottom: 90px solid white; margin:-30px 12px } .ice8{ position:absolute; width: 12px; height: 60px; border-left: 21px solid transparent; border-right: 21px solid transparent; border-bottom: 90px solid white; border-right:7px solid #cee4f4; margin:-121px 30px } .ice8::after{ content:""; display:block; width: 45px; height: 16px; -webkit-transform: skew(0deg); -moz-transform: skew(0deg); transform: skew(0deg); background: white; border-right:7px solid #cee4f4; margin:30px 0px } .ice9{ position:absolute; width: 12px; height: 60px; -webkit-transform: skew(-12deg); -moz-transform: skew(-12deg); transform: skew(-12deg); background: white; border-right:7px solid #cee4f4; margin:-121px 109px } .ice9::before{ content:""; display:block; width: 30px; height: 17px; -webkit-transform: skew(-12deg); -moz-transform: skew(-12deg); transform: skew(-12deg); background: white; border-right:7px solid #cee4f4; margin:0px 12px } .ice9::after{ content:""; display:block; width: 45px; height: 16px; -webkit-transform: skew(0deg); -moz-transform: skew(0deg); transform: skew(0deg); background: white; border-right:7px solid #cee4f4; margin:30px 0px } .ice12{ position:absolute; width: 21px; height: 16px; -webkit-transform: skew(-12deg); -moz-transform: skew(-12deg); transform: skew(-12deg); background: white; border-right:7px solid #cee4f4; margin:-97px 119px } @keyframes flo{ 0%{margin:3px 0;} 50%{margin:0 0px;} 100%{margin:-3px 0;} } @-moz-keyframes flo{ 0%{margin:3px 0;} 50%{margin:0 0px;} 100%{margin:-3px 0;} } @-webkit-keyframes flo{ 0%{margin:3px 0;} 50%{margin:0 0px;} 100%{margin:-3px 0;} }
JAVASCRIPT
Expand for more options Login