Devdutt Shenoi 8 July 2017

How to build the Indian flag in CSS

Flag

The flag of India is a Tri-color with a wheel or the ‘Ashoka Chakra’ in the very heart of it. The colors are in the ascending order of

  • Green : #009648
  • White : #FFFFFF
  • Saffron : #FF9933
  • Ashok Blue : #00247D

India Flag

Code of Project

Resources Used

The project is really a very creative combination of many resoures which I am very thankful to all the people who made it happen!

Styling

All styling is done with Sass which is a very simple yet easy language to do complex stuff. Import the Bourbon and Neat styling library into the project after adding them.

@import "bourbon";
@import "neat";
Sass Variables :

The variables of the colors used are to be stored as a set of Sass variables.

// Colors
$ashoka: #00247D;
$green: #009648;
$saffron: #FF9933;
Ashoka Chakra :

The Ashoka Chakra is a very complex design, it is better to keep it all in a single svg file.

.icon-ashoka-chakra{
    content: url(https://upload.wikimedia.org/wikipedia/commons/1/17/Ashoka_Chakra.svg);
    height: 65px;
}
Container :

The flag is placed in a contaier, this is to centre the content. I am using flex for that.

.container {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 90%;
    height: 100vh;
    margin: 50px auto;
    color: #aaa;
}
Flag colouring and placement :

The flag is a single object which contains the styling of the actual flag. A box-shadow is used to give it some perspective. the ‘:before’ and ‘:after’ are used to divide the object in three and then color either of them Saffron and Green. Then the svg inside the object is then positioned into the centre.

.flag {
    position: relative;
    display: inline-block;
    width: 300px;
    height: 200px;
    margin: 0 20px 20px;
    box-shadow: 0 0 50px rgba(black,0.3);
    overflow: hidden;
    z-index: 0;
    background-color: white;

      &:before, &:after {
          position: absolute;
          content: '';
          width: 100%;
          height: 33%;
      }

      &:before {
          top: 0;
          background-color: $saffron;
      }

      &:after {
          bottom: 0 !important;
          background-color: $green;
      }

      i {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%,-50%);
          color: $ashoka;
          font-size: 124px;
          line-height: 0.65;
          z-index: 10;
      }
}

The anchor linking is used to color my name and the styling is such 😛

a{
    text-decoration: none;
    color: inherit;
    &>i{
      color: $green;
    }

    &>span {
      color: $saffron
    }
}

Structure of Project

The html Structure is consisting of a container holding into place a Tootik module surrounding the flag and an anchor link redirecting to this blog post.

<div class="container">
    <a href="http://blog.devdutt.ga/web/17-07/Learn-how-to-India/">
    <div data-tootik="Know How" data-tootik-conf="top invert shadow square no-fading">
    <div class="flag india">
        <i class="icon-ashoka-chakra"></i>
    </div>
    <div></div>
    <div>
        <a href="http://devdutt.ga"><span>Devdutt</span> <i>Shenoi</i></a>
    </div>
    </div>
        </div>
        </a>
</div>

Conclusion

This was an informative experience for me as I learnt Sass with this cool project.