CSS3 para expertos en diseño: cuatro atributos para usar hoy

Con la introducción de CSS3, las opciones de diseño para sitios web han cambiado mucho. Especialmente las animaciones y transparencias se utilizan comúnmente desde entonces. Sin embargo, hay muchos atributos que rara vez se ven. La falta de compatibilidad con el navegador ya no es una razón suficiente para renunciar a estas opciones. Por lo tanto, en su próximo proyecto, debe probar cuatro de estos atributos CSS3 erróneamente descuidados.

Consejo 1 de CSS3: marcos individuales con «imagen de borde»

El diseño individual de marcos era imposible antes de CSS3. Si bien había una selección de marcos predefinidos, como simples, dobles o punteados, eso fue todo.

Con el atributo CSS3 «imagen de borde», los marcos se pueden personalizar a través de un gráfico. Aquí, el gráfico se divide en nueve áreas. Las ocho áreas exteriores son el marco o las esquinas del marco.

p {
  border: 30px solid transparent;
  border-image: url("frame.png") 30 round;
}

Este ejemplo muestra cómo se define un marco. Primero, se usa «url ()» para ingresar la dirección web del gráfico. El segundo valor define cómo se dividirá el gráfico en sus nueve componentes. Normalmente, las nueve áreas tienen el mismo tamaño (divididas en tercios). Sin embargo, también puede ingresar valores absolutos en píxeles (sin una unidad) o valores porcentuales (con un signo de porcentaje).

El valor final define si las líneas simplemente se repiten (“repetir”), se repiten y se redondean (“redondear”), o si no se repiten y simplemente se alargan hasta el ancho o alto total, respectivamente (“estirar”).

Marcos redondeados, repetidos y estirados

El ancho del marco aún se define a través de «borde» o «ancho de borde». Para ocultar el marco predeterminado, debe establecer el color del marco en «transparente», como se muestra en el ejemplo.

«Border-image» es compatible con todos los navegadores habituales, como Internet Explorer, Chrome, Firefox y Safari.

Consejo 2 de CSS3: Numeración con «counter-reset» y «counter-increment»

Listas numeradas con «

”El elemento nunca ha sido un problema. Sin embargo, las cosas se vuelven más difíciles si, por ejemplo, desea numerar automáticamente los títulos de un documento. Aquí, se utilizan los diferentes atributos de «contador».


Encabezado numerado

Primero, defina un contador para su documento, asignando cualquier nombre al atributo «counter-reset». Este atributo restablece el contador especificado. Puede configurar un número ilimitado de contadores independientes.

body {
  counter-reset: chapter;
}

Posteriormente, seleccione un elemento para aplicar el contador y asigne el atributo «contador-incremento» con el nombre del contador. Posteriormente, utilizando la función “contador ()”, puede recibir la numeración mediante “:: antes” o “:: después”.

h2::before {
  counter-increment: chapter;
  content: "Chapter " counter(numbering) ": ";
}

«Counter-reset» y «counter-increment» son compatibles con todos los navegadores habituales.

Consejo 3 de CSS3: ajuste de imágenes con «ajuste de objeto»

Los diseños web estáticos son cada vez más raros. Cada vez más diseños son receptivos o fluidos para que los elementos siempre se adapten al espacio disponible.

Sin embargo, con las imágenes, esto sigue siendo un problema. A menudo, simplemente se reducen debido a la falta de espacio. Con el atributo “object-fit”, existen diferentes opciones para ajustarlos. Para hacerlo, primero, defina un ancho y un alto para la imagen. Si tienen una relación de aspecto divergente, entra en juego el «ajuste al objeto».



Imagen con y sin «object-fit» (superior): «cubrir» y «contener»

Con el valor «cubrir», el atributo se asegura de que la imagen siempre mantenga su relación de aspecto y llene toda el área de la elemento. Sin embargo, aquí, las áreas a la derecha e izquierda o arriba y abajo, respectivamente, se cortan para evitar que la imagen ocupe todo el espacio.

Alternativamente, el valor «contener» le permite escalar la imagen de manera que toda la imagen sea visible al mantener la relación de aspecto. En contraste con la «cubierta», hay bordes a la izquierda y derecha, o borde superior e inferior, respectivamente.

A excepción de Internet Explorer, todos los navegadores habituales admiten este atributo.

Consejo 4 de CSS3: recortar textos a través de «desbordamiento de texto»

Con resoluciones especialmente pequeñas, las imágenes no son lo único que debe recortarse. A veces, los textos también son demasiado largos. Por lo general, esto no es un problema para el texto continuo. Simplemente está envuelto. El principal problema puede ocurrir con títulos con palabras o textos largos, que se muestran en una sola línea.



Texto con y sin «desbordamiento de texto»

El atributo CSS3 «text-overflow» evita que los textos simplemente sobresalgan del espacio disponible, recortándolos y asignándoles puntos de elipsis.

Sin embargo, el atributo no funciona solo, sino en combinación con el atributo «desbordamiento» y el valor «oculto».

h2 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

En el ejemplo, el texto de un elemento «

» se recorta mediante «text-overflow». El valor «puntos suspensivos» asegura que el texto recortado esté equipado con puntos suspensivos. El “espacio en blanco” también evita que el texto se convierta en varias líneas.

El uso del valor «clip» en lugar de «puntos suspensivos» da como resultado un recorte sin puntos de elipsis.

Todos los navegadores habituales admiten este atributo.

(hacer)