Mejorar estilos de los box, y los cuadros

RafaelYepez · #1 (**permalink**) 24/08/2013, 00:03

Quiero saber como hacer más llamativos los box, me refiero al campo para escribir,, como ponerle un grandiante de colores como background a un cuadro, mejorar el estilo de los botones, hacer bordes llamativos, con sombra, colores, etc, es decir, quisiera saber códigos en HTML para poder hacer más llamativa una web, sin necesidad de agregar imágenes de background que la hagan pesada, acá tengo el ejemplo de un código html que estoy haciendo, y se ve muy feo:

Código PHP:

  <html> 
<body> 
 
 
<CENTER><img src="http://img17.imageshack.us/img17/8379/n5s0.png"  alt=""/></CENTER> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
<font face="Georgia, Times New Roman, Times, serif" size="4" color="#00009C"><b><font color="#158000"><center> 
  <br></center> 
<table width="100%" border="0" cellpadding="8" bordercolor="#000000" bgcolor="#FFFFFF"> 
  <tr>  
   <td height="100" bordercolor="#E4E4E4" bgcolor="#FFFFFF"> <div align="left"><font size="2" face="Arial"><b><br> 
   </b></font></div></td> 
   <td width="33%" colspan="2" bordercolor="#E4E4E4" bgcolor="#FFFFFF"><p align="center"><font size="3" face="Arial"><b> <br> 
   </b></font></p>     </td> 
   </font></b></font></p>     </td> 
    
</tr> 
<tr bgcolor="#C0C0C0" style="vertical-align: top">  
  <td height="56" colspan="3" bordercolor="#E4E4E4" bgcolor="#D6EECE" class="LabelColor" style="text-align: right"><div align="center"> 
      <p><font face="Georgia, Times New Roman, Times, serif" size="4" color="#00009C"><b> 
      <input name="txtconexion" type="hidden" id="txtconexion"> 
    <font color="#158000">CARTA A CANTV POR EL PÉSIMO SERVICIO DE NAVEGACIÓN DE ABA</font></b></font><font color="#1a2d01" size="2"> </Font></b></p> 
 
<tr> 
<tr bgcolor="f0ffef">  
        <td width="148%" height="135" bgcolor="f0ffef"> <div align="right"><font color="#FFFFFF" size="9" face="Arial"><strong><font color="#000000" size="2">&nbsp; 
           
           
           
<body lang=ES style='tab-interval:35.4pt'> 
 
<div class=WordSection1> 
 
<p class=MsoNormal style='text-align:justify'><b style='mso-bidi-font-weight: 
normal'>Sres CANTV.<o:p></o:p></b></p> 
 
<p class=MsoNormal style='text-align:justify;text-indent:35.4pt'>Nosotros 
ciudadanos de la Ciudad de El Tocuyo, Estado Lara, nos dirigimos a ustedes en 
la oportunidad de manifestarle nuestra angustia, preocupación y molestia por el 
pésimo servicio de Internet Aba en nuestra ciudad.<o:p></o:p></p> 
 
<p class=MsoNormal style='text-align:justify;text-indent:35.4pt'>Desde 
hace<span style='mso-spacerun:yes'>* </span>3 meses, la velocidad de 
conexión<span style='mso-spacerun:yes'>* </span>ha disminuido a mínimos 
insoportables, trayendo como consecuencia la afectación de la calidad<span 
style='mso-spacerun:yes'>* </span>del servicio. En este sentido los tocuyanos 
hemos llamado insistentemente al número 0800 – CANTV – 00 para que se arregle 
el problema pero no pasa de darnos un numero de reporte que todos sabemos que 
no tendrá solución.<o:p></o:p></p> 
 
<p class=MsoNormal style='text-align:justify;text-indent:35.4pt'>Así mismo<span 
style='mso-spacerun:yes'>* </span>los tocuyanos hemos venido pagando por un 
servicio que no corresponde al dinero entregado, en otras palabras, pagamos por 
un servicio ABA que más bien parece Dial – up.<o:p></o:p></p> 
 
<p class=MsoNormal style='text-align:justify;text-indent:35.4pt'>En preguntas a 
los técnicos de CANTV<span style='mso-spacerun:yes'>* </span>que atienden en 
esta ciudad nos han dicho que un aparato que distribuye el INTERNET a la ciudad 
se dañó y que hay muchos puertos para la capacidad de los equipos encargados de 
distribuir el Internet.<o:p></o:p></p> 
 
<p class=MsoNormal style='text-align:justify;text-indent:35.4pt'>En espera de 
una respuesta pronta, afirmativa a este problema.<o:p></o:p></p> 
 
<p class=MsoNormal><o:p>&nbsp;</o:p></p> 
 
</Font></b></td> 
<td> 
</tr> 
</div></td> 
</tr> 
</form> 
</body> 
</html> 
 
<html> 
<body> 
 
<form method="post" action="../Downloads/add_reg.php3"> 
<table width="97%" border="0" cellpadding="8" bordercolor="#000000" bgcolor="#FFFFFF"> 
  <tr>  
   <td height="76" bordercolor="#E4E4E4" bgcolor="#FFFFFF"> <div align="left"><font size="2" face="Arial"><b><br> 
   </b></font></div></td> 
   <td width="33%" colspan="2" bordercolor="#E4E4E4" bgcolor="#FFFFFF"> <p align="center"><font size="3" face="Arial"><b> <br> 
   </b></font></p>     </td> 
  </tr> 
<tr bgcolor="#C0C0C0" style="vertical-align: top">  
  <td height="56" colspan="3" bordercolor="#E4E4E4" bgcolor="#cad2c7" class="LabelColor" style="text-align: right"><div align="center"> 
    <p><font face="Georgia, Times New Roman, Times, serif" size="4" color="#004580"><b> 
    <input name="txtconexion" type="hidden" id="txtconexion"> 
Registra aquí tus datos, para anexarlos a la carta, y luego enviarlos a la sede central de CANTV</b></font><font color="#004580" size="2"> </Font></b></p> 
 
 
 
<tr> 
<tr bgcolor="bde5f1">  
          <td width="48%" height="35" bgcolor="d2f1fa"> <div align="right"><font color="#FFFFFF" size="4" face="Arial"><strong><font color="#01102d" size="3">Nombre completo del titular de la línea: </Font></b></td> 
<td><input type="nombre" name="nombre" value><div align="center"><b> 
</tr> 
 
<tr> 
<tr bgcolor="bde5f1">  
          <td width="48%" height="35" bgcolor="d2f1fa"> <div align="right"><font color="#FFFFFF" size="4" face="Arial"><strong><font color="#01102d" size="3">Número de caso (si realizó algún reclamo a CANTV, el número que le generaron de su reporte):</Font></b></td> 
<td><input type="caso" name="caso" value><div align="center"><b> 
</tr> 
 
<tr> 
<tr bgcolor="bde5f1">  
          <td width="48%" height="35" bgcolor="d2f1fa"> <div align="right"><font color="#FFFFFF" size="4" face="Arial"><strong><font color="#01102d" size="3">Cedula de Identidad: </Font></b></td> 
<td>V-<input type="ci" name="ci" value><br><div align="center"><b> 
</tr> 
 
<tr> 
<tr bgcolor="bde5f1">  
          <td width="48%" height="35" bgcolor="d2f1fa"> <div align="right"><font color="#FFFFFF" size="4" face="Arial"><strong><font color="#01102d" size="3">Teléfono: </Font></b></td> 
<td>0253 - 663<input type="telefono" name="telefono"  value><div align="center"><b> 
</tr> 
 
 
              </font></div></td> 
  </tr> 
  <tr bgcolor="#2e9ff7">  
              <th height="38" colspan="2" nowrap> <div align="center">  
                  <input type="Submit" name="enviar" value="Aceptar información"></td> 
                </div></th> 
</form>                 
</body> 
</html>

¿Está como fea verdad?

pzin · #2 (**permalink**) 24/08/2013, 03:28

Realmente tu pregunta es un tema de CSS. Muevo el tema para allá.

Pues usando CSS no tienes mayor problema, puedes añadir todo eso que dices, esquinas redondeadas, bordes, transiciones, etc.

Por ejemplo:

Código CSS:

Ver originalinput {
  background: grey;
  border-radius: 5px;
  padding: 10px;
  transition: background .4s ease-out;
}
 
input:focus {
  background: white;
}

Pero antes de hacer todo esto, deberías de revisar todo tu código HTML ya que tienes muchísimos fallos:

Falta un doctype
Usas etiquetas descatalogadas desde hace 14 años (font, center...)
Uso de tablas para la maquetación
Repites la etiqueta body
Atributos descatalogados (align, bgcolor...)

Básicamente leer un manual de HTML y otro de CSS: librosweb.es