Con text-overflow tenemos una propiedad de CSS3 muy útil para la maquetación web, ya que nos permite decidir qué aspecto tendrá un texto que no cabe dentro de la caja donde lo hemos ubicado, algo que antes había que solucionar a base de programación, detectando cuando no se mostraba la totalidad de un texto.
Aunque ya hemos hablado de cómo aplicar sombras y otros efectos a los textos con el atributo text-shadow de CSS, nos centramos ahora en box-shadow, otro atributo de CSS que nos permite sombrear elementos de una manera sencilla, ahorrando tiempo y haciendo las páginas más ligeras.
Hace años conseguir un efecto de resplandor requería apoyarnos en imágenes generadas desde programas de diseño gráfico como Photoshop. Sin embargo, CSS permite separar el contenido de la presentación y ofrece a los diseñadores un completo control de la apariencia, sin tener que acudir a elementos externos a los propios estándares de la web. En este artículo, conseguiremos que diversos elementos de la página tengan un resplandor exterior, creando el efecto de emisión de luz, y lo haremos únicamente con hojas de estilo CSS.
Uno de los atributos de CSS más utilizados es background-image, que nos sirve para poner una imagen de fondo en nuestra página web. Pero también podemos conseguir múltiples fondos al mismo tiempo. Como vemos en este artículo, con CSS3 tenemos la posibilidad directa de configurar varios fondos a la vez muy fácilmente y si usamos CSS1 también podremos hacerlo, aunque tendremos que echar mano de una alternativa y algo de trabajo adicional para que se visualice correctamente.
Flexbox (o Flexible Box) es un potente mecanismo de CSS3 que nació de la urgencia de cubrir unas necesidades específicas de maquetación de contenidos que CSS no era capaz de conseguir fácilmente, como las alineaciones verticales. De este modo, Flexbox perfecciona las posibilidades de diseño de CSS3 y permite componer una página web de manera muy sencilla y versátil, como explicamos a continuación.
Del 10 al 13 de mayo se celebran en Madrid las jornadas de diseño Procesos Creativos, organizadas por el equipo de profesionales interdisciplinar Culturoid y que cuentan con la colaboración de Adobe y Arsys, entre otros partners. Estas jornadas nacen con el objetivo de ir más allá del resultado final que generalmente vemos y mostrar los diferentes procesos de creación de diseñadores nacionales e internacionales desde la más pura autenticidad.
Procesos Creativos
10-13 de mayo
Centro Cultural Conde Duque, Revista Visual y Factoría Cultural de Matadero
Programa y entradas en www.procesoscreativos.es
Aunque no estés familiarizado con su nombre, es más que probable que ya hayas utilizado una aplicación Single-Page Application (SPA). Este formato que se ha popularizado enormemente en los últimos meses porque mejora y unifica la experiencia de usuario, independientemente del dispositivo de acceso. En este tipo de aplicaciones web, todo lo que se muestra y se procesa está dentro de la misma página, así que al pasar de una opción a otra no hace falta recargar el navegador y lo normal es que sea un único archivo desde el que se reproduce absolutamente todo.
El diseño de una página web no sólo se basa en la composición y las formas; la combinación de colores juega un papel muy importante y ayuda a transmitir sensaciones al usuario, por lo que es importante comprender cómo funciona. Aunque la mayoría de los editores resultan muy intuitivos en la gestión cromática (y son la mejor opción), siempre puede venir bien entender cómo es la relación entre los colores y el HTML.
Leer más →
El atributo text-shadow de CSS sirve, en un principio, para crear sombras en el texto. En este artículo, explicamos cómo utilizar esta regla de estilos y, con ejemplos prácticos, mostramos su versatilidad a la hora de crear muchos otros efectos interesantes, como darle un relieve a la tipografía o pixelizarla.
Tal y como vimos la semana pasada, las Media Queries de CSS3 mejoran la visualización de nuestros proyectos web. En esta ocasión abordamos el tema desde un punto de vista más práctico e incluimos algunos ejemplos que podemos implementar en el código y facilitarán que nuestros diseños web se adapten a cualquier medio y pantalla, algo imprescindible en el desarrollo web hoy en día.
Leer más →