JSFiddle

Facundo's public fiddles

  • Cubo girando en 3D

    primer div con perspectiva. segundo div con preserve-3d y animacion girando sobre eje Y. los divs internos dentro del segundo div, tienen translateZ, o translateY y rotateX, o translateX y rotateY. El efecto hover se hace aumentando los translate.

  • planos paralelos girando en 3D

    primer div con perspectiva, segundo div con preserve-3d y animacion girando sobre eje Y, los dos divs internos dentro del segundo div, tienen translateZ

  • Variables en CSS solo para MOZ

    No-Library (pure JS), HTML, CSS, JavaScript

  • CSS 2D Transforms CON ANTIALIASING!

    Se usa transform: perspective(1px) para los navegadores webkit, moz y default, no para ms u opera que se rompen.

  • Propuesta estilo de path de navegacion.

    No-Library (pure JS), HTML, CSS, JavaScript

  • Ejemplo de calc (Para no usar flex)

    Uso de calc para acomodar elementos pares sin flex.

  • addEventListener - StopPropagation - Bubbling vs Capturing

    Se debe descomentar y comentar el codigo q se quiere probar.

  • Class Namespaces

    No-Library (pure JS), HTML, CSS, JavaScript

  • CSS sprite sheet animation

    No-Library (pure JS), HTML, CSS, JavaScript

  • @media para resposinve design.

    referencia: http://www.w3.org/TR/css3-mediaqueries/ media types --> http://www.w3.org/TR/CSS21/media.html @media: A media query consists of a media type and zero or more expressions that check for the conditions of particular media features. A media query is a logical expression that is either true or false. A media query is true if the media type of the media query matches the media type of the device where the user agent is running (as defined in the "Applies to" line), and all expressions in the media query are true. Several media queries can be combined in a media query list. A comma-separated list of media queries. If one or more of the media queries in the comma-separated list are true, the whole list is true, and otherwise false. In the media queries syntax, the comma expresses a logical OR, while the ‘and’ keyword expresses a logical AND. The media queries syntax can be used with @import and @media rules of CSS.

  • transform - ejemplo complejo

    transform: none|transform-functions|initial|inherit; applies a 2D or 3D transformation to an element. This property allows you to rotate, scale, move, skew, etc., elements.

  • balanceo de texto en columnas

    colum-count: permite indicar en cuantas columnas se dividirá el contenido de un elemento contenedor. colum-fill: how to fill columns, balanced or not. column-gap: nos permitirá definir el espacio en blanco entre columnas. column-rule: servirá para crear un filete o línea divisoria entre las columnas. column-span: how many columns an element should span across.

  • transform

    transform: none|transform-functions|initial|inherit; applies a 2D or 3D transformation to an element. This property allows you to rotate, scale, move, skew, etc., elements.

  • animation por @keyframes (con prefijos moz y ms)

    animation: name duration timing-function delay iteration-count direction fill-mode play-state; animation se descompone en 6 propiedades: animation-name: The animation-name property specifies a name for the @keyframes animation. (Por defecto es none) animation-duration: how many seconds or milliseconds an animation takes to complete one cycle. Esta definido en segundos(s) o milsegundos(ms). animation-timing-function: the speed curve of the animation. Defines the TIME an animation uses to change from one set of CSS styles to another. The speed curve is used to make the changes smoothly. animation-timing-function: linear|ease|ease-in|ease-out|cubic-bezier(n,n,n,n)|initial|inherit; animation-delay: when the animation will start. Esta definido en segundos(s) o milsegundos(ms). animation-iteration-count: defines how many times an animation should be played. nimation-iteration-count: number|infinite|initial|inherit; animation-direction: whether or not the animation should play in reverse on alternate cycles. animation-direction: normal|reverse|alternate|alternate-reverse|initial|inherit; animation-fill-mode: specifies what styles will apply for the element when the animation is not playing. animation-fill-mode: none|forwards|backwards|both|initial|inherit; animation-play-state: specifies whether the animation is running or paused. animation-play-state: paused|running|initial|inherit; -------------------------------------- Descripción de keyframes: With the @keyframes rule, you can create animations. The animation is created by gradually changing from one set of CSS styles to another. During the animation, you can change the set of CSS styles many times. Specify when the change will happen in percent, or the keywords "from" and "to", which is the same as 0% and 100%. 0% is the beginning of the animation, 100% is when the animation is complete. @keyframes 'nombre_fotograma_clave' { puntodelKeyframe { atributos iniciales; } puntodelKeyframe { nuevos atributos; } puntodelKeyframe { últimos atributos; } }

  • box-shadow - variado

    box-shadow: none|h-shadow v-shadow blur spread color |inset|initial|inherit; box-shadow: distanciaX, distanciaY, difuminado, size ,color;

  • border-radius: Ejemplos y aclaraciones.

    border-radius: Permite definir bordes redondeados en las esquinas, especificando las medidas del radio que deben darse a la curva de las esquinas. border-radius: 1-4 length|% / 1-4 length|%|initial|inherit;

  • radial-gradient (degradados-radiales) para fondos.

    background: background: radial-gradient(center, shape size, start-color, ..., last-color); To create a radial gradient you must also define at least two color stops. You can also specify the gradient's center, shape (circle or ellipse) as well as its size. By default, center is center, shape is ellipse, and size is farthest-corner. The shape parameter defines the shape. It can take the value circle or ellipse. repeating-radial-gradient permite repetir el fondo.

  • linear-gradient (degradados-lineal) para fondos.

    background: linear-gradient(direction, color-stop1, color-stop2, ...); Linear Gradients goes down/up/left/right/diagonally El color comienza con la dirección con el primer color y sigue con los siguientes. También se utiliza repeating-linear-gradient para repetir el degradado.

  • Definiendo colores CSS3

    La notación RGBA (rojo, verde y azul) y el cuarto parámetro es el canal Alpha, que no es más que el grado de transparencia u opacidad del color. El canal Alpha es un valor entre cero y uno, siendo 0 totalmente transparente y 1 totalmente opaco. rgba(160, 135, 0, 0.5); rgb(160, 135, 0, 0.5); HSL. Estas siglas provienen del nglés Hue, Saturation, Ligthness o lo que es lo mismo, tono, saturación y brillo. Además, como en el caso del modelo RGB, al HSL se le puede añadir un canal alpha para definir la transparencia del color, formando HSLA. El valor del tono puede tomar valores del 0 al 360, donde: 0, sería el rojo. 120, sería el verde. 240, sería el azul. 360, volvería a ser rojo. hsl(360,100%,20%); hsla(300,130%,65%,10%);

  • manejo de texto en columnas (2do ejemplo)

    colum-count: permite indicar en cuantas columnas se dividirá el contenido de un elemento contenedor. colum-width: servirá para definir la anchura de las distintas columnas a crear. column-gap: nos permitirá definir el espacio en blanco entre columnas. column-rule: servirá para crear un filete o línea divisoria entre las columnas.