How to Create Text Animation Using CSS

In this post I will explain how to create text animation using css. To achieving this we need to use css @keyframes property for animating the text.  so we need to add -webkit, -moz, -ms, -o in front of keyframes property to avoiding browser related issues. 

For Example see bolow:
@-webkit-keyframes NAME-YOUR-ANIMATION {} @-moz-keyframes NAME-YOUR-ANIMATION {} @-o-keyframes NAME-YOUR-ANIMATION {} @keyframes NAME-YOUR-ANIMATION {}

#box { -webkit-animation: NAME-YOUR-ANIMATION 5s infinite; /* Safari 4+ */ -moz-animation: NAME-YOUR-ANIMATION 5s infinite; /* Fx 5+ */ -o-animation: NAME-YOUR-ANIMATION 5s infinite; /* Opera 12+ */ animation: NAME-YOUR-ANIMATION 5s infinite; /* IE 10+, Fx 29+ */ }

Following are the steps to creating HTML and CSS  text animations. 

Step 1 : ( Create HTML )

    <p>I'm a</p>

    <b>
      <span>
        web developer<br /> 
        css cowboy<br />
        self-facilitating media node<br />
        box inside a box<br />
        part of the problem
        </span>
    </b>

Step 2 : ( Apply CSS Styles to HTML )

        body {
          padding: 2em 5em;
          font: normal 40px/50px Arial, sans-serif;
          color: #999;
        }
        p {
          height: 50px;
          float: left;
          margin-right: 0.3em;
        }
        b {
          float: left;
          overflow: hidden;
          position: relative;
          height: 50px;
        }
        span {
          display: inline-block;
          color: #FF6633;
          position: relative;
          white-space: nowrap;
          top: 0;
          left: 0;
          -webkit-animation: move 5s;
          -webkit-animation-iteration-count: infinite;
          -webkit-animation-delay: 1s;
        }
        
        @keyframes move {
            0%  { top: 0px; }
           20% { top: -50px; }
           40% { top: -100px; }
           60% { top: -150px; }
           80% { top: -200px; }

        }

I hope you like this article very much & Please don't forget to share.

Thank you.

Continue Reading →

Form Processing Steps Design Using HTML & CSS

In this post I will explain how to create form processing steps design using HTML and CSS. You can directly copy and paste the below code in your working code. And in this post I am not using any Javascript or Jquery related validations. Just giving an idea about design perspective. In next post I will provide validations too.  To implementing this design please follow the below steps.

Step 1 : ( Create HTML List )

<ul>

    <li class="flag">

      Item Details

    </li>

    <li class="flag">

      Shipping Address

    </li>

    <li class="flag">

      Payment

    </li>

    <li class="flag">

      Conformation

    </li>

</ul>

Step 2 : ( Apply CSS Styles to HTML List )

* {
  box-sizing: border-box;
}
ul{margin-top:100px;}

li{
  float:left;
}
.flag {
  width: 200px;
  height: 50px;
  margin: 0 auto;
  padding-top: 18px;
  position: relative; 
  background: #f36633;
  color: white;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-align: center;
  text-transform: uppercase;
  list-style:none;
}
.flag:before {
  content: ' ';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 0;
  border-left: 25px solid white;
  border-top: 25px solid transparent;
  border-bottom: 25px solid transparent;
}
.flag:after {
  content: ' ';
  position: absolute;
  right: 0;
  bottom: 0;
  width: 0;
  height: 0;
  border-top: 25px solid white;
  border-left: 25px solid transparent;
  border-bottom: 25px solid white;

}

I hope you like this article very much & Please don't forget to share.

Thank you.

Continue Reading →