Facundo's public fiddles
-
Ejemplo de contadores
/*Inicia los 2 contadores*/ body { counter-reset: total items; } /*Incremeta los dos contadores*/ #pic-1:checked {counter-increment: total 15 items 1;} #pic-2:checked {counter-increment: total 22 items 1;} #pic-3:checked {counter-increment: total 33 items 1;} #pic-4:checked {counter-increment: total 25 items 1;} /*Muestra la suma de los precios*/ section:after { content: 'Total= ' counter(total)'.00€'; } /*Muestra el nº de artículos seleccionados*/ .items:after { content: counter(items); }
-
Menú deslizante letra a letra y opción tras opción
Todo se basa en una técnica de uso de la pseudoclase :checked aplicada a inputs junto al combinador de hermano ( ~ ). referencia: http://ksesocss.blogspot.com/2014/11/menu-letras-deslizantes-por-opcion.html?utm_source=feedburner&utm_medium=email&utm_campaign=Feed%3A+Ksesocss+%28KsesoCSS%29
-
letter-spacing con "animation" Css
letter-spacing y text-indent con "animation", da una idea de efectos sobre textos.
-
Curvas logradas con border en divs.
jQuery 1.4.4, HTML, CSS, JavaScript
-
Tabla Responsive con body scrollabel
Tabla responsive: Con @media, las celdas en display: block con width y min-width al 100%. Luego son estilos por fila para diferenciar las filas. Cuerpo scrolleable: El tbody y los tr con display:block; permiten que el ancho de las filas se estiren al 100%; El tbody limitado en la altura mediante calc y overflow-y en scroll. Los titulos responsivos: Si bien el thead se oculta con display:none, se ven titulos, estos son realizados con el selector :before sobre la celda y su contenido mediante content: attr(data-campo) para acceder al atributo del tag html de la celda desde css!!
-
IndexedDB - pureJS API
Incluye ejemplo de insercion y listado.
-
WebStorage uso y comparacion de localStorage y sessionStorage.
* localStore: The localStorage object stores the data with no expiration date. The data will not be deleted when the browser is closed, and will be available the next day, week, or year.*/ /* sessionStorage: mantienen los datos disponibles durante un período específico de tiempo, pero mientras las Cookies de sesión usan el navegador como referencia, sessionStorage usa solo una simple ventana o pestaña. Esto significa que las Cookies creadas para una sesión estarán disponibles mientras el navegador continúe abierto, mientras que los datos creados con sessionStorage estarán solo disponibles mientras la ventana que los creó no es cerrada. */ // Tanto localStore como sessionStore se ofrecen las mismas funciones.
-
API Geolocalizacion - Ejemplo Google Maps
Existen plugins (polyfill) que implementan estas funciones de HTML5 en navegadores antiguos. Para este caso, se puede utilizar el polyfill Geo Location Shim https://github.com/aFarkas/webshim/blob/master/src/shims/geolocation.js
-
API Geolocalizacion - Pure JS
No-Library (pure JS), HTML, CSS, JavaScript
-
JS - input formato HH:MM
No-Library (pure JS), HTML, CSS, JavaScript
-
Animation JS - requestAnimationFrame (En vez de setInterval)
jQuery 1.7.1, HTML, CSS, JavaScript
-
header fijo sobre scroll (CSS PURO).
No-Library (pure JS), HTML, CSS, JavaScript
-
Canvas: Transformaciones. Guardando y restaurando el estado.
No-Library (pure JS), HTML, CSS, JavaScript
-
Canvas: Sombras.
No-Library (pure JS), HTML, CSS, JavaScript
-
Canvas: cerrando una figura, closePath, fill y clip.
No-Library (pure JS), HTML, CSS, JavaScript
-
Canvas: Trazado de curva bezier cuadratica y cubica.
No-Library (pure JS), HTML, CSS, JavaScript
-
Canvas: Trazado de lineas, rectangulos, curvas y circulos.
No-Library (pure JS), HTML, CSS, JavaScript
-
Canvas: Rectangulos y colores
No-Library (pure JS), HTML, CSS, JavaScript
-
Cubo plano con transform-style: flat (valor default)
primer div con perspectiva. y con transform-style: flat; para mantener el plano. 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.
-
Cubo girando sobre 3 ejes 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.