Las pantallas de los dispositivos por los cuales accedemos a la web, generan todos los colores combinando únicamente luz de tres colores: rojo, verde y azul. Esto se conoce cómo el modelo de color RGB (red, green, blue).
Los 3 colores en su máxima intensidad resultarán en luz blanca, mientras que su ausencia total equivaldrá a negro.
CSS pone a nuestra disposición varias maneras de asignar colores.
La más sencilla, es a través de palabras clave que representan hasta un total de 140 colores en CSS3
Si queremos más control sobre los colores que queremos utilizar tendremos que recurrir a alguno de los 3 formatos numéricos que nos proporciona CSS: Colores Hexadecimales, RGB o HSL
p {
color: red;
color: #ff0000;
color: rgb(255, 0, 0);
color: hsl(0, 100%, 50%);
}
Los formatos RGB y HSL tienen una version que incluye un canal alpha, RGBa y HSLa respectivamente, lo que nos permitirá añadir transparencia al color elegido.
El canal alpha se moverá en una escala de 0 (completamente transparente) a 1 (completamente opaco)
p {
color: rgba(255, 0, 0, .5);
color: hsla(0, 100%, 50%, .5);
}
Reponsive web design es una metodología a la hora de afrontar el diseño y desarrollo de una web que procura solventar el problema que genera la inmensa variedad de dispositivos del mercado actual.
Su objetivo es conseguir que nuestro contenido se represente bien independientemente de las características del cliente que lo reproduzca.
Cómo alcanzar este objetivo puede variar mucho dependiendo el diseño particular de nuestra web pero hay algunos puntos y técnicas que nos serán imprescindibles.
Cuando los smartphones empezaron a poder reproducir sitios web con todas sus funcionalidades, el mercado aún no estaba preparado para este tipo de dispositivos por lo que las páginas web se diseñaban para el ancho de un monitor estándar (alrededor de los 980px).
Por esta razón los móviles empezaron a simular un ancho similar sobre el que luego el usuario podía hacer un zoom manualmente.
Si estamos trabajando con un diseño responsive, que se adaptará al ancho de cada dispositivo, querremos que los navegadores visualicen nuestra web usando sus proporciones reales.
Aquí es donde entra el <meta name="viewport">, con el le indicaremos al navegador como tiene que abrir nuestra página web.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Colocando esta etiqueta en el <head> le estaremos diciendo al navegador que tiene que abrir la página utilizando el ancho en pixels del dispositivo ya que nuestra web se adaptará.
Hay que tener cuidad con no usar esta etiqueta innecesariamente, si nuestra web no es responsive, ya que de hacerlo los móviles abrirán la página focalizados en la esquina superior izquierda obligando al usuario hacer un zoom out.
Para que nuestros diseños se adapten a cualquier dispositivo es imprescindible que trabajemos con layouts fluidos.
Para conseguir esto utilizaremos porcentajes a la hora de determinar los anchos de nuestros elementos en lugar de medidas absolutas como los pixeles.
Hay que recordar que, por defecto, HTML es un medio fluido, somos nosotros los que tendemos a imponer limites al contenido.
Para convertir nuestros anchos en pixels a porcentajes solamente tenemos que aplicar una regla de tres simple: (objetivo / contexto) * 100
.container {
width: 980px
}
.box {
width: 250px; /* (250/980)*100 */
width: 25.51%
}
Si queremos que nuestras imágenes también se adapten al contenido pero que al mismo tiempo nunca sean más grande que su tamaño real para evitar que se pixelen, podemos utilizar el siguiente código a nivel global:
img {
max-width: 100%;
height: auto; /* para forzar el aspect ratio correcto */
-ms-interpolation-mode: bicubic; /* proporciona un mejor escalado
en IE7 */
}
Los media queries son una herramienta CSS que nos permite asignar diferentes estilos dependiendo de ciertas características del cliente que esté procesando nuestro código.
Algunas de las caracterísitcas del cliente que podemos utilizar para determinar que estilos se aplican son las dimensiones del cliente, su resolución, cuantos colores soporta o la orientación del dispositivo.
La sintáxis de un media query se compone de un media type que contiene una o más comprobaciones que se resolverán como verdaderas o falsas, seguido de un bloque de declaraciones CSS.
Si todas ellas se cumplen, los estilos que contenga el bloque se aplicarán a la página.
@media (min-width: 900px) { ... }
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo ducimus animi quam, eos neque magnam omnis cupiditate, nam ipsa est, excepturi rem illum praesentium et nihil ex debitis iure. Non.
p { color: red; }
@media (max-width: 1000px) {
p {
color: blue;
}
}
=
p { color: blue; }
@media (min-width: 1000px) {
p {
color: red;
}
}
Podemos comprobar más de una condición separándola con un and. Para que los estilos del media query se apliquen todas ellas deben cumplirse.
@media screen and (max-width: 1000px) and (min-color-index: 256) {
p {
color: blue;
}
}
Si en lugar de utilizar un and, separamos las condiciones con una coma, con cumplir solo una de las condiciones de la lista será suficiente para que los estilos se apliquen..
@media (min-width: 800px), handheld and (orientation: landscape) {
p {
color: blue;
}
}
Hay varias comprobaciones que podemos realizar pero las que utilizaremos la gran mayoría de las veces serán min-width y max-width, para aplicar estilos de acuerdo al ancho del cliente que está reproduciendo nuestra página.
De esta manera podremos ir haciendo ajustes en el código en los puntos que el diseño se rompa o presente algún problema.