Frogx Three

css3

css3

Animator, aplicación para crear animaciones HTML5

animator

Animator es la aplicación perfecta para diseñadores que no saben programar y desean crear animaciones web con HTML5 sin necesidad saber programar, la aplicación es gratuito para crear tus primeros 20 proyectos de forma publica, existen otros dos paquetes con costo que permiten crear proyectos de animaciones web privados. La interface de la aplicación es bastante sencilla e intuitiva, especialmente si llegaste a utilizar Adobe Flash o algún editor de video, la aplicación se basa en los principios básicos de la animación, en cuanto a uso de frames, velocidad y posición dentro del area de trabajo, el servicio te permite descargar el código HTML5 de tu animación o también exportar tu animación en formato GIF.   Enlace hacia la pagina oficial de Animator...

Seguir leyendo 28

SpinKit, serie de indicadores animados con CSS

spinkit

En el 2000 se empezó a hacer muy popular entre los diseñadores web el uso de acciones AJAX que permitían ejecutar acciones sin tener que recargar la pagina, esto trajo nuevas necesidades en cuanto a diseño web y diseño de interfaces, una de ellas fue la necesidad de mostrar indicadores de carga animados que indiquen que una acción se esta realizando y que hay que esperar, la primera opción fue utilizar imágenes GIF animadas pero ahora con la introducción de las transiciones que permiten crear animaciones sencillas con CSS, estos indicadores se pueden realizar de forma más sencilla utilizando puro código CSS. SpinKit es un sitio el cual nos proporciona una serie de atractivos indicadores de carga animados con CSS de forma gratuita los cuales podemos descargar copiando el código para incluir en nuestros diseños de paginas web. Enlace hacia la pagina oficial de SpinKit...

Seguir leyendo 25

Tutorial para crear notificaciones animadas con CSS3

notificaciones css

Fantástico tutorial y códigos CSS3 para crear increíbles diseños de notificaciones con animación para tus diseños de paginas web, en el ejemplo que enlazamos al final verán 12 ejemplos de notificaciones web animadas con muy buen diseño y fáciles de aplicar en tu pagina, algunas utilizan librerías JavaScript para las animaciones y las acciones pero en general se trata de código CSS para generar las animaciones utilizando transiciones y los keyframes, características incluidas en CSS3 y que ya son soportadas por la gran mayoría de los navegadores web modernos. En el segundo enlace encontrarán el enlace para descargar la guiá de instalación y un paquete con los códigos CSS3 y scripts JavaScript para utilizar todos estos diseños de notificaciones animadas para mejorar el diseño de interface de tus paginas web. Enlaces: Demo | Descargar códigos y tutorial...

Seguir leyendo 37

Modifica el diseño de los Selects usando CSS

selects personalizados

Los diseños de paginas web cada vez son mas personalizados, el uso de imágenes de gran tamaño, efectos visuales y de animación que ahora permite CSS3 sin necesidad de scripts extras, el uso de funciones asincronicas, ajax, canvas, webfonts, en fin una gran cantidad de cosas que hace 5 años nadie utilizaba y ahora son algo muy común en los diseños web. Pero uno de los diseños que ha tardado mas en cambiar es el diseño de los elementos del formulario, son muy pocos los diseñadores web que se atreven a utilizar diseños personalizados para los Selects, Checkbox y Radio Buttons en particular pues los navegadores no ofrecen opciones de personalización en su soporte, sin embargo con el uso de CSS y JavaScript todo es posible. El siguiente enlace incluye un breve manual y un paquete con scripts CSS y JavaScript que te permitirán personalizar los elementos Selects de tu......

Seguir leyendo 35

Galería con nuevo diseños web para inspirarse

diseños web inspiracion junio 4

Les comparto una galería con un total de 15 nuevos diseños web para inspirarse, creados por diversos diseñadores, algunos de estos diseños son proyectos ya terminados otros se han quedado en propuestas y algunos otros son simples conceptos de diseño web que los diseñadores han creado con el fin de demostrar sus habilidades y creatividad esperando ser vistos por las grandes marcas y agencias, de esta galería debemos destacar el estilo de cada uno de los diseños y también la variedad de estructuras de contenido que se plantean pero sin olvidar el factor de uso humano, algo muy importante que todos los diseñadores web siempre deberían considerar, espero que esta galería les sea de utilidad para ganar un poco de inspiración en diseño web. Diseños web para inspirarse...

Seguir leyendo 14

Bounce JS, generador de animaciones CSS3 en linea

bouncejs

Bounce Js es un generador de animaciones CSS3 el cual te permite configurar animaciones en la misma pagina para después generar el código CSS que realiza la animación y así incluirlo en tu pagina web, funciona como un editor de animaciones o sketches de animaciones, una herramienta que puede ser perfecta para diseñadores web que deseen crear animaciones web no secuenciales para elementos web sin depender de JavaScript o incluir más librerías a tu pagina web. Enlace hacia Bounce JS...

Seguir leyendo 32

12 Diseños de paginas web usando HTML5 fantásticos

pagina web tacospillet

Miren esta galería de diseños de paginas web hechos con mucha creatividad utilizando HTML5 y CSS3, todos los sitios mencionados en esta galería están actualmente activos con estos excelentes diseños web en el que combinan las herramientas mencionadas con algunas librerías JavaScript para dotar de interacción y animación los diseños sin tener que recurrir al obsoleto Flash. Diseños de paginas web usando HTML5...

Seguir leyendo 18

Editor CSS3 con interface gráfica para diseñadores, sin programación

css3 code generator

EnjoyCSS es un excelente editor CSS3 con interface gráfica para diseñadores que no sepan sobre programación, la aplicación es completamente online y gratuita, te permite modificar todos los valores CSS3 para crear tus elementos gráfico y al final exportar las imágenes utilizadas y el código CSS3 listo para incluir en tu pagina web, como dije un recurso para diseñadores web que no se especialicen en programación o simplemente no tengan muchos conocimientos sobre CSS. Enlace a EnjoyCSS...

Seguir leyendo 27

Tutorial y código para crear un grid estilo Google

google grid

Les comparto un recurso para diseño web que incluye tutorial y código para diseñar paginas web utilizando un grid estilo Google con bloques flotantes, este estilo de diseño se puso de moda desde el lanzamiento de Pinterest y ha sido recreado por otras redes sociales con algunas modificaciones, este tipo de grids es perfecto para sitios que generan muchos contenido combinado entre imágenes y texto, de hecho en este blog hicimos algo “similar” pero preferimos mantener el orden de nuestros bloques, en el siguiente enlace encontrarán el código para crear un grid como el de Google+ y también un tutorial que describe como aplicarlo. Enlace: Codrops...

Seguir leyendo 23

UIKit un interesante Framework para diseñar paginas web

UIKIT

UIKit es una excelente framework para diseñar paginas web, es un alternativa mas que recomendable al famoso Bootstrap, UIKit es un framwork OpenSource que incluye una gran cantidad de componentes para personalizar y armar de una forma rápida nuestra pagina web, incluye archivos CSS base para normalizar el estilo de los elementos, CSS para impresión, plantilla grid basada en el estándar 960 que nos ayudara a crear paginas web responsivas. Es muy fácil de integrar, básicamente tienen que insertar los archivos CSS y según los componentes o addons que deseen agregar algunos archivos JavaScript, les dejo el enlace a la pagina oficial del proyecto donde podrán descargar UIKit gratis y leer toda su documentación. Enlace para descargar UIKit Framework...

Seguir leyendo 41

5 UI Kits CSS para modificar la apariencia de formularios web

tres

Les comparto una serie de UI Kits CSS que incluyen diseño y el código CSS y HTML para modificar la apariencia de los formularios web, estos UI Kits CSS3 permiten modificar los componentes de entrada de texto, selectores, checkbox, botones radio y botones de acción en general con el fin de otorgar de un diseño diferente y único los diseños de interfaces web para nuestras aplicaciones o paginas, todos son gratuitos y para aplicarlos se necesita de conocimientos básicos de HTML y CSS. UI Kits CSS para modificar formularios...

Seguir leyendo 75

Efectos para enlaces con CSS3, Formas y SVG

css3 hover effect 3

Muy buen tutorial para crear efectos para enlaces con CSS3 utilizando formas y SVG (Canvas), la combinación de estos 3 elementos del diseño web se esta convirtiendo en una tendencia la cual se esta regando como pólvora a pesar que Canvas y CSS3 no son soportados al menos con todas sus funciones por todos los navegadores web, pero existen frameworks como Modernizer que permite incluir un soporte no nativo en navegadores como Internet Explorer. En fin volviendo al tema este tutorial les comparte el código y una explicación de como utilizar estos efectos bastante atractivos, y perfectos para galerías de imágenes, espero sea de utilidad, les dejo 3 imágenes que ilustran los diferentes efectos hover para diseños web que se pueden lograr. Imágenes: Efectos para enlaces con CSS3 Shape Hover Effects with SVG: Demo | Tutorial...

Seguir leyendo 31

11 Plugins JS para hacer diseños web responsivos

diseños web responsivos

Les compartimos una serie de excelentes plugins javascript perfectos para hacer diseños web responsivos, esto será de gran utilidad para seguir una de las tendencias de diseño web en 2014 que se trata de crear diseños web adaptables a cualquier plataforma sin importar navegador y mostrando contenido de calidad aprovechando las posibilidades que los diferentes dispositivos ofrecen tanto en imágenes de alta resolución como en interactividad. Plugins JS para hacer diseños web responsivos Adapt.Js Es un alternativa al uso y dependencia de los Media Queries con CSS, que si bien cierto son excelentes aun no son reconocidos por todos los navegadores, lo cual puede causarnos algunos problemas, con Adapt.js eliminamos esa dependencia, también ofrece soporte para la mayoría de los navegadores incluso Internet Explorer, con este plugin podremos identificar el tamaño de la venta o resolución de pantalla de la persona que accede a nuestro sitio de tal modo que sirvamos......

Seguir leyendo 62

jQuery Selectric: script para cambiar diseño de selects en formularios

jQuery Selectric

jQuery Selectric es un excelente script jQuery que permite cambiar diseño de selects o listas de tus formularios HMTL con la combinación de CSS3 y JavaScript, el script es muy fácil de implementar y también de personalizar con hojas de estilo, este script ofrece soporte para diferentes navegadores entre ellos: Firefox Chrome Safari Internet Explorer 7+ Opera En la pagina de demostración de este script podemos ver algunas opciones que nos ofrece jQuery Selectric, como agregar opciones a la lista de forma dinámica, permite ejecutar Callbacks dependiendo del valor de la opción seleccionada, y también ejecutar acciones Ajax para comunicarnos con el servidor y manejar respuestas de forma dinámica, todo esto gracias a jQuery. Enlace para descargar: jQuery Selectric...

Seguir leyendo 18

Crear botones animados para indicar porcentaje de carga

botones

Les comparto un excelente recurso para diseñadores web, se trata de un paquete que les permitirá crear botones animados utilizando CSS3 para indicar el porcentaje de carga de algunas acciones, como puede ser por ejemplo subir un archivo o realizar una acción que requiera algunos segundos para ser procesada y recibir respuesta del servidor. En la pagina demo podrán ver todos los diseños posibles para estos botones animados, los cuales utilizan botones con perspectiva y también efectos en 3D, estos botones utilizan algunas propiedades de CSS3 que aun no son soportadas por todos los navegadores por lo mismo les recomiendo leer el manual de uso el cual les menciona posibles alternativas para utilizar cualquiera de estos botones con animaciones CSS. Descargar script y tutorial de uso en: Tympanus| Demo...

Seguir leyendo 17

Efectos animados para botones con CSS3

efectos especiales hover

Les dejamos unos magnificos snippets CSS3 para agregar Efectos animados para botones utilizando CSS3, estos recursos fueron creados por el diseñador web Botelho de Codrops, ya en ocasiones anteriores hemos compartido muchos recursos relacionados con HTML5 y CSS3, también hemos comentado un poco sobre las mejoras y mayores posibilidades que ofrece este par de nuevas versiones de HTML y CSS. Hablando de CSS3 una de las mejoras que trajo este lenguaje para programar hojas de estilo es el uso transiciones y keyframes, este par de características están siendo explotadas por los diseñadores web ya que permite crear diseños web más dinámicos y enriquecidos visualmente, y esto es justamente lo que estos snippets para crear efectos animados en botones con CSS3 nos permite. Les dejamos el enlace al tutorial donde nos muestran como utilizarlos y también a una pagina demo donde podrán ver las opciones de efectos animados CSS3 que podemos......

Seguir leyendo 33

Scout: Aplicación gratuita para compilar Sass y Compass [Win & Mac]

scout sass

Scout es una excelente aplicación gratuita para compilar Sass y Compass que todo diseñador web debería considerar tener entre sus herramientas de trabajo, Scout esta disponible para Windows y Mac completamente gratis, está aplicación se encarga de compilar los archivos SCSS para transformarlos en archivos CSS legibles por los navegadores, para quienes no sepan SASS y Compass realmente son formas de programación para agregarle vitaminas, proteinas y muchas cosas más a la creación de hojas de estilo. De tal forma que podamos crear hojas de estilo,utilizando variables e incluso funciones llamadas Mixins para crear de una forma mas sencilla y limpia nuestras hojas de estilo, esto obviamente no es legible por el navegador es por ello que es necesario utilizar aplicaciones como Scout que nos ayudan a librar un pequeño paso después de ahorrarnos algunas horas y muchas lineas de programación. Video: Aplicación gratuita para compilar Sass y Compass Enlace:......

Seguir leyendo 26

Layers CSS: Framework CSS básico para diseños web responsivos

layers css

Layers CSS es un simple Framework CSS básico para diseños web responsivos, fue desarrollado por Jerry Jäppinen, quien cansado de los numerosos frameworks CSS que incluyen un sin numero de clases y características con estilos preestablecidos ha creado Layers CSS un framework que incluye únicamente lo básico, no modifica formas, no modifica colores, simplemente hace más fácil el diseño web, entre las principales características de Layers CSS están: Normalización de valores por defaults (el clásico Reset CSS) Grids fluidos y herramientas para layouts Conserva los valores nativos (Ej. los colores de los enlaces y formas de los botones) No utiliza valores por pixeles (px) Sin colores, sin bordes y esquinas redondeadas predefinidas Sin dependencias En fin un framework CSS que hace todo más fácil sin intentar diseñar pro nosotros, se los recomiendo mucho, visiten la pagina de Layers CSS para descargarlo y ver algunos ejemplos y formas en que se puede......

Seguir leyendo 38

RevealJS: Crear presentaciones HTML5 con efectos 3D

reveals

RevealJS es una librería JavaScript que te permite crear presentaciones HTML5 con efectos 3D de una manera sencilla y elegante, RevealJS aprovecha las bondades que la combinación entre JavaScript y CSS3 pueden ofrecer para crear estos efectos, para quienes no tengan las habilidades de programación también pueden utilizar Slid.es una aplicación web que utiliza RevealJS la cual ofrece un editor visual para crear presentaciones con efectos utilizando HTML5 y CSS3, la aplicación ofrece un paquete gratuito y un paquete de $7 dólares mensuales. Independientemente de eso creanme que implementar RevealJS para crear tus presentaciones con HTML5 no es muy complicado. Enlace: RevealJS | Slid.es...

Seguir leyendo 39

TogetherJS para convertir pagina en área de trabajo colaborativa

togheterjs

La fundación Mozilla ha lanzado TogetherJS una librería capaz de convertir pagina en área de trabajo colaborativa de manera muy sencilla, simplemente tenemos que incluir la librería JavaScript en la pagina, ejecutar el script en el código HTML y esto automáticamente detectara a los usuarios en linea para crear multiples sesiones de tal modo que podrás ver el movimiento del cursor y acciones que realice el otro usuario conectado a la pagina y el podrán ver los tuyos, convirtiendo la pagina o aplicación web en un área de trabajo colaborativa. TogetherJS es una aplicación OpenSource es decir que es completamente gratuita, es perfecta para el testing de paginas e incluso puede utilizarse como un alternativa al eye tracking para conocer la actividad de usuarios y como utilizan una pagina web y si la usabilidad del sitio es adecuada. Video TogetherJS: Convertir pagina en área de trabajo colaborativa Enlace: TogetherJS...

Seguir leyendo 23

Pagina 1 de 3123