រចនា Login Form ដ៏ស្រស់ស្អាតជាមួយនឹង CSS3

តើអ្នកចង់បាន login form ដែលមានភាពទាក់ទាញដែរឬទេ? នៅខាងក្រោមនេះ អាយធីកូនខ្មែរ នឹងបង្ហាញពីការរចនា login form ដែលមានភាពទាក់ទាញ និង ស្រស់ស្អាត ជាមួយនឹង CSS3។
យើងនឹងធ្វើការរចនាទៅលើ textbox,password និង ប៊ូតុង ដែលមានដូចខាងក្រោម៖

. រចនា CSS ទៅឲ្យ textbox និង password field

?

1 2 3 4 5 6 7 8 9

input[type="text"],input[type="password"]{  padding:5px;  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;  transition: border 0.2s linear 0s, box-shadow 0.2s linear 0s;  border-radius: 2px 2px 2px 2px;  border: 1px solid #CCCCCC;  margin:5px;  width:300px; }

. រចនា CSS ទៅឲ្យ textbox និង password field នៅពេលដែល mouse កំពុងស្ថិតនៅ

?

1 2 3 4 5 6 7 8 9

input[type="text"]:focus,input[type="password"]:focus{  border-color: rgba(82, 168, 236, 0.8);  outline: 0;  outline: thin dotted \9;          -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 5px rgba(82, 168, 236, 0.6);  -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 5px rgba(82, 168, 236, 0.6);  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 5px rgba(82, 168, 236, 0.6); }

 . រចនា CSS ទៅឲ្យ button submit

?

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

input[type="submit"]{  border-color: rgba(0, 0, 0, 0.15) rgba(0, 0, 0, 0.15) rgba(0, 0, 0, 0.25);  -moz-border-bottom-colors: none;  -moz-border-left-colors: none;  -moz-border-right-colors: none;  -moz-border-top-colors: none;  background-color: #F5F5F5;  background-image: -moz-linear-gradient(center top , #FFFFFF, #E6E6E6);  background-repeat: repeat-x;  border-color: #E6E6E6 #E6E6E6 #A2A2A2;  border-image: none;  border-radius: 4px 4px 4px 4px;  border-style: solid;  border-width: 1px;  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 1px 2px rgba(0, 0, 0, 0.05);  color: #333333;  cursor: pointer;  display: inline-block;  font-size: 14px;  line-height: 20px;  text-align: center;  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);  vertical-align: middle;  padding:4px 10px;  margin:5px; }

 . រចនា CSS ទៅឲ្យ button submit នៅពេលដាក់ mouse ពីលើ

?

1 2 3 4 5 6 7 8 9 10 11 12 13

input[type="submit"]:hover{   color: #333333;   text-decoration: none;   background-color: #e6e6e6;   *background-color: #d9d9d9;   /* Buttons in IE7 don't get borders, so darken on hover */     background-position: 0 -15px;   -webkit-transition: background-position 0.1s linear;      -moz-transition: background-position 0.1s linear;        -o-transition: background-position 0.1s linear;           transition: background-position 0.1s linear; }