CSS Loader Animation Version_5

Image

Sorry . Real Time Example Is Not Available For this Calculator UI

Inspect the HTML

<!DOCTYPE html>
<html>
    <head>
        <title>Page Title</title>
        <link href='https://fonts.googleapis.com/css?family=Allerta Stencil' rel='stylesheet'>
    </head>
    <style>
.button{
    width:50px;
    height:50px;
    font-size:25px;
    margin:2px;
    cursor:pointer;
    background-color:#e0e0e0;
    border:5px solid #999999;
    border-left:5px solid #404040;
    border-bottom:5px solid black;
    margin:2px;
    border-radius:5px;
    font-family:Allerta Stencil;
}
.textview{
    width:218px;
    margin-left:5px;
    font-size:30px;
    height:60px;
    margin-top:12px;
    background-color:#e6ff99;
    margin-bottom:5px;
    border-radius:5px;
    font-family:Allerta Stencil;
    text-align:right;
}
.full{
    position:absolute ;
    top:50%;
    left:50%;
    padding:4px;
    transform: translateX(-50%)translateY(-48%);
    border-top:10px solid #666666;
    border-right:7px solid #404040;
    box-shadow:15px 15px 12px black;
    background-color:#bfbfbf;
    border-radius:15px;
}
.headr{
    font-family:Allerta Stencil;
    align-items:right;
    font-size:20.2px;
    justify-content:center;
    position:relative ;
    text-align:center;
}
.foot{
    position:relative ;
    top:415.0px;
    font-family:Allerta Stencil;
    font-size:30.5px;
    animation:blind 28s linear;
    text-align:center;
    box-shadow:2px 13px 2px #00d0ff;
}
@keyframes blind{
    0%{
        opacity:0;
        filter:blur(0px);
    }
    50%{
        opacity:0;
        filter:blur(0px);
    }
    60%{
        opacity:1;
        filter:blur(1px);
    }
}
    </style>
    <body>
    <div class="calcultor_body">
        <div class="full">
            <form name="form">
                <input class="textview" name="textview" placeholder=" 0 ">
            </form>
        <table>
            <tr>
                <td><input class="button" type="button" style="background-color:#cc2900;
                border-top:5px solid  #ff6666;
                border-right:5px solid #ff6666;
                border-bottom:5px solid #990000; border-left:5px solid #990000" value="C" onclick="C()"></td>
                <td><input class="button" type="button" style="background-color:green;
                border-top:5px solid  #00ff55;
                border-right:5px solid #00e644;
                border-bottom:5px solid #003311; 
                border-left:5px solid #003311;" value="←" onclick="back()"> </td>
                <td><input class="button" type="button" value="/" onclick="insert('/')"></td>
                <td><input class="button" type="button" value="x" onclick="insert('*')"></td>
                
            </tr>
              <tr>
                <td><input class="button" type="button" value="7" onclick="insert(7)"></td>
                <td><input class="button" type="button" value="8" onclick="insert(8)"></td>
                <td><input class="button" type="button" value="9" onclick="insert(9)"></td>
                <td><input class="button" type="button" value="-" onclick="insert('-')"></td>
                
            
            </tr>
            
            <tr>
                <td><input class="button" type="button" value="4" onclick="insert(4)"></td>
                <td><input class="button" type="button" value="5" onclick="insert(5)"></td>
                <td><input class="button" type="button" value="6" onclick="insert(6)"></td>
                <td><input class="button" type="button" value="+" onclick="insert('+')"></td>
                
                  <tr>
                <td><input class="button" type="button" value="1" onclick="insert(1)"></td>
                <td><input class="button" type="button" value="2" onclick="insert(2)"></td>
                <td><input class="button" type="button" value="3" onclick="insert(3)"></td>
                <td rowspan=2><input class="button" style="height:109px; background-color:#ff6600;border-right:5px solid #ff944d;
                border-bottom:5px solid #b34700;    border-left:5px solid #b34700;
                border-top:5px solid #ff944d;
                " type="button" value="=" onclick="equal()"></td>
            </tr>
                  <tr>
                <td colspan=2><input class="button" style="width:109px;" type="button" value="0" onclick="insert(0)"></td>
                <td><input class="button" type="button" value="." onclick="insert('.')"></td>
                  <tr>
            </tr>
        </table>
        </div>
    </div>
    <script>
      function insert(num){
       document.form.textview.value=document.form.textview.value+num;
      }
      function equal(){
         var exp=document.form.textview.value; document.form.textview.value=eval(exp)
      }
      function C(){
          document.form.textview.value="";
      }
      function back(){
          var exp=document.form.textview.value;
          document.form.textview.value=exp.substring(0,exp.length-1)
      }
    </script>
    </body>
</html>

Kumar Lakshmanan

Calculator UI Design Version - 3

Image

Sorry . Real Time Example Is Not Available For this Calculator UI

Inspect the HTML

Post a Comment

0 Comments

Labels

Join Our Whatsapp Group

Search This Blog

Popular Posts

Disco Lights Animation using CSS

Best PDF books for web designing and developing

St.Mary's HSS | My School

Make the Loader Using HTML & CSS

Total Pageviews

Contact Form

Footer Menu Widget

Kumar Lakshmanan

Calculator UI Design Version - 3

Image

Sorry . Real Time Example Is Not Available For this Calculator UI

Inspect the HTML

You may like these posts

Post a Comment

0 Comments

Labels

Join Our Whatsapp Group

Search This Blog

Popular Posts

Disco Lights Animation using CSS

Best PDF books for web designing and developing

St.Mary's HSS | My School

Make the Loader Using HTML & CSS

Total Pageviews

Contact Form

Footer Menu Widget