Entradas

Aprende a usar Sass

En el artículo que publicamos recientemente sobre Sass, veíamos qué era y qué sintaxis tenía. Descubríamos sus principales caracterísiticas, que lo hacen destacable en la comunidad de desarrolladores y lo prefieren frente otros preprocesadores CSS, como Less o Stylus. Ahora que ya lo conocemos mejor, a continuación veremos cómo instalar Sass y empezar a utilizarlo.
Leer más

Si trabajas con CSS, tienes que conocer el preprocesador Sass

Seguramente hayáis leído el título de manera rápida y quizás hayáis visto un “SaaS” y solo para aclararlo: no hablaremos de nada relacionado con el Software as a Service, que se corresponde con el acrónonimo SaaS que tanto utilizamos al hablar de Cloud Computing. Si trabajáis con hojas de estilo CSS de manera fluida, os sonará  Sass (con dos eses), un preprocesador CSS que destaca por los tipos de sintaxis que trae. Su nombre se corresponde con Syntactically Awesome Style Sheets, que podríamos traducir como Hojas de Estilo Sintácticamente Alucinantes, y  supone toda una declaración de intenciones. En este artículo, os explicamos qué son los preprocesadores CSS y qué tiene de especial Sass para ser el más utilizado actualmente.
Leer más

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