Entradas

Repasamos las posibilidades de la propiedad text-overflow de CSS3

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.

Leer más

Crear sombras con box-shadow en CSS3

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.

Leer más

Cómo crear efectos de resplandor con sombras CSS

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.

Leer más

Cómo utilizar varias imágenes de fondo con 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.

Leer más

¿Qué aporta Flexbox a CSS3?

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.

Leer más

Cómo utilizar las Media Queries de CSS3 para mejorar la visualización de nuestros proyectos web

Las Media Queries son una de las grandes ventajas de CSS3, ya que permiten saber qué sistema se está visualizando una página web y, en función de ello, aplicar unas reglas de estilo u otras.  Así, podemos servir un CSS personalizado, acorde las condiciones del navegador o dispositivo que nos visita. Como veremos a continuación, se han convertido en uno de los mejores recursos con los que cuentan los diseñadores para hacer sitios responsive.

Leer más

Maquetación web en varias columnas con CSS3

CSS3 realiza una maquetación directa del texto en diferentes columnas de manera automática, ya que posee distintos elementos y atributos que le confían al navegador la tarea de producir el texto en multicolumna. Desde que existe esta característica, la maquetación web goza de un interesante recurso para la presentación de la información y que a más de uno nos traía de cabeza para conseguirlo con otros medios, como las tablas. En este artículo explicamos cómo utilizar el elemento column y sus diferentes atributos.

Leer más

Cómo utilizar el atributo overflow-wrap para romper palabras en varias líneas

El atributo overflow-wrap  sirve para definir qué hacer cuando hay palabras que, por facilidad de lectura o integración en el diseño, se rompen en varias líneas. En este artículo explicamos cómo utilizar overflow-wrap, un atributo que nos ofrece la posibilidad de decidir el comportamiento de las palabras ante estos saltos de línea.

Leer más

Cómo crear formas avanzadas con border-radius

Si hace unos días nos aproximábamos a las funcionalidades de border-radius para crear bordes redondeados, ahora profundizamos un poco más. Con esta propiedad de CSS3, la imaginación es el límite a la hora de crear diferentes formas, añadir sombras o realizar incluso animaciones cualquier página web.

En este artículo, explicamos cómo sacar el máximo partido a este elemento, que nos resultará muy útil para incluir formas circulares en cualquier proyecto web y directamente desde el código.

Leer más

Bordes redondeados con CSS3

Seguimos profundizando en las características del HTML5 y lo hacemos repasando una de las funcionalidades más útiles de CSS3 para diseño web: crear bordes redondeados. Esto lo podemos hacer directamente con el atributo border-radius, que define qué curva tiene que tener el borde del elemento al que se le aplica. Para ello, CSS3 añade novedades en el control de los bordes de los elementos, permitiendo esquinas redondeadas, bordes con imágenes, sombras, etc.

Leer más