TEMAS de CSS

Si picas a mano multitud de código CSS, un pre-procesador puede ayudarte a disminuir en gran medida los niveles de estrés y sobre todo a ahorrarte un montón de tiempo, que puede utilizar para hacer otras cosas. El uso de herramientas como Sass, Less, Stylus o PostCSS hace que las hojas de estilo extensas y difíciles de entender sean más asequibles y gestionables. Gracias a características como el uso de variables, funciones o los mixins, tu código estará mejor organizado. Lo que te permite desarrollar mucho más rápido y cosechar menos errores.
En este artículo vamos a explicarte cómo utilizar Sass y te enseñaremos algunas de sus características.

Los tooltips son los "globos de ayuda" que aparecen al posicionar el ratón sobre un determinado elemento. Últimamente se están poniendo de moda en el diseño web porque permiten añadir mucha información útil a un sitio o aplicación web sin tener que "ensuciar" demasiado la interfaz.
Siempre ha sido posible crear tooltips solamente con CSS, sin necesidad de utilizar ninguna librería JavaScript. Sin embargo, antes de CSS 3 este tipo de tooltips eran muy rudimentarios y por eso muchos diseñadores recurrían a soluciones basadas en JavaScript. En este artículo vamos a hablar sobre Hint.css la librería para crear tooltips modernos exclusivamente con CSS.

Las variables CSS, técnicamente llamadas "propiedades CSS no estándar", simplifican tus archivos CSS y permiten crear efectos tan interesantes como cambiar dinámicamente los estilos aplicados en una página y mejorar las características de las propiedades CSS estándar.
Google Chrome era el único navegador importante que todavía no soportaba estas variables CSS. Sin embargo, a partir de su versión 49 ya están disponibles, por lo que ya es seguro usar variables CSS si tus usuarios usan navegadores modernos (Firefox 43+, Safari 9.1+, iOS Safari 9.3+, Chrome 49+).

Si tu sitio o aplicación web utiliza fuentes web, controlar cómo se cargan puede ser muy importante para mejorar el rendimiento percibido por tus usuarios. La nueva propiedad font-display disponible para @font-face permite a los diseñadores controlar cómo se muestra el sitio web en función de cuánto tardan en descargarse las fuentes web.

Sencilla guía de introducción a CSS nivel básico.
Contiene:
1. Aprender CSS es fácil si te lo planteas bien
2. ¿Cómo funcionan las hojas de estilo en cascada?
3. Los conceptos clave en las hojas de estilo CSS
3.1. Reglas, selectores y propiedades
3.2. La cascada: herencia, sobreescritura y conflictos de estilos
4. Un ejemplo práctico
5. Propiedades básicas que deberías conocer
5.1. Maquetación básica
5.2. Fuentes y texto
5.3. Color y fondos
5.4. Listas
5.5. Bordes
6. Vincular los estilos CSS a páginas HTML
6.1. Hojas de estilo CSS inline
6.2. Hojas de estilo CSS internas
6.3. Hojas de estilo CSS externas
7 Personalizar CSS en blogs: WordPress y Blogger
7.1. CSS en Blogger
7.2. CSS en WordPress.org
7.3. CSS en WordPress.com
8. Referencias para profundizar más

¿Qué se entiende por un framework CSS? ¿Cuál debemos utilizar según sus limitaciones o posibilidades? Ventajas e inconvenientes de los principales frameworks css comparados. Comparamos: 960, Blueprint, Bootstrap, Foundation y UiKit.

Muchas son las propuestas para insertar menús en nuestras páginas Web, típicamente se han utilizado desde simples esquemas con hipervínculos, listas numeradas, rutinas en JavaScript, applets de Java, plug-ins de Abobe Flash, … por citar algunas soluciones populares.
En el presente artículo presentamos una alternativa que consideramos solvente y muy eficiente en varios aspectos, como su apariencia totalmente personalizable y facilidad de programación, o como en el escaso sobrecosto que puede suponer para el transito a través de Internet, tanto en tamaño, como en código potencialmente peligroso. Lo que entraría en el ámbito más general de la optimización de código HTML.

En este artículo voy a explicar como crear una rotación de palabras con animación tan sólo usando CSS3.

Las imágenes son una de las partes más importantes del diseño web. Normalmente dejamos que sean los navegadores los que redimensionen y escalen las imágenes para que encajen bien en el diseño y se vean lo mejor posible. No obstante, en ocasiones es mejor controlar explícitamente cómo se escalan las imágenes.

Gracias a preprocesadores como Stylus podemos crear un CSS mucho más sencillo de mantener y editar. Aprovechando sus funciones podemos crear un pequeño framework a medida, nuestro propio Bootstrap, pero personalizado con las utilidades que necesitemos en nuestros proyectos.