Entradas

Personalización de los campos input de texto con CSS

Si queremos quitar los  bordes a  los campos input de texto o personalizarlos al máximo, CSS nos ofrece muchas alternativas para modificar los estilos y que así podamos conseguir que su aspecto se adapte a todos los requerimientos visuales de nuestra página web, como explicamos en este artículo.

Leer más

ITCSS, el triángulo invertido que facilita el trabajo con las hojas de estilo CSS

Las siglas ITCSS, que se corresponden con Inverted Triangle architecture for CSS (Arquitectura CSS del Triángulo Invertido en inglés), estandarizan las mejores prácticas para una forma de trabajar que facilita el Desarrollo Web con  hojas de estilo CSS y que facilita su crecimiento y adaptabilidad a medio y largo plazo, como explicamos en este artículo.

Leer más

¿Qué es CSS Grid?

Hace poco hablábamos de Flexbox, uno de los mecanismos de CSS más útiles en la  maquetación de páginas web, incluso lo enfrentábamos con Grid. Sin embargo, teníamos pendiente profundizar un poco más en el propio CSS Grid , otro de los recursos de diseño CSS para disponer con mayor libertad los elementos en una página web o aplicación, algo que hacemos en este artículo.

Leer más

Cómo aplicar un diseño a los temas propios de WordPress

En los últimos artículos hemos visto cómo crear un template desde cero y hemos empezado a trabajar con el API PHP de WordPress para controlar el comportamiento de los contenidos gestionados por este CMS con los temas propios. Sin embargo, hasta ahora era todo simple texto y un template debería destacar visualmente con otro tipo de elementos. En este artículo, damos un paso más en la creación de temas en WordPress y repasamos cómo aplicar el diseño y la maquetación web que queremos a nuestras plantillas e integrar fácilmente los archivos externos que necesitamos (imágenes, CSS, etc.)

Leer más

¿Grid o Flexbox? ¿Qué resulta más útil en diseño y maquetación web?

En las últimas semanas hemos hablado bastante de Flexbox, uno de los mecanismos de CSS más útiles de cara a la  maquetación de páginas web. Sin embargo, nos quedaba compararlo con Grid, otra de las opciones que nos permiten llevar más allá las posibilidades de CSS, algo que hacemos en este artículo. Y, sólo por enfrentarlos en una primera pasada, tenemos que reconocer que Grid puede hacer cosas que Flexbox no puede hacer y Flexbox puede hacer cosas que Grid no puede hacer. Con la ventaja de que ambos pueden trabajar juntos: un elemento de Grid puede ser un contenedor Flexbox y un elemento de Flexbox puede ser un contenedor de Grid.

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

Ionic 2, un framework diseñado para las aplicaciones híbridas que da el salto a las aplicaciones web

Aunque originalmente Ionic 2 era un framework para el desarrollo de aplicaciones híbridas pensado para móviles y tablets, ahora se utiliza también para realizar practicamente cualquier aplicación web. Desde el punto de vista más práctico, Ionic 2 es una herramienta con la que se obtienen rápidos resultados sin invertir muchos recursos, ya que podemos reutilizar el código para las diferentes versiones que queremos desarrollar. Esta ventaja, como bien sabe cualquier desarrollador, no es banal.

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