Merida Design Blog

Etiqueta:

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.

Materialize: Front-End framework basado en Material Design

Materialize es un framework para el maquetado de aplicaciones web basado en Material Design.

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.

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…

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 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…

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.

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…

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.

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.

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…

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.

Menú Neón con CSS3

El objetivo de este pen es mostrar algunos de los posibles usos de los pseudo elementos de CSS3 para crear atractivos efectos.

Como hacer tus imágenes, videos y mapas responsivos con CSS

Con más de la mitad del tráfico web viniendo de dispositivos móviles, tener un sitio web que se adapte a éstos dispositivos(responsivo) ya no es una opción…

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.

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…

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.

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.

Scroll bar personalizado con CSS

Si alguna vez se te ha ocurrido personalizar el scrollbar del navegador en tu página web y no sabes como, resulta que es muy sencillo lograrlo con CSS, el siguiente snippet es un ejemplo de como realizarlo.

  tope
Derechos Reservados, Merida Design 2018