Para los que están pensando en iniciar el año aprendiendo CSS3, aquí tenéis un recopilatorio de tutoriales que muestran diferentes aspectos o funcionalidades que podemos aplicar en nuestros proyectos. No hace falta explicar la importancia que tiene CSS para el desarrollo web. En ocasiones he encontrado soluciones utilizando muchas y engorrosas líneas en JavaScript que fácilmente se podrían haber resuelto conociendo debidamente las funcionalidades de CSS.
Con la llegada del estándar HTML5 y CSS3 es interesante experimentar con pequeñas prácticas y aprender comportamientos que se han incorporado en los nuevos estándares. Por ello, en este post vamos a referenciar a siete tutoriales que nos enseñaran a implementar siete prácticas experimentando con estos nuevos comportamientos y, de esta manera, no caeremos en el error de desarrollarlo con JavaScript.
Botones CSS con pseudo-elementos: El primer tutorial al que podéis acceder explica cómo crear botones con pseudoelementos. El tutorial muestra cinco ejemplos en los que realiza botones realmente originales, con un asombroso acabado y una sensación 3D sorprendente.
Diseños angulares: El segundo tutorial rompe con la simetría y trata de enseñar cómo crear portales transgresores utilizando polígonos angulares. Este diseño es apropiado para portales que pretenden mostrar información de tipo comercial de manera impactante que de mostrar información de tipo documental, en mi opinión.
Banners animados: Nuestra tercera práctica pretende enseñar cómo realizar banners animados. En los ejemplos no enseñarán a crear el mismo banner tanto horizontal como verticalmente. Para la realización de la nos enseñarán a utilizar propiedades como opacity y animation. Este quizá sea mi favorito por el aspecto del resultado final.
Lightbox con transición: En nuestro cuarto tutorial aprenderemos a crear el típico lightbox pero utilizando las nuevas funcionalidades de transiciones de manera que la aparición de la imagen será progresiva tanto en opacidad como en zoom.
Estados por filtrado de imagenes: En esta quinta práctica aprenderemos a remarcar o desactivar ciertas imágenes a modo de estado. Esta idea está inspirada en un experimento de Komarov en el que utilizaba casillas de verificación y activación/desactivación de radiobuttons sin utilizar javascript.
Diapositivas 3D: El sexto tutorial explica cómo realizar una presentación de textos o díapositivas con transiciones que simulan una rotación en 3D. Para probar la demo hay que fijarse en las flechas situadas en la parte inferior derecha de la pantalla. Pulsando las teclas de cursor correspondientes a las fechas activadas podremos ver cómo van pasando las díapositivas en la dirección que nosotros hemos pulsado.
Botones YouTube: El último tutorial es algo más sencillo pues pretende enseñar cómo crear botones con el mismo estilo al último diseño de YouTube. Un estilo con mucha sutileza ideal para incluir en los pies de página.
Todas las referencias las incluimos en este post para que podais realizar estas prácticas y aprender un poco más sobre CSS3. Absolutamente todos los tutoriales tienen una explicación (en inglés) y una demo que podréis ejecutar para verificar los resultados de la práctica. Esperamos os gusten y que os sirva de gran utilidad.
Vía | Digg
Comentarios
Hola, No sé si Smashing hub es del mismo propietario, pero todos esos tutoriales están sacados de http://tympanus.net/codrops/ Tiene también página en google+ y de allí accedo a estos magníficos tutoriales y consejos sobre diseño web.
Igual solo los estan compartiendo aquí. No veo el lado macabro del asunto. Por el contrario, muy buen aporte. Cuando será que Explorer aceptará todas estas funcionalidades?
No, yo no pretendía acusar de nada a nadie. Era solo incluir más información. A mi me gusta poner la fuente de forma clara y no se ha hecho.
Pues sí. Todo esto es de Codrops, y de hecho estos son lo últimos tutoriales. Se quedan bastantes más en el tintero que son incluso mejores. Sin duda Codrops es un sitio para fijarse cada 3 o 4 días.
-- editado por última vez a las 16:37
Todo esto no funciona en I.Explorer? Y si es así, ¿por qué lo veo funcionando en I.Explorer?
Lo digo porque lo he estado probando(soy principiante básico en esto de CSS3) y no soy capaz de hacerlo funcionar el I.Explorer, en cambio cuando veo los ejemplos de los tutoriales, se ven perfectamente(o casi).
Es muy probable que te falte añadir el tag propietario de IE: -ms
-- editado por última vez a las 21:47
Buen aporte, gracias. Ya conocia varios pero otros no.
Grandísimo aporte, muchas gracias!!
Muchas gracias por el aporte, estoy iniciándome en este mundo y no conocía la codrops
Escribir un comentario
Para hacer un comentario es necesario que te identifiques: ENTRA o conéctate con FacebookConnect