Diseño archivos - Programando a medianoche

Guía completa de selectores de CSS3

Gustavo Cantero (The Wolf) — Wed, 26 Jul 2023 00:32:06 +0000

CSS3 trae consigo una amplia variedad de selectores que permiten a los desarrolladores web seleccionar y aplicar estilos a elementos HTML de manera precisa y eficiente. En este artículo, exploramos los diferentes tipos de selectores de CSS3 y proporcionamos ejemplos detallados de su uso.

La entrada Guía completa de selectores de CSS3 se publicó primero en Programando a medianoche.

Utilizar la condición @supports

Valentina Echezuria — Mon, 04 Nov 2019 20:02:24 +0000

La regla @supports nos permite establecer propiedades css que tengan o no soporte por parte de los distintos navegadores. Mediante este método podemos establecer valores para navegadores que tengan el soporte para el mismo, y al mismo tiempo determinar un valor para ese elemento.
En esta nueva publicación te mostraremos como utilizarla y como aplicarla para lograr un óptimo crossbrowsing.

La entrada Utilizar la condición @supports se publicó primero en Programando a medianoche.

Propiedad clip-path

Valentina Echezuria — Mon, 23 Sep 2019 14:24:42 +0000

En este artículo te enseñaremos como utilizar la propiedad clip-path de css, crear áreas de recortes con imágenes en formato svg y animarlas.

La entrada Propiedad clip-path se publicó primero en Programando a medianoche.

Cómo utilizar variables en CSS3

Valentina Echezuria — Wed, 21 Aug 2019 14:19:32 +0000

En este nuevo tutorial te enseñaremos cómo utilizar las variables en css, aplicarlas en distintos casos y conocer la compatibilidad entre exploradores.

La entrada Cómo utilizar variables en CSS3 se publicó primero en Programando a medianoche.

Nuevo diseño de iconos de Office 365

Valentina Echezuria — Tue, 21 May 2019 17:24:34 +0000

Las tendencias requieren nuevas formas de hacer las cosas, especialmente cuando se trata de imagen de marca.
Los diseñadores de Office han sido muy cuidadosos y meticulosos con el cambio, y se toman precaución con los rediseños.

La entrada Nuevo diseño de iconos de Office 365 se publicó primero en Programando a medianoche.

Guía completa para aprender a utilizar CSS Grid Layout

Valentina Echezuria — Thu, 02 May 2019 17:53:04 +0000

A diferencia de Flexbox que sirve para posicionamientos en una sola dimensión, el posicionamiento en Grid permite la disposición de elementos en 2 dimensiones, logrando establecer los valores o espacios que ocuparan los elementos dentro de una composición. En este artículo comentamos cómo utilizarlo.

La entrada Guía completa para aprender a utilizar CSS Grid Layout se publicó primero en Programando a medianoche.

Color Pantone del año 2019 Living Coral 16-1546

Valentina Echezuria — Wed, 10 Apr 2019 17:17:28 +0000

En esta oportunidad te presentamos el color Pantone del año 2019: Living Coral 16-1546. Cada año Pantone se ha encargado de elegir el color del año es cual influirá altamente en el desarrollo de productos, en la moda y en el diseño gráfico.

La entrada Color Pantone del año 2019 Living Coral 16-1546 se publicó primero en Programando a medianoche.

Tendencias en diseño web para 2019

Valentina Echezuria — Fri, 22 Feb 2019 16:17:28 +0000

El año 2019 ha llegado y con este vienen las tendencias de lo que se podrá ver en el diseño web durante el año, algunas de estas se han mantenido desde el 2018, como los degradados con colores brillantes, vídeos de fondo, etc. Algunas nuevas tendencias que veremos durante el año serán diseños con formas geométricas, tipografías con fondo, también veremos como los diseñadores buscando por salir de un sistema de cuadriculas, abogaran por un diseño de rejilla rota o asimétrico.

En este artículo, te presentamos algunas de estas tendencias

La entrada Tendencias en diseño web para 2019 se publicó primero en Programando a medianoche.

Tutorial para utilizar FlexBox en Css

Valentina Echezuria — Thu, 24 Jan 2019 13:16:03 +0000

Flexbox es un sistema de disposición de elementos flexibles en donde los elementos se adaptan y colocan automáticamente y es más fácil personalizar los diseños y establecer los parámetros para la visualización de los mismos en responsive.
En este tutorial te enseñaremos como aplicar la disposición flex y todas sus variantes para poder lograr un diseño donde puedas establecer el orden de los elementos de tu sitio web.

La entrada Tutorial para utilizar FlexBox en Css se publicó primero en Programando a medianoche.

Las 15 mejores fuentes de Google Fonts

Valentina Echezuria — Fri, 14 Dec 2018 19:12:59 +0000

Elegir una fuente es una elección muy importante a la hora de diseñar tu sitio web, tiene un gran peso sobre el Bounce Rate (Tasa de rebote:que se expresa de forma porcentual, mide el porcentaje de sesiones que ha visitado una sola página y se ha marchado.), especialmente si elijes para tu sitio una fuente de difícil lectura para el usuario.
Actualmente Google Fonts cuenta con 884 fuentes diferentes gratuitas, por eso puede ser difícil decidir cual de fuente utilizar, por eso basados en una estadística de Google Fonts Analytics te presentaremos las 15 mejores fuentes.

La entrada Las 15 mejores fuentes de Google Fonts se publicó primero en Programando a medianoche.

Animaciones y efectos para usar en tu sitio web

Valentina Echezuria — Tue, 04 Dec 2018 18:21:39 +0000

En esta oportunidad te presentamos una serie de efectos y animaciones para embellecer tu sitio y hacerlo mas atractivo para los usuarios.

La entrada Animaciones y efectos para usar en tu sitio web se publicó primero en Programando a medianoche.

Efectos de textos con CSS

Valentina Echezuria — Tue, 13 Nov 2018 15:29:18 +0000

Hoy en día CSS3 nos trae la posibilidad de jugar con los textos y tipografías creativamente, se pueden renderizar efectos que antes sólo se podían hacer en Photoshop, e incluso nos permite agregarle animaciones bastantes creativas.
En este post te presentamos algunos efectos para textos sólo con Html y CSS.

La entrada Efectos de textos con CSS se publicó primero en Programando a medianoche.

Diseño web Responsive vs Adaptativo

Valentina Echezuria — Thu, 11 Oct 2018 14:50:02 +0000

Cuando se trata de diseño web, a veces hay que decidir cual sera la mejor opción para la visualización del sitio en distintos dispositivos, si es mejor hacer un diseño responsive o adaptativo, a pesar de ser métodos muy parecidos y pueden causar confusion, por eso te aclararemos las diferencias entre cada uno y cuales son sus ventajas y desventajas.

La entrada Diseño web Responsive vs Adaptativo se publicó primero en Programando a medianoche.

Crear una plantilla de WordPress desde cero

Valentina Echezuria — Wed, 08 Aug 2018 18:48:54 +0000

En este tutorial te enseñaremos a preparar los archivos y a crear una plantilla de WordPress responsive utilizando el framework Materialize.

La entrada Crear una plantilla de WordPress desde cero se publicó primero en Programando a medianoche.

Animaciones en scroll con Wow.js y Animate.css

Valentina Echezuria — Tue, 17 Jul 2018 16:05:15 +0000

En este articulo te explicaremos como utilizar las librerías Animate.css y Wow.js, para animar el contenido de nuestro sitio mientras hacemos scroll.

La entrada Animaciones en scroll con Wow.js y Animate.css se publicó primero en Programando a medianoche.

Animar menú de hamburguesa

Valentina Echezuria — Tue, 12 Jun 2018 19:19:42 +0000

Una de las tendencias web que se han utilizado en los últimos años es el menú de hamburguesa, cuya funcionalidad permite mostrar elementos que se encuentran ocultos en una sola interacción, lo que facilita la navegación y permiten dejar más espacio para el contenido.
En este tutorial te enseñaremos cómo realizar la animación para desplegar el menú, primero el icono se mostrará en estado de reposo cuando no se haya clickeado sobre él y al hacer click se mostrará como formará una X con los mismos elementos cuando se muestre desplegado.

La entrada Animar menú de hamburguesa se publicó primero en Programando a medianoche.

Conoce Flow Root la solución al desborde de un elemento con Float

Valentina Echezuria — Mon, 21 May 2018 13:10:38 +0000

Seguramente a muchos maquetadores les ha sucedido alguna vez el desborde de algún elemento que posea float (ya sea a la izquierda o derecha) dentro de algún contenedor, que genera un error en la visualización del elemento ya que pareciera que no ocupara espacio dentro del contenedor.
Por esa razón te presentamos Flow Root una de las soluciones a este inconveniente.

La entrada Conoce Flow Root la solución al desborde de un elemento con Float se publicó primero en Programando a medianoche.

Tips para hacer nuestro mail responsive

Valentina Echezuria — Fri, 13 Apr 2018 14:07:56 +0000

Cada día es mas seguro hacer mails que se adapten a dispositivos mobiles ya que cada vez son mas los clientes de correos que tienen soporte a CSS y a media queries, así que en este tutorial te indicaremos como hacer un mail con una distribución de grilla que sea responsive y disponer las columnas de manera que se adapten a nuestro diseño.

La entrada Tips para hacer nuestro mail responsive se publicó primero en Programando a medianoche.

Formato PNG vs JPG

Valentina Echezuria — Wed, 14 Mar 2018 12:44:06 +0000

Algunas veces nos hemos preguntado que formato de imágenes deberíamos utilizar para tener un óptimo rendimiento en nuestro sitio web y que a su vez tengan buena calidad y se vean correctamente. En este artículo te contamos las diferencias entre JPG y PNG.

La entrada Formato PNG vs JPG se publicó primero en Programando a medianoche.

Como hacer la animación de linea dibujándose con un SVG

Valentina Echezuria — Thu, 08 Mar 2018 15:07:41 +0000

En este artículo explicamos cómo hacer una animación de linea dibujándose con un SVG.

La entrada Como hacer la animación de linea dibujándose con un SVG se publicó primero en Programando a medianoche.

Tendencias en el Diseño Web para el 2018

Valentina Echezuria — Wed, 07 Feb 2018 17:12:55 +0000

Todo cambia constantemente lo que hasta hace poco tiempo era tendencia cambia o se transforma por el deseo de siempre avanzar y mejorar, en este articulo te presentaremos las tendencias en el diseño web para el año 2018.

La entrada Tendencias en el Diseño Web para el 2018 se publicó primero en Programando a medianoche.

Cómo funcionan EM y REM

Valentina Echezuria — Thu, 01 Feb 2018 19:36:25 +0000

Tanto em como rem son unidades flexibles, que dependen del valor establecido de la fuente de nuestro diseño. Usar estas unidades nos dan la capacidad de escalar elementos en vez de estar atados a tamaños fijos, lo que permite que sean responsive y que se adapten a distintos tamaños.

La entrada Cómo funcionan EM y REM se publicó primero en Programando a medianoche.

Cómo funcionan las unidades de medida vh, vw, vmin y vmax

Valentina Echezuria — Thu, 25 Jan 2018 20:03:00 +0000

Cada día son mas los sitios web que se adaptan a todo tipo de dispositivos, las unidades de medida vh, vw, vmin y vmax permiten que los elementos se adapten al ancho y alto de la ventana lo que permite una correcta visualización de nuestro sitio web obteniendo una mejor experiencia de usuario.

La entrada Cómo funcionan las unidades de medida vh, vw, vmin y vmax se publicó primero en Programando a medianoche.

Como hacer el efecto Flip con css y jquery

Valentina Echezuria — Mon, 22 Jan 2018 15:45:02 +0000

Las animaciones en tu sitio web hacen más interesantes e interactivos la navegación en el mismo, por eso en el ...
continuar leyendo

La entrada Como hacer el efecto Flip con css y jquery se publicó primero en Programando a medianoche.

La psicología del color

Gustavo Cantero (The Wolf) — Thu, 10 Feb 2011 21:02:07 +0000

Infografía muy interesante que habla sobre la psicología de los colores: cuales son más "agradables" al ingresar a un sitio, las reacciones, influencias, etc

La entrada La psicología del color se publicó primero en Programando a medianoche.