Merida Design Blog

Como crear plugin de jQuery para input file personalizado con vista previa y drag & drop

En el primer articulo, vimos como crear un input personalizado que muestre una vista previa de la imagen y tenga soporte para drag & drop, en esta ocasión, veremos como convertir ese código a un plugin de jQuery.

Pressure.js: Trabaja con el Force y 3D Touch de Apple de manera sencilla

Pressure.js es una librería de javascript que te permite trabajar de manera sencilla con el Force y 3D Touch en dispositivos de Apple que cuentan con soporte, y así añadir funcionalidad a tu aplicación o página web y mejorar la experiencia de uso en éstos dispositivos.

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.

TinyPNG: Comprime tus archivos PNG sin perder calidad

TinyPNG comprime los archivos con formato png sin perder prácticamente nada de calidad y el procentaje de compresión, aunque depende de la imagen, ronda en el 70%.

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.

CodePush: Actualiza tu aplicación móvil al instante (sin revisión de itunes); compatible con Cordova y ReactNative

CodePush es un servicio en la nube creado por Microsoft que permite realizar actualizaciones directamente a los dispositivos para aplicaciones realizadas con Cordova o React Native.

is.js: realiza fácilmente todo tipo de validaciones; expresiones regulares, fechas y mucho mas

is.js es una librería que facilita mucho hacer una gran cantidad de validaciones, desde las validaciones simples de tipos de valor y expresiones regulares, hasta validación de entornos de ejecución (si es chrome, safari, iphone, etc.).

React Native: Crea aplicaciones nativas para iOS y Android con Javascript

React Native es un framework creado por Facebook que te permite crear aplicaciones completamente nativas usando javascript y ReactJS.

Undercores: genera el esqueleto completo para tus temas de WordPress

Undercores es una aplicación web que genera un tema con todos los archivos necesarios para crear un tema personalizado completo, desde el index.php hasta páginas de error 404. Los estilos css que genera son básicos y minimalistas, ideal para personalizar el tema según tus necesidades.

DateDropper: Sencillos y atractivos selectores de fechas para tu aplicación

DateDropper es un plugin de jQuery que te permite agregar atractivos selectores de fecha en los campos de texto configurando el formato e idioma en el que muestra la fecha seleccionada dentro del campo.

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.

Material Palette: Crea el esquema completo de colores para tu proyecto con Material Design

Material Palette es una aplicación web que te permite seleccionar el par de colores que serán la base para la creación de una paleta con todos los colores necesarios para los diferentes componentes de una aplicación con Material Design.

Sharer.js: Crea tus propios botones para compartir con elementos del DOM

Sharer.js es una librería pequeña pero bastante útil, con esta librería puedes crear tus propios botones para compartir en varias plataformas sin necesidad de cargar pesadas librerías o sdk’s para cada opción, basta con asignar algunos atributos a un elemento HTML y listo, tu defines los estilos según las necesidades de tu sitio.

Hammer.js: agrega soporte para gestos a tu página o aplicación web

Hammer.js es una librería de código abierto que te permite reconocer gestos touch, de ratón y eventos de puntero. Elimina también los 300ms de retraso de los clicks haciendo que la respuesta sea inmediata brindando una experiencia más nativa en dispositivos móviles.

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.

Kirki: Crea controles avanzados usando el personalizador de WordPress

Kirki es un conjunto de herramientas que te permite hacer uso del personalizador (Customizer) de WordPress y sacar provecho de su flexibilidad y características avanzadas para crear tus propios controles.

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.

Image Blur Plugin: Efecto blur para imágenes, compatible con todos los navegadores

Plugin de jQuery que te permite aplicar efecto blur a las imágenes dinámicamente a través de filtros de SVG, con este plugin no tendrás que preocuparte por la compatibilidad con los navegadores ya que soporta incluso ie6 (R.I.P.) a diferencia de los filtros de CSS que no es soportado por ninguna versión de internet explorer, solamente Edge (verifícalo aquí).

  tope
Derechos Reservados, Merida Design 2017