Más de 100 recursos CSS para diseñadores y desarrolladores web

by Bradley Nice, Content Manager en ClickHelp.com - herramienta de documentación de software

Un diseñador / desarrollador web serio debe solicitar una habilidad para escribir un buen CSS. CSS es simple, muy fácil de aprender pero muy poderoso. Una vez que lo aprenda, se sorprenderá de su habilidad.

En caso de que no esté familiarizado con CSS, aquí hay una introducción rápida:

“CSS es un lenguaje especial que se usa para diseñar el contenido HTML. CSS define cómo se mostrarán los elementos HTML: color, tamaño, posición, borde, fondo, etc. "
© ClickHelp Team

Hoy he reunido una serie de recursos CSS para ayudarte a aprender. Se divide en varias categorías: Tutoriales de aprendizaje, Sitios y libros, Referencias y Cheatsheets, Tutoriales y técnicas, Plantillas y marcos, Galerías y vitrinas, Herramientas y Blogs y sitios de noticias específicos de CSS.

Tutoriales de aprendizaje, sitios y libros

Sitios: Codecademy, FreeCodeCamp.com, SoloLearn, Treehouse, Tutsplus, A to Z CSS, Dash, The Hello World, Khan Academy, HTML5 from Scratch, Sitepoint, Usersnap

Libros: HTML y CSS, Programación después del horario laboral - Tutorial CSS

  • Tutorial básico en video HTML y CSS de Chris Coyier (62 MB): un video imprescindible para principiantes absolutos. Te enseña todo, desde elegir un editor de texto, escribir tu primera página HTML y usar CSS para estilizar.
  • Creación de una hoja de estilo global: no necesita un archivo CSS diferente para páginas diferentes, siempre cree un solo archivo CSS global para todas sus páginas web. Las hojas de estilo globales se pueden aplicar en todo el sitio o en un subconjunto de páginas, y hacerlo significa que solo necesita actualizar uno o dos archivos cuando necesita hacer un cambio de estilo.
  • Conceptos básicos de CSS: ¿estás atrapado en el mundo de las tablas anidadas y el marcado obsoleto? El uso de CSS para diseñar sus archivos HTML (X) lo beneficiará a usted y a sus visitantes de muchas maneras. Aprenda los conceptos básicos de CSS capítulo por capítulo en línea o descargue los 18 capítulos de CSS Basics en un archivo PDF imprimible descargable.
  • Tutorial de hojas de estilo en cascada (CSS): aprenda el uso de CSS, definiendo el tamaño de fuente, los márgenes y el relleno. Identifique los elementos HTML a través de id y atributos de clase.
  • Tutorial de CSS: más tutoriales de CSS aquí, de la lección 1 a la 16 contiene una breve introducción y un tutorial en profundidad sobre CSS, aprende del uso de colores a elementos flotantes.
  • HTML y CSS para principiantes: cómo configurar su página web HTML, crear encabezados y párrafos, agregar listas, cambiar el tamaño, color y tipo de letra usando CSS.
  • Aprenda HTML y CSS en una guía fácil de usar. - Guía simple y completa dedicada a ayudar a los principiantes a aprender HTML y CSS. Esbozando los fundamentos, esta guía trabaja a través de todos los elementos comunes de diseño y desarrollo front-end.

Referencias y Cheatsheets

  • Índice de propiedades CSS: una lista alfabética de todas las propiedades CSS.
  • Guía abreviada de CSS: una hoja de referencia que cubre los formatos básicos de abreviatura de CSS.
  • Hojas de trucos de CSS: dos hojas de trucos de About.com: una básica y otra para diseños de CSS.
  • Listamatic: este sitio ofrece ejemplos de cómo usar CSS para crear estilos de lista radicalmente diferentes.
  • Guía para principiantes de un diseñador experimentado de CSS: esta es una gran lista de recursos para principiantes de CSS.
  • 5 consejos para organizar su CSS: este artículo ofrece cinco métodos realmente útiles para mantener sus hojas de estilo mejor organizadas (y, por lo tanto, más fáciles de editar más adelante).
  • Mis 5 consejos CSS: una colección de cinco consejos simples para crear un mejor CSS.
  • Modo peculiar y modo estricto: una guía para el modo peculiar y el modo estricto en los navegadores modernos.
  • Hoja de trucos CSS (V2): una referencia CSS de una sola página que enumera todos los selectores CSS 2.1.
  • CSS básico: Parte 1: una guía de referencia de 6 páginas para elementos básicos de CSS de Refcardz.
  • Hoja de trucos CSS abreviada (PDF): una hoja de referencia para el formato abreviado CSS.
  • Uso de CSS (hojas de estilo en cascada): una guía básica de CSS, que incluye los beneficios de usar CSS.
  • 5 formas de escribir instantáneamente un mejor CSS: algunos consejos para escribir un buen CSS que sea eficiente y efectivo.
  • Optimización de la estructura de su sitio web para imprimir usando CSS: una guía para crear hojas de estilo para imprimir.
  • Imprimir hojas de estilo: otra guía para crear hojas de estilo de impresión.
  • Tipografía CSS: técnicas de contraste, tutoriales y prácticas recomendadas: una gran colección de recursos de tipografía CSS.
  • Potentes técnicas CSS para una codificación efectiva: una colección de técnicas CSS, ideas y soluciones para una mejor codificación CSS.
  • Restablecer sus estilos CSS con CSS Reset: una guía completa para restablecer estilos.
  • Convención de nomenclatura estructural en CSS: un artículo sobre nomenclatura de elementos en función de lo que son en lugar de dónde están o cómo se ven.
  • Mejora de la legibilidad del código con las guías de estilo CSS: un artículo que cubre cinco técnicas que puede utilizar para hacer que su código sea más fácil de mantener y administrar.
  • 70 ideas de expertos para una mejor codificación CSS: una colección de consejos de expertos para mejorar su código.
  • CSS Float Theory: cosas que debe saber: una guía para comprender los flotantes en CSS.
  • Guía completa de CSS: un gran recurso que cubre prácticamente todas las partes de CSS.
  • Contraste y flujo tipográfico: un artículo que describe los conceptos básicos para crear un buen tipo de letra con suficiente contraste tipográfico en CSS.
  • Cómo ajustar el tamaño del texto en CSS: una guía exhaustiva sobre el tamaño del texto CSS.
  • Hoja de trucos CSS: una hoja de trucos CSS muy completa basada en la web.
  • 13 Principios de capacitación sobre CSS que todos deben conocer: una lista de convenciones básicas de CSS que debe conocer.
  • Guía de recursos: esta es la guía de recursos CSS de CSS Zen Garden.
  • CSS Beauty: un sitio que ofrece noticias, recursos y una galería de CSS.
  • Uso de accesos directos CSS: una guía de referencia para algunos métodos abreviados básicos de CSS.
  • Manual del desarrollador web: esta es una colección masiva de CSS y otros recursos, incluidas vitrinas, herramientas y más.
  • Diseñando en una moneda de diez centavos: 100 recursos gratuitos de CSS: una gran colección de recursos de CSS, incluidos artículos, tutoriales, diseños y más.
  • 15 propiedades CSS que probablemente nunca usará (pero tal vez debería): este artículo cubre quince propiedades CSS que a menudo se pasan por alto y que muchos diseñadores ni siquiera saben que existen.
  • 10 principios de los maestros de CSS: una colección de excelentes principios y pautas de algunos de los maestros de CSS.
  • Especificidad de CSS: cosas que debe saber: una guía de especificidad de CSS, uno de los conceptos de CSS más difíciles de comprender.
  • Resolver 5 dolores de cabeza CSS de Commons: una guía para tratar problemas de CSS como el error de doble margen de IE6 y los estilos ineficaces.

Tutoriales y Técnicas

  • 20 recursos útiles para aprender sobre CSS3
  • CSS3 desatado - Consejos, trucos y técnicas
  • 20 tutoriales CSS3 muy útiles
  • Funciones y características emocionantes de CSS3: más de 30 tutoriales útiles
  • CSS desde cero: este es un tutorial muy básico para comenzar con CSS que lo guía a través de la creación de su primera página web básica con CSS. Se supone que la persona que realiza el tutorial tiene poco o ningún conocimiento de cómo codificar un sitio web y es un gran recurso para principiantes.
  • 53 Técnicas CSS sin las que no podría vivir: esta es una gran colección de técnicas CSS para todo, desde menús hasta formularios e imprimir hojas de estilo.
  • CSS Drop Shadows: un tutorial sobre cómo crear sombras paralelas en imágenes usando CSS.
  • Selectutorial - Selectores CSS - Una guía básica para los selectores CSS y cómo funcionan.
  • Técnicas de navegación CSS: una colección de 37 diseños de navegación diferentes que utilizan CSS.
  • Técnicas CSS que uso todo el tiempo: una colección de técnicas CSS que Christian Montoya encuentra extremadamente valiosas.
  • Resumen de técnicas de CSS: 20 consejos y trucos de CSS: una colección de técnicas de CSS que incluyen esquinas redondeadas y ventanas emergentes de CSS.
  • Consejos y trucos de CSS: una colección de técnicas CSS básicas y útiles.
  • Hoja de estilo maestra: la técnica CSS más útil: una hoja de estilo maestra utilizada para borrar y restablecer los valores predeterminados del navegador.
  • Mostrar señales de hipervínculo con CSS: un tutorial rápido para agregar iconos de tipo enlace utilizando CSS que es compatible con IE7, Safari y Firefox.
  • Diez trucos CSS que quizás no conozcas: cubre consejos como abreviaturas de fuentes CSS, reemplazo de imágenes y alineación vertical con CSS.
  • Diez trucos CSS más que quizás no conozcas: este artículo cubre elementos como elementos de bloque versus en línea, estableciendo un ancho mínimo de página y texto invisible.
  • Convertir una lista en una barra de navegación: un excelente tutorial sobre cómo crear una barra de navegación a partir de una lista con estilo.
  • Convertir listas en árboles: cómo crear una lista desordenada de varios niveles en forma de documento o árbol de páginas.
  • Reconstrucción de página web con CSS: cómo reconstruir una página web con un diseño CSS.
  • Diseños avanzados de CSS: paso a paso: un tutorial paso a paso para crear un diseño avanzado de 3 columnas.
  • Creación de un diseño CSS desde cero: una guía completa para construir un sitio basado en CSS desde cero.
  • Tutorial CSS: un tutorial completo de W3Schools.
  • Hojas de estilo: otra colección de tutoriales CSS muy completa.
  • Párrafos de fantasía con CSS: un tutorial para crear formatos de párrafo especializados.
  • Esquinas aún más redondeadas con CSS: una técnica para crear esquinas redondeadas que admite PNG y transparencia alfa.
  • Menús de la lista de CSS de Uberlink: un tutorial para crear una barra de navegación que se comporta como un menú de intercambio de imágenes, pero solo usa dos imágenes y resalta la página actual.
  • Cómo agregar variables a sus archivos CSS: una guía para aplicar variables a CSS utilizando PHP y la reescritura de URL de Apache.
  • Más de 15 técnicas y herramientas para la codificación CSS de navegador cruzado: este artículo cubre más de 15 consejos para crear código CSS compatible con navegador cruzado.
  • Centrado CSS - ¡Diversión para todos! - Una guía para centrar CSS en diseños, incluido el diseño de líquidos centrados.
  • Posicionamiento absoluto dentro del posicionamiento relativo: una guía para posicionar elementos secundarios absolutamente dentro de un elemento primario relativamente posicionado.
  • Posicionamiento absoluto falso: una guía para un enfoque de posicionamiento que combina los mejores atributos de posicionamiento flotante y absoluto.
  • Alineación vertical para listas de navegación con varias líneas: una guía para alinear listas que utilizan el enfoque de cuadro flotante.
  • Lista de tutoriales sobre los 10 botones CSS principales: una colección de diez de los mejores tutoriales para crear botones CSS.
  • Esquinas de la cima de la montaña: creación de esquinas redondeadas con CSS.
  • Resumen de esquinas redondeadas CSS: una colección de técnicas y tutoriales de esquinas redondeadas.
  • Trucos CSS para viñetas personalizadas: una guía para crear estilos personalizados para viñetas con CSS.
  • CSS Swag: Listas de columnas múltiples: una guía para crear listas semánticamente lógicas y ordenadas que se envuelven en varias columnas verticales.
  • Mejora de la visualización de enlaces para imprimir: muestra cómo incluir URL de enlaces en las impresiones de sus páginas después del texto de enlace de enlace.
  • Truco avanzado del menú CSS: un menú avanzado realmente genial con un efecto de desenfoque creado con CSS.
  • Menús CSS: un tutorial sobre cómo crear menús a partir de listas anidadas con CSS2 y sin JavaScript.
  • Menú de pestañas CSS con menús desplegables: un tutorial para crear un menú desplegable con pestañas con CSS.
  • Menú CSS avanzado: un tutorial para crear un menú CSS realmente excelente desde WebDesignerWall.
  • Pestañas horizontales animadas: un tutorial para crear pestañas de menú horizontales que se animan en rollover.
  • Menú gráfico CSS con Rollovers: un excelente tutorial para crear un menú CSS con un efecto de rollover.
  • Dropdowns CSS híbridos: un tutorial sobre cómo crear menús desplegables CSS que se degradan con gracia y están bien estructurados, entre otras cosas.
  • Guía para principiantes de CSS: una guía completa para los nuevos en CSS.
  • Introducción a CSS: un ejercicio práctico: una guía muy básica para comenzar a utilizar CSS.
  • Cómo: Fondo grande CSS: un tutorial para trabajar con fondos grandes con CSS.
  • La interfaz CSS altamente extensible: un tutorial completo para crear sitios web CSS altamente personalizables y adaptables.
  • Uso de CSS para hacer cualquier cosa: más de 50 ejemplos creativos y tutoriales: una colección de más de 50 tutoriales para crear diseños CSS únicos.
  • Desarrollo de CSS rápido y fácil con Firebug: una guía para usar Firebug para mejorar sus diseños web.
  • 10 ejemplos de tipografía CSS hermosa y cómo lo hicieron ... - Ofrece excelentes ejemplos de tipografía CSS junto con tutoriales sobre cómo crear cada uno.
  • 16 Tutoriales y técnicas de gráficos CSS y gráficos de barras utilizables: una colección de tutoriales para crear cuadros y gráficos basados ​​en CSS para la visualización de datos.
  • Mejores citas de extracción: no repita el marcado: una guía para crear citas de extracción que no incluye ningún marcado innecesario y repetido.
  • Efecto de texto de degradado CSS: un tutorial para crear degradados de texto para sus encabezados.
  • 43 Tutoriales de PSD a XHTML, CSS Creación de diseños web y navegación: una enorme lista de tutoriales para convertir sus diseños de Photoshop en archivos CSS / XHTML válidos.
  • Mapas de imágenes CSS: un tutorial para crear mapas de imágenes con CSS y XHTML.
  • Cuadrículas fluidas: una guía para crear diseños basados ​​en cuadrículas fluidas.
  • Cómo depurar CSS: un tutorial de técnicas de depuración para CSS.
  • 10 técnicas CSS desafiantes pero impresionantes: una guía de algunas técnicas CSS avanzadas que vale la pena aprender.
  • Más de 50 scripts de navegación basados ​​en pestañas CSS de Clean Clean: una gran colección de navegación con pestañas con CSS.
  • 30 Técnicas y ejemplos excepcionales de CSS: una gran colección de efectos CSS realmente geniales, que incluyen una galería de imágenes hoverbox, un pie de página adhesivo y un efecto de acordeón solo CSS, entre otros.
  • 101 Técnicas CSS de todos los tiempos Parte 1 - Parte 2 - Otra gran colección de excelentes técnicas de CSS con tutoriales para cada uno.
  • Dead Center: un breve tutorial sobre cómo colocar algo en el centro de una ventana del navegador (tanto vertical como horizontalmente).
  • Diseños líquidos de la manera fácil: un tutorial completo sobre la creación de diseños CSS líquidos.

Plantillas y marcos

  • La cuadrícula CSS de 1 Kb: este es probablemente el sistema de cuadrícula más simple y compacto que existe, pero incluye una herramienta para personalizar la cuadrícula antes de la descarga.
  • CSS Zen Garden: CSS Zen Garden es un marco HTML y CSS diseñado para mostrar la variedad de diseños que se pueden crear con CSS. Además del marco, hay toneladas de plantillas y temas disponibles.
  • Diseños líquidos CSS de varias columnas perfectos: una colección de diseños líquidos compatibles con iPhone.
  • Sistema de cuadrícula 960: un sistema de cuadrícula CSS basado en un diseño básico de 960 píxeles de ancho.
  • Plantillas CSS gratuitas: un sitio que ofrece más de 200 plantillas CSS lanzadas bajo la licencia Creative Commons Attribution 2.5.
  • Plantillas CSS agradables y gratuitas: una docena de plantillas para comenzar con diseños basados ​​en CSS, que incluyen un cuadro centrado dinámico, cuatro columnas dinámicas y diseños centrados totales de cuadro fijo.
  • Pequeñas cajas: una colección de archivos CSS para una variedad de diseños.
  • Creación de prototipos con el marco CSS de Grid 960: una guía para crear maquetas de sitios web con Grid 960.
  • Creación de prototipos de una plantilla de página de inicio estilo revista con Blueprint CSS Framework: una guía muy valiosa para crear revistas y diseños de tipo cuadrícula con Blueprint.

Galerías y vitrinas

  • CSS Stars: una galería que ofrece algunas docenas de diseños basados ​​en CSS para su lectura.
  • Basado en CSS: una enorme galería de CSS con miles de diseños.
  • Unidad CSS: una galería CSS clasificada.
  • CSS Mania: una galería de CSS que existe desde hace cinco años.
  • CSSelite.com - Una galería categorizada de diseños CSS.
  • CSS Creme: una enorme galería de sitios clasificables por color, categoría o diseñador que también incluye tutoriales y noticias.
  • csswebsite: una galería que le permite filtrar por categoría, fecha o color.
  • 40 hermosos diseños de sitios web CSS oscuros: una publicación de la galería que ofrece algunos diseños oscuros geniales creados con CSS.
  • Lo mejor de CSS Design 2008: otra publicación de la galería que muestra los mejores diseños CSS de 2008.
  • CSS Beauty Gallery: una galería CSS con entradas enumeradas cronológicamente. Incluyen diseños desde 2004 hasta el presente.

Herramientas

  • Firebug: un complemento de Firefox que te permite ver y editar CSS y otros códigos directamente en Firefox.
  • Aardvark: una extensión de Firefox que le permite ver cada elemento HTML y clase o id.
  • CSSViewer 1.0.3: una extensión de Firefox que te permite ver las propiedades de CSS en cualquier página web.
  • GridFox: una extensión de Firefox para ayudar en el diseño de la cuadrícula superponiendo una cuadrícula en cualquier sitio web.
  • CodeBurner: un complemento para Firefox o Firebug que hace que el material de referencia HTML y CSS esté disponible en su navegador.
  • IzzyMenu: un creador de menú CSS gratuito que admite la creación de submenús desplegables DHTML.
  • Spanky Corners - Un generador de caja de esquina redondeada.
  • CleanCSS: un formateador y optimizador de CSS.
  • Selector de navegador CSS: una herramienta útil para potenciar los selectores CSS basados ​​en el navegador del visitante.
  • Compresor CSS: un compresor de archivos CSS.
  • CSS Layout Generator: un generador de CSS simple en línea que crea un marco de diseño básico.
  • CSSTidy: un analizador y optimizador CSS descargable de código abierto.
  • CSS Drive CSS Compressor: una herramienta de compresión CSS que tiene un modo básico y un modo avanzado, según sus necesidades.
  • Tabulador: agrega sangrías a sus archivos de código.
  • CSSFly: un editor de CSS y XHTML basado en navegador que funciona en tiempo real.
  • List-O-Matic: una herramienta para crear menús de navegación basados ​​en listas con CSS.
  • Markup Maker: crea un documento marco XHTML / HTML válido con las ID de página que ingresa.
  • CSSMate: un editor de CSS en línea.
  • Conjunto de tipos CSS: un generador de tipografía CSS.
  • Construir 0.5: una herramienta visual para crear diseños basados ​​en el marco Blueprint.
  • PXtoEM.com: una herramienta de conversión de píxeles a tamaño EM.
  • Editores CSS revisados: una colección de revisiones de algunos de los editores CSS más populares.
  • YAML Builder: una herramienta visual para crear diseños de YAML.
  • Gridinator: un generador de diseño de cuadrícula CSS.
  • Lista de herramientas CSS: una gran lista de herramientas CSS para todo, desde fuentes hasta optimizadores.
  • 50 Herramientas CSS extremadamente útiles y potentes: una lista de algunas herramientas CSS excelentes, junto con un poco sobre cada una.

Blogs y sitios de noticias específicos de CSS

  • CSS-Tricks - Un blog dedicado a CSS de Chris Coyier.
  • CSS definitivo: si bien no se ha actualizado en unos pocos meses, este blog aún ofrece excelentes publicaciones archivadas.
  • CSS Help Pile: una colección cada vez mayor de tutoriales y recursos de CSS.

¡Que tengas un buen día!

Bradley Nice,
Content Manager en ClickHelp.com: la mejor herramienta de documentación en línea para proveedores de SaaS