Existen diversas maneras de realizar animaciones con la propiedad transition de CSS3. La manera de hacerlo es utilizando ease-out, ease-in, etc. Pero también existe Cubic-Bezier es 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:
Flexible ellipses
La manera en la que generalmente hacemos un border-radius es con medidas fijas, pero si es contenido dinámico se distorsiona.
Para que esto no suceda se recomienda utilizar porcentajes para realizar el mismo efecto pero sin llegar a una distorción.
Con esto siempre se mantendrá la forma de un eclipse.
Ejemplo
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.
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 ancho del box-shadow, esto nos ayuda a generar el efecto.
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 realizar una sombra de un sólo lado de algún elemento.
Ejemplo
Make pointer events pass through (Hacer que los eventos de puntero pasen)
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.
Ajustar el tamaño de la pestaña
Si modificamos el tamaño de la sangría o el tamaño del tab en un texto, la propiedad tab-size ayuda mucho.
Estilo basado en el número de hermanos (bonus)
Se selecciona el primer elemento si sólo son 12 en total.
Se seleccionan todos los elementos si son solo 12 en total.
Se seleccionan todos los elementos a partir de 6 en total.
Patrones de fondo con CSS puro
Se pueden realizar tus propios patrones en CSS3, se puede comenzar por el sistema de linear-gradient.
Algo desconocido es que se pueden incluir varias opciones dentro del linear-gradient, para realizar un patrón inclinado podemos utilizar lo siguiente:
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. En lugar de porcentajes, medidas fijas. Con esto podremos personalizar aún más nuestro efecto.
Bibliografía
http://abarcarodriguez.com/blog/10-secretos-de-css3-que-tal-vez-no-conocias