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:
- Faster loading time
- browser can’t be disabled css logo, unlike an image.
our logo has one parent div and 4 nested div for 4 oval shaped objects.
<div class="myntra"> <div></div> <div></div> <div></div> <div></div> </div>
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”
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.