10 secretos de CSS3 que tal vez no conocias

23 de noviembre del 2011 鈥 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 鈥渃lick through鈥 o un 鈥渃lic 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.