Manuales y tutoriales de CSS en español

Microaprendizaje / Tiempo de lectura: 11 minutos

Índice de contenidos: 📖

1. Introducción.
2. Descargas y actualizaciones.
3. Recopilación de cursos y manuales en Internet.
4. Recursos relacionados.
5. Libros y ebooks relacionados.
6. Librerías CSS.

1. Introducción a las hojas de estilo CSS

 

Las hojas de estilo en cascada, CSS Cascading Style Sheets, se ocupan del formato de numerosas páginas web de manera eficiente, sobre todo en lo relativo al diseño web.

 

Actualmente son un estándar en la creación de páginas web, siendo aceptados por la totalidad de los navegadores existentes en mayor o menor grado (iExplorer, Firefox, Safari, Chrome, Opera, …).

 

Este punto es muy importante para los diseñadores web, ya que sus diseños dependen de las versiones que los navegadores acepten CSS y su grado de compatibilidad.

 

La gran ventaja de CSS es que separa el contenido web de su aspecto de manera que podemos definir como se «dibuja» un único contenido en diferentes pantallas o dispositivos TFT, celulares, con diferentes resoluciones…

 

Constituye una manera ordenada de construir nuestro catálogo de estilos, ahorrando tiempo y simplificando el trabajo del desarrollador web.

 

Programar directamente tus páginas web en lugar de usar gestores de contenidos CMS como WordPress, Joomla o Drupal, supone una gran alternativa a la hora de personalizar el diseño y optimizar webs para el posicionamiento SEO.

 

Aunque en fase iniciales, muchos proyectos de Internet utilizan frameworks, tipo Bootstrap, ya que resultan un gran ahorro de tiempo y esfuerzo. Los grandes proyectos, al final, terminan por diseñarse desde CSS puro para hacer el código en el front-end mucho más eficiente.

 

1.1 Ejemplos de sintaxis básica CSS

 

Para cambiar el tamaño de la fuente se puede hacer en píxeles o puntos.

{
font-size: 20px;
}

Pero actualmente debido a la gran variedad de tamaños de pantalla, el texot e imágenes han de ser responsive. Por ello, se recomiendan medidas en porcentajes %, tipo em, rem o vw

P.e.

body { font-size: 5vw; }

 

Ejemplos de efectos CSS

1. Sombreado: se utiliza para añadir profundidad y perspectiva a un elemento. Se define con la propiedad box-shadow. Para sombrear el texto con CSS, puedes usar el efecto de sombreado de texto de CSS3. Por ejemplo, en HTML:

<h1>Título con sombreado de texto</h1>

Ejemplo CSS

h3 { text-shadow: 2px 2px 4px #000000; }

 

2. Desenfoque: se utiliza para dar un efecto de desenfoque a un elemento. Se define con la propiedad filter.

 

3. Rotación: se utiliza para rotar un elemento. Se define con la propiedad transform.

 

4. Desvanecimiento: se utiliza para crear un efecto de desvanecimiento gradual. Se define con la propiedad opacity.

 

5. Márgenes: se utiliza para agregar un margen a un elemento. Se define con la propiedad margin. 6. Reemplazo de texto: se utiliza para reemplazar el contenido de un elemento con otro contenido. Se define con la propiedad content.

 

7. Animación: se utiliza para crear animaciones. Se define con la propiedad animation. 8. Transformación: se utiliza para cambiar el tamaño, la forma, la posición y la orientación de un elemento. Se define con la propiedad transform.

 

Código con efectos bonitos para web

 

1. Animaciones CSS: esta es una técnica simple pero efectiva para agregar efectos interesantes a los elementos de tu sitio web. Las animaciones CSS se pueden usar para destacar elementos y llamar la atención de los visitantes al navegar.

 

2. Imágenes de fondo animadas: las imágenes de fondo animadas son una excelente forma de dar vida a tu sitio web. Puedes usar animaciones GIF o videos como fondo para tus páginas.

 

3. Efectos de desplazamiento: estos efectos son excelentes para destacar contenido importante mientras los usuarios navegan por tu sitio. Puedes usar efectos de desplazamiento como desvanecimiento, desplazamiento lateral, zoom, etc.

 

4. Efectos de transición: los efectos de transición le dan a tu sitio web un toque visual único. Estos efectos se usan para cambiar entre elementos, como una imagen a una página, con una animación suave.

 

5. Efectos de sonido y música: los efectos de sonido y música son una excelente forma de añadir un componente interactivo a tu sitio web. Puedes usar música como fondo para una página o agregar efectos de sonido cuando los usuarios interactúan con algunos elementos.

 

2. Descargas y actualizaciones

 

Última recomendación oficial para CSS 2.1. de la W3C  (07 June 2011). Te recomendamos revisar las últimas actualizaciones de los estándares HTML5 y CSS3.

 

• jQuery Mobile, es un framework que combina HTML5 y jQuery en el diseño de portales web móviles.

 

• Bootstrap framework. Es un entorno de desarrollo basado en la tecnología CSS para sitios web adaptados a móviles (responsive).

 

• Preprocesadores CSS, como LESS, SASS y Stylus facilitan y aceleran la creación de código CSS un pseudo-código que es convertido a CSS.

 

 

3. Nuestra selección de cursos, manuales y tutoriales de CSS3 en español:

 

• Libros web: Introducción a CSS y nivel avanzado de CSS. en librosweb.es, son unos tutoriales web muy completos.

 

• Manual de CSS3 en español para descargar y compartir gratis. Curso en PDF de CSS3 en español: El manual gratis en PDF, lo puedes descargar al final del mismo.

 

• Manual de referencia CSS1 descargable en PDF de jorgesanchez.net.

 

• Manuales CSS en PDF, con todo para comenzar a crear tus propias webs en el portal desarrolloweb.com, revisa los enlaces y el Manual CSS de hojas de estilo en PDF de la web xsvc.com.ve.

 

• Trucos CSS y códigos preformateados en soyautodidacta.com.

 

• Descarga del manual básico en PDF de CSS en cefire.edu.gva.es.

 

• Blog con técnicas avanzadas de diseño web CSS3 en tympanus.net (en inglés). Incluye numerosos ejemplos muy útiles como inspiración para nuevos diseños.

 

• MOOC gratuito: LESS de cero a experto en udemy.com.

 

• CSS Tutorial en w3schools.com.

 

4. Recursos relacionados.

 

• Tutoriales gratuitos de jQuery. Jquery es un entorno de desarrollo (framework) para Javascript gratuito que aporta efectos dinámicos para la programación web como AJAX de manera simplificada y compatible con todos los navegadores.

 

• Cursos, tutoriales y manuales gratuitos de HTML5. Recopialción de tutoriales y MOOCs gratuitos.

 

• Recopilación de tutoriales de desarrollo web. Desarrollo web con: ASP, CSS, CSS3 HTML, HTML5, jquery,  Adobe web, …

 

• Css-tricks.com gran site sobre CSS con cientos de ejemplos de código comentado paso a paso.

 

5. Bibliografía recomendada.

 

Si necesitas más referencias, estos son otros recursos sobre CSS de calidad que puedes adquirir fácilmente a través de Internet:

 

El gran libro de HTML5, CSS3 y Javascript (Google eBook) de Juan Diego Gauchat. Un manual de 354 páginas que trata sobre:

• HTML5, estilos CSS, Javascript,
• vídeo y audio, formularios y API forms,
• API Canvas, API drag and drop,
• Geolocation, web storage, indexedDB,
• API file, communication (AJAX),
• Web workers, API history
• y trabajar con la API offline (API de caché).

 

CSS Manual imprescindible (en papel) de Óscar Peña.

 

«Las hojas de estilo en cascada se han convertido en un recurso imprescindible en el diseño Web.

Entre sus principales virtudes se encuentra la reducción del peso global de una página Web, su independencia con respecto al código, y su flexibilidad para aportar estilos para diferentes medios, como pantallas de ordenador, dispositivos móviles, impresoras o dispositivos de Braille, entre otros.

 

Este Manual Imprescindible enseña los conocimientos básicos sobre CSS. Con la ayuda y opiniones de importantes especialistas se realiza un viaje por el interior de las hojas de estilo en cascada, su estructura, marcado, integración y uso en documentos HTML o XHTML.

 

Aprenderá a organizar el marcado a la hora de diseñar, a transformar un diseño creado con un editor gráfico como Photoshop en una hoja de estilos limpia y preparada, y a completar la transición de la vieja filosofía de trabajo con tablas HTML al nuevo modelo de caja. »

 

 

Títulos relacionados con programación CSS.

En el proceso de aprendizaje de un lenguaje de programación, viene muy bien disponer de un buen libro de referencia que nos de base para posteriormente ir ampliando con diferentes recursos de Internet …

 

CSS Secrets: Better Solutions to Everyday Web Design Problems de Lea Verou.

«En esta guía práctica, Lea Verou, experta en CSS, proporciona 47 técnicas sin documentar y consejos para ayudar a los desarrolladores de CSS de nivel intermedio a avanzado a diseñar soluciones elegantes para una amplia gama de problemas cotidianos de diseño web.

 

En lugar de centrarse en el diseño, CSS Secrets le muestra cómo resolver problemas con el código. Aprenderá cómo aplicar el enfoque analítico de Lea a prácticamente todos los problemas de CSS que enfrenta para lograr resultados SECO, mantenibles, flexibles, ligeros y que cumplan con los estándares.

 

Inspirada por sus charlas populares en más de 60 conferencias internacionales de desarrollo web, Lea Verou proporciona una gran cantidad de información para temas que incluyen:

• Fondos y fronteras.
• Formas.
• Efectos visuales.
• Tipografía.
• Experiencia de usuario.
• Estructura y diseño.
• Transiciones y animaciones.»

 

 

CSS and Documents de Eric A. Meyer. Puedes consultar capítulos de ejemplo en la Tienda Kindle. 

«Cascading Style Sheets (CSS) es una herramienta poderosa que transforma la presentación de un documento o una colección de documentos, y se extiende a casi todos los rincones de la Web, así como a muchos entornos que no son web.

 

En esta introducción gratuita a Cascade Style Sheets, aprenderá cómo CSS le permite cambiar completamente la forma en que un agente de usuario presenta los elementos del documento. Descubrirás los orígenes de esta especificación y cómo los estilos CSS funcionan con HTML.

 

Conozca cómo puede elegir hojas de estilo basadas en las características de un tipo de medio determinado, incluidas pantallas de escritorio, teléfonos habilitados para web, proyectores digitales, televisores, dispositivos Braille, documentos impresos e incluso varias representaciones de audio de un documento.

 

CSS y Documentos es un extracto de la próxima 4ta edición de CSS: The Definitive Guide.»

 

El gran libro de HTML5, CSS3 y Javascript de Juan Diego Gauchat. HTML5, con estilos CS3, ejercicios prácticos, cada capítulo desarrolla ejemplos prácticos desarrollando código con mayor dificultad conforme se avanza en cada lección.

 

API de Javascript, librerías externas, programar y optimizar formularios, reproducir archivos multimedia, subtítulos de vídeo, controlar la entrada y salida de cualquier elemento en el modo de pantalla completa, streamig, crear gráficos y animaciones 2 y 3D para la web, programar vídeo juegos, controlar cómo se comporta el ratón, geolocalización, entre otros …

 

 

HTML & CSS de Jon Duckett. Este libro estudia los lenguajes HTML y CSS de una manera que los hace accesibles a los aficionados todo el mundo, estudiantes y profesionales. Utiliza gráficos de información y fotografías a todo color para explicar los temas de una manera simple y atractiva.

 

 

Thinking in CSS de Aravind Shenoy. Tienda Kindle.

«Obtendrá un conocimiento intermedio de CSS después de leer este libro. En lugar de vagar a través de un montón de teoría, entenderemos CSS de manera más práctica para que podamos diseñar una página web usando CSS.

 

Hemos usado el Bloc de notas para los ejemplos de este libro. Alternativamente, también puede usar Notepad ++ o cualquier editor avanzado.

 

Todo lo que necesita hacer es copiar el código y pegarlo en el Bloc de notas. Tras la ejecución, obtendrás la salida como se muestra en las capturas de pantalla. Capturas de pantalla se proporcionan para cada código de muestra.

 

La codificación mejora con la práctica. Los ejemplos en este libro son compatibles con casi todos los navegadores.

 

En lugar de usar el código textual, puede modificar el código y ver el cambio en la salida, entendiendo así los matices sutiles de CSS. Al final del libro, con la práctica, puede lograr mejores cosas y familiarizarse más con CSS.»

 

 

HTML5 y CSS3 para sitios con diseño Web Responsive de Christophe Aubry.

«El objetivo del diseño web responsive es crear sitios web que se adaptan automáticamente a cualquier resolución para obtener así una visualización óptima, independientemente del tipo de pantalla, ya sea de ordenador, tableta o smartphone.

 

En este libro, empezaremos con un recordatorio sobre los métodos de diseño «clásico» y sus limitaciones antes de presentar la técnica del diseño basado en el uso de tablas y CSS3. A continuación, veremos cómo utilizar las cuadrículas de diseño, las cuadrículas fijas y fluidas.

 

El Responsive Web Design se basa, fundamentalmente, en las media queries CSS3: aprenderemos a dominar esta técnica gracias a numerosos ejemplos.

 

Pasaremos después a los diferentes aspectos del diseño responsive: las cuadrículas, las imágenes y la tipografía.

 

Para optimizar el trabajo, aprenderemos a utilizar algunos frameworks CSS, con los que podremos utilizar toda una serie de componentes HTML5 / CSS3 para diseñar de forma eficaz sitios responsive.

 

También veremos la utilidad de las librerías JavaScript para gestionar los problemas de compatibilidad con los navegadores.»

 

 

CSS: Learn CSS In A DAY! El curso definitivo para aprender los conceptos básicos de CSS en ningún momento (CSS, curso CSS, desarrollo CSS, libros CSS, CSS para principiantes) (English Edition) de Acodemy. Tienda Kindle.

 

 

CSS: The Missing Manual de David Sawyer McFarland. Tienda Kindle.

 

«CSS le permite crear sitios web de aspecto profesional, pero aprender sus puntos más finos puede ser complicado, incluso para los desarrolladores web experimentados.

 

Esta edición completamente actualizada proporciona los consejos, trucos e instrucción más modernos y efectivos basados ​​en tutoriales sobre CSS disponibles en la actualidad.

 

Aprenda a usar nuevas herramientas como Flexbox y Sass para crear páginas web que se vean geniales y se ejecuten rápidamente en cualquier computadora de escritorio o dispositivo móvil. Ideal para diseñadores casuales y experimentados por igual.

 

Las cosas importantes que necesitas saber:

 

Comience con lo básico. Escriba HTML compatible con CSS, incluidas las etiquetas HTML5 reconocidas por los navegadores de hoy.

 

Diseño para dispositivos móviles. Crea páginas web que se ven geniales cuando los visitantes las usan mientras viajan.

 

Haz que tus páginas trabajen para ti. Agrega animaciones que capturan la imaginación y formas que hacen el trabajo.

 

Toma el control de los diseños de página. Utilice técnicas de diseño profesional como flotadores y posicionamiento.

 

Haz tus diseños más flexibles. Diseñe sitios web con Flexbox que se ajusten a diferentes dispositivos y tamaños de pantalla.

 

Trabajar de manera más eficiente. Escriba menos código CSS y trabaje con archivos más pequeños, utilizando Syntactically Awesome Stylesheets (Sass).»

 

 

HTML5, CSS3 y JavaScript – 2ª Edición (Programación) de Julie C. Meloni.

 

La autora de este libro es una experta en el manejo de estas tecnología web en grandes proyectos. «Enseña a utilizar conjuntamente HTML, hojas de estilo CSS y JavaScript para diseñar, crear y mantener sitios Web para cualquier dispositivo.»

 

Va de menos a mayor dificultad. «Aprenda a utilizar HTML5 para crear el framework de su sitio Web, CSS para generar el diseño y tipografía; e incorpore interactividad con JavaScript y jQuery.

 

Contiene ejemplos prácticos, preguntas y ejercicios al final de cada capítulo, que le ayudarán a comprobar sus conocimientos y habilidades en el desarrollo Web.»

 

Aprende CSS Fácilmente de Patricia González R. Disponible en la Tienda Kindle. Es un libro que va de menor a mayor dificultad, fácil de seguir por usuarios con un mínimo de conocimientos de programación html. Incluye ejercicios prácticos.

 

 

6. Librerías CSS (Framework)

 

Resultan de gran ayuda para no reinventar la rueda. Su flujo de trabajo consiste en reutilizar código frontend, por así decirlo.

 

Los resultados visuales y funcionales, son espectaculares y el tiempo dedicado y la curva de aprendizaje mínimos. Ahora, esto no quita que aprendamos las sintaxis de CSS por si tenemos que hacer desarrollos a medida o que sean más libianos.

 

• Bootstrap 4, (quizá el más popular a día de hoy)

• Bulma,

• Foundation,

• Semantic UI,

• Milligram,

• UIkit,

• Susy,

• Materialize,

• Skeleton,

• Pure,

 

 

Ir a la Unidad 1.2 …