Rutarelativa

Publicidad

Últimas anotaciones reducidas

  • Amnistía Pirata: Juega a Machinarium por solo 5 dólares Amnistía Pirata: Juega a Machinarium por solo 5 dólares

    Machinarium es uno de esos juegos sobresalientes que tanto nos gusta, y éste un buen movimiento para conseguir beneficios, pues han lanzado lo que ellos han llamado Amnistía Pirata. La Amnistía Pirata consiste en que los jugadores puedan jugar a Machinarium por solo 5 dólares (unos 3,90 €), ya que estiman que entre el 5% y el 15% de los que adquirieron el juego pagaron por él, y con este movimiento pretenden que aquellos jugadores que lo obtuvieron por diferentes vías (y los nuevos interesados) puedan comprarlo por un precio muy reducido.

    Incluye además la banda sonora del juego, y podéis jugar a una entretenida demo en la página oficial del juego para que, los que no lo conozcáis, podáis hacerlo y entrar en el mundo de Machinarium. La oferta es válida hasta el 12 de Agosto.

    [Amnistía Pirata: Juega a Machinarium por solo 5 dólares]

  • Video de una proyección 3D en Amsterdam Video de una proyección 3D en Amsterdam

    Este video se corresponde con una proyección 3D que hicieron en plena calle de Amsterdam, donde vemos que los elementos del escenario van sufriendo transformaciones dando como resultado un impresionante video con efecto 3D.

    Cuando te das cuenta que el edificio no está realmente ahí es cuando realmente impresiona.

    [Video de una proyección 3D en Amsterdam]

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

Últimos comentarios

  • Avatar del usuario andres andres si pudieran especificar bien todos los pasos para la gente que no...
  • Avatar del usuario andres andres ese juego se pausa despues de las 40 horas que llevas jugadas...
  • Avatar del usuario Sergiocius Sergiocius De momento no has seguido los pasos para escribir un comentario...
  • Avatar del usuario raul suarez ladinez raul suarez ladinez !hola¡ quiero saber si segui los pasos correctamente y por lo...
  • Avatar del usuario Sergiocius Sergiocius Hola Boye, gracias por tu comentario. Vaya, ¡veo que eres de...
  • Avatar del usuario Boye Boye Hola! he llegado hoy de rebote al blog y me resulta bastante...
  • Avatar del usuario Jorge Jorge En Google Chrome no funciona lo de arrastrar a la barra de marcadores.
  • Avatar del usuario Alejandro Alejandro Juas... ya solo queda 1 mes y 10 días :S ¡Que verano mas largo!
  • Avatar del usuario Sura Sura Algunas fotos nos se pueden ver, yo no entiendo de esto pero al...
  • Avatar del usuario Sergiocius Sergiocius @Manuel Eso es difícil creo, ya que desde blogger cuando posteas...

Fans en Facebook de Ruta Relativa

Lo más comentado

Lo más visto

Post al azar

Cargar imágenes mediante CSS

(2)
27 / Enero / 2010
CSS, Desarrollo
Cargar imágenes mediante CSS

No es una “carga” real de la imagen mediante CSS, lo que añadiremos será una imagen de fondo de modo que parezca un preloader, así dará la sensación de carga al usuario. La carga de imágenes se puede realizar mediante Javascript y resultaría más óptimo, pero una carga de este tipo es más fácil de implementar y los resultados a la vista son parecidos; repito que es más optimo es realizarlo mediante Javascript, pero una página con pocas imágenes queda bastante bien mientras está el proceso de carga.

Cargar imagenes mediante CSS

Nuestro código CSS añadirá un borde a la imagen para que el preloader no parezca flotante en la nada, añadiremos un espaciado entre la imagen y el borde de 5 px y por último una imagen de fondo que será nuestro preloader mientras la imagen no está cargada.

img
{
     padding: 5px;
     border: 1px solid #CCCCCC;
     background: url( "load.gif" ) center center no-repeat;
}

El códgio HTML es el siguiente, como veis no tiene nada fuera de lo normal para cargar imágenes mediante CSS.

<img width="78" height="150" src="1.jpg"/>
<img width="78" height="150" src="2.jpg"/>
<img width="78" height="150" src="3.jpg"/>
<img width="78" height="150" src="4.jpg"/>
<img width="78" height="150" src="5.jpg"/>
<img width="78" height="150" src="6.jpg"/>
<img width="78" height="150" src="7.jpg"/>
<img width="78" height="150" src="8.jpg"/>

Demo: Cargar imagenes mediante CSS

votar

Artículos relacionados

Sobre KeLDroX

Avatar del usuario KeLDroX
288

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 Cargar imágenes mediante CSS

Hasta el momento el artículo Cargar imágenes mediante CSS no tiene Trackbacks.

Comentarios en Cargar imágenes mediante CSS

1
Avatar del usuario Karr

Buen tip. Gracias!

Karr
27/01/2010 12:49:09
2
Avatar del usuario Sampedro

Hola Karr, la verdad que con muy poco código queda bastante elegante el efecto. Saludos!

Sampedro 27/01/2010 12:56:14

Escribir comentario en Cargar imágenes mediante CSS

¡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
Rutarelativa
Categorías destacadas
Síguenos
Nube de tags
Aplicaciones Apple Arte Cachondeo Celulares Cine Como Comprar Curiosidades Desarrollo Descargas Diseño Facebook Fotografías Freebies Gadgets Geek Google Gratis Herramientas Humor Imágenes Internet iPhone Javascript Juegos Linux Móviles Música Online Php Plugins Publicidad Redes Sociales Servicios Tecnología Trucos Tutoriales Twitter Video Videojuegos Videos Web Wordpress Youtube
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.