CSS Hacks
CategoríaHacks sobre CSS para solucionar problemas.
Precargar imágenes con CSS
Siempre es bueno que las imágenes tarden poco en cargar, para no impacientar al lector y que acabe por irse de la página. Para precargar imágenes mediante CSS, solo deberemos aplicar este código CSS: .preload{display:none;} Después creamos un div que agrupe a nuestras imágenes precargadas. <div class=”preload”> <img src=”images/dog-over.gif” alt=”Dog” /> <img src=”images/cat-over.gif” alt=”Cat” /> … Lee más!
Popup de información en CSS
Algunas veces, con un enlace hacia una página no nos basta, y queremos que este enlace lleve algo de información. Se puede usar el atributo title=””, para hacer esto, pero, ¿no es más moderno utilizar CSS? Aquí aprenderemos a crear títulos para nuestros enlaces de forma vistosa, como véis en la imagen que ilustra el … Lee más!
Crear Acordeon en CSS
Podemos crear un sencillo acordeón en CSS, que al pasar por encima se muestre, (se despliege), y si quitamos el cursor, vuelva a contraerse. Debemos seguir estos pasos: dtsv.dtse_post_339_permalink = ‘http://www.cssblog.es/crear-acordeon-en-css/’; dtsv.dtse_post_339_title = ‘Crear Acordeon en CSS’;
LightBox en CSS puro
Una manera sencilla de crear un lightbox para mostrar nuestras imágenes redimensionadas, de forma sencilla, y solo mediante CSS. Pasos a seguir: dtsv.dtse_post_330_permalink = ‘http://www.cssblog.es/lightbox-en-css-puro/’; dtsv.dtse_post_330_title = ‘LightBox en CSS puro’;
Crear mapa de imágenes estilo Flickr con CSS
En unos sencillos pasos podremos crear un mapa de imágenes parecido al que usa Flickr, que nos permitirá “etiquetar” nuestras imágenes al pasar el ratón por encima. Pasos a seguir: dtsv.dtse_post_324_permalink = ‘http://www.cssblog.es/crear-mapa-de-imagenes-estilo-flickr-con-css/’; dtsv.dtse_post_324_title = ‘Crear mapa de imágenes estilo Flickr con CSS’;
Crear un borde “inline” a una imagen mediante CSS
Para crear un borde inline(interior) a una imagen con CSS, tendremos que seguir estos pasos: En el código HTML, ponemos este div, llamando al estilo que luego definiremos en CSS: <div class=”imgborde”><a href=”#”></a></div> Después, vamos a crear el código CSS al que llama el div: .imgborde a{width:130px;height:130px;border:0; background-image:url(images/tuimagen.jpg);display:block;} .imgborde a:hover {border:3px solid #5f9215; width:124px;height:124px;background-position:center;} Si … Lee más!
Añadir un icono de “cargando” en tus imágenes con CSS
Algunas imágenes tardan en cargar mucho, tanto que el visitante empieza a perder la paciencia y acaba por irse (Sobre todo si tiene una baja velocidad de conexión). Así que, para evitar esto, aquí os mostramos un truco con el que podremos añadir un icono de cargando (que puede ser personalizado por nosotros mismos) a … Lee más!
Gráficas prefabricadas en CSS
Pure CSS data Chart son gráficas creadas solamente por CSS, igual de buenas que las de Javascript, podremos ver una demo, y por supuesto, modificar por nuestra cuenta el código. Ver demo de CSS data Chart Descargar CSS data Chart Vía | Anieto2k dtsv.dtse_post_232_permalink = ‘http://www.cssblog.es/graficas-prefabricadas-en-css/’; dtsv.dtse_post_232_title = ‘Gráficas prefabricadas en CSS’;
10 hacks con CSS
Una lista de 10 hacks para CSS, que nos pueden servir alguna vez. 1) Mejorar el escalado y resampleado de las imagenes en Internet Explorer En IE 7 la propiedad de escalado por el método bicubic está desactivada y debemos activarla por CSS: img { -ms-interpolation-mode: bicubic; } -ms-interpolation-mode sirva para especificar el método de … Lee más!
Crear un mensaje secreto con CSS, posición y transparencia
Podemos crear un mensaje oculto con CSS, que cuando vayamonos desplazándonos por la página, las letras se coloquen en su lugar y recreen este mensaje oculto, gracias a la propiedad position y a la transparencia. dtsv.dtse_post_829_permalink = ‘http://www.cssblog.es/crear-un-mensaje-secreto-con-css-posicion-y-transparencia/’; dtsv.dtse_post_829_title = ‘Crear un mensaje secreto con CSS, posición y transparencia’;
