Dribbble

Logo recreated using pure HTML and CSS3. No images. No JS.

HTML

<div id="dribbble"> <div class="dribbble1"></div> <div class="dribbble2"></div> <div class="dribbble3"></div> <div class="dribbble4"></div> </div>
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200

CSS

#dribbble { background: #f05e95; border-radius: 50%; height: 250px; position: relative; transform: scale(0.7); width: 250px; } #dribbble * { position: absolute; } .dribbble1 { background: #F58FB5; border-radius: 50%; height: 132px; left: 37px; top: 8px; transform: rotate(12deg); width: 200px; } #dribbble, .dribbble2, .dribbble3, .dribbble4 { border: 25px solid #cb386f; } .dribbble2 { border-radius: 50%; clip: rect(0px, 200px, 140px, 0); height: 309px; left: 53px; top: 108px; width: 356px; } .dribbble3 { border-radius: 50%; clip: rect(230px, 390px, 360px, 180px); height: 309px; left: -192px; top: -234px; width: 353px; } .dribbble4 { border-radius: 50%; clip: rect(0, 1088px, 184px, 850px); height: 1164px; left: -1054px; top: -207px; transform: rotate(30deg); width: 1248px; }
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200