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