Guía para principiantes de CSS3
Desde el anuncio de 2005, el desarrollo de la hoja de estilo en cascada del nivel 3 o más conocido como CSS3 ha sido observado y supervisado de cerca por muchos diseñadores y desarrolladores. Todos estamos emocionados de tener en nuestras manos las nuevas características de CSS3: las sombras de texto, los bordes con imágenes, la opacidad, los fondos múltiples, etc., solo para nombrar algunos.
A partir de hoy, no todos los selectores de CSS3 son totalmente compatibles todavía. Pero eso no significa que no podamos divertirnos probando nuevas cosas de CSS3. Esta publicación está dedicada a todos los diseñadores y desarrolladores que ya están familiarizados con CSS 2.1 y desean ensuciarse las manos con CSS3.0.
Es una compilación de lecturas útiles de CSS3, códigos de muestra, consejos, tutoriales, hojas de trucos y más. Siéntase libre de usarlos en sus proyectos, solo asegúrese de que se adapte correctamente a los navegadores incompatibles.
Empezando con CSS3
Introducción a CSS3
Una (hoja de ruta) introducción oficial a CSS y CSS3. Este documento le da una idea general sobre el desarrollo de CSS3.
CSS3: lleva el diseño al siguiente nivel
Ventajas de CSS3, con explicaciones y ejemplos de propiedades y selectores de CSS3.
Varios trucos con CSS3
Webmonkey le ofrece varios trucos básicos en CSS3, que incluyen bordes redondeados, bordes, sombras, trucos de imagen y más..
Entrevista: Seis preguntas con Eric Meyer en CSS3
La gente de Six Revision entrevistó a Eric Meyer con valiosos conocimientos y respuestas en CSS3.
CSS3: Mejora progresiva
Cómo puede usar técnicas de mejora elegante (o progresiva) para hacer uso de las características de CSS3 en los navegadores que las admiten, al tiempo que garantiza que su código seguirá brindando una experiencia de usuario satisfactoria en los navegadores más antiguos que aún no admiten esas funciones..
CSS3: Antecedentes y fronteras
Bordes redondeados (radio de la frontera)
Una guía para crear bordes redondeados con CSS3. radio del borde propiedad.
Bordes redondeados con imagen. (borde-imagenes)
Cómo usar imágenes en los bordes con imagen de borde propiedad.
CSS3 bordes, fondos y cajas
Explicación detallada con ejemplos de nuevas propiedades CSS3 como: clip de fondo, origen-fondo, fondo adjunto, sombra de la caja, caja-decoración-break, radio del borde y imagen de borde.
CSS3: Texto
Efecto de tipografía
Crea un simple efecto de tipografía con CSS3..
Seis efectos de texto utilizando la sombra del texto.
Los efectos de texto incluyen: vintage / retro, neón, recuadro, anaglifo, fuego y juego de mesa.
Hermosa tipografía
Cómo tomar el marcado básico y transformarlo en un diseño tipográfico atractivo y hermoso a través de CSS3 puro.
Rotación de texto
Utiliza un sprite de imagen y una pizca de CSS para que las cosas se posicionen correctamente.
Texto de esquema
Cómo agregar un contorno o trazo a su texto usando el CSS3 trazo de texto propiedad.
Efecto de enmascaramiento de texto
Efecto de enmascaramiento de texto interactivo utilizando la sombra de texto Propiedad CSS.
Link nudging (animación) con CSS3
Ditch Javascript y crear efecto de empuje totalmente con CSS3.
Estilo de selección CSS
Cambiar el estilo de selección de texto con CSS3.
CSS3: Menú
Contenido de columnas múltiples
Uso de CSS3 para crear un conjunto de columnas en su sitio web sin tener que asignar capas individuales y (o) párrafos para cada columna.
Tooltips sexy con solo CSS
Cómo utilizar el estándar de CSS en evolución puede mejorar algunas sugerencias de herramientas para varios navegadores.
Más información sobre herramientas:
- Descripción de CSS3 puro
- Información sobre herramientas con CSS3.
Menú desplegable
Cómo crear un menú desplegable de varios niveles de Apple.com utilizando radio del borde, sombra de la caja, y sombra de texto.
Área de solo CSS3
Haga clic en una pestaña, oculte todos los paneles, muestre el correspondiente a la pestaña que acaba de hacer clic, todo con CSS.
Cintas 3D con CSS3
Crea bonitas cintas 3D con solo CSS3.
CSS3: sombra paralela
Sombra en la imagen
Muestre varias técnicas y algunas de las posibles apariencias para colocar sombras sin utilizar imágenes..
Pestañas luminosas con sombra de caja
Cómo crear pestañas intuitivas y hermosas en CSS3 sin imagen.
CSS3: Botones
Tutorial: Botones bonitos
Cómo crear hermosos botones CSS3 compatibles con todos los navegadores que se degradan con gracia.
Globos de texto
Varias formas de efecto burbuja de diálogo creadas con CSS 2.1 y mejoradas con CSS3.
Github por igual botones
Colección de botones que muestran lo que es posible usando CSS3 mientras se mantiene el marcado más simple posible..
Spinning, Fading Icons con CSS3 y MooTools
Cómo usar CSS3 y MooTools para crear elementos dinámicos rotativos.
Superposición de imágenes
Aplicación práctica de la propiedad CSS3 border-image..
Más
- CSS3 + Mootools. Un ejemplo de experimentación en mootools. Esto agrega propiedades CSS3 en el trabajo de marco de MooTools..
- Logotipo de explosión con CSS3 y MooTools o jQuery. Tome una imagen estática y conviértala en un efecto animado y explosivo en el mouse sobre.
- El poder de HTML 5 y CSS 3. HTML 5 y CSS 3 están ganando popularidad rápidamente, Perishable Press está aquí para explicar cómo y por qué.
- Spinning Rays con animaciones CSS3 y ejemplo de JavaScript. Efecto de giro de rayos simple y sutil en la parte posterior de una imagen.
- Galería de fotos Polaroid CSS3. Cómo construir una pila de fotos Polaroid con un estilo CSS puro.
- HTML 5 y CSS 3: las técnicas que pronto usarás. Un tutorial para crear un blog desde cero con HTML5 y CSS3.
Cheatsheets y referencias
CSS3 hoja de trucos (PDF)
Hoja de trucos imprimible con una lista completa de todas las propiedades, tipos de selector y valores permitidos en la especificación CSS3 actual del W3C.
Soporte CSS en Opera 9.5
Lista completa de los selectores de CSS soportados en Opera 0.5.
Fuentes disponibles para incrustar en font-face
Lista completa de fuentes con licencia actualmente para @Perfil delantero incrustación.
CSS 3 selectores - explicado
Una guía y referencia a los selectores CSS3 y sus patrones..
Generador de reglas CSS3 para todos los navegadores
Reglas CSS3 que puedes copiar y pegar en tu propia hoja de estilo.
CSS3 Haga clic en gráfico
Obtenga estilos CSS3 como tamaño de caja, radio de borde, sombra de texto y más con un clic.
Compatibilidad de contenido CSS y navegador
Lista completa de tablas de selección de CSS y CSS3 con declaración para verificar la compatibilidad del navegador.
