UI/UX CSS. Maquetando elementos sin imágenes - Blog Yunbit Software

En este artículo vamos a realizar un ejemplo práctico de desarrollo de elementos para una posible interfaz de usuario, donde veremos el potencial de CSS3 al realizar un diseño sin utilizar imágenes.

Entre las ventajas que obtenemos al maquetar sin imágenes podemos destacar dos. La primera es que reducimos el “peso” del desarrollo, por lo que la carga del archivo será más rápida. Esto mejora la experiencia de usuario y nos otorga una mejor valoración en buscadores como Google, por lo que podemos suponer una mejora en nuestra posición de los resultados de búsqueda. Otra de las ventajas es que nuestros elementos no perderán definición en pantallas con mayor densidad de píxeles (como por ejemplo las pantallas retina) aunque aumentemos sus dimensiones, ya que actúa de forma similar a un gráfico vectorial.

También cabe destacar que existe una desventaja a tener en cuenta, y se trata de la compatibilidad de los navegadores web y sus diferentes versiones a ciertas propiedades CSS3, como por ejemplo sombras, bordes redondeados, degradados, etc. Existen ciertos hacks y utilidades para solventar errores de compatibilidad, como por ejemplo CSS3PIE para las versiones antiguas de Internet Explorer, pero en este caso y para no extendernos demasiado, prescindiremos de técnicas de compatibilidad externas y sólo utilizaremos prefijos exclusivos para ciertos navegadores web.

Desarrollo de elementos CSS. Ejemplo práctico.

Antes de comenzar, sólo indicar que para nuestro ejemplo vamos a utilizar un color de fondo gris para el entorno (background-color:#e2dedf;) y la tipografía “Open Sans” que se puede encontrar en Google Fonts, pero podéis personalizarlo a vuestro gusto. Realizaremos un botón de pestaña con dos posiciones (ON/OFF) similar al que podemos ver en la imagen del artículo. Para ello vamos a necesitar 3 capas y 2 etiquetas span que utilizaremos para visualizar los estados del botón:

• Una capa contenedora que a su vez hará visualmente de contorno/bordes del botón (class=”ui-button”).
• Una capa para la pestaña que cambia de posición izquierda/derecha (class=”ui-click”).
• Una capa de fondo con los dos posibles estados (class=”ui-state”). Estos estados activo/inactivo serán dos span (class=”ui-on” y class=”ui-off”).

HTML:

<div class="ui-button">
    <div class="ui-click">|||</div>
    <div class="ui-state">
        <span class="ui-on">ON</span>
        <span class="ui-off">OFF</span>
    </div>
</div>

Como podéis observar, en “ui-click” hemos añadido tres barras verticales de texto (|||) para simular las muescas de la pestaña del botón, y en cada span, los diferentes estados. A continuación, vamos a ir aplicando estilos a cada capa por separado e ir comprobando los resultados.

HTML:

<div class="ui-button"></div>

CSS:

.ui-button{
    position:relative;
    display:inline-block;
    width:200px;
    height:40px;
    padding:4px;
    -moz-border-radius:24px;
    -webkit-border-radius:24px;
    -ms-border-radius:24px;
    border-radius:24px;
    background:rgba(136,136,136,1);
    background:-moz-linear-gradient(top, rgba(136,136,136,1) 0%, rgba(255,255,255,1) 100%);
    background:-webkit-gradient(left top, left bottom, color-stop(0%, rgba(136,136,136,1)), color-stop(100%, rgba(255,255,255,1)));
    background:-webkit-linear-gradient(top, rgba(136,136,136,1) 0%, rgba(255,255,255,1) 100%);
    background:-o-linear-gradient(top, rgba(136,136,136,1) 0%, rgba(255,255,255,1) 100%);
    background:-ms-linear-gradient(top, rgba(136,136,136,1) 0%, rgba(255,255,255,1) 100%);
    background:linear-gradient(to bottom, rgba(136,136,136,1) 0%, rgba(255,255,255,1) 100%);
    filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#888888', endColorstr='#ffffff', GradientType=0 );
}

Comenzamos con la capa contenedora “ui-button“. Le aplicamos una posición relativa dado que la pestaña interior (“ui-click”) la colocaremos en absoluto, y en este caso la propiedad display la colocamos con “inline-block” sólo para que el botón quede centrado en el documento (al colocar en body o su posible capa padre alineación al centro). Le damos unas dimensiones de 200px de ancho y 40px de alto, y el padding de 4px será la medida que tendrá el contorno/borde del botón. Redondearemos las esquinas con “border-radius” aplicando como medida la mitad de su altura + padding superior e inferior (40px altura + 4px padding superior + 4px padding inferior / 2 = 24px) para que los extremos formen un semicírculo.

Aplicamos un fondo degradado, que nos servirá para crear una sombra interior en el contorno del botón y simular una cavidad, cuyos colores van desde el hexadecimal #888888 (tonalidad gris) en la parte superior hasta el #ffffff (blanco) en la parte inferior. Como se puede observar hay 8 lineas de código para crear el degradado. Esto es debido a la compatibilidad, para asegurarnos de que funciona en todos los navegadores posibles, entre los que se encuentran Chrome, Firefox, Opera, Internet Explorer, Safari, etc.

Llegados a este punto supongo que un porcentaje alto de los/as usuarios/as que lean este artículo pensarán que es mejor seguir realizando los degradados con imágenes o continuar aborreciéndolos (y no les falta razón), pero tranquilos porque tenemos a nuestra disposición herramientas online generadoras de todo el código necesario para aplicar degradados a nuestros desarrollos, como es el “generador de gradientes de cssmatic.com“. Además de otras que podemos encontrar en su página, esta herramienta nos permite generar múltiples gradientes por complicados que puedan ser, con múltiples colores, posiciones, radiales, etc., y descargar el código en CSS o SASS entre otras opciones.

Tras este agregado, continuamos con nuestro desarrollo. Ahora aplicaremos los estilos para la capa de estado (“ui-state“):

HTML:

<div class="ui-button">
    <div class="ui-state"></div>
</div>

CSS:

.ui-button .ui-state{
    width:100%;
    height:inherit;
    display:block;
    background-color:#6b6b6b;
    -moz-border-radius:20px;
    -webkit-border-radius:20px;
    -ms-border-radius:20px;
    border-radius:20px;
    -moz-box-shadow:inset 0px 3px 3px #555555;
    -webkit-box-shadow:inset 0px 3px 3px #555555;
    -ms-box-shadow:inset 0px 3px 3px #555555;
    box-shadow:inset 0px 3px 3px #555555;
}
.ui-button.on .ui-state{
    background-color:#abdd46;
}

Esta capa ajustará sus dimensiones a la capa contenedora con una anchura del 100% y una altura heredada, de forma que si modificamos las dimensiones de “ui-button”, “ui-state” se modificará automáticamente. Redondeamos sus esquinas a la mitad de su altura (en este caso, 40px de su capa padre / 2 = 20px) para formar semicírculos en sus extremos y aplicamos un color de fondo hexadecimal #6b6b6b (gris oscuro).

También añadimos una sombra interior con “box-shadow” de 3px de tamaño y 3px de desplazamiento vertical de color hexadecimal #555555 (gris oscuro).

El color de fondo nos servirá para el estado inactivo (OFF). Como podemos observar, por otro lado estamos aplicando un color de fondo hexadecimal #abdd46 (verde lima) para cuando a “ui-button” se le añade la clase “on“. (class=”ui-button on”). Este color nos servirá para el estado activo (ON). Podemos comprobar que el resultado cambia de color si añadimos la clase “on” a la capa padre:

HTML:

<div class="ui-button on">
    <div class="ui-state"></div>
</div>

A continuación, pasaremos a maquetar la capa de la pestaña superior:

HTML:

<div class="ui-button">
    <div class="ui-click">|||</div>
    <div class="ui-state"></div>
</div>

CSS:

.ui-button .ui-click{
    position:absolute;
    z-index:2;
    top:3px;
    right:4px;
    width:50%;
    height:inherit;
    color:#bbbbbb;
    font-size:1rem;
    font-weight:800;
    line-height:2.2rem;
    cursor:pointer;
    -moz-border-radius:20px;
    -webkit-border-radius:20px;
    -ms-border-radius:20px;
    border-radius:20px;
    -moz-box-shadow:0px 2px 3px #777777;
    -webkit-box-shadow:0px 2px 3px #777777;
    -ms-box-shadow:0px 2px 3px #777777;
    box-shadow:0px 2px 3px #777777;
    -moz-text-shadow:1px 1px 2px #ffffff;
    -webkit-text-shadow:1px 1px 2px #ffffff;
    -ms-text-shadow:1px 1px 2px #ffffff;
    text-shadow:1px 1px 2px #ffffff;
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none;
    background: rgba(255,255,255,1);
    background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(204,204,204,1) 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255,255,255,1)), color-stop(100%, rgba(204,204,204,1)));
    background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(204,204,204,1) 100%);
    background: -o-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(204,204,204,1) 100%);
    background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(204,204,204,1) 100%);
    background: linear-gradient(to bottom, rgba(255,255,255,1) 0%, rgba(204,204,204,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#cccccc', GradientType=0 );
}
.ui-button.on .ui-click{
    right:auto;
    left:4px;
}

Podemos ver que ya lo tenemos casi completo. En este caso la capa “ui-click” tiene bastantes propiedades CSS, pero vamos a explicarlas detalladamente. Posicionamos la capa en absoluto aplicándole un z-index mayor de 1, y la desplazamos 3px desde arriba y 4px desde la derecha. Realmente habría que separarla 4px por arriba y abajo (que es la medida del padding de la capa padre “ui-button”), pero debido a las sombras que aplicamos a este botón se crea un efecto óptico que genera un desplazamiento vertical cuyo resultado parece no estar centrado en altura. Si modificáis la propiedad “top” a 4px podréis ver a qué me refiero.

La anchura aplicada será la mitad de la capa padre y tendrá una altura heredada, de forma que si cambiamos las dimensiones de “ui-button” éstas se modificarán automáticamente.

Las siguientes 8 lineas de código son estilos aplicados al texto del botón. En este caso se aplican a las tres barras verticales (|||) que simulan las muescas o hendiduras. Las 4 primeras son el color de las barras, su tamaño, su altura de linea y el grosor de la tipografía. Las 4 siguientes aplican una sombra blanca a las barras para generar el efecto visual de profundidad.

Con “border-radius” aplicamos un radio a sus esquinas de la mitad de su altura (en este caso, 40px / 2 = 20px) para generar semicírculos en sus extremos y con “box-shadow” añadimos sombra a la capa para generar profundidad. A continuación le aplicamos un degradado que va desde el color hexadecimal #ffffff (blanco) en la parte superior hasta el color #cccccc (gris claro) de la parte inferior.

Para finalizar, convertimos el cursor a la mano habitual de enlace (cursor:pointer) al posicionar el ratón sobre la capa y añadimos la propiedad “user-select:none” para no permitir que se seleccione el texto de la capa (en este caso, las barras verticales).

Estamos visualizando el estado inactivo (OFF), pero vemos que también hemos añadido estilos para el estado activo (ON). En este caso, dejaríamos la propiedad “right” en su valor por defecto y posicionaríamos la capa a la izquierda, separada 4px al igual que en el anterior estado. Como anteriormente habíamos aplicado estilos a “ui-state” para el estado activo, si modificamos el código HTML añadiendo la clase “on” a “ui-button” veremos cómo queda el resultado:

HTML:

<div class="ui-button on">
    <div class="ui-click">|||</div>
    <div class="ui-state"></div>
</div>

Ahora sólo falta añadir el texto que se visualizará dentro del botón en cada uno de los estados y aplicar los estilos necesarios:

HTML:

<div class="ui-button">
    <div class="ui-click">|||</div>
    <div class="ui-state">
        <span class="ui-on">ON</span>
        <span class="ui-off">OFF</span>
    </div>
</div>

CSS:

.ui-button.on .ui-off, .ui-button .ui-on{
    display:none;
}
.ui-button .ui-on, .ui-button .ui-off{
    width:50%;
    font-size:1.5rem;
    font-weight:800;
    line-height:2.4rem;
    color:#ffffff;
    cursor:default;
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none;
}
.ui-button .ui-off{
    color:#4d4d4d;
    float:left;
    display:block;
}
.ui-button.on .ui-on{
    float:right;
    display:block;
}

Aplicamos estilos para ocultar los estados de ambas etiquetas. El estado activo por defecto no debe mostrarse (aplicamos “display:none” a “ui-on”), y cuando el botón esté en estado activo (class=”ui-button on”), la etiqueta “ui-off” no debe mostrarse (también “display:none” a “ui-off” cuando el botón esté activo).

Continuamos con los estilos que comparten ambas etiquetas span. Su anchura será la mitad de la capa padre (50%), y las siguientes 3 lineas aplican estilos de tamaño de fuente, grosor y altura de linea. El color blanco (#ffffff) en este caso lo utilizaremos sólo para el estado activo (ui-on). A continuación, el cursor será la flecha por defecto al posicionar el ratón sobre el texto y no permitimos la selección del mismo.

En la parte inferior, aplicamos los estilos para el estado inactivo (ui-off). Aplicamos el color de texto #4d4d4d (gris oscuro) y en este caso, lo “flotamos” a la izquierda y aplicamos la propiedad “display:block“, lo que hace que como estado inicial mostremos el texto del estado inactivo.

Para el estado activo del botón (.ui-button.on .ui-on), flotamos el texto a la derecha y lo mostramos con “display:block“. Cabe destacar que sólo se mostrará cuando “ui-button” esté acompañado de la clase “on”.

Con esto ya tenemos finalizado el botón y ambos estados. En la parte superior ya hemos visto el estado inactivo (OFF), y ahora añadiendo “on” a “ui-button” comprobamos el estado activo (ON):

HTML:

<div class="ui-button on">
    <div class="ui-click">|||</div>
    <div class="ui-state">
        <span class="ui-on">ON</span>
        <span class="ui-off">OFF</span>
    </div>
</div>

Para terminar nuestro desarrollo y aplicar un cambio de estado dinámico al hacer click en nuestro botón, podemos añadir “jquery“. En el de nuestro documento HTML, hacemos una llamada al archivo jquery necesario para ejecutar nuestras funciones:

<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.2.min.js"></script>

y bajo esa linea, añadimos el siguiente código:

<script type="text/javascript">
    $(document).ready(function(){
        $(".ui-button .ui-click").click(function(){
            $(".ui-button").toggleClass("on");
        });
    });
</script>

Como resumen esta función nos permite que, una vez haya cargado nuestro documento, y al pulsar con el ratón sobre la pestaña de nuestro botón (.ui-button .ui-click), se añada o elimine la clase “on” sobre “ui-button“, alternando entre ambos estados. El resultado es el siguiente:

En principio puede parecer que la técnica es bastante laboriosa, pero con la práctica y los conocimientos necesarios se pueden elaborar múltiples componentes muy útiles para el desarrollo de aplicaciones e interfaces web. También se puede prescindir de realizar todo el desarrollo mediante código y utilizar imágenes allá donde sea necesario, creando hojas de estilo menos extensas y ampliando la compatibilidad. En el siguiente ejemplo se puede visualizar el mismo botón utilizando imágenes para los degradados, así como otros componentes:

Para finalizar, os dejo un enlace de descarga del botón que hemos realizado en este artículo para que podáis hacer pruebas, modificarlo, romperlo y, en resumen, aprender. Espero que os haya resultado útil y didáctico. ¡Saludos!