Facundo's public fiddles
-
manejo de texto en columnas
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.
-
Pure CSS - layout con flex y @media
Para el contenedor: display: flex; flex-flow: row wrap; Para los items: flex: 1 100%; Para que cada item ocupe una fila. Para todos los dipositivos, cuando la pantalla es mayor a 600px de ancho: @media all and (min-width: 600px) Se aplica a dos items, flex: 1 auto; para que compartan una fila. Para todos los dipositivos, cuando la pantalla es mayor a 800px de ancho: @media all and (min-width: 800px) Se aplica flex: 2 0px; al panel principal y se ordenan las componentes restantes para que cada una tome el orden deseado con la propiedad "order".
-
Pure CSS - justify-content y align-content
Contenedor con display:flex. y justify-content: space-between y align-content: space-between;
-
Pure CSS - align-items y align-self
Contenedor con display:flex. y justify-content: space-between y align-items: flex-end; El 2do item con align-self: center;
-
Pure CSS - justify-content y align-self
Contenedor con display:flex. y justify-content: space-between; El 2do item con align-self: center;
-
Pure CSS - flex-flow y flex como propiedades abarcativas.
Contenedor con flex-flow: row Items con flex-grow: 1; flex-shrink: 1; flex-basis: 100px; El 2do item con flex-shrink:2; achica la relacion en que crece.
-
Pure CSS - flex-shrink
Contenedor con display:flex. Items con flex-grow: 1; flex-shrink: 1; flex-basis: 100px; El 2do item con flex-shrink:2; achica la relacion en que crece.
-
Pure CSS - flex-wrap - flex-basis
Contenedor con display:flex y flex-wrap: wrap. (default es nowrap) Los items tienen configurado flex-basis para definir el minimo ancho cuando no se ocupa espacio disponible.
-
Pure CSS - flex-direction: column y flex-grow
items con flex-grow:<integer> para ocupar mas espacio q los otros items. El ejemplo es en base a: Contenedor con display:flex y flex-direction: column. Items con order:<integer>.
-
Pure CSS - FLEX - orden en items
Contenedor con display:flex. Items con order:<integer>.
-
Scrolleable panel
Div scrolleable mediante botones y arrastrando barra casera. Oculta la barra de scroll original mediante padding-right. Los eventos de scroll actualizan la barra casera y soporta resize.
-
backface-visibility animation
Animación que ejemplifica el uso de la propiedad backface-visibility y en un segundo ejemplo muestra cuando no aplica.
-
transform rotate, perspective
Ejemplo de panel rotado y con perspectiva 3D asentuada en base a un origen específico.
-
Lista scrolleable - con animacion.
Div scrolleable mediante botones. Oculta la barra de scroll.
-
Lista scrolleable
Div scrolleable mediante botones. Oculta la barra de scroll.
-
Efectos de imagenes con CSS
Por el momento está verde la propiedad y funcion bien sin problemas con Chrome.
-
Efecto de revelado de pantalla.
Se muestra con animation la pantalla cuadradito a cuadradito.
-
RGBA para opacidad sobre fondos.
Se utiliza RGBA para opacidad sobre fondos o colores sin afectar a componentes contenidos.
-
user-select
Propiedad que explica como funciona el bloqueo de selección por CSS.
-
CSS text overflow Ellipsis
Ejemplo de texto truncado con puntos suspensivos.