Outbook

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

Inicio que contiene a Propiedades CSS

Datos de búsqueda

Etiqueta ‘Propiedades CSS’

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:

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:

Internet Explorer 6 y la propiedad ‘bottom’ en CSS

Fecha de publicación: 2009/12/16

Hay un caso en el que la propiedad bottom no es interpretada correctamente en Internet Explorer 6: cuando el elemento con position:relative tiene un overflow:hidden y debajo está el elemento con position:absolute.

Leer el resto del artículo

Datos del artículo:

CSS: propiedades a evitar en dispositivos móviles

Fecha de publicación: 2009/01/19

Algunas propiedades CSS que deben evitarse o utilizarse con cuidado al crear una hoja de estilo para dispositivos móviles:

  • float y display: estas propiedades se utilizan para crear presentar la página en varias columnas, algo que no se va a hacer (y que no se debe), en dispositivos móviles.
  • padding y margin: dependiendo de la función que cumplan habrá que retirarlas o disminuir el área que ocupan.
  • background-image: es recomendable evitar su utilización, y si se mantiene asegurarse que se adapta bien al dispositivo móvil.

Mas en A List Apart: Return of the Mobile stylesheet.

Datos del artículo:

Javascript: establecer el valor de la propiedad float de CSS

Fecha de publicación: 2008/01/25

En Javascript es muy fácil establecer propiedades CSS, como en este ejemplo las propiedades de anchura, color y z-index:

elemento.style.width = '50%';
elemento.style.color = '#0c0';
elemento.style.zIndex = '1';

Pero con la propiedad float no es tan sencillo:

Because the word “float” is already reserved in JavaScript, it’s not possible to access an object’s floatCSS property using style.float. In fact, browsers use different terms for the float property: Internet Explorer uses style.styleFloat, while all other browsers use the W3C-specified style.cssFloat.

La palabra float es una palabra reservada en el lenguaje Javascript, por lo que no se puede usar para definir la propiedad float. Por ello hay que utilizar la siguiente alternativa especificada por la W3C:

elemento.style.cssFloat = 'left';

Pero aun queda un escollo. Internet Explorer (que es muy especial) no soporta esta alternativa, por lo que habrá que usar al mismo tiempo lo siguiente:

elemento.style.styleFloat = 'left';

Saber más

Datos del artículo:

Información del sitio

Outbook está basado en WordPress

Licencia Reconocimiento-NoComercial-CompartirIgual

Feed RSS: