Cómo crear una interfaz minimalista con CSS3

El otro día estaba viendo en internet interfaces minimalistas, elementos que por ejemplo ha implementado ahora Microsoft. Estas interfaces son muy bonitas por la simpleza de los elementos, además de que sobresalen los colores y los contrastes muy bien.

En el tutorial que vamos a hacer hoy haremos justo eso, hacer una pequeña interfaz minimalista de un recordatorio de calendario, el cuál tiene un ícono y dos textos, que en nuestro caso son la fecha de un evento y más abajo la descripción, muy mono la verdad el resultado.

Dificultad del tutorial: Intermedio

Demo del tutorial

HTML

Para esto necesitamos un contenedor, y dos secciones, una donde va a aparecer nuestra imagen y la otra que va a tener los textos. Pongo el HTML junto para evitar las líneas de espacio que coloca HTML automáticamente, y de esa forma nos cuadren los tamaños perfectamente.

CSS

Para el CSS necesitamos algunas cosas muy importantes. Primero necesitamos ver que para poder hacer funcionar toda la estructura necesitamos el inline-block es importante la estructura toda en línea, pero también es importante que definamos una altura y ancho desde el principio, para evitar problemas con la propiedad, ya que no queremos espacios en blanco.

Otra cosa importante a tener en cuenta es el box-sizing, que nos permite hacer uso del padding pero de forma interna al contenedor, y así no tener más ancho o alto por accidente.

Los demás detalles son estética y podemos configurarlos si queremos, pero para este tutorial quería que vieran que para lograr estructuras de este tipo hay propiedades que nos brinda CSS para lograrlo.