Posts tagged Maquetación

internet-explorer-logo

IE aplica degradé sobre imagenes transparentes [solución]

0
5 months ago
by Capy in

Tengo que decirlo: es alucinante los bug que tiene IE (da igual la versión, nunca terminan de solucionarlos).

El ultimo con el que me di es que si usas una imagen transparente para hacer un fondo transparente, se va a ver genial en todos los navegadores menos en Internet Explorer (7 y 8, el 9 no se)

Así es como debería verse:

Y asi es como se ve en IE:

Curioso… bueno googleando un poco di con la respuesta y es básicamente un comportamiento no deseado. Al señor no se le ocurre mejor idea que degradar un fondo transparente que se repita (background-repeat: repeat;) siempre que la imagen sea de 1pxX1px…. raro. Eso me va a enseñar a querer optimizar imagenes :P

por si no quedó claro, hay que hacer la misma imagen pero con por tamaño “prudente”: 10pxX10px para que IE no crea que tiene que degradar la imagen ¬¬

internet-explorer-logo

Solución al box-model en ie7 usando jQuery

0
7 months ago
by Capy in , ,

Sé que hay soluciones hechas para este problema en particular, pero pesa 33k y solo necesitamos unas líneas como van a ver para lograr lo mismo…

Sabido es que a ie se la sudan los estándares y cuando los incorporan por lo general lo hacen taaarde.
La propiedad CSS “box-sizing” no es la excepción.

Ya sabemos que el siguiente CSS va a arreglar los desfases que se dan cuando un input que esta con un width:100%; dentro de un div que tiene un ancho fijado.

        .elemento {
            -moz-box-sizing: border-box;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
        }

Y como comente en el post anterior, esta propiedad no está soportada en ie7.

Soluciones hay de todo tipo, pero lo cierto es que teniendo jQuery en todos mis desarrollos, se me hiso más que obvia la decisión de usar un script que arregle este bug en lugar de usar cosas más raras (archivos .htc por ejemplo).

Para implementar la solución solo necesitas poner este script:

$(document).ready(function() {
	if ($.browser.msie && ($.browser.version.substr(0, 1) == 7 || $("meta[content='IE=EmulateIE7']").length > 0)) {
		$(".ie7Fix-Box-model").each(function(i, v) {
			var el = $(v);

			//calculamos
			var pL = el.css("paddingLeft").replace("px", "") != "" ? el.css("paddingLeft").replace("px", "") : 0;
			var pR = el.css("paddingRight").replace("px", "") != "" ? el.css("paddingRight").replace("px", "") : 0;
			var bLW = el.css("borderLeftWidth").replace("px", "") != "" ? el.css("borderLeftWidth").replace("px", "") : 0;
			var bRW = el.css("borderRightWidth").replace("px", "") != "" ? el.css("borderRightWidth").replace("px", "") : 0;
			var newSize = el.width() - (parseInt(pL, 10) + parseInt(pR, 10) + parseInt(bLW, 10) + parseInt(bRW, 10));

			//le aplicamos el nuevo tamaño
			el.width(newSize);
		});
	}
});

Y ponerle la class “ie7Fix-Box-model” a todos los input que necesites arreglar.

Ver ejemplo (vean el codigo fuente)

ecommerce_1

Set de iconos para e-commerce

0
9 months ago
by Capy in

Ya que tuve que buscarlos se los ofrezco (pinchen en las imágenes para descargar):

Herramientas

Interesante: 10 pasos para hacer un diseño web estrategico

5
11 months ago
by Capy in ,

Cuando lo veas vas a darte cuenta que muchas veces te ahogas en un vaso de agua por no tener en claro los pasos que tenes que seguir. Personalmente suelo ser muy desorganizado, bueno mi cabeza en realidad, y este tipo de ayudas son inestimables.

Pincha en la imagen para ver el articulo completo.

PD: si sos un loco de la usabilidad proba a ver e link que te dejé sin los estilos, para que veas lo que es la USABILIDAD! :)

CSS & maquetación

Buenas practicas para maquetar con sprites

0
11 months ago
by Capy in

Esta es una practica que no he visto que sea muy extendida pero que es de las mas eficientes para un maquetador por la buena organización que presenta.

La idea es simple. creas un selector para el sprite, un selector por imagen del sprite y por ultimo vas asignándole el par class=”un-elemento-x sprite icono-del-sprite”

Pongo un ejemplo de como armaríamos la base CSS:

/*Primero defino el sprite*/
.sprite {
    background: url(sprite.png) #transparent no-repeat;
}

/*Ahora los class de las imagenes contenidas en el sprite*/

.sprite .destacado { background-position: 0 -462px;  }
.sprite .aceptado { background-position: 0 0;  }
.sprite .cancelado { background-position: 0 -66px;  }
.sprite .editado { background-position: 0 -132px;  }
.sprite .eliminado { background-position: 0 -198px;  }
.sprite .rss { background-position: 0 -264px;  }
.sprite .me-gusta { background-position: 0 -330px;  }
.sprite .bloqueado { background-position: 0 -396px;  }

Para terminar un ejemplo practico:

<ul>
    <li class="sprite destacado">Elementos destacados 50</li>
    <li class="sprite cancelado">Elementos cancelados 10</li>
    <li class="sprite eliminado">Elementos eliminados 200</li>
</ul>

Chau.

Go to Top