Entradas de categoría: css

Anchor Positioning y animation-timeline

Como posicionar elementos anclados a puntos de referencia que están en sitios diferentes del DOM

Mejorar accesibilidad web usando unidades CSS apropiadas

Permitir que el usuario de la web puede reescalar el tamaño de la tipografía sin afectar al resto de elementos usando unidades CSS apropiadas

Cursor Blend Mode

Animación de cursor en evento mousemove aplicando blend-mode a imágenes y elementos html

Storybook con componente web nativo

Añadir Componentes Web nativo a framework storybook para creación de stories útil para testing, pruebas de diseño

Scroll timeline linked animations

Ejemplos de uso de nueva media de CSS @scroll-timeline para aplicar animaciones CSS en función del Scroll de la página

Componente Web con Partículas en lienzo Canvas

Uso del contexto 2d de Canvas para crear animación de partículas dentro de un WebComponent con atributos editables desde HTML

Placeholder con selector :empty

Uso del pseudo selector CSS :empty para etiquetas sin contenido

Tab Web component con Slots

Crear un Componente Web para sistemas de Tabs con algunas propiedades customizables

Webcomponent para tooltip notification

Crear un Webcomponent para mostrar notificaciones personalizadas por atributos

Custom select nativo experimental

Animación de variables CSS

Aplicar transición para el cambio de valores de variables CSS mediante el registro de @property aplicado a la propiedad clip-path

Clip-path banner con dat.GUI para debug

Mosaico de imágenes realizada con display grid y clip-path y dat.GUI para poder hacer debug entre diferentes valores CSS

Prefers Reduced Motion para mejorar accesibilidad web

Mejorar la accesibilidad para personas que necesiten o quieran visitar nuestra web con animaciones desactivadas media Prefers Reduced Motion

Nested CSS @container

Ejemplo visual de comportamiento de posibilidad de definir CSS @container dentro de otras

Transición de imágenes modificando atributos filter

Transición entre imágenes modificando atributos CSS filter y animación de clip-path

Customización de inputs checkbox y radio

Customización de elementos de formulario tipo checkbox y radio con elementos SVG y animación con stroke-dasharray y stroke-dashoffset

Mejora responsive mediante función clamp() de CSS

Mejora de la experencia de usuario mediante el uso de la función clamp() de CSS para unidades, estableciando valores mínimos, máximos y deseados

CSS Houdini - paintWorklet para animacion de cursor estilo pulse

Animación de Cursor estilo Pulse usando CSS Houdini paintWorklet

Animación de Landing con CSS keyframes

Animación de Landing con CSS keyframes y controlada la aparicicón con javascript mediante la API Intersection Observer

Animación de Slideshows de productos mediante transición con WebGL

Animación dentro de modal de Slideshows de productos mediante transición con WebGL con librería curtainsjs y encolando algunas transiciones mediante await de Promesas

Animación de Slides con SVG y Css con display GRID

Animación de con Imágenes en formato SVG y maquetación de cada Slides con display Grid dentro de la misma cuadrícula. Cambio de Slide visible con Api Javascript IntersectionObserver

Comparación de imágenes con clip-path y javascript

Superposición de imágenes una sobre otra en la que en función de la posición del cursor será mostrada diferentes porciones de las imágenes

Landing usando Display Grid y Position Sticky

Landing ficticia tipo Single Page usando Display grid para contenedores y posicionamiento Sticky

Animación de clip-path con Intersection Observer

Animación de la propiedad CSS clip-path al hacer scroll usando la API de JavaScript Intersection Observer y cambio de color de body obteniendo el color principal de cada imagen

Animación de Landing con Intersection Observer

Animación con CSS aplicando la API de JavaScript Intersection Observer para iniciar la animación cuando el elemento a Animar entra dentro del Viewport

Slides usando Blend Mode y DocumentFragment

Animación de Slides con transición entre imágenes y propiedad Blend Mode de CSS para manipular la apariencia de las imágenes

Banner con animaciones SVG

Banner construido con SVG. Animaciones de Máscara para textos, circles, cursor

Superposción de imágenes para comparar con Javascript

Maquetación de componente que permite comparar dos imágenes mediante superposición de una segunda imágen encima de la anterior

Modal con imagen destacada animada al abrir el modal

Animación de modal al levantar el modal, moviendo de posición inicial hasta posición final en modal

AngularJS Wordpress Theme

Construcción de Theme Wordpress con AngularJS 1, usando plugins de Wordpress Wp Rest Api para generar JSON de las entradas y Advanced Custom Fields (ACF) para añadir nuevos campos

Badges con SASS y SVG

Mixing Sass para crear Badges que puedan ser modificados y adaptados mediante parámetros

Demo AngularJS shop – 03 Aplicando estilos

Primera parte de aplicación Angular 1 para construir listado de productos. Aplicando estilos css

Demo AngularJS shop - 02 Configurando menú principal

Primera parte de aplicación Angular 1 para construir listado de productos. Configuración de menú principal

Demo AngularJS shop - 01 Generando proyecto con Yeoman

Primera parte de aplicación Angular 1 para construir listado de productos. Generando proyecto con Yeoman

Maquetación página con Haml y Sass

Maquetación Html usando Haml y Sass como preprocesadores que minimizan tiempos

Formulario web centrado

Formulario html centrado en la página

Animación con css3 - Avión en movimiento

Efecto de movimiento con CSS para generar animación usando "transform translate"

Menú apple con css

Recreación usando Html y Css del menú usado por Apple

Bonito menú horizontal con Css3

Menú horizontal centrado con css3 y animación en hover

Animaciones CSS3 - transform: translate (x, y) VS left(x) top(y)

Animación css3 usando transform translate y comparado a posicionamiento con left y top