Camisetas ::: La Tostadora
Blog · Artysmedia · Arte, Diseño y Multimedia

30 de enero de 2014

Etiquetas: , ,

CSS, jQuery y HTML5




CSS, jQuery y HTML5Ya era hora que incluyera un post específico del mundo del diseño "responsivo", HTML5, CSS, jQuery y demás en el que vaya incluyendo enlaces a recursos, galerías y tutoriales sobre el tema.

Es posible que encuentres como hacer los muy conocidos efectos que nos invaden la red con jQuery y demás JavaScript, ejemplos de diseños de páginas web con el ahora de moda efecto parallax, alguna galería de diseños web guapos-guapos, algunos tutoriales para Adobe Photoshop (o lo que toque), y muchos ejemplos de buen y mal diseño, que de todo hay en la viña de Internet... ¡ah y alguna plantilla web entre otras cosas...!

Espero que les pueda ser útiles.



Actualizado el 30 de Enero de 2014


Mi primer algoritmo en Javascript

Unos enlaces sobre CSS, jQuery y HTML5:




Actualizado el 29 de Enero de 2014

Designer Plaything

Designer Plaything nos permite experimentar con diferentes combinaciones de tipografía web y color. También tenemos la opción de comprobar la accesibilidad de los colores.

Unos enlaces sobre CSS, jQuery y HTML5:




Actualizado el 28 de Enero de 2014

CSS Type Set

CSS Type Set es una herramienta práctica en el mundo de la tipografía que permite a diseñadores y desarrolladores el probar de forma interactiva y aprender cómo dar estilo a su contenido web.

Puedes establecer la familia de fuente, tamaño, color, espaciado entre letras, espaciado entre palabras, interlineado y un largo etc... lo que acaba generando automáticamente un archivo CSS listo para usar. Además puedes ir viendo los cambios que realices instantáneamente. Resulta una buena herramienta para experimentar un tipo de letra adecuado para tu sitio.

Unos enlaces sobre CSS, jQuery y HTML5:




Actualizado el 27 de Enero de 2014

FFFFALLBACK

FFFFALLBACK es una herramienta sencilla para el uso de tipografía en diseño web. Se trata de un bookmarklet que escanea el CSS de la página con el fin de identificar las fuentes web existentes.
FFFFALLBACK makes it easy to find the perfect fallback fonts, so that your designs degrade gracefully.


Unos enlaces sobre CSS, jQuery y HTML5:




Actualizado el 24 de Enero de 2014

Gridster

Gridster toma los conceptos de diseño de rejilla y los envuelve en jQuery para proporcionar una interfaz de rejilla con la opción de arrastrar y soltar recursos de manera rápida y agradable. El soporte incluído para añadir widgets y otra información permite crear diseños dinámicamente tan simples o complejos como sea necesario. Lo mejor de todo, es que sólo añadirá unos pocos kilobytes adicionales en tu código fuente.

Unos enlaces sobre CSS, jQuery y HTML5:




Actualizado el 23 de Enero de 2014


The latest update to Edge Animate gives you the ability to add audio (sound), implement a design that scales with the browser (responsive design) and even add your own JavaScript libraries for use in Edge Animate. This video shows you how to do all of this.


Unos enlaces sobre CSS, jQuery y HTML5:




Actualizado el 17 de Enero de 2014

Showcase of Parallax Effect in Website Design

En el post Showcase of Parallax Effect in Website Design podéis ver unos cuantos ejemplos de páginas web con el ya archiconocido efecto parallax, así que no tenéis escusa de darle al scroll con vuestro ratón y flipar un poco con bonitos diseños y poco contenido.

Unos enlaces sobre CSS, jQuery y HTML5:




Actualizado el 16 de Enero de 2014

Sony

Esta página del gigante de la tecnología Sony se diferencia bastante de cualquier otra página que incluya scroll parallax con la que nos hayamos cruzado nunca hasta la fecha. Fue creado como parte de la campaña de la compañía "Be Moved" en la que afirman: "A journalist once called us a guinea pig because the results of our experiments were copied by others. It was meant as an insult, but we took it as a compliment. Combining artistry and engineering IS an experiment but when artists work with engineers, every day is a chance to be moved."

Unos enlaces sobre CSS, jQuery y HTML5:




Actualizado el 15 de Enero de 2014


Create fluid, responsive web pages in Dreamweaver

Unos enlaces sobre CSS, jQuery y HTML5:




Actualizado el 14 de Enero de 2014

CSSMatic

CSSMatic es un proyecto libre que permite generar complejos y complicados códigos que normalmente se escriben manualmente. Las cuatro cosas CSSMatic puede ayudar a automatizar para nosotros:
  • Degradados: Usa varios colores y opacidades para obtener magníficos gradientes. Al usar el editor de gradientes puedes crear gradientes con sutiles cambios de colores y transparencias. Las imágenes generadas pueden usarse como imágenes de fondo en carteles, fondos de pantalla, botones o incluso en tablas y en muchos otros elementos.
  • Bordes redondeados: Super sencillo de usar y ahorra mucho tiempo. Cambia todos los bordes seleccionados al mismo tiempo.
  • Textura Suciedad: Crea sutiles fondos con algo de suciedad y de ruido, cambiando el color del fondo y de la suciedad, y viendo el resultado en tiempo real.
  • Editor Sombras: Cambia el radio de la sombra, el color, tamaño… Todo lo que necesitas para crear sombras en un solo lugar.


Unos enlaces sobre CSS, jQuery y HTML5:




Actualizado el 13 de Enero de 2014

Parallax Cadillac

Si vais a ver la web de Parallax Cadillac es porque os gustan las ilustraciones frescas, animaciones retro y técnicas de desplazamiento inteligentes que se combinan para un microsite ganador. El controvertido efecto "Scroll parallax" puede estar en el camino de convertirse en un cliché del diseño web, pero siempre y cuando tenga un uso imaginativo y estéticamente agradable todavía le quedará vida para rato... Este microsite fue creado por la agencia de Newcastle Shout Digital.

Unos enlaces sobre CSS, jQuery y HTML5:




Actualizado el 10 de Enero de 2014

Robby Leonardi

Hoy os presento a Robby Leonardi, un diseñador multidisciplinar que vive y trabaja en Nueva York y cuya página web ha transformado en su currículum interactivo que ofrece una navegación tipo videojuego y atractivos dibujos animados.

Unos enlaces sobre CSS, jQuery y HTML5:




Actualizado el 08 de Enero de 2014


CSS Mania

CSS Mania nos ofrece algo que normalmente no es bueno, pero que esta vez es posible pueda funcionar: cantidad contra calidad. CSS Mania nos muestra varios sitios web nuevos cada día, aunque algunos de los sitios que aparecen no son de tan alta calidad como los demás, quizás en la variedad esté el gusto.

Es un gran lugar para ir si quieres encontrar un montón de sitios para ver como va el diseño web por otros lares.

Unos enlaces sobre CSS, jQuery y HTML5: