NUCBA

DISEÑO WEB
Sticky, Gradientes y rESPONSIVE
DESIGN

apuntes
CSS IV - POSITION STICKY,
GRADIENTES Y RESPONSIVE
DESIGN

Position Sticky
Anteriormente, habíamos visto 4 tipos de position: static, relative, absolute, fixed.

En esta ocasión, toca hablar del valor que nos faltaba: sticky.

El valor sticky para la propiedad position permite que un elemento HTML se comporte
como un elemento "pegajoso" o "adhesivo" en una página web. Cuando se aplica esta
propiedad a un elemento, este se posicionará según las reglas normales de
posicionamiento CSS (cómo "position: relative", "position: absolute" o "position: fixed"),
pero cuando el usuario se desplaza por la página, el elemento se "pegará" a una
posición específica en la ventana del navegador.

Un elemento con este tipo de position permanecerá en su posición normal hasta que el
usuario lo desplace fuera de su contenedor. Una vez que el usuario ha desplazado lo
suficiente para que el elemento llegue al borde del contenedor, se pegará a la
ventana del navegador y se moverá junto con la ventana mientras el usuario sigue
desplazándose. Si el usuario se desplaza en la dirección opuesta y vuelve a colocar el
elemento dentro de su contenedor, este se despegará y volverá a su posición normal.

La propiedad position: sticky es especialmente útil en la creación de diseños web que

utilizan encabezados o navegaciones fijas. En lugar de utilizar JavaScript o una solución
más compleja para crear elementos pegajosos, position: sticky permite una solución
simple y eficaz mediante la aplicación de una sola propiedad CSS.

En este ejemplo, supongamos que tenemos un header que consta de dos partes: una con
el logo arriba y otra abajo con los enlaces de navegación. Como nosotros queremos

1
que cuando desplacemos hacía abajo se “pegue” el menú de navegación en el top de la
página, usamos position sticky para lograr nuestro cometido.

Gradientes
Los gradientes en CSS permiten crear efectos de transición de color suaves y
personalizados en un elemento HTML. Esta propiedad es útil para crear fondos, efectos
de texto o bordes decorativos en un diseño web.

Se definen utilizando la propiedad background-image o el shorthand background

seguidos del tipo de gradiente y luego entre paréntesis colocamos el valor que
queremos que tome nuestro gradiente. Veamos algunos ejemplos:

En este ejemplo, lo primero que vemos son los gradientes lineales , que se extienden en
una dirección específica (desde arriba hacia abajo o de izquierda a derecha, por ejemplo).
Además, podemos especificar que se vaya extendiendo con una inclinación de “x” grados
y tener más de un color.

Por otro lado, tenemos los gradientes radiales , que permiten crear efectos de transición
de color suave y personalizados en un elemento HTML en forma circular

Finalmente, Tenemos los gradientes repetitivos , que hará que la extensión de nuestro
gradiente ocupe , en el caso de ejemplo, 50px y luego comenzará de nuevo y se repetirá
las veces que sea necesario hasta cubrir todo nuestro elemento HTML.

El uso de gradientes no sólo se limita a los backgrounds de los elementos. También

podemos aplicarlos a otras partes de nuestro diseño, como por ejemplo, textos.

2
Añadiendo gradientes a un texto

Para añadir gradiente a un texto, debemos utilizar, además del gradiente en sí, algunas
propiedades extra que nos permitiran que el background utilizado se vincule únicamente
al texto.

En el ejemplo, tenemos un simple div con clase contenedor y un breve texto.

Por otro lado, si analizamos el css , podemos ver que está aplicado el gradiente al
contenedor, pero tenemos algunas propiedades extra que nos ayudarán a anclar el
background al texto.

1. color: Colocando el valor del color de texto en transparente, nos aseguramos de

que el mismo, en principio, parezca invisible.

2. background-clip: Esta propiedad se utiliza para definir hasta dónde se extiende el

fondo de un elemento HTML. En otras palabras, nos permite controlar el recorte
del fondo de un elemento. Utilizando el valor text, le estamos indicando a CSS que
queremos que el fondo se extienda hasta el borde exterior del texto. Utilizar sólo
esta propiedad si el color del texto no fuera transparente no daría resultado,
puesto que el texto está por encima del background de su contenedor.

3. -webkit-background-clip: Esta propiedad es la misma que la anterior, pero tiene

un prefijo de proveedor. Estos prefijos son necesarios ya que a veces algunas
propiedades no son compatibles con todos los navegadores, y es necesario colocar
este tipo de prefijos para poder utilizarlos y no preocuparnos por esa
incompatibilidad.

3
Responsive design

¿Qué es el diseño responsivo?

El diseño responsivo es un enfoque de diseño web que permite que un sitio web se
adapte a diferentes tamaños de pantalla, como computadoras de escritorio, tabletas y
dispositivos móviles. Con el aumento en el uso de dispositivos móviles para navegar por
Internet, el diseño responsivo se ha vuelto cada vez más importante para garantizar una
experiencia de usuario óptima.

Se trata de un enfoque de diseño que utiliza distintas técnicas de CSS para crear diseños
que responden automáticamente a diferentes dispositivos. Entre estas técnicas o
herramientas podemos utilizar cosas que ya hemos visto, cómo las distintas propiedades
de flex, propiedades como min y max width/height que nos permiten limitar algunos
tamaños de los elementos y otros elementos que vamos a ver en este documento, como
los breakpoints y las mediaqueries, u otros sistemas de diseño que vamos a ver más
adelante, como CSS Grid y sus propiedades.

El diseño responsivo también implica la creación de diseños escalables y adaptables,

lo que significa que debemos adaptar los diseños para los distintos tipos de resoluciones,
no alcanzará simplemente con achicar los elementos para que entre en la resolución
buscada. Muchas veces, esto implicará ajustar posiciones y tamaños de elementos y el
flujo general de nuestro sitio.

¿Por qué es importante el diseño responsive?

El diseño responsivo es importante porque cada vez más personas acceden a sitios web
a través de dispositivos móviles como teléfonos inteligentes y tabletas. De hecho, el tráfico
móvil de Internet supera al tráfico de pc’s de escritorio en muchos países. Por lo tanto, es
esencial que los sitios web estén diseñados para adaptarse a diferentes tamaños de
pantalla y proporcionar una experiencia de usuario óptima, independientemente del
dispositivo que se utilice.

Un sitio web que no está diseñado de manera responsiva puede ser difícil de navegar en
dispositivos móviles, lo que puede llevar a una mala experiencia de usuario, aumentar
la tasa de rebote y reducir el tiempo de permanencia en el sitio web. Además, los
motores de búsqueda como Google han comenzado a penalizar los sitios web que no
son responsivos en los resultados de búsqueda móviles, lo que puede afectar la
visibilidad y el tráfico del sitio web.

4
¿Cómo funciona el diseño responsivo?

Existen varias técnicas y herramientas para realizar diseño responsivo.

Como ya mencionamos antes, hay temas que ya hemos visto durante la cursada que nos
ayudarán a implementar este tipo de diseño, como flexbox y sus distintas propiedades.
Además, el uso de unidades de medida relativas serán grandes aliadas a la hora de
aplicar diseño responsivo, ya que permiten que el tamaño de los elementos se adapte a
una medida relativa, en lugar de que un elemento tenga siempre la misma medida fija
(Esto no quiere decir que no utilizaremos unidades de medida absolutas, ya que muchas
veces será preferible usarlas).

No obstante, la principal técnica utilizada en el diseño responsivo son las “mediaqueries”,

que permiten definir diferentes estilos a un mismo elemento para diferentes tamaños de
pantalla y dispositivos.

Desktop First vs Mobile First

Mobile-First y Desktop-First son dos enfoques diferentes para el diseño de sitios web,
que se diferencian en el orden en el que se desarrollan y diseñan las versiones para
diferentes dispositivos.

En el enfoque de mobile-first, el diseño y desarrollo del sitio web comienzan por la

versión móvil, y luego se expanden y adaptan para pantallas de mayor tamaño, como
tabletas y computadoras de escritorio. En este enfoque, se prioriza la experiencia de
usuario en dispositivos móviles, lo que puede resultar en una mayor simplicidad, claridad
y rapidez en la navegación.
Este enfoque es popular debido al aumento del tráfico móvil en Internet. Además, al
diseñar primero para dispositivos móviles, los diseñadores tienen que priorizar y
simplificar los elementos del sitio web, lo que puede resultar en una experiencia de
usuario más clara y fácil de usar en cualquier dispositivo.

En el enfoque desktop-first, el diseño y desarrollo del sitio web comienzan por la versión
de escritorio, y luego se adaptan y ajustan para pantallas más pequeñas, como tabletas y
teléfonos móviles. En este enfoque, se prioriza la experiencia de usuario en pantallas de
escritorio, y luego se ajusta para adaptarse a dispositivos móviles.

Muchas veces surge la duda de cuál es la mejor opción a la hora de desarrollar.

Hoy en día, es muy común ver proyectos empezando desde 0 con un enfoque
mobile-first. No obstante, si tenemos en cuenta que muchos sitios ya vienen creados
desde tiempo atrás , existe una cantidad enorme de sitios que están diseñados con el
enfoque desktop-first. Por esto, recomendamos practicar los dos tipos de enfoques , ya
que no sabemos en qué tipo de proyecto podemos llegar a participar y será muy
importante nuestra capacidad de adaptarnos a cualquiera de los dos enfoques.

5
¿Qué son las mediaqueries?

Las media queries son una técnica utilizada en diseño web para establecer reglas de
estilo diferentes según las características de la pantalla del dispositivo en el que se
visualiza el sitio.

Son un módulo de la especificación de CSS3 que permite establecer reglas de estilo según
las características de la pantalla del dispositivo, como el ancho y la altura de la pantalla, la
orientación, la densidad de píxeles, entre otros. En este documento y durante la cursada
nos enfocaremos en trabajar sobre el tipo de mediaqueries que nos permite modificar los
elementos según el tamaño de pantalla.

Aprender a manejarlas es clave para poder dominar el diseño responsivo. Sin embargo, es
bueno remarcar que no hay que ser excesivo en su uso, ya que lo ideal es que nuestra
página sea realizada de manera tal que el trabajo de adaptación a otras pantallas que
tengamos que hacer sea lo menos arduo posible y conlleve la menor cantidad de reglas
extra posibles.

Importante: No se preocupen si en un primer momento no cumplen con esto último.

Dominar el diseño responsivo lleva tiempo y es la práctica lo que los va a llevar a
dominarlo y hacer las cosas de manera más óptima.

Sintaxis de mediaqueries

Las mediaqueries se definen utilizando la regla @media, seguida de una condición que
especifica las características de la pantalla para las que se aplicarán las reglas de estilo.
Veamos un ejemplo:

En este ejemplo, tenemos un enfoque desktop-first de diseño responsive, en el cual

tenemos una caja con un ancho de 1200px.
Como queremos que la caja se adapte a dispositivos más chicos, utilizamos la sintaxis de
mediaqueries para indicar que hasta un ancho máximo de 992px, queremos que nuestra
caja tenga un ancho del 90% del que sea su contenedor.
Es importante notar que debemos especificar las reglas que queremos modificar dentro
de la declaración de mediaqueries, indicando cuales son los elementos del HTML que
queremos que se vean distinto y cuales son las propiedades que se modificarán.

6
Por otro lado, podemos realizar modificaciones utilizando el enfoque mobile-first

En este caso, hemos agregado algunas propiedades más a nuestra caja para poder
ejemplificar otras características del uso de mediaqueries.

Podemos ver que nuestro elemento tendrá , en resoluciones pequeñas, un ancho de 90%
de su elemento contenedor, un color de fondo rojo y un tamaño de fuente de 20px.

Aplicando mediaqueries para resoluciones mas grandes, le indicamos a CSS que a partir
de un ancho mínimo de 992px , se modifiquen tanto el ancho de nuestra caja como el
tamaño de la fuente. Por su parte, el color de fondo, seguirá siendo rojo, ya que aquellas
propiedades que no se reemplacen en una determinada resolución se mantendrán tal
como venían declaradas desde la resolución anterior. En este caso, al no tener otra
resolución previa a los 992px que se haya modificado, se mantendrá con el color rojo
declarado como base en el archivo CSS.

¿Qué son los breakpoints?

Los breakpoints, o puntos de quiebre, son valores específicos de ancho de pantalla en

los que se aplican diferentes estilos a un sitio web mediante el uso de mediaqueries en
CSS.

Básicamente, son los puntos en los que cambia el diseño de un sitio web para adaptarse a
diferentes tamaños de pantalla.

Se utilizan en conjunto con las mediaqueries , dentro de los paréntesis , siendo lo que le
indica al documento a partir de que medida se aplicarán los nuevos estilos.

7
Breakpoints recomendados

Los breakpoints se pueden establecer en cualquier valor de ancho de pantalla necesario, y

su uso dependerá del diseño específico del sitio web y de las necesidades de los usuarios.
No obstante, existen algunas medidas estándar que podemos tomar como base para
trabajar sobre nuestros sitios, teniendo siempre en cuenta que podemos llegar a necesitar
otras medidas, pero siempre tratando de no utilizar demasiados breakpoints diferentes, ya
que esto implicaría que hay cosas que se podrían realizar de una manera más óptima a la
hora nuestra web.

Extra Small Small Medium Large X-Large XX-Large

< 576px >= 576px >= 768px >= 992px >= 1200px >= 1400px

Normalmente, si trabajamos un enfoque desktop-first partiremos de una base en la cual

nuestros estilos base aplicarán para pantallas X-large o xx-large , y deberemos ir
adaptando para las resoluciones más bajas utilizando max-width con los 992px, 768px y
576px (Aunque es muy factible que no sea necesario que utilicemos todas si aplicamos
buenas prácticas a la hora de realizar nuestro código con las distintas técnicas antes
mencionadas).

Por otro lado, si trabajamos con un enfoque mobile-first partiremos de una base en la
cual nuestros estilos base aplicarán para pantallas extra-small , y deberemos ir adaptando
a resoluciones más altas utilizando min-width con los 576px , 768px, 992px, 1200px y
1400px (Aplica la misma aclaración que para desktop-first respecto a que puede no ser
necesario utilizar todas).

Cabe aclarar que hoy en día no existen dispositivos más pequeños que los 320px de
ancho, por lo que esa es la medida mínima por la cual debemos preocuparnos.

———————————————————————————————————————————

Nucba tip: Sigan investigando sobre los temas aquí expuestos. Practiquen, apoyense en
la documentación oficial y sobre todo mantengan la constancia y la curiosidad a
medida que vayan aprendiendo cosas nuevas.

#HappyCoding 🚀

8
9