Merida Design Blog

Etiqueta:

CSS

Office UI Fabric: Crea aplicaciones web con el estilo de Microsoft Office 365

Office UI Fabric es un kit de componentes y estilos para crear tus propias aplicaciones web con el estilo oficial de Office.

Grd: Sistema de rejilla con flexbox de CSS

Grd es un framework para crear rejillas basado en las propiedades flexbox y la función calc() de CSS que te permite crear layouts mas complejos, que son difíciles de lograr con los sistema de rejillas normales, como el tan problemático centrado vertical.

Reloj análogo estilo neon con javascript

El objetivo de este pen, es mostrar como con unas pocas lineas de código es posible crear un estilizado reloj análogo que te puede servir para colocar en cualquier tipo de aplicación, ya sea como un widget en un panel de administración o quizá como parte de una aplicación móvil.

Como crear tablas responsivas con CSS

En este tutorial, te explicaré una forma de crear tablas responsivas, pasando de una tabla en pantallas grandes (escritorio) a elementos estilo tarjeta en pantallas pequeñas (móviles) cambiando solamente los estilos CSS.

Galería estilo Pinterest con CSS

Desde su aparición, la interfaz de Pinterest ha sido inspiración para muchos sitios y aplicaciones, y es que la distribución verticalmente asimétrica de los elementos de su galería, le dieron una imagen fresca y divertida, saliéndose del esquema cuadrado de las galerías normales.

Como crear un input file personalizado, con vista previa y drag & drop

En este tutorial te explico como crear un control personalizado con CSS para seleccionar imágenes con vista previa y soporte para arrastrar y soltar.

Philter: asigna filtros de CSS directamente con atributos HTML

Philter es un plugin de javascript que te permite controlar los filtros de CSS diréctamente con atributos HTML, así como un efecto de transición con el hover definiendo la duración de la animación.

CSSGram: Filtros como los de Intragram con CSS

CSSGram es una pequeña librería que nos ayuda a recrear los efectos de Instagram usando solamente CSS con filters effects y blend modes.

Como crear tooltips con CSS

Es común emplear tooltips o textos de ayuda, que solo aparecen cuando el usuario pasa encima el puntero o presiona el elemento (móviles), especialmente útil en formularios en donde la etiqueta no describe por completo el tipo de valor que se espera.

Spinner de cargando animado con CSS3

En este pen se puede ver como a través del uso de los pseudo-elementos y las animaciones de CSS se puede crear un spinner animado usando únicamente un elemento html que puede fácilmente ser colocado en cualquier parte la interfaz de tu aplicación o página web.

Popmotion: Crea atractivas interfaces con este motor de animaciones de Javascript

Popmotion es una librería para crear animaciones con javascript usada para controlar las animaciones de la interfáz de usuario. Tiene soporte nativo para CSS, DOM, SVG y trayectorias SVG.

Como crear un efecto de transición entre listado y perfil estilo Material Design con AngularJS

Una de las especificaciones de Material Design de Google respecto a las animaciones, es que éstas deben tener un significado, es decir, deben informar al usuario de lo que está sucediendo y cual será el resultado de la acción realizada, así como el orden y la jerarquía de los elementos.

Como crear un botón con ondas estilo Material Design

Google hace énfasis en la retroalimentación visual a través de animaciones, y una de esas animaciones es el efecto de onda que podemos ver en sus botones…

Material Design Lite: Framework oficial de Google para Diseño Web

Google ha publicado Material Design Lite, su propia librería oficial la cual está hecha con HTML, CSS y Javacript puro…

Toolkit: Componentes HTML5, JS y CSS para sitios responsivos y móviles

Toolkit es una librería con una gran collección de componentes de interfáz de usuario ideales para sitios móviles y responsivos.

Flickity: Crea sliders y galerías que se sienten como nativas

Flickity es un plugin para crear sliders, galerías y carruseles con reconocimiento de gestos touch, especialmente diseñado para móviles.

Font Awesome: Incluye iconos a tu web y personalízalos fácilmente mediante CSS

Con Font Awesome obtienes un amplio catálogo de íconos en vectores escalables que puedes personalizar fácilmente…

Icono de menú con CSS3

El snippet que te comparto a continuación es para crear el ícono usado como representación del menú, también conocido como menú hamburguesa…

Crear miniaturas responsivas con CSS

Lo ideal es que esas miniaturas fueran creadas de manera independiente, ya sea en un editor como Photoshop o a través de un CMS como wordpress…

Como hacer menús responsivos con CSS

Existen muchas formas de hacer un menú responsivo, sin embargo, hay ciertos patrones de diseño que son más comunes y se emplean para determinadas circunstancias, en éste tutorial te mostraré los 3…

  tope
Derechos Reservados, Merida Design 2017