Entradas

¿Cuál es el flujo de trabajo habitual en la creación de páginas y aplicaciones web?

El desarrollo de un proyecto web pasa por diferentes estados hasta su publicación, por lo que es necesario establecer un flujo de trabajo que organice las diferentes etapas, minimice los errores y mantenga siempre  el foco en el aspecto, funcionalidades y experiencia de uso de nuestra aplicación y sitio web. A continuación, te mostramos el flujo de trabajo más habitual (o, al menos, recomendado) que podemos utilizar y que nos permitirá gestionar con éxito nuestros proyectos web.
Leer más

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

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 aplicar sombras y otros efectos a los textos con el atributo text-shadow de CSS

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.

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 un bocadillo de cómic con CSS

Ahora que ya hemos hablado de adaptar los textos a las formas de una imagencrear elipses y otras formas con border-radius, vamos a dar un paso más y  ver una de las muchas técnicas que podríamos usar para crear los bocadillos de las historias de cómic, aquellos que hacen entender que los personajes están hablando o pensando y que puede resultar un recurso muy útil para cualquier página web.

Lo haremos sólo con CSS, sin apoyarnos en imágenes. Esto que optimizará el sitio web y nos permitirá reutilizarlo fácilmente, solo a partir del nombre de una clase que colocaremos a todos los elementos que tengan que representarse como el elemento balloon, el nombre por el que se conocen los bocadillos de cómic en inglés.

Leer más

Imágenes responsive con la etiqueta Picture

En muchas ocasiones, el diseño responsive se complica al utilizar las imágenes. Más allá de utilizar la etiqueta Viewport, que vimos hace unos días, o de asignar a las imágenes una anchura relativa con CSS, necesitamos un  método que nos permita seleccionar la imagen más adecuada para cada pantalla en cuanto a su tamaño y resolución. Para eso, tenemos la etiqueta Picture, cuyas principales características explicamos en este artículo.

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

Viewport, una etiqueta imprescindible para el diseño responsive

Viewport es  la etiqueta que mejor representa la web en movilidad, ya que nos permite indicar cómo se verá un proyecto web en dispositivos móviles. Apple la creó para decirle al iPhone como debería renderizar el documento, convirtiéndose desde entonces en un estándar que ya está soportado por la mayoría de dispositivos.

Como definición rápida, diremos que viewport podría traducirse como vista o ventana y nos sirve para definir qué área de pantalla está disponible al renderizar un documento, nivel de escalado y el zoom que debe mostrar inicialmente. Todo ello, con parámetros que le damos a la propia etiqueta META.
Leer más