Rutarelativa

Publicidad

Últimas anotaciones reducidas

  • Curiosidades y Easter Eggs de Toy Story 3 [Video] Curiosidades y Easter Eggs de Toy Story 3 [Video]

    Tras ver Toy Story 3 y salir de la sala bastante encantado con la película me dispuse a buscar curiosidades y Easter Eggs de Toy Story 3 y he dado con este video de Youtube, que os dejo en el enlace final, que contiene algunos interesantes, y otros bastante exagerados.

    Entre dobladores curiosos, mensajes ocultos por los escenarios o cameos de otras de sus películas, el video nos va presentando lo que no pudimos ver mientras disfrutábamos de la última obra de Disney Pixar.

    [Video de Curiosidades y Easter Eggs de Toy Story 3]

  • La Fail Whale de Twitter completamente en CSS La Fail Whale de Twitter completamente en CSS

    La Fail Whale de Twitter (¿os acordáis del juego Die Fail Whale?) es la Ballena que aparece cuando el sistema está sobre su capacidad, es decir que tiene un elevado número de usuarios conectados al mismo tiempo, cosa que ocurre con relativa frecuencia. Se ha hecho ya famosa entre los Twitteros, tanto que incluso han diseñado a la Fail Whale de Twitter completamente en CSS.

    Visitad el enlace y mirad el código fuente, los amantes del CSS sabrán apreciar este inmenso trabajo.

    [La Fail Whale de Twitter completamente en CSS]

  • ¿Qué son las Redes Sociales? [Video] ¿Qué son las Redes Sociales? [Video]

    ¿Qué son las Redes Sociales?. A día de hoy es raro que alguien no lo sepa, o no conozca una red social, pero es algo que encuentro con normalidad: personas que preguntan qué es una red social, o aunque conozcan redes sociales, no sepan realmente porque se llaman así.

    Este video explicativo explica, valga la redundancia, de una forma muy clara qué son y en qué consisten las redes sociales. Hechadle un vistazo porque está muy simpático. Podéis escoger el idioma Español en el video.

    [¿Qué son las Redes Sociales?]

  • ¿Donde ver todos los logos de Google o Doodles? ¿Donde ver todos los logos de Google o Doodles?

    Como sabéis los logos de Google o Doodles (que significa garabatos) van cambiando algunos días según motivos especiales. Pero, ¿donde ver todos los logos de Google o Doodles?: Google tiene habilitado un sitio web en donde podemos ver los Doodles de todos los Países, el motivo de cada Doodle, la fecha, etc. Además cuentan con una tienda, Doodle Store, donde podéis adquirir camisetas con los Doodles que más te gusten, sólo para los más fanáticos.

    [¿Donde ver todos los logos de Google o Doodles?]

Últimos comentarios

  • Avatar del usuario Sergiocius Sergiocius @john Es muy fácil, mira, para saber el valor de BlogID puedes...
  • Avatar del usuario john john hola amigo estoy intentando modificar el .php para poder postear...
  • Avatar del usuario anonimo anonimo muy bueno! gracias por compartir me sirvio!!!
  • Avatar del usuario merbenCLKGTR merbenCLKGTR Es increible, realmente senti que me estaban cortando el pelo......
  • Avatar del usuario neskaXb neskaXb QUE FABULOSO SERIA UNA 2DA CONSOLA ASI DE BUENA COMO LA DREAMCAST...
  • Avatar del usuario KeLDroX KeLDroX Hola pante el problema que comentas es debido a tu reglas CSS...
  • Avatar del usuario pante pante Listo, me respondo a mi mismo :D Luego de raaato intentando, me...
  • Avatar del usuario pante pante hola amigo, gracias por la data el problema es que a mi el...
  • Avatar del usuario Sergiocius Sergiocius Pues si, lo de esa familia no tiene nombre... XD Por cierto,...
  • Avatar del usuario Alberto Alberto Joder, ya te digo, Carmine debe morir, vaya familia mas...

Fans en Facebook de Ruta Relativa

Lo más comentado

Lo más visto

Post al azar

Añadir icono dentro de un Input

(0)
10 / Marzo / 2010
Añadir icono dentro de un Input

En el diseño de una página Web es normal encontrar formularios, ya que son los encargados de dar interactividad a nuestro usuarios, añadiendo o editando datos que posteriormente se verán reflejados en la página Web. Una forma buena para atraer a los usuarios a usar nuestros formularios es con un buen diseño, como por ejemplo personalizándolos acorde al aspecto de nuestra página Web. Añadir iconos dentro de los Input mediante CSS es una técnica bastante fácil de realizar y queda bastante profesional en un formulario.

Añadir icono dentro de un Input – Parte 1

El aspecto que intentamos conseguir es el que en cada campo del formulario contenga un icono representativo de lo que debe introducir nuestro usuario. Lo realizaremos mediante un grupo de imágenes que estarán en el interior de los campos Input en la parte izquierda. Añadiremos una separación por la parte izquierda entre el texto introducido y el icono para que el texto no quede encima del icono. Y por último añadiremos varias clases que serán las encargadas de posicionar cada icono dentro del Input.

Código HTML

<p>
    <label>Icono usuario</label>
    <input type="text" value="Introduce nombre de usuario" class="user" />
</p>
<p>
    <label>Icono Password</label>
    <input type="text" value="Introduce tu contraseña" class="password" />
</p>
<p>
    <label>Icono favorito</label>
    <input type="text" value="Introduce tu canción favorita" class="favorite" />
</p>
<p>
    <label>Icono buscar</label>
    <input type="text" value="Introduce termino de búsqueda" class="search" />
</p>
<p>
    <input type="submit" value="Insertar datos" class="submit" />
</p>

Añadir icono dentro de un Input – Parte 2

Antes de ver el código CSS que representará gráficamente los objetos en pantalla es mejor ver esta imagen que muestra lo que realmente está ocurriendo con las reglas CSS.

Añadir icono dentro de un Input

Código CSS

input
{
    background: url("iconos.gif") no-repeat scroll 0 0 transparent;
    border: 1px solid #BFBFBF;
    color: #BFBFBF;
    padding: 5px 5px 5px 25px;
    width: 230px;
}

input.submit
{
    width: auto;
    background-position: 4px -91px;
    background-color: #999999;
    color: #FFFFFF;
    cursor: pointer;
}

input.user{ background-position: 4px -21px; }
input.search{ background-position: 4px 4px; }
input.password{ background-position: 4px -46px; }
input.favorite{ background-position: 4px -70px; }

Con estas sencillas reglas CSS podremos añadir iconos dentro de los campos Input de un formulario quedando un poco más acorde a nuestro diseño. Tan sólo necesitamos añadir más imágenes e ir aplicándole clases para las distintas posiciones en la que se encontrará el icono.

Demo: Ir a la demo añadir icono dentro de Input
Descarga: Descargar añadir icono dentro de Input
Iconos: Tutorial9

votar

Artículos relacionados

Sobre KeLDroX

284

Desarrollador en entornos web y Diseñador de profesión, muy activo, que busca siempre enfrentarse a retos cada vez más dificiles. Si un día no hago algo nuevo o no he superado alguna dificultad para mi es un día vacío. Cuento con dos titulaciones: Técnico en Explotación de Sistemas Informáticos y Técnico Superior en Desarrollo de Aplicaciones Informáticas. Fundé rutarelativa porque siempre quise tener un sitio en donde compartir mis experiencias profesionales y a los problemas que me enfrento día a día en el ámbito profesional.

Sigue a Ruta Relativa

Trackback en Añadir icono dentro de un Input

Hasta el momento el artículo Añadir icono dentro de un Input no tiene Trackbacks.

Comentarios en Añadir icono dentro de un Input

Hasta el momento el artículo Añadir icono dentro de un Input no tiene comentarios, sé el primero en comentar en él.

Escribir comentario en Añadir icono dentro de un Input

¡Tu opinión nos interesa!. Escribe tu opinión lo más clara posible para que todos podamos entenderla, evita el spam, comentarios ofensivos, etc. ya que serán eliminados. Tu opinión sera moderada antes de ser publicada, por lo que su aparición en la web puede tardar unos minutos. Si deseáis ponerse en contacto para sugerencias o críticas podéis hacerlo desde el formulario de contacto.

Sigue a rutarelativa en twitter
Editores de Ruta Relativa
Avatar del editor KeLDroX KeLDroX Desarrollador en entornos web y Diseñador de profesión, muy activo, que busca siempre enfrentarse a retos cada vez más dificiles. Si un día no hago algo nuevo o no he superado alguna dificultad para mi es un día vacío. Cuento con dos titulaciones: Técnico en Explotación de Sistemas Informáticos y Técnico Superior en Desarrollo de Aplicaciones Informáticas. Fundé rutarelativa porque siempre quise tener un sitio en donde compartir mis experiencias profesionales y a los problemas que me enfrento día a día en el ámbito profesional.
Avatar del editor sergiocius sergiocius Soy un desarrollador en entornos web y escritorio, entusiasta y amante de mi trabajo del que cada día espero aprender algo nuevo. Tengo una titulación de Técnico Superior en Desarrollo de Aplicaciones Informáticas y actualmente curso el primer año de Carrera Universitaria con el poco tiempo que me deja el trabajo. Fundé rutarelativa porque quiero que mi esfuerzo y tiempo invertidos en aprender y poner en práctica algo le resulte útil y fácil a otro usuario, del mismo modo que yo aprendo y ahorro tiempo con la ayuda de los demás.