HTML kendi yaptığım componentsler

<style type="text/css">
.yazikutusu {
outline:none;
height:30px;
background-color:#333;
color:#CCC;
border:1px #CCC solid;
padding-left:5px;
border-radius:5px;
}
.yazikutusu:focus {
box-shadow: inset 2px 2px 10px #000;
	-moz-box-shadow: inset 2px 2px 10px #000;
	background-color:#CCC;
	color:#333
}
</style>
<input type="text" class="yazikutusu" value="OxMaNiA" />
<!--OxMaNiA-->

<style type="text/css">
.buton {
height:30px;
background-color:#333;
color:#CCC;
border:1px #CCC solid;
padding-left:5px;
border-radius:5px;
}
.buton:hover {
box-shadow: inset 2px 2px 10px #000;
	-moz-box-shadow: inset 2px 2px 10px #000;
	background-color:#CCC;
	color:#333
}
</style>
<input type="submit" class="buton" value="OxMaNiA" />
<!--OxMaNiA-->

<style type="text/css">
.yazi,devami{ margin:0px; padding:0px; }
.yazi {
background-color:#333;
color:#CCC;
width:650px;
padding-top:9px;
padding-left:10px;
height:30px;
border:#CCC 1px solid;
font-size:18px;
box-shadow:#000 0px 0px 10px
}
.devami {
margin-left:1px;
width:658px;
border:#CCC 1px solid;
font-size:12px;
background-color:#CCC;
color:#FBS;
height:200px;
box-shadow:#000 0px 0px 10px
}
</style>
<div class="yazi">Bu bir deneme baslik yazisidir.</div>
<div class="devami">Yazi aciklamasidir.</div>
<!--OxMaNiA-->