DIGICODE

Here in this article,I am discussing about how to make DIGICODE/ KEYPAD. Guys its so simple and you will love it if i will show a demo. Mainly i didnt use Java script in this and its simple a combination of CSS and HTML coding.So your coding is not that much difficult.
                                                                 Mainly digicode is what we use outside our door,garage door especially for improving the securty of that place.Now I am showing what we are going to design,actually do you think before about its coding.Its seem quite attractive.


Now let's see what we are going to design :

STEP 1 : CSS STYLE


/* Gcyrillus , digicode, no psd */
a {
transition:0.1s;
display:inline-block;
height:70px;
width:70px;
margin:20px;
vertical-align:top;
text-align:center;
border:1px solid rgba(0,0,0,0.72);
border-radius:70px;
background:#454545;
color:white;
text-decoration:none;
font-family:helvetica;
font-weight:bold;
line-height:50px;
font-size:35px;
text-shadow:0 0 2px white;
overflow:hidden;
background-image:linear-gradient(-90deg,#222,#444);
box-shadow:
0 -5px 10px rgba(0,0,0,0.75),
0 0 15px rgba(0,0,0,1),
0 0 1px 3px rgba(0,0,0,0.5),
0 4px 5px rgba(255,255,255,0.5),
inset 0 2px 3px #555,
inset 0 4px 5px #000,
inset 0 0 3px #000,
inset 0 -20px 15px rgba(255,255,255,0.05);
position:relative;
}
.scaledigit {font-size:4em;line-height:1.1em;}
a span {font-size:14px;
text-transform:uppercase;
display:block;
text-align:center;
line-height:0em;
margin-top:-5px;
font-style:italic;
}
div#phone {background:#555;
width:400px;padding:100px 130px;
margin:2em auto;
text-align:center;
border-radius:70px;
background-image:
linear-gradient(-40deg,#222,transparent,#111),
linear-gradient(40deg,#222,transparent,#111),
linear-gradient(-40deg,#222,transparent,#111),
linear-gradient(40deg,#222,transparent,#111)
;
box-shadow:1px 2px 3px 2px #000,
0 0 5px 5px #333,
0 0 7px 7px #999,
0 0 0px 9px #555,
0 0 1px 11px #000,
120px 400px 400px -100px white;
background-size:70% 70%;
background-position:center;
transform:rotateY(20deg) rotateZ(-5deg) rotateX(-15deg);
}
a:hover, a:focus {
transition:0.1s;
outline:0;
text-shadow:0 0 2px black, 0 0 2px white;;
height:65px;
padding-top:5px;
background-image:linear-gradient(-90deg,#444,#222);
box-shadow:
0 5px 10px rgba(0,0,0,0.75),
0 0 15px rgba(0,0,0,1),
0 0 1px 3px rgba(0,0,0,0.5),
0 -4px 5px rgba(255,255,255,0.5),
inset 0 -2px 3px #555,
inset 0 -4px 5px #000,
inset 0 0 3px #000,
inset 0 20px 15px rgba(255,255,255,0.05);
}
body {
vertical-align:middle;
display:table-cell;
}
.p3d {
perspective:1000px;
transform-style:preserve-3d;
}
html {display:table;
background-image:linear-gradient(120deg, #123 50%, #789 50%);
height:100%;
width:100%;
}





STEP 2 : HTML MARKUP



<div class="p3d">
<script src="http://dabblet.com/code/prefixfree.min.js"></script>
<div id="phone">
<a href="#">1</a>
<a href="#">2<span>abc</span></a>
<a href="#">3<span>def</span></a>
<a href="#">4<span>ghi</span></a>
<a href="#">5<span>jkl</span></a>
<a href="#">6<span>mno</span></a>
<a href="#">7<span>pqrs</span></a>
<a href="#">8<span>tuv</span></a>
<a href="#">9<span>wxyz</span></a>
<a href="#" class="scaledigit">&#42;</a>
<a href="#">0</a>
<a href="#">&#35;</a>
</div>


DESCRIPTION :



Here is a phone keypad. It uses CSS3 : linear-background , perspective, rotate and has hovert effect on digits . Support for IE8 and below can be achieve with PIE.htc for round-borders, not perspective nor rotation.



Now copy these coding in your notepad and run it via browser....


If any problem persist while doing this or not getting the output,then email or comment here.If you force me,then I will  share code of superheroes like superman,batman,iron man etc. in my next article.