Los estilos de caja en CSS3

1. Con CSS 2.1

Como sabe, con CSS 2.1, el tamaño necesario para la visualización de una caja tiene en cuenta los márgenes (margin), los bordes (border), el espaciado (padding) y el contenido (width).

2. Con CSS3

La propiedad box-sizing se define en el módulo CSS Basic User Interface Module Level 3 (CSS3 UI) en Recomendación del 21 junio de 2018: https://www.w3.org/TR/css-ui-3/.

En CSS3, con la propiedad box-sizing, podrá hacer que los valores de border y de padding se incluyan en el tamaño de width.

Esta propiedad acepta dos valores:

A continuación, tenemos dos cajas con el mismo ancho de contenido (width), de espaciado (padding) y de borde (border). La caja <div id="miCaja2"> presenta además la propiedad box-sizing: border-box.

#miCaja1 { 
   position: absolute; 
   top:  50px; 
   left: 50px; 
   width: 200px; 
   height: 90px; 
   padding: 10px; 
   border: 10px solid #333; 
   margin: 30px; 
} 
#miCaja2 { ...

1. El módulo de los colores

El W3C ha editado un módulo CSS3 específico para la gestión de los colores: https://www.w3.org/TR/css3-color/. Este módulo ya está finalizado, así que se presenta como Recomendación del 19 de junio de 2018.

Las dos grandes novedades son el modo HSB y la transparencia.

2. El modo HSB

El modo HSB permite reunir en un solo y único gráfico (que se conoce como círculo cromático) los modelos colorimétricos RGB y CMJN, que en inglés se conoce como modo HSL.

1. Bordes idénticos

Los "contenedores" (<div>, <section>, <header>...) ya admiten los bordes redondeados. El valor de la curva expresado en píxeles puede ser idéntico para las cuatro esquinas, o bien, diferente para cada una de ellas. Este valor indica el radio del "círculo" que determina el ángulo de cada contenedor o de cada caja.

Este es el estilo CSS de una caja <div> con los cuatro bordes idénticos, con una curva de 10 píxeles:

#esquinas-iguales{ 
  border-radius: 10px; 
  position: absolute; 
  top: 10px; 
  left: 10px; 
  width: 200px; 
  height: 90px; 
  background-color: lightblue; 
} 

Fíjese en que Opera e IE reconocen de forma nativa la propiedad border-radius.

Y el resultado visual:

2. Bordes redondeados diferentes

Veamos ahora una caja con bordes redondeados diferentes para cada ángulo:

#esquinas-diferentes { 
  border-radius: 10px 30px 20px 40px; 
  position: absolute; 
  top: 130px; 
  left: 10px; 
  width: 200px; 
  height: 90px; 
  background-color: lightblue; 
} 

Como puede ver, se han usado dos sintaxis:

Una sintaxis para cada ángulo:

border-top-left-radius: 10px; 
border-top-right-radius: 30px; 
border-bottom-right-radius: 20px; 
border-bottom-left-radius:...

1. La sintaxis del W3C

La propiedad border-image, que permite aplicar bordes imaginativos, se define en el módulo CSS Backgrounds and Borders Module Level 3: https://www.w3.org/TR/css3-background/#the-border-image

Las CSS3 ahora permiten aplicar imágenes a los bordes. Esa imagen se repetirá en el borde en función del patrón que haya definido el diseñador web.

En el ejemplo se trata de una imagen de 60 píxeles de lado que presenta un círculo para cada ángulo y un triángulo con una orientación diferente para cada uno de los cuatro lados. Cada "elemento decorativo" mide 20 píxeles de lado.

Esta es la sintaxis corta con los prefijos de navegación:

#borde { 
  position: absolute; 
  top: 10px; 
  left: 10px; 
  width: 300px; 
  height: 100px; 
  border-width: 20px; 
  border-image: url(elemento.png) 20 round; 
  background-color: lightyellow; 
} 

Como puede ver, se ha usado la propiedad estándar border-width, que en este ejemplo es igual a la dimensión de los elementos que se colocarán en el borde: 20px.

Los argumentos de la propiedad...

1. Situación actual

La propiedad box-shadow que permite aplicar sombras también se define en el módulo CSS Backgrounds and Borders Module Level 3: https://www.w3.org/TR/css3-background//#the-box-shadow.

2. Crear una sombra

Se trata de la propiedad box-shadow, que permite aplicar una sombra a un elemento, a una caja <div>. Los atributos son:

Veamos un ejemplo sencillo:

#miCaja{ 
position: absolute; 
top: 10px; 
left: 10px; 
width: 300px; 
height: 100px; 
background-color: lightyellow; 
box-shadow: 10px 15px 8px 2px rgb(12,34,56); 
} 

Esta sombra presenta un desplazamiento horizontal de 10 píxeles, un desplazamiento vertical de 15 píxeles, un difuminado de 8 píxeles, una extensión de 2 píxeles...

1. Situación actual

El módulo CSS Image Values and Replaced Content Module Level 3 para las imágenes y los degradados se encontraba todavía en fase de Candidate Recommendation el 17 de abril de 2012: https://www.w3.org/TR/css3-images/

2. Los degradados lineales

La URL del capítulo dedicado a los degradados lineales del sitio de W3C es la siguiente: https://www.w3.org/TR/css3-images/#linear-gradients

Los degradados lineales se aplican en línea en la caja deseada y utilizan la notación linear-gradient(). Esta notación se usa con la propiedad background.

Debemos indicar varios valores:

Primer ejemplo:

<!DOCTYPE html>  
<html lang="es">  
<head>  
<title>Degradado lineal</title>  
<meta charset="UTF-8" />  
<style>  
.degradado-tres-colores {  
background: linear-gradient(to top, blue, white, red);  
border: 1px solid #333;  
width: 200px;  
height: 100px;  
}  
</style>  
</head>  
<body>  
<div class=" degradado-tres-colores ">&nbsp;</div>  
</body>  
</html> 

Así es como se ve la caja:

Segundo ejemplo:

<!DOCTYPE html>  
<html lang="es">  
<head>  
   <title>Degradado lineal</title>  
   <meta charset="UTF-8" />  
   <style>  
   ...

1. Funcionalidad

Con CSS2.1, solamente podemos aplicar una imagen como fondo de un elemento. Con CSS3, es posible aplicar varias imágenes, lo que nos ofrece posibilidades muy interesantes.

Vamos a usar la clásica propiedad de fondo con su sintáxis corta background. Esta se define en el módulo CSS Backgrounds and Borders Module Level 3: https://www.w3.org/TR/css-backgrounds-3/.

2. Un ejemplo sencillo

Vamos a usar la propiedad background. La diferencia es simple: las distintas imágenes de fondo estarán separadas mediante una coma. En el ejemplo, he insertado un salto de línea tras cada imagen, para facilitar la lectura del código. Cada imagen corresponde a una cifra.

#imagenesMultiples { 
   position: absolute; 
   top:  10px; 
   left: 10px; 
   width: 150px; 
   height: 80px; 
   border: 1px solid #333; 
   background: url("uno.png") top left no-repeat, 
               url("dos.png") top right no-repeat, 
               url("tres.png") bottom left no-repeat, 
               url("cuatro.png")...

1. Las propiedades

Las nuevas propiedades background-origin, background-clip y background-size se definen también en el módulo CSS Backgrounds and Borders Module Level 3: http://www.w3.org/TR/css3-background/#/

En ese módulo, encontrará de nuevo las propiedades clásicas:

2. La posición inicial de una imagen

La propiedad background-origin permite definir la posición inicial de una imagen de fondo de una caja. Esta propiedad admite tres valores:

De momento, deberá usar los prefijos propietarios y los valores propietarios (border, padding y content).

Veamos un ejemplo:

#posicion-inicial { 
   width: 250px; 
   height: 150px; 
   border: 10px dotted; #333; 
   padding: 10px; 
   background: url("suricata.jpg")no-repeat; 
   background-clip: border-box; 
} 

Así se visualizará con el valor border-box:

Así se visualizará con el valor padding-box:

Así se visualizará...

1. Funcionalidad

Ya hemos visto algunos generadores en línea para las nuevas propiedades de CSS3. A continuación, presentaremos algunas herramientas "todo en uno", en las que encontrará prácticamente todas las propiedades que necesite. Observe que algunos de esos sitios, que empiezan a quedarse obsoletas, aún utilizan prefijos pese a que ya no son necesarios.

2. WestCIV

Este sitio web (http://www.westciv.com/tools/box-properties/index.html) permite trabajar en una única interfaz con:

3. CSS 3.0 Maker

Este sitio web (http://www.css3maker.com/index.html), con una interfaz muy oscura, le permite trabajar con:

4. CSS3 Playground

Este sitio web (http://css3.mikeplate.com/) con una interfaz minimalista permite trabajar con:

1. Funcionalidad

Vamos a estudiar cómo se ha creado la tabla con bordes redondeados que propone Red Team Design: http://www.red-team-design.com/practical-css3-tables-with-rounded-corners

2. La estructura de la tabla

La tabla (que utiliza una clase llamada .bordered) está estructurada de una manera muy clásica con <table>, <thead>, <tr>, <th> y <td>.

<table class="bordered"> 
    <thead> 
    <tr> 
        <th>#</th> 
        <th>IMDB Top 10 Movies</th> 
        <th>Year</th> 
    </tr> 
    </thead> 
    <tr> 
        <td>1</td> 
        <td>The Shawshank Redemption</td> 
        <td>1994</td> 
    </tr> 
    <tr> 
        <td>2</td> 
        <td>The Godfather</td> 
        <td>1972</td> ...