Outbook

HTML+CSS+JS, Accesibilidad, PHP y más

Datos de búsqueda

Categoría: ‘CSS’

Mixin SCSS para dar estilos a campos con atributo placeholder

Fecha de publicación: 2013/02/03

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;} /* WebKit browsers */
	&:-ms-input-placeholder {color:$color;} /* Internet Explorer 10+ */

  /* browsers with full support for placeholder styling */
  &::input-placeholder {color: $color;}
  &:input-placeholder {color: $color;}
  &::placeholder {color: $color;}
  &:placeholder {color: $color;}
}

Datos del artículo:

Listas ordenadas: cambiar estilos de la numeración

Fecha de publicación: 2011/10/04

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 de la lista ordenada llevarán el mismo estilo que el elemento LI. Pero puede ocurrir que se quiera que los números tengan un estilo distinto, por ejemplo que, a diferencia del texto, vayan en negrita:

Lista ordenada con números en negrita

Leer el resto del artículo

Datos del artículo:

CSS: Rollover de elemento de imagen

Fecha de publicación: 2011/09/01

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 quizá sea más sencillo hacerlo mediante CSS. Para ello había que asignar una imagen de fondo al elemento de enlace, y que posición y dimensiones de dicha imagen de fondo coincida exactamente con las del elemento IMG. Una vez asignado el fondo, en el estado ‘sobre’ del enlace habrá que hacer que el elemento de imagen quede invisible mediante la propiedad visibility:

a {background:url(imagen_estado_sobre) no-repeat 0 0;}
a:hover img {visibility:hidden;}

Datos del artículo:

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

Fecha de publicación: 2011/01/19

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.

Leer el resto del artículo

Datos del artículo:

Navegadores: Diferencias entre zoom y escalado de texto

Fecha de publicación: 2010/12/28

Cuando se quiere ver más grande un sitio en el navegador web se puede optar por dos modos de variación de las dimensiones:

  • Mediante zoom
  • Mediante escalado de texto

Leer el resto del artículo

Internet Explorer 6 no muestra elementos con posición absoluta

Fecha de publicación: 2010/06/02

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 descrito. A los elementos posicionados absolutos habría que añadirles un clear:both; en la CSS y asunto solucionado. Si el problema persiste habría que verificar que no sea también un conflicto de z-index.

Y finalmente, el enlace: The IE6 Absolute Positioning Bug (Brett Nooyen – The CSS Asylum, enlace externo, en inglés).

Datos del artículo:

CSS: max-width y min-width en Internet Explorer 6

Fecha de publicación: 2010/05/10

Como ya sabemos, Internet Explorer 6 carece de soporte para determinadas propiedades de CSS.

Pero se pueden emular las propiedades min-width ymax-width, mediante la inclusión de expresiones en la propiedad width.

Leer el resto del artículo

Datos del artículo:

CSS: imágenes con bordes redondeados

Fecha de publicación: 2010/01/28

Hay ocasiones en las que nos encontramos maquetando diseños en los que aparecen imágenes de las que tenemos la certeza que van a ser publicables en el sitio definitivo.

Hay dos vías para que la imagen lleve los bordes redondeados:

  • Editar cada imagen que se vaya a publicar: es muy costoso a largo plazo.
  • Hacerle las esquinas redondeadas por CSS y que funcione hasta en Internet Explorer 6.

Voy a exponer la segunda solución, hacerlo por CSS.

Leer el resto del artículo

Datos del artículo:

Propiedades CSS de opacidad o semitransparencia: opacity y filter

Fecha de publicación: 2010/01/12

Para que un elemento no sea del todo opaco, que tenga una semitransparencia, se utiliza la propiedad CSS opacity. Por ejemplo, para una opacidad del 50%:

.opacidad {opacity: 0.5;}

Leer el resto del artículo

Datos del artículo:

CSS: modo de empleo de la propiedad z-index

Fecha de publicación: 2010/01/04

Hace ya dos años y medio escribí acerca del uso de la propiedad z-index. La explicación no era todo lo correcta que debía ser, y la explicación que daba no era precisamente brillante. Espero mejorarlo en esta ocasión.

Leer el resto del artículo

Datos del artículo:

Información del sitio