Posteos etiquetados efectos

Alternativa a iluminar celdas usando solo CSS

Alternativa a iluminar celdas usando solo CSS

Jun 3

Posteado por forber en CSS

1 comentario

alternativa_tablehover Como ya hace unos días dije como iluminar filas y columnas con jquery, pues bien, lamentablemente para webs con un panel de administración que suelta más de 500 filas y mas de 11 columnas, es un efecto poco útil y que además ralentiza muchísimo la web. Así que he buscado una solución mas “caserilla” pero hace el efecto óptico deseado y es el de iluminar la fila entera y con otro color iluminamos la celda por donde pasa el ratón.

La solución es sencilla bajo mi punto de vista y es usando una pequeña hoja de estilos, no la voy a hacer tan complicada como la tengo yo pero el efecto es el mismo…

Así que, saltándome los pasos de que ya sabéis crear una tabla os pongo el estilo para que os salga algo como en la foto inicial…

tr:hover{
  background-color: #FFFFCC; /* amarillo */
  }
tr td:hover{
  background-color: #FF9900; /* naranja */
  }

Con esto conseguimos en amarillo iluminar toda la fila y en naranja iluminar la celda por donde pasamos el ratón.

Ya, ya se que no es lo mismo que la otra ilumina toda la columna y no es lo mismo, pero bueno me he buscado otros recursos para poder saber que significa en esa celda cuando te encuentras en medio del océano (osea en la mitad de los 500 registros) y no sabes si subir o bajar ;)

Solo os digo que de 21seg de carga ha bajado a 15s. Lo se, parece un montón de segundos pero seguro que pronto conseguiré bajar el tiempo y con mas registros ;)

Espero que os haya servido para algo y si tenéis alguna duda dejar vuestros comentarios.

, , ,
Redimensionar imagenes con css

Redimensionar imagenes con css

May 19

Posteado por forber en CSS

2 comentarios

Para resumir rapidamente su funcionamiento es ocultar una parte de la miniatura de la imagen ya redimensionada anteriormente y la mostramos en su totalidad cuando pasamos el raton por encima o mas conocido como el mouseover.

Aunque la gracia de esto ya no es solo que puede estrechar una imagen y si pasa el raton se hace grande, esta claro que es una de las opciones.. pero pensando en algunas utilidades mas.. nos podria servir para hacer imagenes cuadraditas que estan ahora tan de moda.

Para una web de contactos, galeria de imagenes, etc.. y no podemos utilizar el ImageMagic, como la inmensa mayoria utiliza las librerias GD para el tratamiento de imagenes, es una forma de redimensionar una imagen y como la redimension no es cuadrada (a no ser que la imagen original si lo fuese) si le quitamos la opcion de a:hover se nos abre un mundo nuevo en la redimension, esta claro que es un parche, pero quien no quiera calentarse la cabeza esto es una solucion rapida y efectiva a mi entender.

ul#thumbs a{
    display:block;
    float:left;
    width:100px;
    height:100px;
    line-height:100px;
    overflow:hidden;
    position:relative;
    z-index:1;
    }
ul#thumbs a img{
    float:left;
    position:absolute;
    top:-20px;
    left:-50px;
    }

Link: Create Resizing Thumbnails Using Overflow Property y aqui tambien os dejo una demo del sistema en cuestion

Alli encontrareis la pagina del creador en ingles con todo muy detallado ;) Espero que os haya servido de ayuda!

, , ,