Tengo curiosidad Siempre es interesante para mí abrir las herramientas del desarrollador del navegador y comprender cómo se hace cualquier sitio web que miré. Este material es mi primera historia sobre tal investigación. El hecho es que encontré algunos ejemplos interesantes de uso de CSS (al menos me parecieron interesantes) de los que quería hablar. Estamos hablando de hallazgos CSS en el nuevo diseño de Facebook. Este diseño apareció relativamente recientemente. Lo vi hace un par de semanas. Al principio, todos los elementos de la interfaz me parecían inusualmente grandes, pero me acostumbré a ellos en solo unos días. Aquí hablaré de todo lo interesante que encontré en el diseño de Facebook.
Usando gráficos SVG en avatares
Losgráficos SVG de avatares se utilizan para imágenes de avatar, como fotos de perfil, fotos en páginas de usuario o en grupos.Aquí está el código HTML:<svg role="none" style="height: 36px; width: 36px;">
<mask id="avatar">
<circle cx="18" cy="18" fill="white" r="18"></circle>
</mask>
<g mask="url(#avatar)">
<image x="0" y="0" height="100%" preserveAspectRatio="xMidYMid slice" width="100%" xlink:href="avatar.jpg" style="height: 36px; width: 36px;"></image>
<circle cx="18" cy="18" r="18"></circle>
</g>
</svg>
Cuando vi esto, me pregunté por qué se utilizó este enfoque. Tengo varias respuestas a esta pregunta:- El avatar debe tener un marco interno que tenga un color negro translúcido (10%). Esto es para hacer que los avatares ligeros se vean como imágenes redondas. Además, incluso si se trata de imágenes completamente blancas.
- No
<img>puede agregar una sombra interna ( box-shadow) a un elemento HTML utilizando una palabra clave inset. SVG se utiliza para resolver este problema. - Para que la imagen tenga una forma redonda,
<mask>se utilizan elementos SVG y <image>.
Como dije, los marcos dentro del avatar son muy útiles para imágenes brillantes. Aquí hay un diseño que ilustra esta idea.Avatares Elmarco interno se configura con el siguiente CSS:circle,
rect {
stroke-width: 2;
stroke: rgba(0, 0, 0, 0.1);
fill: none;
}
Si la imagen es cuadrada, se usa la figura rect:<svg role="none" style="height: 36px; width: 36px;">
<mask id="avatar">
<rect cy="18" fill="white" height="36" rx="8" ry="8" width="36" x="0" y="0"></rect>
</mask>
<g mask="url(#avatar)">
<image x="0" y="0" height="100%" preserveAspectRatio="xMidYMid slice" width="100%" xlink:href="avatar.jpg" style="height: 36px; width: 36px;"></image>
<rect cy="18" fill="white" height="36" rx="8" ry="8" width="36" x="0" y="0"></rect>
</g>
</svg>
Curiosamente, en la página principal del feed, los avatares se crean utilizando la etiqueta <img>y el elemento <div>utilizado para configurar el marco translúcido interno:<div class="avatar-wrapper>
<img class="avatar" width="40" height="40" src="avatar.jpg" width="40" alt="">
<div class="avatar-outline"></div>
</div>
Aquí están los estilos para este HTML:.avatar-wrapper {
position: relative;
}
.avatar {
display: block;
border-radius: 50%;
}
.avatar-outline {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
border-radius: 50%;
}
Dado que SVG en avatares se usa solo en algunos lugares, puedo suponer que es la razón del uso <img>y está <div>asociado con un tamaño de página. Si se usaran gráficos SVG en avatares de la cinta, esto conduciría a un aumento en la cantidad de datos cargados al desplazarse por la cinta.Usar como separadores de elementos <div>, no márgenes externos
No encontré esos momentos en que las imágenes GIF se usaban como separadores de elementos de la página web. Pero luego vi algo parecido a esta técnica. Creo que sí, de lo que estoy hablando puede llamarse separadores div.<div> Elementos utilizados como separadoresPermítanme aclarar un poco la figura anterior. Este es un fragmento de la sección que contiene solicitudes de amistad que aparecen en la página de inicio. Ante nosotros hay una determinada cuadrícula con información sobre personas. Esta cuadrícula debe tener una sangría externa izquierda. Yo suelo añadir a los elementos tales como la frontera:margin-left: 16px. Pero Facebook hizo lo mismo usando el elemento<div>que separa la cuadrícula del borde del elemento contenedor.¿Por qué los diseñadores hicieron eso? Tengo algunas conjeturas:- ¿Quizás la sangría para elementos de contenedor no se puede agregar al sistema de diseño que crearon?
- ¿Tal vez este es un componente React que se puede usar en cualquier lugar estableciendo su ancho?
¿Por qué no se usa sangría aquí? En cuanto a mí, un sitio CSS (aproximadamente 100 mil líneas), que está lleno de clases auxiliares, puede acomodar otra clase que le permite ajustar la sangría del elemento deseado.Usando filtros CSS
Iconos creados con los elementos <img> y <svg>Eche un vistazo a estos cuatro iconos. Un icono con un signo más y un icono de flecha se crean utilizando un elemento<img>. Y los iconos y notificaciones de Messenger, utilizando elementos SVG. Las razones de esta mezcla de tecnologías son desconocidas para mí.Si hace clic en el último icono, la flecha se volverá a pintar en azul. “¿Cómo cambia el color aquí, porque la flecha es una imagen ordinaria?”, Me pregunté. ¿Quizás cuando pasas el cursor sobre el ícono, una imagen simplemente cambia a otra? No, no es así. Descubrí que se usa un filtro CSS para cambiar el color del icono en el icono:.icon {
filter: invert(39%) sepia(57%) saturate(200%) saturate(200%) saturate(200%) saturate(200%) saturate(200%) saturate(147.75%) hue-rotate(202deg) brightness(97%) contrast(96%)
}
Y ese, por cierto, es el código de producción para facebook.com. Este código me parece muy extraño. ¿Es difícil reemplazar este elemento <img>con una imagen SVG y simplemente cambiar el color especificado por el atributo fill?Lo mismo se usa al crear un icono para cuentas verificadas.Icono de cuenta verificadaAlgo similar se aplica a los enlaces del perfil de usuario:.icon {
filter: invert(59%) sepia(11%) saturate(200%) saturate(135%) hue-rotate(176deg) brightness(96%) contrast(94%);
}
Así es como se veEnlaces en su perfil de usuarioSi está interesado en aprender a usar un filtro CSS para colorear una imagen en negro con cualquier color, eche un vistazo a esta respuesta en Desbordamiento de pila. Allí puede encontrar una herramienta para crear filtros CSS. Además, eche un vistazo a este tweet.Usando imágenes para crear sombras
Una sombra creada usando background-imageEl título de la ventana principal tiene una sombra. Se puede suponer que se creó utilizando la propiedad CSSbox-shadow. Pero en realidad no lo es. Aquí usamos un elemento<div>con una imagen de fondo que se repite a lo largo del ejex.Subí la imagen utilizada aquí, lo que me permite echar un vistazo más de cerca.La imagen utilizada para crear la sombraEsta es una imagen de 2x14 píxeles que, para crear el efecto de sombra, se repite muchas veces. No solo la imagen, sino también un elemento especial está involucrado en la formación del efecto de sombra<div>. ¿Por qué se creó la sombra de esta manera?Un empleado de Facebook dijo que la imagen aquí se usó por razones de rendimiento. Es interesante que una sombra tan pequeña pueda generar problemas con la velocidad del sitio.Cuando se le preguntó cómo se identificó este problema, dijo que la sombra causó una grave caída en el rendimiento y efectos visuales desagradables. Entonces, al desplazarse por una página en la que había muchos videos, algunas partes de la página aparecieron y desaparecieron.Bueno, si la sombra causa tales problemas, no veo nada de malo en reemplazarla con la imagen correspondiente.Uso generalizado de variables CSS
Me encanta el hecho de que los diseñadores de Facebook usan variables CSS. A juzgar por lo que vi, :rootse agregaron más de 320 variables al elemento . Estas variables se usan en temas claros y oscuros del sitio.Cuando se habilita un tema oscuro, se agrega una clase al elemento HTML __fb-dark-mode. Luego anula todas las variables declaradas en el elemento :root::root {
-fds-active-icon: #3578E5;
--fds-attachment-footer-background: #F2F3F5;
--fds-blue-05: #ECF3FF;
--fds-blue-30: #AAC9FF;
--fds-blue-40: #77A7FF;
}
.__fb-dark-mode:root, .__fb-dark-mode {
--fds-active-icon: black;
--fds-attachment-footer-background: black;
--fds-blue-05: black;
--fds-blue-30: black;
--fds-blue-40: black;
}
Aquí hay un video que muestra lo que sucede después de cambiar a un tema oscuro. Te aconsejo que lo veas en modo de pantalla completa.Uso de la propiedad CSS de sujeción de línea para recortar texto multilínea
Las firmas utilizan el recorte de texto de varias líneas.La barra lateral tiene una lista de enlaces, como los que llevan al perfil del usuario, a los últimos materiales, a la sección Memorias. Noté que aquí se usa el recorte de texto multilínea:.element {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
Estos son estilos incorporados que, además, varían según el navegador.Código de recorte de texto en Chrome y FirefoxEsta característica de CSS goza de bastante buena compatibilidad con el navegador. CanIUse informa que todos los navegadores principales admiten esta propiedad (aunque con un prefijo). Los detalles sobre esta propiedad se pueden encontrar aquí .Usar un div para crear elementos que responden al mouseover
Por lo general, los efectos que acompañan al mouse sobre un elemento se crean usando CSS. Por ejemplo, si un botón determinado necesita pintarse con un tono especial de gris cuando pasa el cursor sobre él, simplemente haga lo siguiente:.element:hover {
background: #ccc;
}
Sin embargo, parece que en sitios grandes como Facebook, este enfoque no es práctico. En el proceso de explorar el sitio, llamé la atención sobre un elemento que se muestra solo cuando pasas el mouse sobre él (llamémoslo "elemento de desplazamiento"). Esta es su tarea principal. Aquí está su estilo:.hover-div {
position: absolute;
right: 0;
left: 0;
top: 0;
bottom: 0;
pointer-events: none;
border-radius: 6px;
inset: 4px 0px;
background-color: var(--hover-overlay);
transition-property: opacity;
transition-timing-function: var(--fds-animation-fade-out);
cursor: pointer;
}
El valor de la propiedad de opacityeste elemento es cambiado por JavaScript de 0a 1. Experimenté con él y descubrí que se usa para muchos componentes. A continuación se muestra un conjunto de capturas de pantalla que demuestran el uso de este elemento.Usando un elemento flotante,me gusta la uniformidad y simplicidad que proporciona el uso del mismo efecto para múltiples elementos. Si esto significa algo, significa que el lenguaje de diseño utilizado en el sitio es uniforme y que el sistema se diseñó cuidadosamente. Buen trabajo, Facebook!Usar la propiedad insertada
Estamos hablando de un registro abreviado de valores de propiedad, lo que implica un impacto en las partes superior, derecha, inferior e izquierda de un elemento. Puede usar la propiedad de la insetsiguiente manera:.element {
inset: 4px 0;
}
La propiedad está insetconfigurada para los elementos de desplazamiento anteriores asociados con algunos otros elementos. El estilo está incrustado en HTML. Noté su aplicación al componente que se muestra a continuación.Las áreas afectadas por la propiedad de inserción se resaltan en azul.Cuando se escribe este material, la propiedadsoloinset admite Firefox 66+.Dir = atributo "auto" y propiedades booleanas CSS
En sitios multilingües como Facebook, a veces es difícil predecir exactamente cuál será el contenido. Por ejemplo, el nombre de usuario en un componente tiene un atributo dir=«auto». Esto significa que la dirección del texto dependerá del idioma. Digamos, cuando se usa inglés, el texto se mostrará de izquierda a derecha, y cuando se usa árabe, de derecha a izquierda.Además, debe tenerse en cuenta que hay un estilo incorporado que cambia la dirección del texto (existe la sensación de que el atributo dir=«auto»no es suficiente). Así es como se ve:<div dir="auto" style="text-align: start;">محتوى بالعربية</div>
Observe que se ha agregado un estilo al elemento text-align: start. Esto usa una propiedad lógica de CSS. El estilo, para los diseños LTR, se verá así text-align: right.Si está interesado en las características de la estilización RTL, eche un vistazo a este mi material.Fondo dinámico según la foto principal
Fondo según la foto principal¿Ha notado que se utiliza un degradado y un color similar al de la foto principal para diseñar el fondo? Este fondo se forma dinámicamente, se basa en el color de la foto. ¿Cómo está hecho?▍1. Obteniendo color dominante
Primero debe obtener el color dominante (usado con más frecuencia que otros) de la foto principal. Después de encontrar este color, se crea una versión reducida de la foto principal, pintada solo con este color.Encontrar un color dominante▍2. Agregar un fondo de color dominante
Fondo usando color dominanteencontrado El fondo usa color dominante encontrado anteriormente. Yo, para que quede más claro, destaqué la imagen que se muestra en la página como la foto principal con un marco blanco.▍3. Agregar un degradado sobre el fondo
Para agregar un degradado sobre el fondo, use el siguiente código CSS:.element {
background-image: linear-gradient(to top, #FFFFFF, rgb(255, 255, 255), rgba(255,255,255,0.7), rgba(255,255,255,0.4), rgba(255,255,255,0));
}
Agregar un degradado (se usan colores claros en el diseño)En el caso de que se usen colores oscuros en el diseño, se usa el degradado inverso:.element {
background-image: linear-gradient(to top, #000, rgb(0, 0, 0), rgba(0,0,0,0.7), rgba(0,0,0,0.4), rgba(0,0,0,0));
}
Agregar un degradado (se usan colores oscuros en el diseño)Puede usar esta herramientapara encontrar el color dominante de la imagen.Sombras múltiples
SombrasMe gustó el enfoque que los desarrolladores de Facebook usaron para crear sombras para varios elementos como los menús desplegables. Tal sombra crea la ilusión de volumen, que es mucho más realista que la ilusión que se puede lograr con una sombra regular.Menús desplegablesAquí está el CSS:.element {
box-shadow: 0 12px 28px 0 rgba(0, 0, 0, 0.2), 0 2px 4px 0 rgba(0, 0, 0, 0.1), inset 0 0 0 1px rgba(255, 255, 255, 0.5);
}
Aquí puede tener una pregunta acerca de por qué aquí se crea una sombra insertada de color blanco con una transparencia del 50%. El hecho es que esto es una sombra para el régimen oscuro. A continuación se muestra un fragmento ampliado de la interfaz en la que se utiliza dicha sombra.Un fragmento ampliado de la interfaz con una sombra insertada.Me gusta esta solución razonable.Artículos vacíos para rejillas flexbox
Noté que todos los diseños de cuadrícula en el sitio se basan en flexbox. Aquí hay un ejemplo de ese diseño que encontré en la sección de fotos del usuario.Elementos vacíos en el diseño de la cuadrículaAquí está el CSS:.wrapper {
display: flex;
flex-wrap: wrap;
justify-items: space-between;
}
.item {
width: 205px;
}
Todo parece interesante, ¿verdad? Usar un valor space-betweenpara ajustar la ubicación de los elementos es arriesgado. El diseño no se verá bien si, por ejemplo, solo hay tres fotos. Un ejemplo de tal diseño se muestra a continuación.El peligro de usar el espacio intermedio¿Cómo lidió el equipo de Facebook con este problema? Muy simple: hay cuatro elementos vacíos<div>, cuyo ancho es igual al ancho de la foto. Aquí está el HTML para esta solución:<div class="wrapper">
<div class="item"><a href="#"><img src="photo.jpg"></a></div>
<div class="item"><a href="#"><img src="photo.jpg"></a></div>
<div class="item"><a href="#"><img src="photo.jpg"></a></div>
<div class="item"><a href="#"><img src="photo.jpg"></a></div>
<div class="empty"></div>
<div class="empty"></div>
<div class="empty"></div>
<div class="empty"></div>
</div>
Con este enfoque, estos elementos vacíos <div>juegan el papel de elementos artificiales. Ayudan a mantener la misma distancia entre los elementos.Usar consultas de medios verticales
Raramente veo consultas de medios verticales, por así decirlo, en la naturaleza. Me gusta el hecho de que los desarrolladores de Facebook usaron esta consulta para reducir el ancho de las noticias en la página de inicio:@media (min-height: 700px) {
.element {
width: 584px;
}
}
Resumen
Eso es todo. Estaba muy interesado en trabajar en este artículo. Al explorar el diseño del sitio de Facebook, aprendí mucho. Espero que también haya encontrado en mi historia algo que le pareció nuevo e interesante.¡Queridos lectores! ¿Alguna vez has encontrado algo interesante al analizar el código de los sitios que visitas?