10 secretos de CSS3 que tal vez no conocias

‚ÄĒ 1894 palabras ‚ÄĒ 10 min

Lea Verou (@LeaVerou) es una popular desarrolladora web con varios a√Īos de experiencia. En su conferencia ‚Äú10 cosas de CSS3 que tal vez no conoc√≠as‚ÄĚ nos explica el uso de algunas propiedades, efectos, transiciones y animaciones en CSS3, as√≠ como tambi√©n un moderado uso de javascript y su respectiva compatibilidad en diferentes navegadores.

Esta conferencia la dió en Pathé Tuschinski en Amsterdam el 7 de Octubre 2011 la cual me he encargado de recopilar y traducir.

Bouncing transitions

Seguramente conocer√°s diversas maneras de realizar animaciones con la propiedad transition de CSS3. La manera regular de hacerlo es utilizando ease-out, ease-in, etc. Pero ¬ŅQu√© tan bien conoces cubic-bezier?

Cubic-Bezier es, por así decirlo, la propiedad madre de los efectos de transición de los estilos antes mencionados. Es totalmente personalizable y se es capaz de marcar tiempos para la animación que queramos.

Se utiliza de la siguiente manera:

/* transition: Ts cubic-bezier(x, y, z, w) *\
transition: 1.5s cubic-bezier(.17, .87, .50, 1.2)

Lea Verou es tan cool que nos regala un sistema de modificaci√≥n de este tipo de animaci√≥n de manera gr√°fica con un excelente dise√Īo y tiene el mejor dominio: Cubic-Bezier.com

Flexible ellipses

La manera en la que generalmente hacemos un border-radius es con medidas fijas, pero ¬ŅQu√© pasa si nuestro es contenido din√°mico? Se distorsiona.

border-radius: 150px / 300px;

Para que esto no suceda se recomienda utilizar porcentajes para realizar el mismo efecto pero sin llegar a una distorción.

border-radius: 50%;

Con esto siempre se mantendr√° la forma de un elipse.

Multiple outlines

Existen maneras complicadas de realizar el efecto de tener varios bordes en un contenedor, pero existe una manera mucho m√°s f√°cil.

box-shadow: 0 0 0 5px black, 0 0 0 10px red;

Los primeros 3 ceros dentro de las propiedades de nuestro box-shadow indican que no tendr√° ning√ļn tipo de posici√≥n en x o y, igualmente ning√ļn blur. El cuarto elemento define el spread o el ancho de nuestro box-shadow, esto nos ayudar√° a generar el efecto.

box-shadow: x y blur spread color;

Con esto, simplemente vamos haciendo un borde m√°s grande que otro d√°ndonos el efecto de m√ļltiples bordes.

Bonus: One Side Shadow

Siguiendo las reglas de box-shadow es bastante f√°cil realizar una sombra de un s√≥lo lado de alg√ļn elemento.

box-shadow: 0 11px 5px -5px black;

Make pointer events pass through

Si tenemos un elemento encima de otro modificado con z-index y queremos realizar un clic en el elemento que est√° debajo, esta acci√≥n nos resulta imposible. Para poder habilitar un ‚Äúclick through‚ÄĚ o un ‚Äúclic a trav√©s‚ÄĚ es necesario agregar la siguiente propiedad a nuestro elemento superior.

pointer-events: none;

Detección

Est√° es la manera recomendada de detectar si existe la propiedad pointer-events.

var supportsPointerEvents = (function() {
  var dummy = document.createElement('_')
  if (!('pointerEvents' in dummy.style)) return false
  dummy.style.pointerEvents = 'auto'
  dummy.style.pointerEvents = 'x'
  document.body.appendChild(dummy)
  var r = getComputedStyle(dummy).pointerEvents === 'auto'
  document.body.removeChild(dummy)
  return r
})()

Y un workaround en javascript es el siguiente.

function noPointerEvents(element) {
  $(element).bind('click mouseover', function(evt) {
    this.style.display = 'none'
    var x = evt.pageX,
      y = evt.pageY,
      under = document.elementFromPoint(x, y)
    this.style.display = ''
    evt.stopPropagation()
    evt.preventDefault()
    $(under).trigger(evt.type)
  })
}

Adjusting tab size

Si quieres modificar el tama√Īo de la sangr√≠a o el tama√Īo del tab en un texto, la propiedad tab-size te ayudar√° bastante.

tab-size: 4;

Styling based on sibling count

Eso de estar seleccionando cada elemento de un men√ļ, de una lista, de una galer√≠a, etc, para asignarle una propiedad diferente es una lata. Resulta que existen unas propiedades llamadas first-child, only-child, nth-child y nth-last-child, que nos ayudar√°n bastante para realizar una serie de efectos interesantes.

First-child

Se selecciona unicamente el primer elemento dentro de un parent (ya se del body, alg√ļn contenedor o de una lista).

#elemento:first-child {
    propiedad: unica;
}

Only-child

Se selecciona √ļnicamente un elementro que est√© s√≥lo dentro de un parent.

#elemento:only-child {
    propiedad: unica;
}

nth-child

Esta es la que m√°s me gusta. Con esta propiedad podremos seleccionar varios elementos cada determinado numero de elementos.

#elemento:nth-child(3n + 1) {
    propiedad: unica;
}

Con esto se seleccionarán el primer elemento y a partir de ahí, cada tres elementos se le aplicará nuestra propiedad.

nth-last-child

Si queremos hacerlo al rev√©s, es decir, contar desde el √ļltimo al primero lo podemos hacer con esta propiedad.

#elemento:nth-last-child(3n + 1) {
    propiedad: unica;
}

Bonus

Lea Verou nos regala las siguientes propiedades para facilitarnos la vida.

:first-child: nth-last-child(2);

Se selecciona el primer elemento si sólo son 2 en total.

:first-child:nth-last-child(2), :first-child:nth-last-child(2) ~ b

Se seleccionan todos los elementos si son solo 2 en total.

:first-child:nth-last-child(n+5), :first-child:nth-last-child(n+5) ~ b

Se seleccionan todos los elementos a partir de 5 en total.

Custom checkboxes & radio buttons

La idea principal es atribuída a Ryan Seddon, con esto podremos tener checkboxes y radio buttons personalizados.

Primero escondemos nuestro elemento.

:root input#custom-checkbox {
    position: absolute;
  clip: rect(0, 0, 0, 0);
}

Después personalizamos nuestro nuevo elemento, agregándole contenido personalizado:

:root input#custom-checkbox + label:before {
    content: '\\20E0';
    padding-right: 0.3em;
  color: red;
}

Y por √ļltimo personalizamos y retocamos el efecto de nuestro elemento:

:root input#custom-checkbox:focus + label:before {
    color: white;
}
:root input#custom-checkbox:checked + label:before {
    color: red;
}

More cursors for better UX

Seguramente sabes que con CSS2 se pueden asignar diferentes cursores, aquí una lista de nuestras opciones nuevas en CSS3.

Se utiliza de la siguiente manera:

cursor: opcion;

Background patterns with pure CSS

Si quieres ser original y realizar tus propios patrones en CSS3, puedes comenzar por aprender como funciona el sistema de linear-gradient.

background: linear-gradient(70deg, black 20%, gray 80%);

Nuestro fondo de pantalla tendr√° un degradado con un √°ngulo de 70¬į, 20% negro y 80% gris. F√°cil ¬Ņno? Algo que probablemente no sab√≠as es que se pueden incluir varias opciones dentro del linear-gradient, para realizar un patr√≥n inclinado podemos utilizar lo siguiente:

background: linear-gradient(
  45deg,
  silver 25%,
  gray 25%,
  gray 50%,
  silver 50%,
  silver 75%,
  gray 75%,
  gray
);
background-size: 200px 200px;

Ajustando el background-size se puede hacer magia. Con esto ajustamos el tama√Īo de nuestro patr√≥n, para as√≠ realizar un bonito efecto.

Se puede realizar el mismo efecto con la propiedad repeating-linear-gradient, nos dar√° el mismo efecto anterior. Se est√°n utilizando ahora, en lugar de porcentajes, medidas fijas. Con esto podremos personalizar a√ļn m√°s nuestro efecto a desear.

background: repeating-linear-gradient(
  45deg,
  silver,
  silver 30px,
  gray 30px,
  gray 60px
);

Background positioning tricks

¬ŅCu√°ntas veces has querido darle padding a un background dentro de un contenedor en una locaci√≥n espec√≠fica? Como sabr√°s lo siguiente no funciona.

padding: 40px;
background: url(imagen.png) no-repeat;
background-position: bottom right;

Para poder lograr el padding se puede utilizar la siguiente forma:

background-position: bottom 100px right 100px;

Workaround para Firefox y Webkit

Para realizar el efecto, que incre√≠blemente √ļnicamente funciona en IE (si, IE) y Opera, podemos utilizar lo siguiente:

padding: 100px;
backgroun-position: bottom right;
background-origin: content-box;

La propiedad background-origin es compatible en todos los navegadores.

Y con esto finaliza la genial presentación de Lea Verou.

En lo personal aprendí bastante, pero sobretodo, aprendí que hay que innovar, pensar out of the box afuera de la caja y sacarle el mayor provecho a las tecnologías actuales. No hay que ser perezosos.