berberapa waktu lalu saya baca turotial tentang css3 dan saya rasa ingin saya share juga di blog saya ini, teknologi css3 ini memang bukan dibilang hal baru lagi, teknologi web 2.0 sudah lama mengadopsi css3 di dalam tampilanya, ya semoga saja postingan saya tentang css3 ini bisa bermaanfaat walaupun sudah banyak blog-blog lain yang telah mebahasanya…

ada beberapa hal yang perlu saya samapaikan sebelum saya me-review script css3, perlu di ingat css3 blom bisa berjalan di browser IE, sampai saat ini IE release yang paling akhir IE 8 masih belum mampu menjalankan css3, apa sebabnya? saya pun masih bertanya-tanya, mungkin ada yang bisa menambahkan script tertentu untuk css3 bisa berjalan di IE? saya pun masih belum tau, apakah ada script yang bisa mensupport css3 untuk berjalan di IE,

oke langsung aja deh saya coba me-review css3, kali ini saya ingin membuat form input text.

langkah pertama buat file css, extensi *.css sebagai berikut..

input.styled {
	background-color: #eee;
	background: -webkit-gradient(linear,center top, center bottom,color-stop(0%, #eee),color-stop(100%, #fff) );
	background: -moz-linear-gradient( top, #eee, #fff );
	border: solid 2px #fff;
	padding: 3px 7px 3px 7px;
	border-radius: 4px;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	box-shadow: 0px 1px 3px rgba(0,0,0,0.7);
	-webkit-box-shadow: 0px 1px 3px rgba(0,0,0,0.7);
	-moz-box-shadow: 0px 1px 3px rgba(0,0,0,0.7);
	color: black;
	text-shadow: 0px 1px 1px white;
	font-family:"Calibri", Verdana, Arial;
	font-size: 10pt;
	width:180px;
}
input.styled:focus {
	box-shadow: 0px 1px 6px rgba(0,0,0,1.7);
	-webkit-box-shadow: 0px 1px 6px rgba(0,0,0,1.7);
	-moz-box-shadow: 0px 1px 6px rgba(0,0,0,1.7);
	outline: none;
	-webkit-focus-ring-color: none;
}
.dropdown{
	font-size: 10pt;
	color: black;
	padding: 3px 7px 3px 7px;
	background-color: #eee;	

	border: solid 2px #fff;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-radius: 4px;
	-webkit-box-shadow: 0px 1px 3px rgba(0,0,0,0.7);
	-moz-box-shadow: 0px 1px 3px rgba(0,0,0,0.7);
	box-shadow: 0px 1px 3px rgba(0,0,0,0.7);
	text-shadow: 0px 1px 1px white;
}
.dropdown:focus {
	box-shadow: 0px 1px 6px rgba(0,0,0,1.7);
	-webkit-box-shadow: 0px 1px 6px rgba(0,0,0,1.7);
	-moz-box-shadow: 0px 1px 6px rgba(0,0,0,1.7);
	outline: none;
	-webkit-focus-ring-color: none;
}
textarea.areastyle{
	background-color: #eee;
	background: -webkit-gradient(linear,center top, center bottom,color-stop(0%, #eee),color-stop(100%, #fff) );
	background: -moz-linear-gradient( top, #eee, #fff );
	border: solid 2px #fff;
	padding: 3px;
	padding-left: 7px;
	padding-right: 7px;
	border-radius: 4px;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	box-shadow: 0px 1px 3px rgba(0,0,0,0.7);
	-webkit-box-shadow: 0px 1px 3px rgba(0,0,0,0.7);
	-moz-box-shadow: 0px 1px 3px rgba(0,0,0,0.7);
	color: black;
	text-shadow: 0px 1px 1px white;
	font-family:"Calibri", Verdana, Arial;
	font-size: 10pt;
	width:220px;
	height:80px;
}
textarea.areastyle:focus {
	box-shadow: 0px 1px 6px rgba(0,0,0,1.7);
	-webkit-box-shadow: 0px 1px 6px rgba(0,0,0,1.7);
	-moz-box-shadow: 0px 1px 6px rgba(0,0,0,1.7);
	outline: none;
	-webkit-focus-ring-color: none;
}
input.button {
	background-color: #eee;
	background: -webkit-gradient(linear,center top, center bottom,color-stop(0%, #0372c6),color-stop(100%, #0069b9));
	background: -moz-linear-gradient(top, #0372c6, #0069b9);
	border: solid 2px white;
	padding: 2px 6px 2px 6px;
	border-radius: 4px;
	-moz-outline-style:none;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	cursor: pointer;
	box-shadow: 0px 1px 3px rgba(0,0,0,1.7);
	-webkit-box-shadow: 0px 1px 3px rgba(0,0,0,1.7);
	-moz-box-shadow: 0px 1px 3px rgba(0,0,0,1.7);
	color:#FFF;
	text-shadow: 0px 1px 1px white;
	font-size: 10pt;
}
input.button:active {
	border-width: 1px;
	margin-left: 1px;
	margin-right: 1px;
	-moz-outline-style:none;
	-box-shadow: 0px 1px 1px rgba(0,0,0,0.8);
	-webkit-box-shadow: 0px 1px 1px rgba(0,0,0,0.8);
	-moz-box-shadow: 0px 1px 1px rgba(0,0,0,0.8);
	background: -webkit-gradient(
            linear,
            center top, center bottom,
            color-stop(100%, #0372c6),
            color-stop(0%, #0069b9)
          );
	background: -moz-linear-gradient(
            top, #0069b9, #0372c6
          );
}

selanjutnya panggil class yang ada di css ke dalam form input yang ingin anda buat..
contoh :

Belajar
CSS3

Segitu dulu yah nanti saya share lagi…

Regards…

Share on Facebook