Black Web Elements
by RzaaL1306
HTML
<div id="ui">
<h1>Black Web Elements</h1>
<ul id="navigation">
<li class="first"><a class="first" href="#">Item 1</a></li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Item 4</a></li>
<li><a class="last" href="#">Item 5</a></li>
</ul>
</br>
</br>
</br>
<a class="button" id="grey">Button</a>
<a class="button" id="black">Button</a>
</br>
</br>
</br>
<form>
Input <input type="text" name="firstname" /><br />
Input <input type="text" name="lastname" />
</form>
</div>
CSS
body, html {
background-color:#2d2e2e;
font-family:Helvetica, Arial, sans-serif;
margin:0;
padding:0;
}
h1 {
color:#a3a3a3;
font-weight:100;
font-size:30px;
text-shadow:0 2px 0 #333, 0 3px 4px rgba(0,0,0,.9);
}
form {
color:#4c4c4c;
font-size:14px;
text-shadow:0 -1px 0 #000;
}
input {
background-color:#272828;
border:1px solid #181818;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
box-shadow: 0 1px 2px rgba(255,255,255,.1), inset 0 1px 2px rgba(0,0,0,.4);
-moz-box-shadow: 0 1px 2px rgba(255,255,255,.1), inset 0 1px 2px rgba(0,0,0,.4);
-webkit-box-shadow: 0 1px 2px rgba(255,255,255,.1), inset 0 1px 2px rgba(0,0,0,.4);
color:#585858;
font-family:Helvetica, Arial, sans-serif;
height:35px;
margin:10px 3px;
text-indent:7px;
text-shadow:0 1px 0 #000;
width:255px;
}
input:focus {
outline:none;
background-color:#fafafa;
color:black;
text-shadow:none;
-webkit-box-shadow: 0 0 5px #3eabff, inset 0 1px 1px #000;
-webkit-transition:background-color .5s ease-in;
-moz-transition:color 2s ease-in;
-o-transition:color .3s ease-in;
transition:color .3s ease-in;
}
#ui {
margin:100px auto;
width:auto;
text-align:center;
}
#navigation {
background: #353535; /* Old browsers */
background: -moz-linear-gradient(top,...