Laravel 5.4 trae consigo un nuevo compilador de assets, Laravel Mix. Este nuevo componente viene a sustituir a Laravel Elixir y viene con una potente API que permite una alta personalización del procesado de nuestro código CSS y JS de una forma rápida y sencilla.

En el ámbito de la creación, se supone que las tendencias cambian. Tienen una naturaleza dinámica de forma que la tendencia que hoy es muy utilizada, al día siguiente estará desaparecida. En el diseño y desarrollo web hay muchas tendencias que van y vienen, sin embargo, sólo unas pocas mantienen la atención de los desarrolladores un tiempo prolongado. La Web es una plataforma única que ha ido evolucionando y cambiando desde sus inicios. Estas son algunas tendencias de desarrollo web que debes considerar. 1. Diseño web de…

Si alguna vez has utilizado software de edición de imágenes como Adobe Photoshop, Affinity Photo o Sketch App es probable que tengas alguna experiencia con los modos de fusión. Es una de esas características que a los diseñadores les gusta ya que esencialmente es un método para conseguir resultados más elaborados e interesantes, pero los desarrolladores de aplicaciones para usuario tienden a odiarlo porque son muy laboriosos de poner en práctica. ¡Pero ya no! Vamos a ver cómo.

Ante la pregunta de si es posible rotar libremente un elemento en la pantalla mediante el movimiento del ratón o el dedo (en las pantallas táctiles) sólo con HTML5 y CSS, la respuesta típica sería “no, no sin JavaScript” ... pero esta solución que proponemos sólo necesita unas pocas líneas de JS, y esta variación tiene la adición interesante de las variables CSS.

Son conocidas y muy útiles las unidades CSS vw y vh, pero las unidades vMin y vMax además de poco conocidas, son menos aún comprendidas. Y es una pena puesto que éstas tienen nuevos usos en caso de desarrollo web.

Sabemos que 1vh es equivalente al 1% de la altura de la ventana gráfica actual (es decir, la ventana del navegador abierta), mientras que 1vw equivale al 1% de la anchura de la ventana gráfica actual. min y vmax son esas mismas unidades, pero en respuesta a reglas particulares.

En la revista NET del mes de Junio de 2016 encontramos un interesante artículo donde Matthias Martin nos inspira a mejorar nuestras cualidades en CSS con este nuevo reto “100 días con CSS” donde  estuvo 100 días seguidos donde cada uno de ellos elaboraba un pequeño diseño con CSS, que nos puede ser muy útil a la hora de coger idea para nuestros diseños.

Para los diseñadores web es importante conocer y dominar buenas herramientas de software que faciliten el trabajo y nos permitan ahorrar tiempo, y si son gratis, mucho mejor. Aquí te listamos 10 herramientas muy útiles –y gratuitas- de HTML, CSS y SASS. Que las disfrutes!

 

Trabajar con SVG en un flujo de trabajo RWD (Responsive Web Design) por lo general implica una fase de diseño y una fase de desarrollo. La fase de diseño está a cargo de los diseñadores que pueden saber o no cómo codificar. Y debido a la naturaleza del SVG tanto como formato de imagen, como formato de documento, cada paso que se da en el editor de gráficos al crear el SVG afecta directamente al código resultante y por lo tanto al trabajo del desarrollador a cargo de la incrustación, scripting o animación del SVG.

Es muy frecuente que el código resultante después de una optimización de un archivo SVG requiera una revisión debido a que la creación del SVG por parte de los diseñadores no está orientado a una mejor optimización del código, lo tratan como un formato de imagen más.

Por ello, hay una serie de consejos aplicables que en la creación del SVG que mejoran el resultado. En este artículo nos centraremos en el editor de gráficos Adobe Illustrator (AI).

La aplicación de imágenes de fondo a los elementos es una de las características más usadas en CSS, y existen muchas propiedades que nos permiten controlar diferentes aspectos de este elemento.

Un elemento puede tener más de una imagen de fondo. Si deseas aplicar más de una imagen de fondo, puedes aportarlas dentro de una lista de valores separada por comas para la propiedad background-image. Esta se utiliza para especificar la posición de la imagen de fondo, y esta propiedad merece un estudio a fondo ya que a causa de sus diferentes valores se obtienen resultados diferentes, algunos de los cuales podrían ser nuevos si no eres un experto en CSS.

Hoy en día la mayor parte de los sitios web actuales utilizan tipografías no predeterminadas, de sistema, ya que las tipografías personalizadas aportan mucha frescura y modernidad al diseño de la página. Sin embargo, también es sabido que los archivos de fuentes son pesados, pueden requerir el acceso a otros archivos independientes para los formatos de negrita y cursiva, con lo que el resultado es una mayor ralentización de carga del sitio web. En este artículo vamos a mostrar algunos consejos para acelerar esta carga.