Publicidad
Anotaciones reducidas
La vida en un día: Película de un día en la Tierra
La vida en un día -Life in a day- es una película hecha por los propios usuarios de Youtube, que durante el día 24 de Julio del 2010 grabaron las cosas que pasaban en su vida durante ese día, y el director Kevin McDonald ha reunido en forma de película de un día en la Tierra.
De una hora y media de duración, veremos todo tipo de escenas en todas las partes del mundo, con una emotiva visión del mundo real tanto con sus cosas bellas y buenas, como con la más cruda visión del ser humano y su realidad.
Video: Las posibilidades de Kinect
Cuando oímos hablar de Kinect, no podemos evitar pensar en un "simple" aparato de detección de movimientos para videojuegos, y en cierto modo es así.
Lo bueno es que Microsoft ha lanzado una SDK de Kinect para que los usuarios puedan crear aplicaciones que exploten las capacidades del dispositivo, dando lugar a miles de ideas.
El siguiente video es al fin y al cabo con fines publicitarios, pero nos da que pensar acerca de las aún sin explotar posibilidades de Kinect. Disfrutadlo.
A Space Journey: Una excursión por el espacio en un video HD
A mi personalmente me encanta ver imágenes y fotografías del espacio, ver planetas lejanos, nebulosas o constelaciones. Es por eso que quiero compartir con ustedes A Space Journey, una excursión por el espacio en un video HD de Youtube, acompañado por una buena música y una ingente cantidad de fotografías espaciales.
Realmente merece la pena ver el video en pantalla completa y seleccionando que se reproduzca a 720p para disfrutar más del mismo.
[A Space Journey: Una excursión por el espacio en un video HD]
La historia de los Exploradores Web
Desde prácticamente los comienzos de Internet los Exploradores Web o Navegadores web nos han acompañado, haciendo las veces de herramientas indispensables para una navegación que a cada año que pasa se hace más cómoda y más intuitiva.
En Testking encuentro una imágen que contiene un gran esquema de la historia de los Exploradores Web desde el primer Nescape en 1994 hasta los navegadores modernos de este año 2011.
Una imágen interesante para conocer cuál ha sido la evolución en éste área.
Mapa de vuelos mundiales en 24 horas [Video]
Interesante video donde se muestra un mapa de vuelos mundiales en 24 horas, siendo cada punto amarillo la representación de un avión. Viendo el video podemos apreciar el impresionante afluente de vuelos en Estados Unidos y Asia, pero sobre todo la gran cantidad de vuelos en Estados Unidos.
Últimos comentarios
Fans en Facebook de Ruta Relativa
Lo más comentado
Lo más visto
Post al azar
1.2 Escogiendo el nombre de nuestro blog o startup. ¿Cómo crear un buen nombre?
Publicado por sergiocius el día 03/08/2010Guardado en Tutoriales
Google Maps muestra recorridos en Bicicleta
Publicado por sergiocius el día 11/03/2010Guardado en Google
Robot con piezas de Lego resuelve el cubo de Rubik en 11 segundos
Publicado por sergiocius el día 23/02/2010Guardado en Robótica
Colección completa de National Geographic en un disco duro de 160GB
Publicado por sergiocius el día 31/12/2009Guardado en Comprar
Vectorizar imágenes online
Publicado por sergiocius el día 21/01/2010Guardado en Diseño
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.
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>
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.
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
Artículos relacionados
La Fail Whale de Twitter completamente en CSS
Publicado por sergiocius el día 28/07/2010Guardado en Anotaciones reducidas
CSS: Centrar elementos en pantalla
Publicado por KeLDroX el día 29/01/2010Guardado en CSS,Tips
Cargar imágenes mediante CSS
Publicado por KeLDroX el día 27/01/2010Guardado en CSS,Desarrollo
Usar Google Translate con PHP y Python
Publicado por sergiocius el día 28/06/2010Guardado en Desarrollo
Nuevo diseño y funcionalidades en Ruta Relativa
Publicado por KeLDroX el día 31/05/2010Guardado en Rutarelativa
Sobre 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.
Escribir comentario en Añadir icono dentro de un Input