After a long time, I’m back in blogging @coderexample. In the meantime, I was busy with my new job and nextgen css learning. Today I will show myntra logo in pure css. Myntra.com is India’s largest online fashion shopping cart, they sell through the only mobile app.

Using css logo has two major benefits:

  1. Faster loading time
  2. browser can’t be disabled css logo, unlike an image.

Mark up

our logo has one parent div and 4 nested div for 4 oval shaped objects.

1
2
3
4
5
6
<div class="myntra">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

Styling

we need to be set position relative on parent div, so that nested absolute positioned div can align according to parent div.

For oval like shape I have used slash (/) border-radius property. Used transform rotate to set all the nested div as “M”

1
border-radius: 50% 50% 50% 50%/63% 63% 37% 37%;

I have also used css3 animation to make the logo more interactive. That’s all.

DOWNLOADDEMO