Mixin SCSS para dar estilos a campos con atributo placeholder

Un sencillo mixin SCSS para darle color al texto del placeholder, distinto del que lleve el campo de formulario: @mixin input-placeholder($color) { &.placeholder {color: $color;} /* if not supported, Javascript should add class */ &:-moz-placeholder {color: $color;} /* Mozilla Firefox 4 to 18 */ &::-moz-placeholder {color: $color;} /* Mozilla Firefox 19+ */ &::-webkit-input-placeholder {color: $color;} […]

Listas ordenadas: cambiar estilos de la numeración

A los elementos de lista se les pueden añadir por CSS bullets, números, letras, etc. que les precedan cuando son visualizados en el navegador, mediante la propiedad ‘list-style’, o bien asignarles una imagen de fondo mediante la propiedad ‘background’. Cuando se trata de listas ordenadas lo habitual es utilizar números: ol li {list-style:decimal;} Los números […]

CSS: Rollover de elemento de imagen

Es muy común la necesidad de que una imagen dentro de un enlace esté como elemento de imagen (IMG) y que al mismo tiempo deba tener un rollover: <p> <a href="#"><img src="imagen_estado_normal" alt="Imagen de ejemplo" /></a> </p> La solución habitual pasa por utilizar Javascript para hacer el cambio de imagen en el estado ‘sobre’. Pero […]

Jquery/Prototype: Posicionamiento de pie de página cuando la altura del área visible es mayor que la del documento

Actualizado: Añadida versión para Prototype. En ocasiones tenemos el típico diseño en el que el fondo de cabecera y de pie de página ocupan todo el ancho visible, sea cual sea. Es tan simple como poner un fondo en el elemento BODY y otro fondo en el elemento HTML.

Diferenciación de versiones de Internet Explorer sin hacks de CSS

Resulta habitual encontrarse con que las distintas versiones de Internet Explorer interpretan de forma distinta ciertas propiedades CSS, y que sea necesario utilizar engorrosos selectores para filtrar las versiones que dan problemas, vincular hojas de estilo mediante comentarios condicionales, Javascript, etc.

Javascript: Actualización automática de CSS

Al maquetar puede resultar engorroso el andar ajustando un pequeño detalle en CSS y tener que actualizar la página cada vez que se cambia. He montado un Javascript simple para hacer más fácil la tarea del maquetador. Consiste en recargar la CSS en un intervalo de tiempo (en el ejemplo será 1 segundo) sin recargar […]

Javascript: simular hover en Internet Explorer 6 con Prototype

Se trata de un sencillo script que nos permitirá evitar el problema de Internet Explorer 6 con la pseudo-clase :hover. Dicha pseudo-clase se puede aplicar a cualquier elemento, para que al pasar el puntero por encima puedan cambiarse los estilos, pero Internet Explorer 6, en su línea habitual, solo lo acepta en elementos de enlace.

Simulación de elemento SELECT con jQuery

He preparado un componente que simula un elemento SELECT, en el que se puede seleccionar una sola opción, que evita algunas de las limitaciones de los elementos SELECT de verdad, pudiendo dar formato a las opciones que contiene, añadir imágenes, etc.

Internet Explorer 6 no muestra elementos con posición absoluta

Me han pasado un enlace que proporciona una solución a un problema típico de Internet Explorer 6 con el position: absolute: en ocasiones los elementos con ese tipo de posicionamiento no son visibles, y si lo son en el resto de navegadores. Si la capa con posicionamiento relativo contiene elementos flotados puede surgir el problema […]