Lectura Recomendada - CSS Avanzado de Javier Eguíluz Pérez

Siguiendo la línea de mi anterior recomendación, les dejo otro libro del mismo autor. En este se tratan aspectos avanzados de CSS, y es sin duda un buen punto de partida para aquellos que deseen adentrarse un poco mas en los aspectos mas notables de CSS.

Dejo claro que trata sobre la versión 2.1, y que es de fecha del 2009, aun así es un excelente material de estudio, es gratuito y completamente en español.

Pueden encontrar su versión imprimible acá, y la versión online acá.

Lectura Recomendada - Introducción a CSS de Javier Eguíluz Pérez

Hoy les traigo otra recomendación, como siempre gratuita, y es que me han preguntado por una guía de inicio para CSS, y al proceder la consulta de una persona que apenas se inicia en este mundillo, y como suele suceder, no están dispuestos a invertir dinero en libros, menos aun cuando no están en español.

Para su suerte, recordé que hace algún tiempo Javier Eguíluz Pérez publico un gran material al respecto, el cual coloco hoy como recomendación para aquellos que estén buscando material introductorio a CSS en español y gratuito.

Dejo claro que el material trata la versión 2 de CSS, y que la fecha de este es del 2009, pero mas allá de esto es una excelente fuente de información y tengo seguro que será de utilidad para mas de uno.

Pueden encontrar la versión imprimible acá, o la versión online acá.

Lectura Recomendada – Guía Completa de CSS 3 de Antonio Navajas

Resultado de estar siempre buscando fuentes de información (de preferencia libres), me he encontrado con este manual, de la autoría de Antonio Navajas, he de aclarar que no es precisamente una guía para novatos, pero es de bastante utilidad.

En esta completa guía, el autor nos muestra el uso de los nuevos selectores, los pseudo elementos, las pseudo clases y toda una serie de efectos estéticos que abarcan desde la tipografía a las transformaciones 3D.

La mejor parte, es que es material de libre distribución, así que nuestro bolsillo lo agradecerá, esta guía esta disponible para su descarga desde el sitio del autor, o desde acá.

Tips CSS3 – Colores RGBA

Una de las buenas nuevas en CSS3, es el soporte RGBA, el cual nos brinda la capacidad de usar transparencias. RGBA es similar a RGB, pero con la adición de un canal extra, conocido como canal Alfa el cual define la opacidad de un píxel en una imagen.

Esto quiere decir, que a un elemento que admita transparencia, a los tres canales de color básicos RGB que definen la cantidad de rojo, verde y azul respectivamente del píxel, se añade un cuarto canal, el alfa, que define el grado de opacidad de ese píxel.

En lo que a trabajar en la web refiere, los valores del canal alfa están comprendidos entre 0 y 1, donde 0 significa que el píxel no tiene ninguna opacidad, es decir es completamente transparente y 1 significa que el píxel carece de transparencia alguna, es decir, es completamente opaco.

De esta forma, suponiendo que el color se expresa utilizando una tupla RGBA, los valores { 255, 0, 0, 0.5 } implicaría un píxel de color rojo puro y con un 50% de opacidad.

Ahora veamos como hacer uso de este formato con CSS3, aplicando color al fondo de las secciones definidas.

<td>

    <div class="cuadrado" style="background: rgba(255, 0, 0, 0.2);"></div>

    <div class="cuadrado" style="background: rgba(255, 0, 0, 0.4);"></div>

    <div class="cuadrado" style="background: rgba(255, 0, 0, 0.6);"></div>

    <div class="cuadrado" style="background: rgba(255, 0, 0, 0.8);"></div>

    <div class="cuadrado" style="background: rgba(255, 0, 0, 1)  ;"></div>

</td>

<td>

    <div class="cuadrado" style="background: rgba(0, 0, 255, 0.2);"></div>

    <div class="cuadrado" style="background: rgba(0, 0, 255, 0.4);"></div>

    <div class="cuadrado" style="background: rgba(0, 0, 255, 0.6);"></div>

    <div class="cuadrado" style="background: rgba(0, 0, 255, 0.8);"></div>

    <div class="cuadrado" style="background: rgba(0, 0, 255, 1)  ;"></div>

</td>

<td>

    <div class="cuadrado" style="background: rgba(0, 255, 0, 0.2);"></div>

    <div class="cuadrado" style="background: rgba(0, 255, 0, 0.4);"></div>

    <div class="cuadrado" style="background: rgba(0, 255, 0, 0.6);"></div>

    <div class="cuadrado" style="background: rgba(0, 255, 0, 0.8);"></div>

    <div class="cuadrado" style="background: rgba(0, 255, 0, 1)  ;"></div>

</td>

<td>

    <div class="cuadrado" style="background: rgba(255, 125, 0, 0.2);"></div>

    <div class="cuadrado" style="background: rgba(255, 125, 0, 0.4);"></div>

    <div class="cuadrado" style="background: rgba(255, 125, 0, 0.6);"></div>

    <div class="cuadrado" style="background: rgba(255, 125, 0, 0.8);"></div>

    <div class="cuadrado" style="background: rgba(255, 125, 0, 1)  ;"></div>

</td>

Esto luce así:

También podemos aplicarlo a otros elementos, por ejemplo a un texto:

<div style="color: rgba(200, 0, 0, 0.3);">Texto con transparencia</div>

<div style="color: rgba(200, 0, 0, 0.7);">Texto con transparencia</div>

Esto nos permitirá ver el color de nuestro texto con transparencia, tal como vemos a continuación:

Ejemplo de texto con transparencias

Texto con transparencia

Texto con transparencia

Como podemos ver es muy fácil lograr efectos interesantes usando las nuevas funcionalidades incluidas en CSS3, y con un poco de practica e ingenio no queda mas limite que la imaginación.

Tips HTML5 – Control url

Este es un control de formulario, de tipo gráfico, es un subtipo del control input, el cual nos presenta un cuadro de texto, pero con la ventaja de que trae incluido un mecanismo de validación que verifica la validez de la url ingresada.

Es un control realmente útil, y muy fácil de usar.

<input type="url" name="userWebSite" size="50">

Con la adición de CSS podemos lograr efectos interesantes.

Tips HTML5 – Control number

El control number es un elemento de formulario, de tipo gráfico, es un subtipo del control input, el cual nos permite contar con un control que se asimila a un contador, el cual nos permite ingresar un numero comprendido dentro de un rango definido, bien sea de forma manual, o haciendo uso de un par de flechas que nos permiten aumentar o disminuir la cuenta.

Es muy fácil de usar y muy practico, por ejemplo en un formulario de pedidos para definir la cantidad de productos a comprar.

<input type="number" name="cantidad" min="1" max="50" value="1">

Para usar este control es necesario definir el tipo del input como number, y tiene los siguientes atributos:

• min = define el valor mínimo que puede ser seleccionado.
• max = define el valor máximo que puede ser seleccionado.
• step = define el paso, o valor del intervalo.
• value = indica el valor por defecto que tendrá el control.

Y se ve tal como se muestra en la imagen:

Tips HTML5 – Control color

Este es un control de formulario, de tipo gráfico que es en realidad un subtipo del control input, y nos permite desplegar en nuestra aplicación web un control similar al del calendario, pero que nos permite seleccionar colores en vez de fechas.

Esta claro que muchos notaran su gran utilidad, por ejemplo, si deseo que mi web goce de la capacidad de ser personalizable, entonces este control permitirá al usuario seleccionar el color de fondo, de las letras, etc.

Su uso es muy sencillo, tal como vemos a continuación:

<input type="color" name="backgroundColor">

Para usar este control, el tipo del input debe estar definido como color.

Al igual que algunos otros controles, a la fecha no esta soportado por todos los navegadores disponibles, así que les dejo la captura de pantalla de Opera.