public
Created

Gcyrillus , digicode, no psd

  • Download Gist
dabblet.css
CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95
/* 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%;
 
}
dabblet.html
HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
<div class="p3d">
<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>
</div>
settings.json
JSON
1
{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"result"}

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.