Manual de CSS3 GRATIS !!!

Sabido es que hoy en día en diseño web todo avanza muy deprisa, hay que estar siempre formándose y afortunadamente existen numerosos sitios a los que recurrir.

Hoy os dejo un manual de CSS3 en PDF. Se trata de una adaptación de Antonio Navajas @ajnavajas sobre el curso de Cristalab.

CONTINUAR LEYENDO “Manual de CSS3 GRATIS !!!” »

Comparte este Blog de Diseño Web

Share and Enjoy

Tags

Related Posts

Share This

Manipular Viewport con CSS

Viewport

Cuanto accedemos desde un smartphone o tablet a un sitio web, normalmente el navegador comprueba la resolución del terminal y escalan el contenido para adaptarlo a su pantalla.

Esta práctica ocasiona verdaderos quebraderos de cabeza en el diseño web para smartphones.

El viewport es un atributo del tag <meta> que  se incluye dentro del <head> de un documento HTML. Su aspecto es el siguiente:

CONTINUAR LEYENDO “Manipular Viewport con CSS” »

Comparte este Blog de Diseño Web

Share and Enjoy

Tags

Related Posts

Share This

Curvar texto con CSS3 y jQuery

Curvar texto con CSS3 y jQuery

En este blog de diseño web, ya hemos visto algún ejemplo de cómo manipular la posición de las fuentes en HTML.

En un post anterior, vimos cómo curvar texto con un CSS y HTML5, también vimos como rotar un texto y por ejemplo, escribir con HTML en vertical.

Aunque CSS3 nos permite rotar las letras, es bastante complicado de organizar cada letra a lo largo de una trayectoria curva. Arctext.js es un plugin de jQuery que te permite hacer exactamente eso.

Basado en Lettering.js, calcula la rotación a la derecha de cada letra y distribuye las letras a través de un arco imaginario según el radio que le indiquemos.

Aquí os dejo código, ejemplos y demás de http://tympanus.net/

 

Comparte este Blog de Diseño Web

Share and Enjoy

Tags

Related Posts

Share This

Parallax Slider con CSS3 y jQuery

Parallax-Slider

Parallax-Slider

Hace unos meses, en este blog de diseño web, vimos unos ejemplos de las últimas tendencias de diseño, el Parallax.

Hoy vamos a ver un ejemplo más de cómo hacer un slider con Parallax, en el que podemos ver cómo los elementos del diseño aparecen y desaparecen con distintos efectos.

En este ejemplo vamos a ver cómo controlar el comportamiento de cada elemento, dándole una clase. Cuando queremos desplazarlo a la derecha, por ejemplo, utilizamos la clase “da-slide-toright”.

Las clases utilizadas son:

  • .da-slide-fromright
  • .da-slide-fromleft
  • .da-slide-toright
  • .da-slide-toleft

El efecto Parallax se crea moviendo el fondo en dirección opuesta al movimiento del objeto. Con bgincrement, podremos controlar la cantidad de píxeles que tiene que moverse.

A continuación os dejo el enlace para ver y descargar el código de Tympanus.net

 

 

Comparte este Blog de Diseño Web

Share and Enjoy

Tags

Related Posts

Share This

Notificaciones tipo iPhone con HTML5

Notificaciones tipo iPhone con HTML5

Notificaciones tipo iPhone con HTML5

El diseño web está muy ligado al resto de diseños tecnológicos, sobre todo al diseño realizado para smartphones. Hoy os dejo algo que seguro que os gusta. Se trata de la notificación que aparece en el iPhone (por ejemplo), cuando tenemos mensajes pendientes de leer.

Realizado en CSS3 y HTML5, aquí os dejo una demo y el código listo para descargar. Espero que os sea útil.

Comparte este Blog de Diseño Web

Share and Enjoy

Tags

Related Posts

Share This

Menús con Animación en CSS3 GRATIS !!!

Menús con animación en CSS3 Gratis

Menús con animación en CSS3 Gratis

Todo lo que antes era impensable en un diseño web, ahora es fácil con CSS3, y más si te ofrecen el código para que te lo descargues gratuítamente !!

Tympanus.net nos deja 10 ejemplos espectaculares para que hagas tu menú más atractivo para el usuario. Se trata de varios ejemplos que juegan con los tamaños y animaciones de fuentes, colores e iconos, seguro que encuentras el que andabas buscando !!.

Comparte este Blog de Diseño Web

Share and Enjoy

Tags

Related Posts

Share This