Hay 6 articulo(s) nuevo(s) en portada, haz click aquí para leer.

Frogx Three

CSS

Recursos HTML5/CSS3 para crear efectos hover elegantes y fuera de lo común

html5 css3 efectos hover img 1

Quiero compartir con ustedes una recopilación de recursos HTML5/CSS3 perfecta para diseñadores web que estén cansados de usar los efectos básicos que ofrecen los navegadores con el fin de ofrecer a sus clientes y los visitantes de las paginas que realicen una experiencia diferente y atractiva al navegar en una pagina, se trata de una recopilación de recursos y tutoriales para crear efectos Hover elegantes y totalmente fuera de lo común aprovechando todas las ventajas que ofrece el trabajar con HTML5, por supuesto con CSS3 y algo de JavaScript. Todos los recursos y tutoriales de esta recopilación son gratuitos, y en todos los enlaces encontraran ejemplos de los efectos Hover, tutoriales e indicaciones de uso y el código fuente de estos ejemplos para que puedas practicar con ellos aplicandolos bajo el entorno y diseño en el que estés realizando, los enlaces a cada uno de estos recursos estás aplicados en las......

Seguir leyendo 73

Tutorial para crear mockups 3D interactivos con CSS3 y jQuery

3d-animated-mockup-featured-new

Si eres diseñadores sabras lo importante que puede llegar a ser aplicar un poco de animación en una pagina web, y si tus usuarios tiene interacción con eventos de tu sitio para provocar animación mejor, pero y si combinas todo eso y creas formas interactivas para hacer demostraciones que permitan a tus visitantes y interactuar y que tengan un entorno visual agradable, bueno esto seria increíble. Eso es lo que podrás lograr si sigues el siguiente tutorial que estoy compartiendo con ustedes, y que si bien esta en Ingles bien que vale la pena esforzarse un poco en comprenderlo. Este tutorial para diseñadores web te permitirá crear mockups 3D interactivos con CSS3 y jQuery, una combinación que bien utilizada y aprovechada es una bomba, en el enlace que les comparto al final podrán encontrar el tutorial completo que les explica como funciona y como utilizarlos, también podrán descargar los archivos......

Seguir leyendo 21

Plugin jQuery para animar iconos para diseños web

livIcons

Hace unos días revisando la documentación de Google Materials vi los efectos de transformación que utilizan en los iconos de sus aplicaciones, efectos bastante interesantes que aprovechan una combinación entre CSS3 y SVG, pero requieren de mucho código CSS, algo que no todos están dispuestos a incluir en sus archivos, buscando un poco me tope con una excelente alternativa, se trata de un plugin jQuery para animar iconos para diseños web. El plugin en cuestión se llama LivIcons que esta combinación entre jQuery, Animaciones CSS y WebFonts, bastante interesante, no se trata de una aplicación que anima los iconos que tienes ya incluidos en tu pagina, el plugin incluye un pack de iconos prediseñados con animaciones de transformación que puedes incluir en tu sitio o utilizar para reemplazar los iconos estaticos que actualmente tengas en tu pagina web. Un excelente recurso para diseñadores web que te permitirá agregar dinamismo a......

Seguir leyendo 51

Efecto de transición elástico con JavaScript

efecto elastico transiciones

Muchas veces en artículos anteriores sobre diseño web he mencionado la importancia de la interactividad y el encanto visual que deberían tener las paginas web para gustar a los usuarios, no se trata solo de la combinación de colores, el movimiento cuenta mucho, pero eso no significa hacer que todo se mueva como antes sucedía con Flash, se trata de volver a los principios del diseño y ha aquella frase que dice “los detalles hacen al diseño”. Eso es algo que podemos lograr con este efecto llamado Wobbly por su creador, se trata de un afecto de transiciones elásticas aplicado a Slideshows de pantalla completa, es un efecto tan sencillo como atractivo que le dará a tu web un toque que la hará diferente de todas las demás, es un script basado en JavaScript y CSS3 bastante sencillo y liviano. Al final podrás encontrar dos enlaces uno hacia el demo donde podrán......

Seguir leyendo 79

Clippy, App para crear formas poligonales con CSS3

clippy

Clippy es una fantástica App para crear formas poligonales con CSS3 para aplicar en los diseños de paginas web que realices, este editor te permite generar formas CSS a partir imágenes SVG a las cuales se les puede aplicar un fondo de tal modo que presentemos imágenes en forma de triángulos, rombos y otros poligonos con formas especiales las cuales se generen automáticamente al cargar la pagina, estas prácticas son posibles al utilizar la propiedad clip-path de CSS3 que esta disponible en casi todos los navegadores web modernos con excepción de Internet Explorer. La aplicación esta montada en una pagina web y es de uso gratuito, el editor de Clippy te generara el código CSS necesario para aplicar en tus archivos CSS para asignarlos a tus capas según las clases o IDs a los que necesites aplicárselo, en el editor por default te ofrece una galería de formas predefinidas las cuales puedes utilizar......

Seguir leyendo 71

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 133

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 67

Atractivo diseño de formulario web full screen

formulario full screen

Navegando por los recursos que comparten en Codrops me encontré este excelente diseño de formulario web full screen, es un diseño que refleja muchas cosas muy buenas como elegancia, usabilidad, sencillez y todo combinado en un diseño moderno y fácil de navegar, considero el diseño puede ser perfecto para pequeñas encuestas por su sencillez en todos los aspectos desde el diseño de los campos del formulario hasta toda la interface que refiere a un sitio responsivo y aplicable a cualquier dispositivo. Les comparto los respectivos enlaces donde podrán descargar los scripts JavaScript y CSS, así como ver el tutorial para crear formularios web con este estilo en tu pagina web, así como también la pagina demo donde podrán probar esta interface web para formularios. Enlaces: Descargar Scripts & Tutorial | Demo...

Seguir leyendo 73

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 83

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 76

Aplicación web para crear patrones de imágenes CSS

Patternify

Patternify es una aplicación web que te permite crear patrones de imágenes CSS, generando imágenes en Base64 siendo un código lo que copiarias en tu archivo CSS para utilizar como fondo de algun elementos HTML de tu página, una herramienta sencilla y muy útil para diseñadores web. Enlace hacia Patternify...

Seguir leyendo 79

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 142

StyleStats un servicio para extraer las características de diseños web

CSS StyleStats

StyleStats es un servicio web que te permite extraer las principales características de diseños web extrayendo datos “estadísticos” de los archivos CSS que forman los estilos para los diseños, el servicio es gratuito y muy fácil de utilizar, basta con proporcionar la URL de la cual quieren extraer la información y el sitio les brindara la lista de colores utilizados en el archivo CSS, la lista de medidas utilizadas para las fuentes y otros datos que podrían ser de interes estadístico, siendo el mejor dato la lista de colores. Enlace: StyleStats...

Seguir leyendo 123

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 47

Magic Animations, framework de animaciones CSS gratuito

magic framework javascript para animaciones css

Magic Animations es un fantástico framework de animaciones CSS gratuito que incluye un gran cantidad de animaciones predefinidas y que podemos incluir fácilmente a los elementos de nuestros diseños web, lo único que tenemos que hacer es incluir el archivo CSS y llamar a las diferentes clases (ej. class=”magictime puffIn”) que definen a cada animación, al final les dejo el enlace para descargar este framework para animaciones CSS y también ahi pueden revisar los ejemplos de las animaciones incluidas y sus diferentes nombres de clase para utilizarlas. Recomendación, utilicen este framework en conjunto con jQuery ya que manejando los eventos sobre los elementos podemos mantener un mejor orden de cada animación y hacer mejor cosas. Enlace para descargar Magic Animations...

Seguir leyendo 67

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 52

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 40

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 74

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 107

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 55

Pagina 1 de 8123...6...Antiguas »

#Ranascreativas // Últimas imágenes enviadas