Más de 50 impresionantes técnicas de CSS3 para mejores diseños
CSS3 está ganando impulso, a pesar de que el estándar ni siquiera se ha finalizado.
Hay cientos de tutoriales para enseñar a los diseñadores cómo usarlos, pero lamentablemente muchos de ellos cubren el mismo terreno.
Y algunos de los tutoriales les enseñan a los diseñadores a hacer cosas que tal vez no consideren útiles, aunque las técnicas generalmente se pueden adaptar para adaptarse perfectamente a un proyecto.
A continuación hay más de cincuenta increíbles tutoriales de CSS3. Muchos están estrictamente basados en CSS y HTML, mientras que otros también incorporan JavaScript.
Si tiene una técnica o tutorial favorito que no se incluye a continuación, ¡compártalo en los comentarios!
Usando CSS3 para la ilustración sin imagen
Varios métodos nuevos en CSS3 permiten crear una cantidad de gráficos muy complejos utilizando CSS puro y sin imágenes. Aquí hay algunos de los mejores ejemplos disponibles.
Ilustración de puro CSS iPhone
Una mezcla de bordes, transformaciones y degradados para crear una imagen animada de un iPhone.
Crear el logotipo del navegador Opera en CSS3
Una ilustración limpia del logotipo de Opera procesado con técnicas CSS3.
Nuestro sistema solar con CSS3
Una interpretación elegante del sistema solar con efectos de animación.
Efecto de reloj analógico
Crea un reloj analógico genial usando solo CSS3 y jquery.
Experimentos de sombras
Este tutorial muestra cómo usar sombras CSS para crear una variedad de efectos, incluyendo un gráfico del Lado Oscuro de la Luna, una tabla periódica sombreada e incluso una "poción de amor" psicodélica.
Crear imágenes de estilo Polaroid con solo CSS
Este tutorial usa efectos CSS2 y CSS3 para agregar estilo Polaroid a una lista simple de imágenes.
Texto CSS3, diseño y efectos de color
CSS3 se puede utilizar para muchas animaciones y gráficos diferentes, pero también es ideal para efectos de diseño, texto y color que antes podría haber recurrido a Photoshop.
Utilizando Columnas CSS3
Codificando un módulo limpio de columnas múltiples CSS3.
Implementación general de CSS3
Una visión general de los beneficios de CSS3.
Estilo de enlaces con CSS3
Cuatro formas diferentes de diseñar diferentes tipos de enlaces con CSS3
Acordeón vertical CSS3
Los degradados y las transiciones hacen que este menú de acordeón se degrade a una lista ordenada en los navegadores más antiguos.
Super Awesome CSS3 Botones
Botones de degradado coloreados con sombra paralela que funcionan en fondos claros u oscuros y no requieren imágenes.
Botones de estilo de Photoshop con CSS3
Una comparación lado a lado de cómo crear botones CSS3 sin imágenes y con Photoshop.
Efecto de texto de gradiente de CSS
Instrucciones para hacer un efecto de texto único aplicando un mapa de texturas al texto. Puede usar degradados o patrones para realmente hacer pop de texto.
Algunas alternativas de CSS3 a los efectos de JavaScript
7 maneras de reemplazar los efectos de JavaScript de uso común con CSS3 para que tu sitio esté listo para el futuro.
Efecto de texto en relieve CSS3
Crear un efecto de texto en relieve sin hackers del navegador de Photoshop.
Comprender los valores de color de CSS3
Todo sobre las nuevas opciones de color disponibles con CSS3.
Crear efectos enriquecidos con CSS3
Transiciones y transformaciones CSS se pueden combinar para crear una variedad de efectos.
Hacer un efecto Bokeh CSS3
La capacidad de usar degradados y transparencia con CSS3 hace que este efecto clásico sea posible.
Columnas CSS3
Un buen video tutorial sobre el concepto de usar columnas CSS3 para el diseño.
Fancy Lists con CSS3
Refresque el estilo de lista con viñetas usando CSS3 para hacer marcas de lujo.
Infoboxes muy pulidos sin imágenes con CSS3
Las técnicas hechas posibles por CSS3 hacen que estas cajas realmente destaquen.
Globos de texto
Los pseudo-elementos de radio de borde y de transformación hacen posibles estas formas.
Efectos de transición de imagen de estilo Flash
Una forma inteligente de usar el efecto de animación CSS.
Recreando la pantalla de actualización de Tumblr con CSS3
Un efecto de diseño de CSS3 que se degrada bien para navegadores antiguos.
La sutil tipografía de CSS3 que juraría fue hecha en Photoshop
Este video tutorial de 13 minutos le mostrará cómo crear un bello y sutil efecto tipográfico 3D completamente con CSS3.
Rotación de texto con CSS
Aquí hay una técnica un poco más antigua que muestra cómo crear texto compatible con varios navegadores girado para alinearse con un eje vertical.
Crear un efecto Letterpress con CSS Text-Shadow
Este tutorial de Line25 le mostrará cómo usar sombras de texto para crear un efecto de tipografía en el texto de su sitio web.
Impresionante galería de Lightbox de CSS3 con jQuery
Este código crea una galería de imágenes de estilo Polaroid con una opción de uso compartido de arrastrar y soltar.
Superposiciones impresionantes
Este tutorial de Zurb muestra cómo crear superposiciones de imágenes usando propiedades de borde CSS3 que luego se pueden usar para mostrar información adicional sobre una imagen cuando está suspendida.
Awesome Inline Form Labels
Este tutorial le muestra cómo crear etiquetas de formularios en línea que no desaparecen una vez que los visitantes comienzan a escribir.
Efectos 3D CSS3
Cubo animado de CSS3
Un cubo animado en 3D único que utiliza transformaciones 3D con estilo de CSS. El cubo se puede girar con las teclas de flecha para mostrar la información que se muestra en cada cara.
Cintas 3D CSS3
Dale un poco de profundidad a tu diseño usando estas cintas de CD CSS3 fáciles.
Desplazador de carteles animado en 3D
Mostrar pósters de películas con subtítulos utilizando un asombroso efecto de perspectiva tridimensional en CSS3.
3D Coke 3D CSS puede
Al arrastrar una barra de desplazamiento, este Coque virtual puede avanzar y retroceder.
Sombras CSS
Diseñando sombras de manera creativa separándolas del elemento.
Animación CSS3
Una interpretación animada de Fail Whale de Twitter con CSS3
Un usuario muy elegante de CSS3 que sorprendentemente se degrada bastante bien en los navegadores más antiguos.
Fondo Parallax Starfield
Las estrellas se mueven de izquierda a derecha detrás de tu contenido con este aspecto clásico de viaje espacial.
Mostrar y ocultar contenido con CSS3
Expandir y contraer bandejas y árboles de menú sin javascript.
Una pestaña de seguimiento flotante con CSS3
Ponga los íconos de navegación o contacto al alcance de la mano con este útil método.
CSS3 Drop-in Modal Windows
Un par de ventanas modales comunes generadas usando efectos CSS3 y transformaciones.
Spinners que usan solo CSS3
¡Crea animaciones de carga usando solo CSS3 y sin gifs animados!
Mostrar iconos sociales con CSS3
Un efecto fresco de desvanecimiento para mostrar tus íconos sociales usando CSS3 puro.
Animación de dibujos animados CSS3
Crear una animación de estilo flash completa utilizando solo CSS3 y jquery.
Un paisaje animado con CSS3
Montañas, nubes y agua, todos animados con CSS3.
Bonitos subtítulos animados de desplazamiento de imagen
Las Transiciones CSS3 te permiten hacer cosas increíbles con subtítulos de texto. Aquí hay un ejemplo.
Un menú elástico en miniatura
Una serie de imágenes que se expanden y retraen cuando se cierne sobre ellas.
Tarjetas de índice dinámicas apiladas
Un fantástico efecto de animación que podría aplicarse a varios diseños.
Un reloj colorido con CSS y jQuery
Este tutorial muestra cómo crear un reloj colorido realmente impresionante utilizando CSS y jQuery, que consta de tres círculos de estilo de carga que muestran horas, minutos y segundos.
Pure CSS3 At-At Walker
Este es un ejemplo impresionante que usa CSS3 (sin JavaScript, sin Flash) para crear un At-At Walker animado de Star Wars. El único inconveniente es que actualmente solo se puede ver en navegadores Webkit (Safari y Chrome).
Crear un Control deslizante de contenido jQuery con Pure CSS
Aprende a crear un deslizador estilo jQuery de CSS con este tutorial.
Menú desplegable de CSS3
Este tutorial de WebDesignerWall muestra cómo crear un menú desplegable de CSS3 compatible con varios navegadores que también funciona en navegadores que no son compatibles con CSS3 (aunque con un estilo limitado).
Escrito exclusivamente para WDD por Cameron Chapman .
Si conoce otros tutoriales de CSS3 de alta calidad que no se mencionaron anteriormente y desea compartir, ¡hágalo en los comentarios!