Copiando a Google, sí, ¿y?. Flexbox y overlay/dialog.

Retomemos viejas costumbres. Llevaba algún tiempo sin publicar nada básicamente porque llegaron las vacaciones y por pereza, sinceridad ante todo. Pero hay que luchar contra la apatía, así que para abrir boca, os voy a poner un cachito de código copiado vilmente desde Chrome aplicando las últimas tecnologías y ese toque minimalista de Google, pero al alcance de todos los navegadores (modernos). Concretamente, os hablo del combo overlay/caja de diálogo que se usa en la configuración de Chrome pero fácilmente aplicable a cualquier web. A continuación, una captura.

Las tecnologías principales que se han usado son el juego de propiedades CSS3 denominado flexbox que permite definir cajas de elementos distribuyendolas tanto a ellas como a sus contenidos dentro de la página y  varias propiedades visuales de CSS3 junto con sus variantes según el navegador, puestas en el orden correcto. De regalo, un clon de los botones de Chrome también, que se ven muy bonitos.

Para más información sobre las propiedades de flexbox podéis ver un magnífico artículo en HTMLRocks. Es tontería explicarlo de nuevo aquí porque es una página muy trabajada con muchos ejemplos y que hasta detecta si el navegador usado para verla es capaz de mostrar correctamente todos los ejemplos, así que no os pongáis a verla con el IE6, que os veo y luego me venís llorando!.

Para ver el código completo, en mi jsFiddle como es habitual.


El ejemplo se compone de dos partes. Por un lado una estructura muy sencilla en HTML

<!-- Overlay/dialog -->
<div id="overlay" class="overlay">
    <div id="myDialog" class="dialog">

        <!-- Título del diálogo -->
        <h1>Título del Diálogo</h1>

        <!-- Cuerpo del diálogo -->
        <div class="dialog-area">
            <p>CUERPO</p>
        </div

        <!-- Pie del diálogo -->
        <div class="dialog-footer">
            <div class="extensible">PIE con botones a la derecha sin float</div>
            <input type="button" value="Botón1"/>
            <input type="button" value="Botón2"/>
        </div>

    </div>
</div>

Y por el otro, un CSS algo más complejo (CSS3, por supuesto). Los comentarios además de ayudar a identificar los estilos, dan información sobre para qué y cómo se usan.

/* ================================================================================ */
/* Sample styles */
html {
    font-family: arial;
}

/* Sample dialog styles */
#myDialog {
    background-color: white;
    margin-bottom: 6px;
    margin-top: 6px;
    width: 500px;
}


/* ================================================================================ */
/* Overlay/Dialog styles */
.overlay {
    -webkit-transition: 0.25s opacity;
       -moz-transition: 0.25s opacity;
        -ms-transition: 0.25s opacity;
         -o-transition: 0.25s opacity;
            transition: 0.25s opacity;  

    background: -webkit-radial-gradient(rgba(127, 127, 127, 0.5), rgba(127, 127, 127, 0.5) 35%, rgba(0, 0, 0, 0.7));
    background:    -moz-radial-gradient(rgba(127, 127, 127, 0.5), rgba(127, 127, 127, 0.5) 35%, rgba(0, 0, 0, 0.7));
    background:      -o-radial-gradient(rgba(127, 127, 127, 0.5), rgba(127, 127, 127, 0.5) 35%, rgba(0, 0, 0, 0.7));
    background:     -ms-radial-gradient(rgba(127, 127, 127, 0.5), rgba(127, 127, 127, 0.5) 35%, rgba(0, 0, 0, 0.7));
    background:         radial-gradient(rgba(127, 127, 127, 0.5), rgba(127, 127, 127, 0.5) 35%, rgba(0, 0, 0, 0.7));
    
    position: fixed;
    left: 0; top: 0; right: 0; bottom: 0;
    padding: 20px; padding-bottom: 130px;
    z-index: 10;
}


.overlay .dialog {
    -webkit-user-select: none;
       -moz-user-select: none;

    -webkit-box-shadow: 0px 5px 80px #505050;
       -moz-box-shadow: 0px 5px 80px #505050;
         -o-box-shadow: 0px 5px 80px #505050;
        -ms-box-shadow: 0px 5px 80px #505050;
            box-shadow: 0px 5px 80px #505050;

    background: white;
    border: 1px solid #BCC1D0;

    -webkit-border-radius: 2px;
       -moz-border-radius: 2px;
     -khtml-border-radius: 2px;
            border-radius: 2px;

    position: relative;
    min-width: 400px;
    padding: 0;
}


/* Dialog heading */
.overlay .dialog h1 {
    -webkit-padding-end: 24px; /* Specifies the space between an element's left or right border and its contents, depending on the writing direction */
       -moz-padding-end: 24px;

    -webkit-user-select: none;
       -moz-user-select: none;

    background: -webkit-linear-gradient(white, #F8F8F8);
    background:    -moz-linear-gradient(white, #F8F8F8);
    background:      -o-linear-gradient(white, #F8F8F8);
    background:         linear-gradient(white, #F8F8F8);

    border-bottom: 1px solid rgba(188, 193, 208, .5);
    padding: 10px 15px 8px 15px;
    margin: 0;

    font-size: 105%;
    font-weight: bold;
    color: #53637D;
    text-shadow: white 0 1px 2px;
}


/* Dialog area */
.overlay .dialog .dialog-area {
    -webkit-user-select: none;
       -moz-user-select: none;

    padding: 10px 15px;
}


/* Dialog footer */
.overlay .dialog .dialog-footer {

    border-top: 1px solid rgba(188, 193, 208, .5);
    padding: 12px;
}


/* ================================================================================ */
/* Flexible box model */
/* http://www.html5rocks.com/en/tutorials/flexbox/quick/ */
.overlay {
    display: -webkit-box;            /* Enables flexible box model */
    -webkit-box-orient: horizontal; /* How should the box's children be aligned */
      -webkit-box-pack: center;    /* Sets the alignment of the box along the box-orient axis. . So if box-orient is horizontal it will chose how the box's children are aligned horizontally, and vice-versa. */
     -webkit-box-align: center;   /* Basically box-pack's brother property. Sets how the box's children are aligned in the box. If the orientation is horizontal it will decide the alignment vertically and vice-versa */

    display: -moz-box;
    -moz-box-orient: horizontal;
      -moz-box-pack: center;
     -moz-box-align: center;

    display: box;
    box-orient: horizontal;
      box-pack: center;
     box-align: center;
}

.overlay .dialog .dialog-footer {
    display: -webkit-box;
    -webkit-box-orient: horizontal;
      -webkit-box-pack: end;
     -webkit-box-align: center;

    display: -moz-box;
    -moz-box-orient: horizontal;
      -moz-box-pack: end;
     -moz-box-align: center;

    display: box;
    box-orient: horizontal;
      box-pack: end;
     box-align: center;
}

.extensible {
    -webkit-box-flex: 1;  /* Float value. Extensible up to 1 (or value) times its width (or height depending on parent's orientation) */
       -moz-box-flex: 1;
            box-flex: 1;
}


/* ================================================================================ */
/* Chrome buttons */
button, input[type="button"], input[type="submit"] {
    -webkit-border-radius: 2px;
       -moz-border-radius: 2px;
     -khtml-border-radius: 2px;
            border-radius: 2px;

    -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);

    -webkit-user-select: none;
       -moz-user-select: none;

    background: -webkit-linear-gradient(#FAFAFA, #F4F4F4 40%, #E5E5E5);
    background:    -moz-linear-gradient(#FAFAFA, #F4F4F4 40%, #E5E5E5);
    background:      -o-linear-gradient(#FAFAFA, #F4F4F4 40%, #E5E5E5);
    background:         linear-gradient(#FAFAFA, #F4F4F4 40%, #E5E5E5);

    border: 1px solid #AAA;
    color: #444;
    font-size: inherit;
    margin-bottom: 0px;
    min-width: 4em;
    padding: 3px 12px 3px 12px;
}