Foros del Web » Creando para Internet » CSS »

Mejorar estilos de los box, y los cuadros

Estas en el tema de Mejorar estilos de los box, y los cuadros en el foro de CSS en Foros del Web. 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, ...
  #1 (permalink)  
Antiguo 24/08/2013, 00:03
 
Fecha de Ingreso: junio-2013
Ubicación: Estado Lara
Mensajes: 33
Antigüedad: 11 años, 6 meses
Puntos: 0
Mejorar estilos de los box, y los cuadros

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>

<
class=MsoNormal style='text-align:justify'><b style='mso-bidi-font-weight:
normal'
>Sres CANTV.<o:p></o:p></b></p>

<
class=MsoNormal style='text-align:justify;text-indent:35.4pt'>Nosotros
ciudadanos de la Ciudad de El Tocuyo
Estado Laranos 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>

<
class=MsoNormal style='text-align:justify;text-indent:35.4pt'>Desde
hace
<span style='mso-spacerun:yes'>* </span>3 mesesla 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 servicioEn 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>

<
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 palabraspagamos por
un servicio ABA que más bien parece Dial – up
.<o:p></o: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>

<
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>

<
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 datospara anexarlos a la cartay 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 CANTVel 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?
  #2 (permalink)  
Antiguo 24/08/2013, 03:28
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.489
Antigüedad: 22 años, 4 meses
Puntos: 2114
Respuesta: Mejorar estilos de los box, y los cuadros

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 original
  1. input {
  2.   background: grey;
  3.   border-radius: 5px;
  4.   padding: 10px;
  5.   transition: background .4s ease-out;
  6. }
  7.  
  8. input:focus {
  9.   background: white;
  10. }

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

Etiquetas: box, cuadros, estilos, html, mejorar
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 01:48.