Ya que tuve que buscarlos se los ofrezco (pinchen en las imágenes para descargar):
Archivo de la categoría: CSS y Maquetación
Interesante: 10 pasos para hacer un diseño web estrategico
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! 
Buenas practicas para maquetar con sprites
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.
Sprites diagonales: La solución perfecta para crear sprites de iconos
Cuando me ponía a hacer un sprite de iconos y/o bullets para una web, solía darme con un problema:
Cuando creaba un sprite con iconos en forma vertical, y los aplicaba a una lista HTML me pasaba lo que ven en la siguiente imagen.
Explicado en 1000 palabras que valen mas que una imagen, lo que me pasaba es que al hacerse mas altos los que el espacio que había entre los iconos de la imagen, la siguiente imagen del sprite quedaba expuesta.
La solución seria dejar mas espacio, es lo mas lógico, pero nunca se sabe cuando te vas a volver a quedar corto.
La siguiente deducción que habrán hecho es la de “bueno, mucho mas espacio entre iconos”, y yo te digo que para eso no hagas un sprite porque pierde sentido. Si para meter 10 iconos en un sprite voy a tener que hacer una imagen de 3000px de alto, y no hablemos de 50… Además de que el espacio en “blanco” ocupa espacio en KB también.
LA SOLUCION PERFECTA
Antes de seguir y como nobleza obliga aclaro que la idea original es del blog aaronbarker.net.
La solución perfecta para este tipo de sprites es hacer que los iconos estén en posición diagonal. ASI DE SIMPLE.
Por si todavía no ves el beneficio te lo comento. Viene a ser que aunque un elemento de una lista se estire 5000px hacia abajo y 3000px hacia la derecha, no va a colisionar (dejar ver) ninguna otra imagen.
Una vez mas ejemplo, mil palabras, y eso
En la imagen se aprecia como los iconos restantes del sprite no se van a exponer nunca (están mas tenues porque se supone que no se ven en la practica)
Les dejo el respectivo ejemplo ya maquetado para que lo toqueteen con Firebug y sucedáneos:
Personalmente felicito al que se le ocurrió una solución tan simple pero eficiente.
Cahu.
jQuery.height() calcula distintos tamaños entre navegadores [solución]
Este es un tip rápido pero útil.
Escenario:
Tenes un div con el id “elDiv” con el siguiente CSS:
#elDiv {
border: 1px solid #336699;
float: right;
padding: 20px;
width: 500px;
}
Y en Firefox/Chrome/Safari/Opera al hacer $(“#elDiv”).height(); te entrega 400px por decir algo (el tamaño depende de lo que tenga dentro).
Pero curiosamente en Internet explorer te da un tamaño raro… de menos, unos 358px en nuestro ejemplo.
¿Qué pasa?
Pasa que no le especificaste un modo de renderizado al HTML por medio del DOCTYPE, y por culpa de ello Internet explorer va a renderizar el contenido en modo “Quirks Mode” http://es.wikipedia.org/wiki/Quirks_Mode.
Si no queres leer el articulo de Wikipedia te comento que lo único que tenes que hacer es poner lo siguiente por encima del tag <html>:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/DTD/strict.dtd">
PD: el valor de 358px en mi ejemplo viene de que en modo quirks, IE toma el tamaño del tamaño real menos el padding y el borde: 400 - 40 - 2 = 358.
Algunos CSS no cargan en Internet Explorer
Me rompí un poco la cabeza con este asunto: Hago unas modificaciones que se ven mas que bien en todos los navegadores menos en IE como siempre, y por ello tengo un ie.css puntual para hacer todas las cosas raras que se suelen hacer con CSS para que IE trague.
El problema me lo di con que Internet Explorer 7 (no recuerdo si el 8 también) no reflejaba los cambios de mi CSS destinado a el…. :S
Pero ya se cual es el problema y como no, la solución 
El problema es que Internet Explorer por algún misterioso motivo solo carga hasta 31 CSS (los <style> inline también cuentan o_O), y mi CSS especial ya estaba por el puesto 32…
La primera solución que se me ocurrió es activar la compresión de CSS para que se haga uno o dos CSS, pero lo que tiene de malo eso es que si estas maquetando te vas a querer pegar un tiro a la 10º vez que tengas que borrar el cache para ver si el texto que estas maquetando se termina de ver bien en la bass.. Internet Explorer.
Así que fui a darme una vuelta por los módulos de Drupal… Bingo. Hay un modulo que nos salva las papas. Se llama “IE CSS Optimizer”, y lo que hace básicamente es añadir dos opciones más a la compresión de los CSS:
Y lo que hace es algo de lo más simple. Comprime todo el CSS en un archivo pero sin cachearlo.
Con este modulito ya no vas a tener que preocuparte del rarísimo límite de 31 archivos.
Una ultima anotación a todo esto es que andar va a andar bien, pero no vayas a olvidar de poner de nuevo la configuración de la compresión del CSS a “Full optimization” para producción.
Hacer bocadillos para comentarios con CSS puro
Como me quedaron lindos se los comparto para que los usen si les hace falta.
CSS:
.comentario {
background-color: #336699;
width: 600px;
padding: 20px;
float: left;
color: #fff;
}
.contenedor {
float: left;
}
.comentario.der {
float: left;
}
.comentario.izq {
float: right;
}
.comentario.top {
float: none;
}
.comentario.bot {
float: none;
}
.bocado-izq {
border-bottom: 20px solid transparent;
border-right: 25px solid #336699;
border-top: 20px solid transparent;
height: 0;
width: 0;
float: left;
}
.bocado-der {
border-bottom: 20px solid transparent;
border-left: 25px solid #336699;
border-top: 20px solid transparent;
height: 0;
width: 0;
float: right;
}
.bocado-top {
border-bottom: 25px solid #336699;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
height: 0;
width: 0;
}
.bocado-top_mid {
border-bottom: 25px solid #336699;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
height: 0;
width: 0;
margin: 0 auto;
}
.bocado-bot {
border-left: 20px solid transparent;
border-top: 25px solid #336699;
border-right: 20px solid transparent;
height: 0;
width: 0;
float: right;
}
.bocado-bot_mid {
border-left: 20px solid transparent;
border-top: 25px solid #336699;
border-right: 20px solid transparent;
height: 0;
width: 0;
margin: 0 auto;
}
.clear {
clear: both;
}
HTML:
<div>
<div>Lorem ipsum dolor sit amet,
nulla viverra diam faucibus dictum. Nulla facilisi. Donec sit amet dolor
at sapien accumsan consectetuer.Lorem ipsum dolor sit amet,
nulla viverra diam faucibus dictum. Nulla facilisi. Donec sit amet dolor
at sapien accumsan consectetuer.
</div>
<div></div>
</div>
<div></div>
<br />
<div>
<div>Lorem ipsum dolor sit amet,
nulla viverra diam faucibus dictum. Nulla facilisi. Donec sit amet dolor
at sapien accumsan consectetuer.Lorem ipsum dolor sit amet,
nulla viverra diam faucibus dictum. Nulla facilisi. Donec sit amet dolor
at sapien accumsan consectetuer.
</div>
<div></div>
</div>
<div></div>
<br />
<div>
<div></div>
<div>Lorem ipsum dolor sit amet,
nulla viverra diam faucibus dictum. Nulla facilisi. Donec sit amet dolor
at sapien accumsan consectetuer.Lorem ipsum dolor sit amet,
nulla viverra diam faucibus dictum. Nulla facilisi. Donec sit amet dolor
at sapien accumsan consectetuer.
</div>
</div>
<div></div>
<br />
<div>
<div></div>
<div>Lorem ipsum dolor sit amet,
nulla viverra diam faucibus dictum. Nulla facilisi. Donec sit amet dolor
at sapien accumsan consectetuer.Lorem ipsum dolor sit amet,
nulla viverra diam faucibus dictum. Nulla facilisi. Donec sit amet dolor
at sapien accumsan consectetuer.
</div>
</div>
<div></div>
<br />
<div>
<div>Lorem ipsum dolor sit amet,
nulla viverra diam faucibus dictum. Nulla facilisi. Donec sit amet dolor
at sapien accumsan consectetuer.Lorem ipsum dolor sit amet,
nulla viverra diam faucibus dictum. Nulla facilisi. Donec sit amet dolor
at sapien accumsan consectetuer.
</div>
<div></div>
</div>
<div></div>
<br />
<div>
<div>Lorem ipsum dolor sit amet,
nulla viverra diam faucibus dictum. Nulla facilisi. Donec sit amet dolor
at sapien accumsan consectetuer.Lorem ipsum dolor sit amet,
nulla viverra diam faucibus dictum. Nulla facilisi. Donec sit amet dolor
at sapien accumsan consectetuer.
</div>
<div></div>
</div>
Aplicar sombra sólida a un div con CSS en Internet Explorer
Agreguen la siguiente línea en el selector del div:
filter: progid:DXImageTransform.Microsoft.DropShadow ( Color = '#ececec', OffX = '5', OffY = '5' );
NOTAS:
OffX : cuanto desplazamos horizontalmente la sombra.
OffY : cuanto desplazamos verticalmente la sombra.
Muchísimo ojo con dejar espacios entre “progid:DXImageTransform.Microsoft.DropShadow” porque deja de funcionar.
Hack para CSS en webkit
Si tenes unn selector que aplica a todos los navegadores como el siguiente:
#buscador{
color: #000;
}
Pero necesitás que en Webkit se le aplique otra propiedad, solo tenes que hacer una copia del primer selector y meterlo dentro de estas lineas como se ve a continuación:
@media screen and (-webkit-min-device-pixel-ratio:0){
#buscador{
color: #FF0000;
}
}
Listo, solo webkit tiene ahora color rojo
Altos iguales entre DIVs con jQuery
Visto en la documentación oficial:
Creamos el metodo:
$.fn.equalizeHeights = function() {
return this.height(Math.max.apply(this, $(this).map(function(i, e) {
return $(e).height()
}).get()))
}
Para hacer uso de el sobre las columnas que deseamos equiparar:
$('.columnas').equalizeHeights();