Guía para principiantes de CSS3
Este artículo es parte de nuestra "serie de tutoriales de HTML5 / CSS3", dedicada a ayudarlo a ser un mejor diseñador y / o desarrollador. Haga clic aquí para ver más artículos de la misma serie.
Desde el anuncio de 2005, el desarrollo del nivel 3 de Cascading Style Sheet o mejor conocido como CSS3 ha sido observado y monitoreado de cerca por muchos diseñadores y desarrolladores. Todos estamos emocionados de tener en nuestras manos las nuevas características de CSS3: sombras de texto, bordes con imágenes, opacidad, fondos múltiples, etc., solo por nombrar algunos.
A día 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 quieren ensuciarse las manos con CSS3.0.
Es una compilación de lecturas útiles de CSS3, ejemplos de códigos, sugerencias, tutoriales, hojas de referencia y más. Siéntase libre de usarlos en sus proyectos, solo asegúrese de que caigan con elegancia en los navegadores incompatibles.
Comenzando con CSS3
Introducción a CSS3
Una introducción oficial (roadmap) a CSS y CSS3. Este documento le da una idea general sobre el desarrollo de CSS3.

Ventajas de CSS3, con explicaciones y ejemplos de las propiedades y selectores de CSS3.

Webmonkey te trae a través de varios trucos básicos en CSS3, incluyendo bordes redondeados, bordes, sombras, trucos de imágenes y más.

La gente de Six Revision entrevistó a Eric Meyer con información valiosa y respuestas sobre CSS3.

Cómo puede usar técnicas de mejora elegantes (o progresivas) para hacer uso de las características de CSS3 en los navegadores que las admiten, al tiempo que garantiza que su código aún proporcionará una experiencia de usuario satisfactoria en navegadores antiguos que aún no admiten esas características.

Bordes redondeados (radio del borde)
Una guía para crear un borde redondeado con la propiedad border-radius
CSS3.

Cómo usar imágenes en bordes con propiedad border-image
.

Explicación detallada con ejemplos de nuevas propiedades de CSS3 como: background-clip
, background-origin
background-attachment
, box-shadow
, box-decoration-break
, border-radius
e border-image
.

Efecto Letterpress
Crea un simple efecto de tipografía con CSS3.

Los efectos de texto incluyen: vintage / retro, neón, recuadro, anáglifo, fuego y juego de mesa.

Cómo tomar el marcado básico y transformarlo en un atractivo y hermoso diseño tipográfico a través de CSS3 puro.

Utiliza un sprite de imagen y una pizca de CSS para que las cosas se posicionen correctamente.

Cómo agregar un contorno, o trazo, a su texto usando la propiedad de text-stroke
CSS3.

Efecto de enmascaramiento de texto interactivo utilizando la propiedad CSS de text-shadow
.

Deshazte de Javascript y crea un efecto de empuje completamente con CSS3.

Cambiar el estilo de selección de texto con CSS3.

Contenido de columnas múltiples
Usar CSS3 para crear un conjunto de columnas en su sitio web sin tener que asignar capas individuales y (o) párrafos para cada columna.

Cómo utilizar el estándar de CSS en evolución puede mejorar algunas útiles sugerencias de herramientas entre navegadores.

- Información sobre herramientas de CSS3 puro
- Información sobre herramientas con CSS3.
Menú desplegable
Cómo crear un menú desplegable de niveles múltiples similar a Apple.com utilizando border-radius
, box-shadow
y text-shadow
.

Haga clic en una pestaña, oculte todos los paneles, muestre la correspondiente a la pestaña que acaba de hacer clic, todo con CSS.

Crea bonitas cintas 3D con solo CSS3.

Sombra paralela en la imagen
Muestre varias técnicas y algunas de las posibles apariencias para dejar caer sombras sin usar imágenes.

Cómo crear pestañas intuitivas y hermosas en CSS3 sin imagen.

Tutorial: botones bonitos
Cómo crear hermosos botones CSS3 compatibles con varios navegadores que se degradan con elegancia.

Varias formas de efecto de burbuja de diálogo creadas con CSS 2.1 y mejoradas con CSS3.

Colección de botones que muestran lo que es posible con CSS3 y al mismo tiempo mantienen el marcado más simple posible.

Cómo usar CSS3 y MooTools para crear elementos dinámicos y rotativos.

Aplicación práctica de la propiedad de imagen de borde CSS3.
Más
- CSS3 + Mootools. Un ejemplo de experimentación en mootools. Esto agrega propiedades de CSS3 en el trabajo de marco de MooTools.
- Exploding Logo con CSS3 y MooTools o jQuery. Tome la imagen estática y conviértalo en un efecto de explosión animado sobre el mouse.
- 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 CSS3 Animaciones & Ejemplo de JavaScript. Efecto de giro de rayos simple y sutil en la parte posterior de una imagen.
- Galería de fotos de CSS3 Polaroid. Cómo construir una pila de fotos Polaroid de aspecto genial con estilo CSS puro.
- HTML 5 y CSS 3: las técnicas que utilizará pronto. Un tutorial sobre la creación de un blog desde cero con HTML5 y CSS3.
Cheatsheets y referencias
Hoja de trucos CSS3 (PDF)
Hoja de trucos imprimible con una lista completa de todas las propiedades, tipos de selector y permite valores en la especificación CSS3 actual del W3C.
Soporte de CSS en Opera 9.5
Lista completa de los selectores CSS admitidos en Opera 0.5.

Lista completa de fuentes con licencia para la inclusión de @font-face
.

Una guía y referencia a los selectores de CSS3 y sus patrones.

Reglas CSS3 que puedes copiar y pegar en tu propia hoja de estilo.
Carta de clic de CSS3
Obtenga estilos CSS3 como tamaño de caja, radio de borde, sombra de texto y mucho más con un clic.

Lista completa de tablas de selector de CSS y CSS3 con declaración de verificación de compatibilidad del navegador.


Agregue el Explorador de React.js a Chrome con las herramientas para desarrolladores de React
Todos los desarrolladores web ya deben conocer las asombrosas Herramientas para desarrolladores de Chrome . Esta función está integrada en Chrome y permite a los desarrolladores inspeccionar páginas y editar o eliminar elementos directamente desde el navegador.Es increíblemente potente y es la mejor manera de estudiar los comportamientos de la página, como la latencia, los recursos de la página o ejecutar comandos de la consola.El eq

30 fantásticos teclados de computadora que puedes comprar 2018
Al ser uno de los elementos más esenciales de una computadora, los teclados vienen en todas las formas y tamaños. Hoy en día, no usa teclados para escribir solamente, juega videojuegos e incluso usa un teclado para navegar en su PC en caso de que su mouse no funcione.Pero si eres fanático de las cosas buenas y no quieres usar un teclado convencional de diseño mundano, échale un vistazo a esta lista de teclados absolutamente geniales . Los