Tema: formulario de contacto acorta fondo de pagina al enviar el mensaje
Ver Mensaje Individual
  #2 (permalink)  
Antiguo 11/12/2012, 11:33
3lineas
 
Fecha de Ingreso: julio-2011
Mensajes: 113
Antigüedad: 12 años, 9 meses
Puntos: 4
Respuesta: formulario de contacto acorta fondo de pagina al enviar el mensaje
Código CSS: 
Ver original
  1. .contacto{
  2.     border: 0px solid #CED5D7;
  3.     border-radius: 0px;
  4.     padding: 20px 25px 20px;
  5.     margin-top: 0px;
  6.     background-color: transparent;
  7.     box-shadow: 0px 0px 0px #B5C1C5, 0 0 0 0px #EEF5F7 inset;
  8. }
  9. .contacto label{
  10.     display: block;
  11.     font-weight: bold;
  12.     font-size: 12px;
  13.     color: #FFF;
  14. }
  15. .contacto div{
  16.     margin-bottom: 5px;
  17. }
  18. .contacto input[type='text'], .contacto textarea{
  19.     background-color: #09F;
  20.     padding: 2px 0px;
  21.     width: 200px;
  22.     border: 2px solid #FFF;
  23.     resize: none;
  24.     box-shadow:0 0 0 0px #FFFFFF;
  25.     margin: 2px 0;
  26. }
  27. .contacto input[type='text']:focus, .contacto textarea:focus{
  28.     outline: none;
  29.     box-shadow:0 0 0 0px #dde9ec;
  30. }
  31. .contacto input[type='text'].invalido, .contacto textarea.invalido{
  32.     box-shadow:0 0 0 0px #FFC9C9;
  33. }
  34. .contacto input[type='submit']{
  35.     border: 1px solid #CED5D7;
  36.     box-shadow:0 0 0 1px #EEF5F7;
  37.     padding: 2px 8px;
  38.     border-radius: 10px;
  39.     font-weight: bold;
  40.     text-shadow: 1px 1px 0px white;
  41.     
  42.     background: #e4f1f6; 
  43.     background: -moz-linear-gradient(top, #e4f1f6 0%, #cfe6ef 100%);
  44.     background: -webkit-linear-gradient(top, #e4f1f6 0%,#cfe6ef 100%); 
  45. }
  46. .contacto input[type='submit']:hover{
  47.     background: #edfcff; 
  48.     background: -moz-linear-gradient(top, #edfcff 0%, #cfe6ef 100%);
  49.     background: -webkit-linear-gradient(top, #edfcff 0%,#cfe6ef 100%); 
  50. }
  51. .contacto input[type='submit']:active{
  52.     background: #cfe6ef; 
  53.     background: -moz-linear-gradient(top, #cfe6ef 0%, #edfcff 100%);
  54.     background: -webkit-linear-gradient(top, #cfe6ef 0%,#edfcff 100%);
  55. }
  56. .error{
  57.     background-color: #BC1010;
  58.     border-radius: 4px 4px 4px 4px;
  59.     color: white;
  60.     font-weight: bold;
  61.     margin-left: 16px;
  62.     margin-top: 6px;
  63.     padding: 6px 12px;
  64.     position: absolute;
  65. }
  66. .error:before{
  67.     border-color: transparent #BC1010 transparent transparent;
  68.     border-style: solid;
  69.     border-width: 6px 8px;
  70.     content: "";
  71.     display: block;
  72.     height: 0;
  73.     left: -16px;
  74.     position: absolute;
  75.     top: 8px;
  76.     width: 0;
  77. }
  78. .result_fail{
  79.     background: none repeat scroll 0 0 #BC1010;
  80.    border-radius: 1px 1px 1px 1px;
  81.     color: white;
  82.     font-weight: bold;
  83.     padding: 1px 1px;
  84.     text-align: center;
  85. }
  86. .result_ok{
  87.     background: none repeat scroll 0 0 #1EA700;
  88.     border-radius: 1px 1px 1px 1px;
  89.     color: white;
  90.     font-weight: bold;
  91.     padding: 1px 1px;
  92.     text-align: center;
  93.     width: 150px;
  94. }
  95.  
  96. .error{
  97.     font-size: 12px;
  98.     background-color: #DC143C;
  99.     padding: 6px 12px;
  100.     border-radius: 4px;
  101.     color: white;
  102.     font-weight: bold;
  103.     margin-left: 16px;
  104.     margin-top: 2px;
  105.     position: absolute;
  106. }
  107. .error:before{ /* Este es un truco para crear una flechita */
  108.     content: '';
  109.     border-top: 8px solid transparent;
  110.     border-bottom: 8px solid transparent;
  111.     border-right: 8px solid #DC143C;
  112.     border-left: 8px solid transparent;
  113.     left: -16px;
  114.     position: absolute;
  115.     top: 5px;
  116. }
  117.  
  118. .result_fail{
  119.     background: none repeat scroll 0 0 #BC1010;
  120.     border-radius: 1px 1px 1px 1px;
  121.     color: white;
  122.     font-weight: bold;
  123.     padding: 10px 10px;
  124.     text-align: center;
  125.     width: 150px;
  126. }
  127. .result_ok{
  128.     background: none repeat scroll 0 0 #1EA700;
  129.     border-radius: 1px 1px 1px 1px;
  130.     color: white;
  131.     font-weight: bold;
  132.     padding: 10px 10px;
  133.     text-align: center;
  134.     width: 150px;
  135. }