Input con css

#input1{
padding:10px;
border:solid 1px #DEDEDE;
}
#input2{
padding:10px;
border:solid 1px #DEDEDE;
border-radius:5px;
}
#input3{
padding:10px;
border:solid 1px #DEDEDE;
border-radius:5px;
box-shadow:0 0 15px #036;
-moz-box-shadow:0 0 15px #036;
-o-box-shadow:0 0 15px #036;
-ms-box-shadow:0 0 15px #036;
-webkit-box-shadow:0 0 15px #036;
}
#input4{
padding:10px;
border:solid 1px #DEDEDE;
border-radius:5px;
}
#input4:focus{
box-shadow:0 0 15px #036;
-moz-box-shadow:0 0 15px #036;
-o-box-shadow:0 0 15px #036;
-ms-box-shadow:0 0 15px #036;
-webkit-box-shadow:0 0 15px #036;
}
#input5{
padding:10px;
border:solid 1px #00C;
border-radius:5px;
width:200px;
}
#input5:focus{
box-shadow:0 0 15px #036;
-moz-box-shadow:0 0 15px #036;
-o-box-shadow:0 0 15px #036;
-ms-box-shadow:0 0 15px #036;
-webkit-box-shadow:0 0 15px #036;
}
#codigo{
background:#999;
border:solid 1px #DEDEDE;
border-radius:5px;
padding:10px;
color:#fff;
}

Input con css

En esta entrada vamos a hablar sobre los input con css y nos vamos a basar principalmente en css3 y html5 para darle estilo a nuestros input ya que son muy utilizados en los sitios web para interactuar con el usuario.

  • Que queremos lograr con este pequeño mini-tutorial de input con css?

    Lo que queremos lograr es lo mismo de siempre que todos podamos aprender a manipular los input y formularios con css, para esto como siempre te recomiendo que tengas un navegador de verdad como firefox,Chrome,Opera o Safari.

  • Que vamos hacer en este mini-tutorial de input con css?
  • Vamos a aprender.

    • Darle forma.
    • Ponerle bordes redondeados.
    • Aplicarle sombras.
    • Colocarle textos alternativos.

Bueno empezando con nuestro primer input al cual le vamos a dar forma para que no quede de esa forma rustica que aparecía antes de usar css.

El código para este primer input sería el siguiente acuérdate que el código css esta dentro de la etiqueta style.

<!DOCTYPE html>
<head>
<meta charset=”utf-8″ />
<title>input con css</title>
<style>
#input1{
 padding:10px;
 border:solid 1px #DEDEDE;
 }
</style>
</head>
<body>
<input type=”text” id=”input1″ />
</body>
</html>

Ahora seguimos con el caso numero 2 ponerle border redondeados a nuestros input.

Para obtener el efecto de los border redondeados solo agregamos una línea de código css que es border-radius y le agregamos 5px en las curvas de las esquinas.

<style>
#input1{
 padding:10px;
 border:solid 1px #DEDEDE;
 border-radius:5px;
 }
</style>

Ahora pasamos al paso 3 que es aplicarle sombras que si aun no sabes aplicar sombras te recomiendo que visite el post de Sombras con css3 donde podrás aprender a crear sombras de una forma fácil y rápida.

Sombras al hacer clic

Lo que hicimos en esta parte fue aplicarle la sombras al input con la propiedad box-shadow de css3 y en el segundo input le cambiamos el box-shadow y se lo pusimos a focus o sea para que se aplique la sombra cuando el input este activo, el código css es el siguiente.

#input1{
 padding:10px;
 border:solid 1px #DEDEDE;
 border-radius:5px;
 }
#input1:focus{
 box-shadow:0 0 15px #036;
 }
</style>

Ahora pasemos al último paso que es aplicarle texto alternativo, para eso tenemos que ir al código del input y añadirle la propiedad placeholder con el texto que queremos que muestre el input y que desaparezca al hacer clic como el siguiente input.

El codigo correspondiente para este input seria el siguiente

<!DOCTYPE html>
<head>
<meta charset=”utf-8″ />
<title>input con css</title>
<style>
#input1{
 padding:10px;
 border:solid 1px #00C;
 border-radius:5px;
 width:200px;
 }
#input1:focus{
 box-shadow:0 0 15px #036;
 }
</style>
</head>
<body>
<input placeholder=”Escribe en este input…” type=”text” id=”input1″ />
</body>
</html>

Jugando con el código css de nuestro input podemos hacer muchas más funciones como hacer que el input cambie de tamaño al hacer clic en este caso solo quitando la propiedad width: y colocándola en el #input1:focus así como también los border y agregarle muchos pero muchos efectos más para que se vean mas dinámicos.

Como el propósito de este mini-tutorial era enseñar a crear input no vamos a explicar esos detalles queda por tu cuenta hacerlo y por supuesto si tienes dudas o quieres hacer tu consulta no dudes en dejarme un comentario.

Gracias y hasta la próxima entrada….

Comments

  1. By Anónimo

  2. By blogero

  3. By aerview

  4. By Anónimo

  5. By Anónimo

  6. By Anónimo

Deja un comentario

Tu dirección de correo electrónico no será publicada.