Outbook

XHTML-CSS, Accesibilidad, PHP y más

Inicio que contiene a Desarrollo web que contiene a Archivo por Categoría 'CSS'

Datos de búsqueda

Categoría: ‘CSS’

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:

CSS: altura mínima con min-height, incluso en IE6

Fecha de publicación: 2009/12/21

Cuando queremos utilizar una altura mínima para un elemento debemos emplear la propiedad min-height, que establece una altura mínima para dicho elemento. Pero tiene un pequeño inconveniente: no es compatible con Internet Explorer 6.

Para Internet Explorer 6 se puede utilizar la propiedad height ya que la interpreta de la misma forma que los otros navegadores interpretan min-height (incluidas las versiones posteriores de Internet Explorer).

Leer el resto del artículo

Datos del artículo:

CSS: Minimum height with min-height, even in IE6

Fecha de publicación: 2009/12/21

When we use a minimum height for an element we must use the property min-height , which sets a minimum height for that element. But it has one drawback: it is not compatible with Internet Explorer 6.

For Internet Explorer 6 may use the property height interprets it the same way that other browsers interpret min-height (including later versions of Internet Explorer).

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

CSS: Utilización de tipografías incrustadas mediante @font-face

Fecha de publicación: 2009/12/11

Lo primero de todo es advertir que ésta técnica no valida en CSS 2.1, aunque si lo hace en CSS 3.

La llamada desde la CSS a una tipografía puede ayudar a eludir la necesidad de utilizar imágenes con texto en aquellos casos en los que se quiere utilizar una tipografía que no es de sistema.

No es recomendable utilizar la tipografía para todos los textos del sitio si se trata de una tipografía que resulte difícil de leer.

Leer el resto del artículo

Datos del artículo:

CSS hacks: filter by selectors

Fecha de publicación: 2009/12/02

All selectors provided here are valid for CSS 2.1 unless otherwise stated.

Internet Explorer 6, Internet Explorer 7 (Non standard mode), Internet Explorer 8 (Non standard mode):

* html {}

Internet Explorer 7, Internet Explorer 8 (IE7 standard mode):

*:first-child+html {}
 * + html/*/ * /**/ body {}

Internet Explorer 8 (Ids are examples):

#ie_80 {} /* IE8 */
 #ie_80, #ie8#fix {} /* other browsers */

It’s not Internet Explorer 6:

html>body {}

It’s not Internet Explorer 6, It’s not Internet Explorer 7:

html>/**/body {}

It’s not Internet Explorer (only valid for CSS3):

:root {}

Safari 3, other Webkit browsers (only valid for CSS3):

body:not(:root:root)

It’s not Internet Explorer, It’s not Opera 9.2x or earlier:

head~body {}

It’s not Internet Explorer, It’s not Opera 9.2x or earlier (only valid for CSS3):

body:only-of-type {}

Opera between 7.2x-9.2x:

html:first-child {}

Datos del artículo:

Accesibilidad: Cuidado con los colores en textos e imágenes de fondo

Fecha de publicación: 2009/10/20

Un problema que se presenta en algunas ocasiones y que suele olvidarse bastante es la utilización de imágenes de fondo CSS en áreas de texto, y cuando se desactivan las imágenes no se ve el texto.

Hoy he visto un ejemplo en la web de Vodafone. En las páginas de productos tienen un enlace con un fondo que simula un botón. El fondo del área de contenido es blanco. El fondo del botón es una imagen de color rojo y el texto de dicho botón es blanco.

Así sale con imágenes:

Vista con imágenes

Así sale con las imágenes desactivadas, no se ve el texto de Ver más de los botones rojos:

Vista sin imágenes

Y aquí se ve en Firebug que es texto dentro de un SPAN a su vez dentro de un A (enlace):

Vista de código en Firebug

Habría bastado con darle al SPAN que contiene el texto un fondo de color rojo para que el texto se siguiese viendo aun con las imágenes desactivadas. Y por cierto, esta web ha sido certificada como doble A (AA).

Datos del artículo:

CSS: problema de doble margen en IE6

Fecha de publicación: 2009/04/02

Cuando un elemento está flotado dentro de un contenedor y tiene definido un margen, nos podemos encontrar con la desagradable sorpresa de ver como Internet Explorer 6 duplica dicho margen.

Supongamos que tenemos esta regla CSS:

div.capa p.parrafo {float:left; margin-left:10px;}

Internet Explorer 6 sacará un margen de 20px.

Se puede solucionar con un hack CSS, que valida pero es un poco chapuza:

div.capa p.parrafo {float:left; margin-left:10px;}
* html div.capa p.parrafo {margin-left:5px;}

O como dicen en Position is Everything añadir un display:inline; a la regla CSS:

div.capa p.parrafo {display:inline; float:left; margin-left:10px;}

De esta forma el elemento sigue siendo bloque, ya que tiene el float, y sale con el margen definido en Internet Explorer.

Saber más

Datos del artículo:

Información del sitio

Outbook está basado en WordPress

Licencia Reconocimiento-NoComercial-CompartirIgual

Feed RSS: