Tomando una página de ejemplo, modificaremos los valores de márgenes y de rellenos de diferentes elementos. Pensando en las etiquetas que tenemos en la página, intentaremos cambiar aquellas que pueda parecer que no tienen esta cualidad.

Continuando con el ejemplo anterior, iremos modificando valores parciales retirando la propiedad general para reemplazarla por otras dos o tres que modifiquen sólo algunos laterales.

Reemplazaremos todos los bordes que hayamos aplicado hasta ahora utilizando el modelo condensado.

Probaremos a aplicar bordes redondeados o sombras a diferentes elementos de nuestra página.

Intentaremos conseguir un efecto de brillo, procurando que el resplandor se mueva en espectros de la luz que le den una apariencia fria, con tonos blancos o azules.

Hay mucho que experimentar aquí. Probaremos a crear dos bloques similares a los del ejemplo y comprobar lo que sucede, al indicar valores relativos como el 50% o valores fijos menores.

Realizaremos algunas pruebas con los valores de mínimo y máximo, así como con la propiedad overflow.

El primer ejemplo es una buena práctica para familiarizarnos con estas técnicas y, aún más, probar a hacer el que muestra y oculta el bloque. Como ayuda, éste sería el código JavaScript completo de este último caso.

<script language="JavaScript">

function mostrar() {
document.getElementById('bloque2').style.display="inline-block";
}
function ocultar() {
document.getElementById('bloque2').style.display="none";
}

</script>

En una página web escribiremos esta secuencia

<p> No es lo mismo pero es <span id="palabra">bastante</span> parecido</p>

Utilizando la propiedad display y visiblity haremos desaparecer la palabra situada en la etiqueta <span>. Debemos apreciar la diferencia entre ambos métodos.

Diseñaremos una página web que tenga cuatro bloques diferenciados (los podemos hacer como <div>). El primero será la cabecera, el segundo y el tercero serán bloques centrales de contenidos y el cuarto lo emplearemos para hacer las veces de pie de página. Tanto el primero como el último deben ocupar todo el ancho de la página, mientras que los centrales deben repartirse el resto del espacio. Colorearemos cada <div> con un tono diferente para destacar más las diferencias.

Empleando transiciones diseñaremos una sombra casi imperceptible que se destaca fuertemente al pasar el ratón sobre el elemento al que se lo apliquemos, por ejemplo un <div> o un <h1>. Todo lo que necesitamos hacer es crear una sombra casi transparente y definir una propiedad :hover para ese elemento en el que la sombra es casi opaca, añadiendo además las propiedades transition necesarias para que se produzca paulatinamente.

Es decir, los dos estilos que definiríamos podrían quedar así:

div#bloque1 {

box-shadow: 8px 8px 6px #333333;
}

div#bloque1:hover {

box-shadow: 8px 8px 6px #333333;
-webkit-transition-property: box-shadow;
-webkit-transition-duration: 5s;
-webkit-transition-delay: 1s;
}  

Probaremos también a variar el número de segundos hasta encontrar un equilibrio entre estética y usabilidad. El efecto no debe ser pesado ni entorpecer el trabajo del usuario, pero al mismo tiempo debe percibirse.