{"id":30300,"date":"2024-10-29T16:36:52","date_gmt":"2024-10-29T15:36:52","guid":{"rendered":"https:\/\/www.codemotion.com\/magazine\/?p=30300"},"modified":"2024-10-29T16:54:01","modified_gmt":"2024-10-29T15:54:01","slug":"glassmorphism-con-css-un-nuevo-enfoque","status":"publish","type":"post","link":"https:\/\/www.codemotion.com\/magazine\/es\/frontend-es\/diseno-ux\/glassmorphism-con-css-un-nuevo-enfoque\/","title":{"rendered":"Glassmorphism con CSS: \u00a1un nuevo enfoque!"},"content":{"rendered":"\n<p>El glassmorphism es una tendencia en el dise\u00f1o que busca replicar el aspecto y las propiedades del vidrio en los elementos de la interfaz o de un contenido. Este estilo se caracteriza por el uso<strong> de transparencia, desenfoque y efectos de luz<\/strong> para crear la ilusi\u00f3n de superficies de vidrio.<\/p>\n\n\n\n<p><strong>Seamos sinceros: un vidrio transparente no es el lugar m\u00e1s pr\u00e1ctico para escribir, <\/strong>y al elaborar un tutorial se hace evidente lo dif\u00edcil que es generalizar un dise\u00f1o para que funcione en todos los escenarios y, sobre todo, para todos los usuarios. Sin embargo, dejemos de lado las buenas pr\u00e1cticas y exploremos diversas maneras interesantes de lograr un efecto de vidrio solo con CSS.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-un-approccio-diverso\">Un approccio diverso<\/h2>\n\n\n\n<p>En mi experiencia, el aspecto m\u00e1s frustrante de implementar un dise\u00f1o basado en el glassmorphism es que las posibilidades que ofrece CSS parecen infinitas, y en los distintos fragmentos de c\u00f3digo que encontramos o que generan nuestros asistentes virtuales, no se entiende la relaci\u00f3n entre las propiedades de CSS y el efecto realista.<\/p>\n\n\n\n<p><strong>Hay mil recetas y todas logran efectos incre\u00edbles, pero \u00bfc\u00f3mo se alcanzan esos efectos sin ir a ciegas?<\/strong><\/p>\n\n\n\n<p>Para crear un efecto de vidrio convincente, debemos preguntarnos: \u00bfqu\u00e9 hace que algo parezca vidrio? \u00bfQu\u00e9 \u201cvende el efecto\u201d?<\/p>\n\n\n\n<p>Pensemos en estos elementos clave:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Transparencia<\/strong>: El vidrio permite ver a trav\u00e9s de \u00e9l, aunque no siempre de manera completamente clara.<\/li>\n\n\n\n<li><strong>Desenfoque (Blur)<\/strong>: Los objetos detr\u00e1s del vidrio se ven borrosos, no n\u00edtidos.<\/li>\n\n\n\n<li><strong>Bordes redondeados<\/strong>: Los bordes del vidrio suelen tener una ligera redondez que refleja la luz de forma particular.<\/li>\n\n\n\n<li><strong>Espesor<\/strong>: El vidrio tiene cierta profundidad, visible en sus bordes.<\/li>\n<\/ul>\n\n\n\n<p>Nuestro enfoque seguir\u00e1 algunas reglas de oro:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Reflexionemos sobre la propiedad que queremos dar a nuestro elemento antes de aventurarnos con n\u00fameros al azar en las f\u00f3rmulas.<\/li>\n\n\n\n<li>Avancemos con \u201cpasos de beb\u00e9\u201d.<\/li>\n\n\n\n<li>Organicemos nuestras clases para representar claramente los materiales y su l\u00f3gica.<\/li>\n<\/ul>\n\n\n\n<p>\u00bfListos para crear su propia colecci\u00f3n de materiales de vidrio?<\/p>\n\n\n\n<p>Empecemos con un escenario divertido y vers\u00e1til: una aplicaci\u00f3n web para mostrar el clima y la hora, quiz\u00e1s para instalar como PWA en tu vieja tablet y transformarla en un regalo original.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-diseno-basico-una-app-con-hora-temperatura-y-clima\">Dise\u00f1o b\u00e1sico: una app con hora, temperatura y clima.<\/h2>\n\n\n\n<p>Comencemos con un dise\u00f1o b\u00e1sico para nuestra app de clima:<\/p>\n\n\n<pre class=\"wp-block-code\"><span><code class=\"hljs\">&lt;code&gt;&lt;!DOCTYPE &lt;strong&gt;html&lt;\/strong&gt;&gt;\n&lt;&lt;strong&gt;html&lt;\/strong&gt; lang=\"en\"&gt;\n\n&lt;&lt;strong&gt;head&lt;\/strong&gt;&gt;\n    &lt;&lt;strong&gt;meta&lt;\/strong&gt; charset=\"UTF-8\"&gt;\n    &lt;&lt;strong&gt;meta&lt;\/strong&gt; name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"&gt;\n    &lt;&lt;strong&gt;title&lt;\/strong&gt;&gt;Glass Meteo and Clock&lt;\/&lt;strong&gt;title&lt;\/strong&gt;&gt;\n    &lt;&lt;strong&gt;link&lt;\/strong&gt; rel=\"stylesheet\" href=\"styles.css\"&gt;\n    &lt;&lt;strong&gt;link&lt;\/strong&gt; rel=\"manifest\" href=\"manifest.json\"&gt;\n    &lt;&lt;strong&gt;meta&lt;\/strong&gt; name=\"theme-color\" content=\"#ffffff\"&gt;\n&lt;mark&gt;    &lt;&lt;strong&gt;link&lt;\/strong&gt; rel=\"stylesheet\" href=\"https:\/\/fonts.googleapis.com\/css2?family=Material+Symbols+Outlined&amp;display=block\" \/&gt;\n&lt;\/mark&gt;    &lt;&lt;strong&gt;script&lt;\/strong&gt; type=\"module\" src=\"app.js\"&gt;&lt;\/&lt;strong&gt;script&lt;\/strong&gt;&gt;\n&lt;\/&lt;strong&gt;head&lt;\/strong&gt;&gt;\n\n&lt;&lt;strong&gt;body&lt;\/strong&gt;&gt;\n    &lt;&lt;strong&gt;main&lt;\/strong&gt; class=\"room\"&gt;\n        &lt;&lt;strong&gt;div&lt;\/strong&gt; id=\"dashboard\" class=\"glass meteo-info\"&gt;\n              &lt;&lt;strong&gt;div&lt;\/strong&gt; id=\"time\"&gt;20:30&lt;\/&lt;strong&gt;div&lt;\/strong&gt;&gt;\n              &lt;&lt;strong&gt;div&lt;\/strong&gt; id=\"weather\"&gt;\n&lt;mark&gt;                &lt;&lt;strong&gt;span&lt;\/strong&gt; class=\"material-symbols-outlined\"&gt;clear_day&lt;\/&lt;strong&gt;span&lt;\/strong&gt;&gt;\n&lt;\/mark&gt;              &lt;\/&lt;strong&gt;div&lt;\/strong&gt;&gt;\n          &lt;&lt;strong&gt;div&lt;\/strong&gt; id=\"meteo\"&gt;\n              &lt;&lt;strong&gt;div&lt;\/strong&gt; id=\"temperature\"&gt;35.5&amp;deg;C&lt;\/&lt;strong&gt;div&lt;\/strong&gt;&gt;\n            &lt;&lt;strong&gt;div&lt;\/strong&gt; id=\"location\"&gt;Rome, Italy&lt;\/&lt;strong&gt;div&lt;\/strong&gt;&gt;\n            &lt;\/&lt;strong&gt;div&lt;\/strong&gt;&gt;\n          &lt;\/&lt;strong&gt;div&lt;\/strong&gt;&gt;\n      &lt;\/&lt;strong&gt;main&lt;\/strong&gt;&gt;\n&lt;\/&lt;strong&gt;body&lt;\/strong&gt;&gt;\n\n&lt;\/&lt;strong&gt;html&lt;\/strong&gt;&gt;\n&lt;\/code&gt;<\/code><\/span><\/pre>\n\n\n<p>En nuestro <code>index.html<\/code>, estamos cargando un CSS de Google Fonts Icons &amp; Symbols.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"666\" src=\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/07\/google-symbols-for-meteo-1024x666.png\" alt=\"Google Icons Symbols per le condizioni meteo\" class=\"wp-image-28702\" srcset=\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/07\/google-symbols-for-meteo-1024x666.png 1024w, https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/07\/google-symbols-for-meteo-300x195.png 300w, https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/07\/google-symbols-for-meteo-768x500.png 768w, https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/07\/google-symbols-for-meteo.png 1456w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>En nuestro <code>index.html<\/code>, estamos cargando un CSS de Google Fonts Icons &amp; Symbols que nos permitir\u00e1 tener un \u00edcono para cada condici\u00f3n meteorol\u00f3gica.<\/p>\n\n\n\n<p>Si prefieres, tambi\u00e9n puedes usar emojis \ud83c\udf24\ufe0f\u2600\ufe0f\ud83c\udf27\ufe0f.<\/p>\n\n\n\n<p>Demos algo de estructura y facilitemos nuestra exploraci\u00f3n con un poco de CSS que centre la informaci\u00f3n del clima en nuestra pantalla.<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-1\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">code<\/span>&gt;<\/span>:root {\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">strong<\/span>&gt;<\/span>font-family<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">strong<\/span>&gt;<\/span>: system-ui, sans-serif;\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">strong<\/span>&gt;<\/span>font-size<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">strong<\/span>&gt;<\/span>: clamp(1rem, 10vw, 5rem);\n}\n\n* {\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">strong<\/span>&gt;<\/span>margin<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">strong<\/span>&gt;<\/span>: 0;\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">strong<\/span>&gt;<\/span>padding<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">strong<\/span>&gt;<\/span>: 0;\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">strong<\/span>&gt;<\/span>line-height<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">strong<\/span>&gt;<\/span>: 1;\n}\n\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">strong<\/span>&gt;<\/span>main<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">strong<\/span>&gt;<\/span> {\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">strong<\/span>&gt;<\/span>block-size<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">strong<\/span>&gt;<\/span>: 100vh;\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">strong<\/span>&gt;<\/span>margin<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">strong<\/span>&gt;<\/span>: 0;\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">strong<\/span>&gt;<\/span>display<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">strong<\/span>&gt;<\/span>: flex;\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">strong<\/span>&gt;<\/span>justify-content<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">strong<\/span>&gt;<\/span>: center;\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">strong<\/span>&gt;<\/span>align-items<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">strong<\/span>&gt;<\/span>: center;\n}\n\n.meteo-info {\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">strong<\/span>&gt;<\/span>display<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">strong<\/span>&gt;<\/span>: grid;\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">strong<\/span>&gt;<\/span>grid-template-columns<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">strong<\/span>&gt;<\/span>: 1fr 2fr;\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">strong<\/span>&gt;<\/span>grid-template-areas<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">strong<\/span>&gt;<\/span>: \"time time\" \"weather meteo\";\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">strong<\/span>&gt;<\/span>gap<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">strong<\/span>&gt;<\/span>: 1rem;\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">strong<\/span>&gt;<\/span>transition<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">strong<\/span>&gt;<\/span>: font-size 0.2s cubic-bezier(0.6, -0.28, 0.74, 0.05), opacity 0.5s linear;\n}\n\n.meteo-info&gt;<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">strong<\/span>&gt;<\/span>div<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">strong<\/span>&gt;<\/span> {\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">strong<\/span>&gt;<\/span>display<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">strong<\/span>&gt;<\/span>: flex;\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">strong<\/span>&gt;<\/span>justify-content<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">strong<\/span>&gt;<\/span>: center;\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">strong<\/span>&gt;<\/span>align-items<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">strong<\/span>&gt;<\/span>: center;\n}\n\n#time {\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">strong<\/span>&gt;<\/span>grid-area<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">strong<\/span>&gt;<\/span>: time;\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">strong<\/span>&gt;<\/span>font-size<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">strong<\/span>&gt;<\/span>: 200%;\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">strong<\/span>&gt;<\/span>font-weight<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">strong<\/span>&gt;<\/span>: 900;\n}\n\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">strong<\/span>&gt;<\/span>span<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">strong<\/span>&gt;<\/span>.material-symbols-outlined {\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">strong<\/span>&gt;<\/span>font-size<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">strong<\/span>&gt;<\/span>: inherit;\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">strong<\/span>&gt;<\/span>max-width<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">strong<\/span>&gt;<\/span>: 1ch;\n}\n\n#weather {\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">strong<\/span>&gt;<\/span>grid-area<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">strong<\/span>&gt;<\/span>: weather;\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">strong<\/span>&gt;<\/span>font-size<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">strong<\/span>&gt;<\/span>: 120%;\n}\n\n#meteo {\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">strong<\/span>&gt;<\/span>grid-area<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">strong<\/span>&gt;<\/span>: meteo;\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">strong<\/span>&gt;<\/span>display<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">strong<\/span>&gt;<\/span>: flex;\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">strong<\/span>&gt;<\/span>flex-direction<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">strong<\/span>&gt;<\/span>: column;\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">strong<\/span>&gt;<\/span>align-items<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">strong<\/span>&gt;<\/span>: flex-start;\n}\n\n#location {\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">strong<\/span>&gt;<\/span>font-size<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">strong<\/span>&gt;<\/span>: 50%;\n}<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">code<\/span>&gt;<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-1\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"801\" src=\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/07\/glass_0-1024x801.png\" alt=\"Simulazione di Google Nest Hub con dentro orario e condizioni meteo\" class=\"wp-image-28703\" srcset=\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/07\/glass_0-1024x801.png 1024w, https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/07\/glass_0-300x235.png 300w, https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/07\/glass_0-768x601.png 768w, https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/07\/glass_0-1536x1201.png 1536w, https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/07\/glass_0-2048x1601.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Entre los dispositivos que podemos simular en Google Chrome tambi\u00e9n est\u00e1 el Nest Hub Max, \u00a1que es perfecto para nuestro ejercicio!<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-el-fondo-de-problema-a-punto-fuerte-de-nuestro-diseno\">El fondo: \u00a1de problema a punto fuerte de nuestro dise\u00f1o!<\/h2>\n\n\n\n<p>\u00bfC\u00f3mo podemos apreciar nuestro efecto de vidrio sin algo detr\u00e1s?<\/p>\n\n\n\n<p>Es evidente que no todas las fotos son adecuadas como fondo y ser\u00e1 necesario ajustar el color del texto para que sea visible. Este es el punto d\u00e9bil del <em>glassmorphism<\/em>, que limita su uso a escenarios espec\u00edficos. Sin embargo, \u00a1este tutorial busca romper el tab\u00fa de que, si una t\u00e9cnica no es universal, entonces no merece ser estudiada!<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"801\" src=\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/07\/glass_1-1024x801.png\" alt=\"Simulazione di Google Nest Hub con dentro orario e condizioni meteo\" class=\"wp-image-28705\" srcset=\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/07\/glass_1-1024x801.png 1024w, https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/07\/glass_1-300x235.png 300w, https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/07\/glass_1-768x601.png 768w, https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/07\/glass_1.png 1463w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Abracemos la especificidad y elijamos una buena foto en dominio p\u00fablico (CC-Zero by Gray Wooden Sideboard).<\/p>\n\n\n\n<p>Agreguemos una clase <code>room<\/code> a nuestro <code>main<\/code> y pongamos un elegante blanco como color para nuestra fuente (y s\u00edmbolo), carguemos nuestro fondo y configuremos la propiedad <code>background-size<\/code> en <code>cover<\/code> para asegurarnos de que sea bien visible en diferentes pantallas:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-2\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">code<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">strong<\/span>&gt;<\/span>main<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">strong<\/span>&gt;<\/span>.room {\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">mark<\/span>&gt;<\/span>    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">strong<\/span>&gt;<\/span>background-image<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">strong<\/span>&gt;<\/span>: url(.\/backgrounds\/pexels-pixabay-271816.jpg);\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">mark<\/span>&gt;<\/span>    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">strong<\/span>&gt;<\/span>background-size<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">strong<\/span>&gt;<\/span>: cover;\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">strong<\/span>&gt;<\/span>background-position<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">strong<\/span>&gt;<\/span>: center;\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">strong<\/span>&gt;<\/span>color<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">strong<\/span>&gt;<\/span>: white;\n}\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">code<\/span>&gt;<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-2\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<h2 class=\"wp-block-heading\" id=\"h-efecto-vidrio-base\">Efecto vidrio base<\/h2>\n\n\n\n<p>Si nuestro elemento de vidrio fuera perfectamente liso y transparente, la luz y, por tanto, lo que hay detr\u00e1s se ver\u00eda sin interferencia. Pero, \u00bfqu\u00e9 ocurre si el vidrio es poroso? \u00bfC\u00f3mo podemos lograr ese efecto con CSS?<\/p>\n\n\n\n<p>La base del efecto vidrio es, sin duda, la propiedad <code>backdrop-filter<\/code>, que nos permite usar diversas funciones para alterar los p\u00edxeles que \u201catraviesan\u201d nuestro elemento&#8230; \u00a1justo como lo hacen los fotones al pasar por el vidrio! \u00bfY qu\u00e9 mejor funci\u00f3n que el cl\u00e1sico <code>blur<\/code> para desenfocar el fondo?<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-3\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">code<\/span>&gt;<\/span>.glass {\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">strong<\/span>&gt;<\/span>background-color<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">strong<\/span>&gt;<\/span>: rgba(255, 255, 255, 0.2);\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">strong<\/span>&gt;<\/span>backdrop-filter<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">strong<\/span>&gt;<\/span>: blur(0.2rem);\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">strong<\/span>&gt;<\/span>border-radius<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">strong<\/span>&gt;<\/span>: 1rem;\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">strong<\/span>&gt;<\/span>padding<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">strong<\/span>&gt;<\/span>: 1rem;\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">strong<\/span>&gt;<\/span>color<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">strong<\/span>&gt;<\/span>: white;\n}<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">code<\/span>&gt;<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-3\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>El efecto de desenfoque suele expresarse en p\u00edxeles (<code>px<\/code>), pero en este ejercicio utilizaremos la unidad <code>rem<\/code> para pensar en t\u00e9rminos de valores proporcionales en lugar de cantidades fijas de p\u00edxeles.<\/p>\n\n\n\n<p>Adem\u00e1s del <code>backdrop-filter<\/code>, que define cu\u00e1nto se desenfocar\u00e1 la imagen de fondo (simulando la refracci\u00f3n de la luz en el vidrio), podemos jugar con el color del vidrio mediante <code>background-color<\/code>. En este caso, optaremos siempre por un blanco y, usando la funci\u00f3n <code>rgba()<\/code>, especificaremos un valor entre <code>0.0<\/code> y <code>1.0<\/code>, donde <code>0.0<\/code> es totalmente transparente y <code>1.0<\/code> es un material opaco blanco (lo cual, desde luego, no ser\u00eda vidrio).<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"801\" src=\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/07\/glass_2.png\" alt=\"Simulazione di Google Nest Hub con dentro orario e condizioni meteo\" class=\"wp-image-28709\" srcset=\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/07\/glass_2.png 1024w, https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/07\/glass_2-300x235.png 300w, https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/07\/glass_2-768x601.png 768w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Veamos el resultado de este efecto de vidrio b\u00e1sico, donde podemos controlar el desenfoque, el color y la opacidad. En este ejemplo, se ha aplicado <code>blur(0.2rem)<\/code> y <code>rgba(255, 255, 255, 0.2)<\/code>.<\/p>\n\n\n\n<p>A este nivel, podemos experimentar con la elecci\u00f3n de im\u00e1genes de fondo bien seleccionadas, el color de la tipograf\u00eda y la base, adem\u00e1s del desenfoque del vidrio. \u00a1Felicidades! Hab\u00e9is desbloqueado una nueva habilidad para sus dise\u00f1os personales y sus interfaces futuristas.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-el-borde-del-vidrio\">El borde del vidrio<\/h2>\n\n\n\n<p>Si observamos un vidrio real, veremos que en los bordes tiende a ser m\u00e1s opaco (menos transparente) y, en algunos casos, puede ser incluso m\u00e1s luminoso. Esto se debe a que la luz de fondo no llega directamente, sino que es refractada por el propio vidrio y, dado que el vidrio nunca es perfectamente puro, sufre m\u00e1s perturbaciones en los bordes que en la superficie perpendicular a nosotros.<\/p>\n\n\n\n<p>Esta caracter\u00edstica se puede reproducir en CSS con la propiedad <code>border<\/code>, ajustando el grosor, el color y la opacidad.<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-4\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">code<\/span>&gt;<\/span>.with-border {\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">mark<\/span>&gt;<\/span>    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">strong<\/span>&gt;<\/span>--border-width<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">strong<\/span>&gt;<\/span>: 0.1rem;\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">strong<\/span>&gt;<\/span>--border-color<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">strong<\/span>&gt;<\/span>: 255, 255, 255;\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">strong<\/span>&gt;<\/span>--border-opacity<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">strong<\/span>&gt;<\/span>: 0.1;\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">mark<\/span>&gt;<\/span>    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">strong<\/span>&gt;<\/span>border<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">strong<\/span>&gt;<\/span>: var(--border-width) solid rgba(var(--border-color), var(--border-opacity));\n}\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">code<\/span>&gt;<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-4\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Aprovechemos esta oportunidad para definir nuestros par\u00e1metros como variables, de modo que podamos modificar los \u201cpar\u00e1metros f\u00edsicos\u201d del vidrio sin tener que cambiar constantemente la implementaci\u00f3n en CSS. Es una forma de lograr mayor claridad mental, si lo prefieren \u262f\ufe0f<\/p>\n\n\n\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<div class=\"wp-block-genesis-blocks-gb-container gb-block-container\"><div class=\"gb-container-inside\"><div class=\"gb-container-content\"><\/div><\/div><\/div>\n\n\n\t\t\t\t\t<div\n\t\t\t\t\t\tclass=\"wp-block-uagb-image-gallery uagb-block-4e2b3729     \"\n\t\t\t\t\t\tstyle=\"\"\n\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t<div class=\"spectra-image-gallery spectra-image-gallery__layout--grid spectra-image-gallery__layout--grid-col-3 spectra-image-gallery__layout--grid-col-tab-3 spectra-image-gallery__layout--grid-col-mob-2\">\n\t\t\t\t\t\t\t\t\t\t\t<div class='spectra-image-gallery__media-wrapper' data-spectra-gallery-image-id='28731' tabindex=\"0\">\n\t\t\t\t\t\t\t<div class=\"spectra-image-gallery__media spectra-image-gallery__media--grid\">\n\t\t\t\t<picture>\n\t\t\t\t\t<source media=\"(min-width: 1024px)\" srcset=\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/07\/glass_4_border.png\">\n\t\t\t\t\t<source media=\"(min-width: 768px)\" srcset=\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/07\/glass_4_border.png\">\n\t\t\t\t\t<img decoding=\"async\" class=\"spectra-image-gallery__media-thumbnail spectra-image-gallery__media-thumbnail--grid\" src=\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/07\/glass_4_border-300x235.png\" alt=\"\" loading=\"lazy\" \/>\n\t\t\t\t<\/picture>\n\t\t\t\t<div class=\"spectra-image-gallery__media-thumbnail-blurrer\"><\/div>\n\t\t\t\t\t\t\t\t\t\t\t<div class=\"spectra-image-gallery__media-thumbnail-caption-wrapper spectra-image-gallery__media-thumbnail-caption-wrapper--overlay\">\n\t\t\t\t\t\t\t\t\t\t\t<div class=\"spectra-image-gallery__media-thumbnail-caption spectra-image-gallery__media-thumbnail-caption--overlay\">\n\t\t\t\t\tNo Caption\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<div class='spectra-image-gallery__media-wrapper' data-spectra-gallery-image-id='28733' tabindex=\"0\">\n\t\t\t\t\t\t\t<div class=\"spectra-image-gallery__media spectra-image-gallery__media--grid\">\n\t\t\t\t<picture>\n\t\t\t\t\t<source media=\"(min-width: 1024px)\" srcset=\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/07\/glass_4_border2.png\">\n\t\t\t\t\t<source media=\"(min-width: 768px)\" srcset=\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/07\/glass_4_border2.png\">\n\t\t\t\t\t<img decoding=\"async\" class=\"spectra-image-gallery__media-thumbnail spectra-image-gallery__media-thumbnail--grid\" src=\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/07\/glass_4_border2-300x235.png\" alt=\"\" loading=\"lazy\" \/>\n\t\t\t\t<\/picture>\n\t\t\t\t<div class=\"spectra-image-gallery__media-thumbnail-blurrer\"><\/div>\n\t\t\t\t\t\t\t\t\t\t\t<div class=\"spectra-image-gallery__media-thumbnail-caption-wrapper spectra-image-gallery__media-thumbnail-caption-wrapper--overlay\">\n\t\t\t\t\t\t\t\t\t\t\t<div class=\"spectra-image-gallery__media-thumbnail-caption spectra-image-gallery__media-thumbnail-caption--overlay\">\n\t\t\t\t\tNo Caption\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<div class='spectra-image-gallery__media-wrapper' data-spectra-gallery-image-id='28732' tabindex=\"0\">\n\t\t\t\t\t\t\t<div class=\"spectra-image-gallery__media spectra-image-gallery__media--grid\">\n\t\t\t\t<picture>\n\t\t\t\t\t<source media=\"(min-width: 1024px)\" srcset=\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/07\/glass_4_border3.png\">\n\t\t\t\t\t<source media=\"(min-width: 768px)\" srcset=\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/07\/glass_4_border3.png\">\n\t\t\t\t\t<img decoding=\"async\" class=\"spectra-image-gallery__media-thumbnail spectra-image-gallery__media-thumbnail--grid\" src=\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/07\/glass_4_border3-300x235.png\" alt=\"\" loading=\"lazy\" \/>\n\t\t\t\t<\/picture>\n\t\t\t\t<div class=\"spectra-image-gallery__media-thumbnail-blurrer\"><\/div>\n\t\t\t\t\t\t\t\t\t\t\t<div class=\"spectra-image-gallery__media-thumbnail-caption-wrapper spectra-image-gallery__media-thumbnail-caption-wrapper--overlay\">\n\t\t\t\t\t\t\t\t\t\t\t<div class=\"spectra-image-gallery__media-thumbnail-caption spectra-image-gallery__media-thumbnail-caption--overlay\">\n\t\t\t\t\tNo Caption\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t<\/div><\/div>\n\n\n\n<p>Ahora tenemos la habilidad de aplicar el efecto del borde, lo cual nos permite hacer f\u00e1cilmente una mejora en nuestro dise\u00f1o al especificar bordes diferentes para cada lado, logrando dar una direcci\u00f3n a la luz. Por ejemplo, si imaginamos que la luz proviene desde la esquina inferior derecha y se refleja en los lados opuestos del vidrio, podr\u00edamos recrear este efecto usando cuatro niveles de opacidad diferentes.<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-5\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">code<\/span>&gt;<\/span> .with-border-and-reflection {\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">strong<\/span>&gt;<\/span>--border-width<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">strong<\/span>&gt;<\/span>: 0.1rem;\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">strong<\/span>&gt;<\/span>--border-color<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">strong<\/span>&gt;<\/span>: 255, 255, 255;\n    \n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">strong<\/span>&gt;<\/span>--border-opacity-top<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">strong<\/span>&gt;<\/span>: 0.7;\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">strong<\/span>&gt;<\/span>--border-opacity-right<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">strong<\/span>&gt;<\/span>: 0.7;\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">strong<\/span>&gt;<\/span>--border-opacity-bottom<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">strong<\/span>&gt;<\/span>: 0.3;\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">strong<\/span>&gt;<\/span>--border-opacity-left<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">strong<\/span>&gt;<\/span>: 0.2;\n\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">strong<\/span>&gt;<\/span>border-top<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">strong<\/span>&gt;<\/span>: var(--border-width) solid rgba(var(--border-color), var(--border-opacity-top));\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">strong<\/span>&gt;<\/span>border-right<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">strong<\/span>&gt;<\/span>: var(--border-width) solid rgba(var(--border-color), var(--border-opacity-right));\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">strong<\/span>&gt;<\/span>border-bottom<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">strong<\/span>&gt;<\/span>: var(--border-width) solid rgba(var(--border-color), var(--border-opacity-bottom));\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">strong<\/span>&gt;<\/span>border-left<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">strong<\/span>&gt;<\/span>: var(--border-width) solid rgba(var(--border-color), var(--border-opacity-left));\n}<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">code<\/span>&gt;<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-5\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"801\" src=\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/07\/glass_4_border4.png\" alt=\"\" class=\"wp-image-28734\" srcset=\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/07\/glass_4_border4.png 1024w, https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/07\/glass_4_border4-300x235.png 300w, https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/07\/glass_4_border4-768x601.png 768w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>\u00bfPero por qu\u00e9 detenernos aqu\u00ed? \u00bfY si intentamos simular diferentes materiales jugando con otras fant\u00e1sticas propiedades del CSS moderno?<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-creamos-nuestra-coleccion-de-efectos-de-vidrio\">\u00a1Creamos nuestra colecci\u00f3n de efectos de vidrio!<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-vetro-ondulato\">Vetro ondulato<\/h3>\n\n\n\n<p>Para lograr un efecto que d\u00e9 la impresi\u00f3n de un vidrio ondulado, debemos recurrir a una propiedad poderosa pero poco conocida: background-image. Normalmente, se usa con archivos a trav\u00e9s de la funci\u00f3n url(), pero en realidad su verdadero poder proviene del uso de gradientes. En este caso, para obtener nuestro efecto, aprovecharemos precisamente esta capacidad de &#8220;composici\u00f3n&#8221; del CSS.<\/p>\n\n\n\n<p>El patr\u00f3n de una onda se puede lograr de muchas maneras, y aqu\u00ed entra en juego tu creatividad junto con la habilidad (que se debe entrenar) de traducir ideas en c\u00f3digo. Una forma de hacerlo es con un gradiente lineal que comienza en 0.0 y vuelve a 0.0 pasando por 1.0 y -1.0\u2026 \u00bfte suena familiar?<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"801\" src=\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/07\/glass_5_waevy.png\" alt=\"\" class=\"wp-image-28736\" srcset=\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/07\/glass_5_waevy.png 1024w, https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/07\/glass_5_waevy-300x235.png 300w, https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/07\/glass_5_waevy-768x601.png 768w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Esta vez definimos base, m\u00ednimo y m\u00e1ximo en las variables CSS, y recordemos especificar la direcci\u00f3n en \u00e1ngulos (0deg es vertical). Seg\u00fan esta direcci\u00f3n, debemos &#8220;comprimir&#8221; nuestro background-size en el eje correspondiente (en este caso, el eje Y):<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-6\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">code<\/span>&gt;<\/span>.waved {\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">strong<\/span>&gt;<\/span>background-image<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">strong<\/span>&gt;<\/span>: linear-gradient(0deg, var(--base), var(--maximum), var(--base), var(--minimum), var(--base));\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">strong<\/span>&gt;<\/span>background-size<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">strong<\/span>&gt;<\/span>: 100% 10%;\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">strong<\/span>&gt;<\/span>--base<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">strong<\/span>&gt;<\/span>: #fff3;\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">strong<\/span>&gt;<\/span>--minimum<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">strong<\/span>&gt;<\/span>: #fff0;\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">strong<\/span>&gt;<\/span>--maximum<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">strong<\/span>&gt;<\/span>: #fff6;\n}<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">code<\/span>&gt;<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-6\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<h2 class=\"wp-block-heading\" id=\"h-vidrio-con-patron\">Vidrio con patr\u00f3n<\/h2>\n\n\n\n<p>Hemos visto c\u00f3mo usar background-image para crear un efecto que se repite horizontal o verticalmente, como el ondulado. Pero, \u00bfqu\u00e9 sucede si se repite en ambas direcciones?<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-7\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">code<\/span>&gt;<\/span>.pattern-brushed {\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">strong<\/span>&gt;<\/span>background-image<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">strong<\/span>&gt;<\/span>: linear-gradient(45deg, #fff0, #fff3, #fff0);\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">strong<\/span>&gt;<\/span>background-size<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">strong<\/span>&gt;<\/span>: 10% 10%;\n}\n\n.pattern-grid {\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">strong<\/span>&gt;<\/span>background-image<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">strong<\/span>&gt;<\/span>: linear-gradient(0deg, #fff3, #fff0 0.1rem), linear-gradient(90deg, #fff3, #fff0 0.1rem);\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">strong<\/span>&gt;<\/span>background-size<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">strong<\/span>&gt;<\/span>: 5% 5%;\n}\n\n.pattern-triangles {\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">strong<\/span>&gt;<\/span>background-image<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">strong<\/span>&gt;<\/span>: linear-gradient(153deg, #fff3 0.2rem, #fff0 0.1rem);\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">strong<\/span>&gt;<\/span>background-size<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">strong<\/span>&gt;<\/span>: 5% 5%;\n}<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">code<\/span>&gt;<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-7\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\t\t\t\t\t<div\n\t\t\t\t\t\tclass=\"wp-block-uagb-image-gallery uagb-block-2561738c     \"\n\t\t\t\t\t\tstyle=\"\"\n\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t<div class=\"spectra-image-gallery spectra-image-gallery__layout--grid spectra-image-gallery__layout--grid-col-3 spectra-image-gallery__layout--grid-col-tab-3 spectra-image-gallery__layout--grid-col-mob-2\">\n\t\t\t\t\t\t\t\t\t\t\t<div class='spectra-image-gallery__media-wrapper' data-spectra-gallery-image-id='28759' tabindex=\"0\">\n\t\t\t\t\t\t\t<div class=\"spectra-image-gallery__media spectra-image-gallery__media--grid\">\n\t\t\t\t<picture>\n\t\t\t\t\t<source media=\"(min-width: 1024px)\" srcset=\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/07\/glass_5_pattern-triangles.png\">\n\t\t\t\t\t<source media=\"(min-width: 768px)\" srcset=\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/07\/glass_5_pattern-triangles.png\">\n\t\t\t\t\t<img decoding=\"async\" class=\"spectra-image-gallery__media-thumbnail spectra-image-gallery__media-thumbnail--grid\" src=\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/07\/glass_5_pattern-triangles-300x235.png\" alt=\"Glassmorphism con pattern\" loading=\"lazy\" \/>\n\t\t\t\t<\/picture>\n\t\t\t\t<div class=\"spectra-image-gallery__media-thumbnail-blurrer\"><\/div>\n\t\t\t\t\t\t\t\t\t\t\t<div class=\"spectra-image-gallery__media-thumbnail-caption-wrapper spectra-image-gallery__media-thumbnail-caption-wrapper--overlay\">\n\t\t\t\t\t\t\t\t\t\t\t<div class=\"spectra-image-gallery__media-thumbnail-caption spectra-image-gallery__media-thumbnail-caption--overlay\">\n\t\t\t\t\t.pattern-triangles\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<div class='spectra-image-gallery__media-wrapper' data-spectra-gallery-image-id='28760' tabindex=\"0\">\n\t\t\t\t\t\t\t<div class=\"spectra-image-gallery__media spectra-image-gallery__media--grid\">\n\t\t\t\t<picture>\n\t\t\t\t\t<source media=\"(min-width: 1024px)\" srcset=\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/07\/glass_5_pattern-gird.png\">\n\t\t\t\t\t<source media=\"(min-width: 768px)\" srcset=\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/07\/glass_5_pattern-gird.png\">\n\t\t\t\t\t<img decoding=\"async\" class=\"spectra-image-gallery__media-thumbnail spectra-image-gallery__media-thumbnail--grid\" src=\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/07\/glass_5_pattern-gird-300x235.png\" alt=\"Glassmorphism con pattern\" loading=\"lazy\" \/>\n\t\t\t\t<\/picture>\n\t\t\t\t<div class=\"spectra-image-gallery__media-thumbnail-blurrer\"><\/div>\n\t\t\t\t\t\t\t\t\t\t\t<div class=\"spectra-image-gallery__media-thumbnail-caption-wrapper spectra-image-gallery__media-thumbnail-caption-wrapper--overlay\">\n\t\t\t\t\t\t\t\t\t\t\t<div class=\"spectra-image-gallery__media-thumbnail-caption spectra-image-gallery__media-thumbnail-caption--overlay\">\n\t\t\t\t\t.pattern-grid\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<div class='spectra-image-gallery__media-wrapper' data-spectra-gallery-image-id='28761' tabindex=\"0\">\n\t\t\t\t\t\t\t<div class=\"spectra-image-gallery__media spectra-image-gallery__media--grid\">\n\t\t\t\t<picture>\n\t\t\t\t\t<source media=\"(min-width: 1024px)\" srcset=\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/07\/glass_5_pattern.png\">\n\t\t\t\t\t<source media=\"(min-width: 768px)\" srcset=\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/07\/glass_5_pattern.png\">\n\t\t\t\t\t<img decoding=\"async\" class=\"spectra-image-gallery__media-thumbnail spectra-image-gallery__media-thumbnail--grid\" src=\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/07\/glass_5_pattern-300x235.png\" alt=\"Glassmorphism con pattern\" loading=\"lazy\" \/>\n\t\t\t\t<\/picture>\n\t\t\t\t<div class=\"spectra-image-gallery__media-thumbnail-blurrer\"><\/div>\n\t\t\t\t\t\t\t\t\t\t\t<div class=\"spectra-image-gallery__media-thumbnail-caption-wrapper spectra-image-gallery__media-thumbnail-caption-wrapper--overlay\">\n\t\t\t\t\t\t\t\t\t\t\t<div class=\"spectra-image-gallery__media-thumbnail-caption spectra-image-gallery__media-thumbnail-caption--overlay\">\n\t\t\t\t\t.pattern\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\n\n\n<h2 class=\"wp-block-heading\" id=\"h-vidrio-con-reflejos\"><strong>Vidrio con reflejos<\/strong><\/h2>\n\n\n\n<p>Ahora que estamos familiarizados con background-image y el uso de la funci\u00f3n linear-gradient, \u00a1podemos aprovecharla para un efecto adicional!<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-8\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">code<\/span>&gt;<\/span>.reflected-light {\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">strong<\/span>&gt;<\/span>background-image<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">strong<\/span>&gt;<\/span>: linear-gradient(45deg, #fff0, #fff0 70%, #fff6 60%, #fff6 90%, #fff0 90%), linear-gradient(45deg, #fff0, #fff0 20%, #fff6 50%, #fff6 60%, #fff0 60%);\n}<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">code<\/span>&gt;<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-8\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"801\" src=\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/07\/glass_6_light.png\" alt=\"\" class=\"wp-image-28768\" srcset=\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/07\/glass_6_light.png 1024w, https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/07\/glass_6_light-300x235.png 300w, https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/07\/glass_6_light-768x601.png 768w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-vidrio-coloreado\">Vidrio coloreado<\/h2>\n\n\n\n<p>Para centrarnos en otros par\u00e1metros, no hemos cambiado nunca el color del vidrio, dejando todo en blanco. Pero es evidente que, con el color, realmente podemos darle un toque extra de personalidad.<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-9\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">code<\/span>&gt;<\/span>.aqua-marine {\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">strong<\/span>&gt;<\/span>background-image<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">strong<\/span>&gt;<\/span>: linear-gradient(0deg, #00f7ff9e 30%, #0072ff99);\n}\n\n.color-from-half {\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">strong<\/span>&gt;<\/span>background-image<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">strong<\/span>&gt;<\/span>: linear-gradient(0deg, #fff0 45%, #ff03 30%, #f009);\n}\n\n.color-points {\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">strong<\/span>&gt;<\/span>background-image<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">strong<\/span>&gt;<\/span>: radial-gradient(#f096 20%, transparent 50%);\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">strong<\/span>&gt;<\/span>background-size<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">strong<\/span>&gt;<\/span>: 2% 2%;\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">strong<\/span>&gt;<\/span>background-color<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">strong<\/span>&gt;<\/span>: #f096;\n}<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">code<\/span>&gt;<\/span>\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-9\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\t\t\t\t\t<div\n\t\t\t\t\t\tclass=\"wp-block-uagb-image-gallery uagb-block-4cea33f5     \"\n\t\t\t\t\t\tstyle=\"\"\n\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t<div class=\"spectra-image-gallery spectra-image-gallery__layout--grid spectra-image-gallery__layout--grid-col-3 spectra-image-gallery__layout--grid-col-tab-3 spectra-image-gallery__layout--grid-col-mob-2\">\n\t\t\t\t\t\t\t\t\t\t\t<div class='spectra-image-gallery__media-wrapper' data-spectra-gallery-image-id='28773' tabindex=\"0\">\n\t\t\t\t\t\t\t<div class=\"spectra-image-gallery__media spectra-image-gallery__media--grid\">\n\t\t\t\t<picture>\n\t\t\t\t\t<source media=\"(min-width: 1024px)\" srcset=\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/07\/glass_6_color2.png\">\n\t\t\t\t\t<source media=\"(min-width: 768px)\" srcset=\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/07\/glass_6_color2.png\">\n\t\t\t\t\t<img decoding=\"async\" class=\"spectra-image-gallery__media-thumbnail spectra-image-gallery__media-thumbnail--grid\" src=\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/07\/glass_6_color2-300x235.png\" alt=\"Glassmorphism con vetro colorato\" loading=\"lazy\" \/>\n\t\t\t\t<\/picture>\n\t\t\t\t<div class=\"spectra-image-gallery__media-thumbnail-blurrer\"><\/div>\n\t\t\t\t\t\t\t\t\t\t\t<div class=\"spectra-image-gallery__media-thumbnail-caption-wrapper spectra-image-gallery__media-thumbnail-caption-wrapper--overlay\">\n\t\t\t\t\t\t\t\t\t\t\t<div class=\"spectra-image-gallery__media-thumbnail-caption spectra-image-gallery__media-thumbnail-caption--overlay\">\n\t\t\t\t\t.aqua-marine\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<div class='spectra-image-gallery__media-wrapper' data-spectra-gallery-image-id='28774' tabindex=\"0\">\n\t\t\t\t\t\t\t<div class=\"spectra-image-gallery__media spectra-image-gallery__media--grid\">\n\t\t\t\t<picture>\n\t\t\t\t\t<source media=\"(min-width: 1024px)\" srcset=\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/07\/glass_6_color3.png\">\n\t\t\t\t\t<source media=\"(min-width: 768px)\" srcset=\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/07\/glass_6_color3.png\">\n\t\t\t\t\t<img decoding=\"async\" class=\"spectra-image-gallery__media-thumbnail spectra-image-gallery__media-thumbnail--grid\" src=\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/07\/glass_6_color3-300x235.png\" alt=\"Glassmorphism con vetro colorato\" loading=\"lazy\" \/>\n\t\t\t\t<\/picture>\n\t\t\t\t<div class=\"spectra-image-gallery__media-thumbnail-blurrer\"><\/div>\n\t\t\t\t\t\t\t\t\t\t\t<div class=\"spectra-image-gallery__media-thumbnail-caption-wrapper spectra-image-gallery__media-thumbnail-caption-wrapper--overlay\">\n\t\t\t\t\t\t\t\t\t\t\t<div class=\"spectra-image-gallery__media-thumbnail-caption spectra-image-gallery__media-thumbnail-caption--overlay\">\n\t\t\t\t\t-color-points\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<div class='spectra-image-gallery__media-wrapper' data-spectra-gallery-image-id='28775' tabindex=\"0\">\n\t\t\t\t\t\t\t<div class=\"spectra-image-gallery__media spectra-image-gallery__media--grid\">\n\t\t\t\t<picture>\n\t\t\t\t\t<source media=\"(min-width: 1024px)\" srcset=\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/07\/glass_6_color1.png\">\n\t\t\t\t\t<source media=\"(min-width: 768px)\" srcset=\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/07\/glass_6_color1.png\">\n\t\t\t\t\t<img decoding=\"async\" class=\"spectra-image-gallery__media-thumbnail spectra-image-gallery__media-thumbnail--grid\" src=\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/07\/glass_6_color1-300x235.png\" alt=\"Glassmorphism con vetro colorato\" loading=\"lazy\" \/>\n\t\t\t\t<\/picture>\n\t\t\t\t<div class=\"spectra-image-gallery__media-thumbnail-blurrer\"><\/div>\n\t\t\t\t\t\t\t\t\t\t\t<div class=\"spectra-image-gallery__media-thumbnail-caption-wrapper spectra-image-gallery__media-thumbnail-caption-wrapper--overlay\">\n\t\t\t\t\t\t\t\t\t\t\t<div class=\"spectra-image-gallery__media-thumbnail-caption spectra-image-gallery__media-thumbnail-caption--overlay\">\n\t\t\t\t\t-color-from-half\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\n\n\n<h2 class=\"wp-block-heading\" id=\"h-efecto-lente\">Efecto Lente<\/h2>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"326\" height=\"329\" src=\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/07\/zoom_lens.gif\" alt=\"\" class=\"wp-image-28957\"\/><\/figure>\n\n\n\n<p>Para obtener un simp\u00e1tico efecto de lente y jugar con el aumento causado por el vidrio, debemos recurrir a un peque\u00f1o truco, ya que no podemos usar backdrop-filter con la funci\u00f3n blur(). Utilizaremos un pseudo-elemento ::before y heredaremos el fondo del contenedor para luego poder cambiar la propiedad filter en lugar de backdrop-filter.<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-10\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">code<\/span>&gt;<\/span>.lens {\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">strong<\/span>&gt;<\/span>--zoom<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">strong<\/span>&gt;<\/span>: 100%;\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">strong<\/span>&gt;<\/span>transition<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">strong<\/span>&gt;<\/span>: background-size 1s ease-in;\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">strong<\/span>&gt;<\/span>background-image<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">strong<\/span>&gt;<\/span>: inherit;\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">strong<\/span>&gt;<\/span>overflow<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">strong<\/span>&gt;<\/span>: hidden;\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">strong<\/span>&gt;<\/span>background-size<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">strong<\/span>&gt;<\/span>: var(--zoom);\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">strong<\/span>&gt;<\/span>background-attachment<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">strong<\/span>&gt;<\/span>: fixed;\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">strong<\/span>&gt;<\/span>background-position<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">strong<\/span>&gt;<\/span>: center;\n}\n\n.lens::before {\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">strong<\/span>&gt;<\/span>content<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">strong<\/span>&gt;<\/span>: '';\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">strong<\/span>&gt;<\/span>background<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">strong<\/span>&gt;<\/span>: inherit;\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">strong<\/span>&gt;<\/span>position<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">strong<\/span>&gt;<\/span>: absolute;\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">strong<\/span>&gt;<\/span>inset<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">strong<\/span>&gt;<\/span>: -0.5rem;\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">strong<\/span>&gt;<\/span>filter<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">strong<\/span>&gt;<\/span>: blur(0.1rem);\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">strong<\/span>&gt;<\/span>z-index<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">strong<\/span>&gt;<\/span>: -1;\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">strong<\/span>&gt;<\/span>background-blend-mode<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">strong<\/span>&gt;<\/span>: overlay;\n}<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">code<\/span>&gt;<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-10\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<h2 class=\"wp-block-heading\" id=\"h-conclusiones\">Conclusiones<\/h2>\n\n\n\n<p>El objetivo de este tutorial no era promover el uso universal del <em>glassmorphism<\/em>, ni tampoco fomentar pr\u00e1cticas que puedan reducir la accesibilidad para algunos usuarios. Escribir sobre un vidrio conlleva muchas dificultades, pero en el contexto adecuado puede a\u00f1adir un toque futurista a nuestros dise\u00f1os, \u00a1y sobre todo es extremadamente divertido de implementar!<\/p>\n\n\n\n<p>\u00bfY t\u00fa, qu\u00e9 esperas para crear tu propio efecto de vidrio y compartirlo en la Comunidad de Codemotion en Telegram? \u00a1Te esperamos! \ud83d\udc40<\/p>\n","protected":false},"excerpt":{"rendered":"<p>El glassmorphism es una tendencia en el dise\u00f1o que busca replicar el aspecto y las propiedades del vidrio en los elementos de la interfaz o de un contenido. Este estilo se caracteriza por el uso de transparencia, desenfoque y efectos de luz para crear la ilusi\u00f3n de superficies de vidrio. Seamos sinceros: un vidrio transparente&#8230; <a class=\"more-link\" href=\"https:\/\/www.codemotion.com\/magazine\/es\/frontend-es\/diseno-ux\/glassmorphism-con-css-un-nuevo-enfoque\/\">Read more<\/a><\/p>\n","protected":false},"author":255,"featured_media":28780,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_editorskit_title_hidden":false,"_editorskit_reading_time":0,"_editorskit_is_block_options_detached":false,"_editorskit_block_options_position":"{}","_uag_custom_page_level_css":"","_genesis_hide_title":false,"_genesis_hide_breadcrumbs":false,"_genesis_hide_singular_image":false,"_genesis_hide_footer_widgets":false,"_genesis_custom_body_class":"","_genesis_custom_post_class":"","_genesis_layout":"","footnotes":""},"categories":[10634],"tags":[11742],"collections":[],"class_list":{"0":"post-30300","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-diseno-ux","8":"tag-css-es","9":"entry"},"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v26.9 (Yoast SEO v26.9) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Glassmorphism con CSS: \u00a1un nuevo enfoque! - Codemotion Magazine<\/title>\n<meta name=\"description\" content=\"Descubre c\u00f3mo crear un buen efecto glassmorphism con CSS. Esta gu\u00eda paso a paso cubre todo, desde la configuraci\u00f3n b\u00e1sica hasta t\u00e9cnicas avanzadas.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.codemotion.com\/magazine\/es\/frontend-es\/diseno-ux\/glassmorphism-con-css-un-nuevo-enfoque\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Glassmorphism con CSS: \u00a1un nuevo enfoque!\" \/>\n<meta property=\"og:description\" content=\"Descubre c\u00f3mo crear un buen efecto glassmorphism con CSS. Esta gu\u00eda paso a paso cubre todo, desde la configuraci\u00f3n b\u00e1sica hasta t\u00e9cnicas avanzadas.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.codemotion.com\/magazine\/es\/frontend-es\/diseno-ux\/glassmorphism-con-css-un-nuevo-enfoque\/\" \/>\n<meta property=\"og:site_name\" content=\"Codemotion Magazine\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/Codemotion.Italy\/\" \/>\n<meta property=\"article:published_time\" content=\"2024-10-29T15:36:52+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-10-29T15:54:01+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/07\/glassmorphism.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1280\" \/>\n\t<meta property=\"og:image:height\" content=\"720\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Massimo Avvisati\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@MassimoAvvisati\" \/>\n<meta name=\"twitter:site\" content=\"@CodemotionIT\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Massimo Avvisati\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"9 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/es\/frontend-es\/diseno-ux\/glassmorphism-con-css-un-nuevo-enfoque\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/es\/frontend-es\/diseno-ux\/glassmorphism-con-css-un-nuevo-enfoque\/\"},\"author\":{\"name\":\"Massimo Avvisati\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#\/schema\/person\/7d033c17576f9bdfec9dab783e58976a\"},\"headline\":\"Glassmorphism con CSS: \u00a1un nuevo enfoque!\",\"datePublished\":\"2024-10-29T15:36:52+00:00\",\"dateModified\":\"2024-10-29T15:54:01+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/es\/frontend-es\/diseno-ux\/glassmorphism-con-css-un-nuevo-enfoque\/\"},\"wordCount\":1523,\"publisher\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/es\/frontend-es\/diseno-ux\/glassmorphism-con-css-un-nuevo-enfoque\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/07\/glassmorphism.jpg\",\"keywords\":[\"CSS\"],\"articleSection\":[\"Dise\u00f1o\/UX\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/es\/frontend-es\/diseno-ux\/glassmorphism-con-css-un-nuevo-enfoque\/\",\"url\":\"https:\/\/www.codemotion.com\/magazine\/es\/frontend-es\/diseno-ux\/glassmorphism-con-css-un-nuevo-enfoque\/\",\"name\":\"Glassmorphism con CSS: \u00a1un nuevo enfoque! - Codemotion Magazine\",\"isPartOf\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/es\/frontend-es\/diseno-ux\/glassmorphism-con-css-un-nuevo-enfoque\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/es\/frontend-es\/diseno-ux\/glassmorphism-con-css-un-nuevo-enfoque\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/07\/glassmorphism.jpg\",\"datePublished\":\"2024-10-29T15:36:52+00:00\",\"dateModified\":\"2024-10-29T15:54:01+00:00\",\"description\":\"Descubre c\u00f3mo crear un buen efecto glassmorphism con CSS. Esta gu\u00eda paso a paso cubre todo, desde la configuraci\u00f3n b\u00e1sica hasta t\u00e9cnicas avanzadas.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/es\/frontend-es\/diseno-ux\/glassmorphism-con-css-un-nuevo-enfoque\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.codemotion.com\/magazine\/es\/frontend-es\/diseno-ux\/glassmorphism-con-css-un-nuevo-enfoque\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/es\/frontend-es\/diseno-ux\/glassmorphism-con-css-un-nuevo-enfoque\/#primaryimage\",\"url\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/07\/glassmorphism.jpg\",\"contentUrl\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/07\/glassmorphism.jpg\",\"width\":1280,\"height\":720,\"caption\":\"Glassmorphism example\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/es\/frontend-es\/diseno-ux\/glassmorphism-con-css-un-nuevo-enfoque\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.codemotion.com\/magazine\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Frontend\",\"item\":\"https:\/\/www.codemotion.com\/magazine\/es\/frontend-es\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Dise\u00f1o\/UX\",\"item\":\"https:\/\/www.codemotion.com\/magazine\/es\/frontend-es\/diseno-ux\/\"},{\"@type\":\"ListItem\",\"position\":4,\"name\":\"Glassmorphism con CSS: \u00a1un nuevo enfoque!\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#website\",\"url\":\"https:\/\/www.codemotion.com\/magazine\/\",\"name\":\"Codemotion Magazine\",\"description\":\"We code the future. Together\",\"publisher\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.codemotion.com\/magazine\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#organization\",\"name\":\"Codemotion\",\"url\":\"https:\/\/www.codemotion.com\/magazine\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/11\/codemotionlogo.png\",\"contentUrl\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/11\/codemotionlogo.png\",\"width\":225,\"height\":225,\"caption\":\"Codemotion\"},\"image\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/Codemotion.Italy\/\",\"https:\/\/x.com\/CodemotionIT\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#\/schema\/person\/7d033c17576f9bdfec9dab783e58976a\",\"name\":\"Massimo Avvisati\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/04\/massimo-100x100.jpeg\",\"contentUrl\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/04\/massimo-100x100.jpeg\",\"caption\":\"Massimo Avvisati\"},\"description\":\"I am a full-stack developer, digital artist, maker, and educator with a passion for Artificial Intelligence. I create immersive installations and develop educational software, pushing the boundaries of technology. I believe in Free Software and Creative Commons licensing as a foundation for knowledge sharing. My goal is to craft unique and engaging educational experiences using cutting-edge technology, showcasing the potential of AI in education. Currently, my focus is on Educational Technology, where I strive to create innovative software and hardware tools that engage and inspire learners. I firmly believe in the power of Free Software and Creative Commons, utilizing these open platforms to ensure my work is accessible and reusable by others. I actively reject restrictive platforms that limit creativity and collaboration. By combining my artistic vision with cutting-edge technology, I aim to develop unique educational experiences that spark curiosity and foster a love of learning. Through my work, I strive to demonstrate the incredible potential of AI in education and the arts.\",\"sameAs\":[\"https:\/\/www.linkedin.com\/in\/massimo-avvisati-7220312\/\",\"https:\/\/x.com\/MassimoAvvisati\"],\"knowsAbout\":[\"Javascript\",\"Node.js\",\"PHP\",\"AI\",\"Machine Learning\",\"Web Development\",\"Free Software\"],\"knowsLanguage\":[\"English\",\"Spanish\",\"Italian\"],\"jobTitle\":\"Head of EdTech R&D\",\"worksFor\":\"Codemotion spa\",\"url\":\"https:\/\/www.codemotion.com\/magazine\/author\/massimo-avvisati\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Glassmorphism con CSS: \u00a1un nuevo enfoque! - Codemotion Magazine","description":"Descubre c\u00f3mo crear un buen efecto glassmorphism con CSS. Esta gu\u00eda paso a paso cubre todo, desde la configuraci\u00f3n b\u00e1sica hasta t\u00e9cnicas avanzadas.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.codemotion.com\/magazine\/es\/frontend-es\/diseno-ux\/glassmorphism-con-css-un-nuevo-enfoque\/","og_locale":"en_US","og_type":"article","og_title":"Glassmorphism con CSS: \u00a1un nuevo enfoque!","og_description":"Descubre c\u00f3mo crear un buen efecto glassmorphism con CSS. Esta gu\u00eda paso a paso cubre todo, desde la configuraci\u00f3n b\u00e1sica hasta t\u00e9cnicas avanzadas.","og_url":"https:\/\/www.codemotion.com\/magazine\/es\/frontend-es\/diseno-ux\/glassmorphism-con-css-un-nuevo-enfoque\/","og_site_name":"Codemotion Magazine","article_publisher":"https:\/\/www.facebook.com\/Codemotion.Italy\/","article_published_time":"2024-10-29T15:36:52+00:00","article_modified_time":"2024-10-29T15:54:01+00:00","og_image":[{"width":1280,"height":720,"url":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/07\/glassmorphism.jpg","type":"image\/jpeg"}],"author":"Massimo Avvisati","twitter_card":"summary_large_image","twitter_creator":"@MassimoAvvisati","twitter_site":"@CodemotionIT","twitter_misc":{"Written by":"Massimo Avvisati","Est. reading time":"9 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.codemotion.com\/magazine\/es\/frontend-es\/diseno-ux\/glassmorphism-con-css-un-nuevo-enfoque\/#article","isPartOf":{"@id":"https:\/\/www.codemotion.com\/magazine\/es\/frontend-es\/diseno-ux\/glassmorphism-con-css-un-nuevo-enfoque\/"},"author":{"name":"Massimo Avvisati","@id":"https:\/\/www.codemotion.com\/magazine\/#\/schema\/person\/7d033c17576f9bdfec9dab783e58976a"},"headline":"Glassmorphism con CSS: \u00a1un nuevo enfoque!","datePublished":"2024-10-29T15:36:52+00:00","dateModified":"2024-10-29T15:54:01+00:00","mainEntityOfPage":{"@id":"https:\/\/www.codemotion.com\/magazine\/es\/frontend-es\/diseno-ux\/glassmorphism-con-css-un-nuevo-enfoque\/"},"wordCount":1523,"publisher":{"@id":"https:\/\/www.codemotion.com\/magazine\/#organization"},"image":{"@id":"https:\/\/www.codemotion.com\/magazine\/es\/frontend-es\/diseno-ux\/glassmorphism-con-css-un-nuevo-enfoque\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/07\/glassmorphism.jpg","keywords":["CSS"],"articleSection":["Dise\u00f1o\/UX"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.codemotion.com\/magazine\/es\/frontend-es\/diseno-ux\/glassmorphism-con-css-un-nuevo-enfoque\/","url":"https:\/\/www.codemotion.com\/magazine\/es\/frontend-es\/diseno-ux\/glassmorphism-con-css-un-nuevo-enfoque\/","name":"Glassmorphism con CSS: \u00a1un nuevo enfoque! - Codemotion Magazine","isPartOf":{"@id":"https:\/\/www.codemotion.com\/magazine\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.codemotion.com\/magazine\/es\/frontend-es\/diseno-ux\/glassmorphism-con-css-un-nuevo-enfoque\/#primaryimage"},"image":{"@id":"https:\/\/www.codemotion.com\/magazine\/es\/frontend-es\/diseno-ux\/glassmorphism-con-css-un-nuevo-enfoque\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/07\/glassmorphism.jpg","datePublished":"2024-10-29T15:36:52+00:00","dateModified":"2024-10-29T15:54:01+00:00","description":"Descubre c\u00f3mo crear un buen efecto glassmorphism con CSS. Esta gu\u00eda paso a paso cubre todo, desde la configuraci\u00f3n b\u00e1sica hasta t\u00e9cnicas avanzadas.","breadcrumb":{"@id":"https:\/\/www.codemotion.com\/magazine\/es\/frontend-es\/diseno-ux\/glassmorphism-con-css-un-nuevo-enfoque\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.codemotion.com\/magazine\/es\/frontend-es\/diseno-ux\/glassmorphism-con-css-un-nuevo-enfoque\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codemotion.com\/magazine\/es\/frontend-es\/diseno-ux\/glassmorphism-con-css-un-nuevo-enfoque\/#primaryimage","url":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/07\/glassmorphism.jpg","contentUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/07\/glassmorphism.jpg","width":1280,"height":720,"caption":"Glassmorphism example"},{"@type":"BreadcrumbList","@id":"https:\/\/www.codemotion.com\/magazine\/es\/frontend-es\/diseno-ux\/glassmorphism-con-css-un-nuevo-enfoque\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.codemotion.com\/magazine\/"},{"@type":"ListItem","position":2,"name":"Frontend","item":"https:\/\/www.codemotion.com\/magazine\/es\/frontend-es\/"},{"@type":"ListItem","position":3,"name":"Dise\u00f1o\/UX","item":"https:\/\/www.codemotion.com\/magazine\/es\/frontend-es\/diseno-ux\/"},{"@type":"ListItem","position":4,"name":"Glassmorphism con CSS: \u00a1un nuevo enfoque!"}]},{"@type":"WebSite","@id":"https:\/\/www.codemotion.com\/magazine\/#website","url":"https:\/\/www.codemotion.com\/magazine\/","name":"Codemotion Magazine","description":"We code the future. Together","publisher":{"@id":"https:\/\/www.codemotion.com\/magazine\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.codemotion.com\/magazine\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.codemotion.com\/magazine\/#organization","name":"Codemotion","url":"https:\/\/www.codemotion.com\/magazine\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codemotion.com\/magazine\/#\/schema\/logo\/image\/","url":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/11\/codemotionlogo.png","contentUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/11\/codemotionlogo.png","width":225,"height":225,"caption":"Codemotion"},"image":{"@id":"https:\/\/www.codemotion.com\/magazine\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/Codemotion.Italy\/","https:\/\/x.com\/CodemotionIT"]},{"@type":"Person","@id":"https:\/\/www.codemotion.com\/magazine\/#\/schema\/person\/7d033c17576f9bdfec9dab783e58976a","name":"Massimo Avvisati","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codemotion.com\/magazine\/#\/schema\/person\/image\/","url":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/04\/massimo-100x100.jpeg","contentUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/04\/massimo-100x100.jpeg","caption":"Massimo Avvisati"},"description":"I am a full-stack developer, digital artist, maker, and educator with a passion for Artificial Intelligence. I create immersive installations and develop educational software, pushing the boundaries of technology. I believe in Free Software and Creative Commons licensing as a foundation for knowledge sharing. My goal is to craft unique and engaging educational experiences using cutting-edge technology, showcasing the potential of AI in education. Currently, my focus is on Educational Technology, where I strive to create innovative software and hardware tools that engage and inspire learners. I firmly believe in the power of Free Software and Creative Commons, utilizing these open platforms to ensure my work is accessible and reusable by others. I actively reject restrictive platforms that limit creativity and collaboration. By combining my artistic vision with cutting-edge technology, I aim to develop unique educational experiences that spark curiosity and foster a love of learning. Through my work, I strive to demonstrate the incredible potential of AI in education and the arts.","sameAs":["https:\/\/www.linkedin.com\/in\/massimo-avvisati-7220312\/","https:\/\/x.com\/MassimoAvvisati"],"knowsAbout":["Javascript","Node.js","PHP","AI","Machine Learning","Web Development","Free Software"],"knowsLanguage":["English","Spanish","Italian"],"jobTitle":"Head of EdTech R&D","worksFor":"Codemotion spa","url":"https:\/\/www.codemotion.com\/magazine\/author\/massimo-avvisati\/"}]}},"featured_image_src":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/07\/glassmorphism-600x400.jpg","featured_image_src_square":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/07\/glassmorphism-600x600.jpg","author_info":{"display_name":"Massimo Avvisati","author_link":"https:\/\/www.codemotion.com\/magazine\/author\/massimo-avvisati\/"},"uagb_featured_image_src":{"full":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/07\/glassmorphism.jpg",1280,720,false],"thumbnail":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/07\/glassmorphism-150x150.jpg",150,150,true],"medium":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/07\/glassmorphism-300x169.jpg",300,169,true],"medium_large":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/07\/glassmorphism-768x432.jpg",768,432,true],"large":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/07\/glassmorphism-1024x576.jpg",1024,576,true],"1536x1536":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/07\/glassmorphism.jpg",1280,720,false],"2048x2048":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/07\/glassmorphism.jpg",1280,720,false],"small-home-featured":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/07\/glassmorphism-100x100.jpg",100,100,true],"sidebar-featured":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/07\/glassmorphism-180x128.jpg",180,128,true],"genesis-singular-images":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/07\/glassmorphism-896x504.jpg",896,504,true],"archive-featured":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/07\/glassmorphism-400x225.jpg",400,225,true],"gb-block-post-grid-landscape":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/07\/glassmorphism-600x400.jpg",600,400,true],"gb-block-post-grid-square":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/07\/glassmorphism-600x600.jpg",600,600,true]},"uagb_author_info":{"display_name":"Massimo Avvisati","author_link":"https:\/\/www.codemotion.com\/magazine\/author\/massimo-avvisati\/"},"uagb_comment_info":0,"uagb_excerpt":"El glassmorphism es una tendencia en el dise\u00f1o que busca replicar el aspecto y las propiedades del vidrio en los elementos de la interfaz o de un contenido. Este estilo se caracteriza por el uso de transparencia, desenfoque y efectos de luz para crear la ilusi\u00f3n de superficies de vidrio. Seamos sinceros: un vidrio transparente&#8230;&hellip;","lang":"es","_links":{"self":[{"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/posts\/30300","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/users\/255"}],"replies":[{"embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/comments?post=30300"}],"version-history":[{"count":2,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/posts\/30300\/revisions"}],"predecessor-version":[{"id":30332,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/posts\/30300\/revisions\/30332"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/media\/28780"}],"wp:attachment":[{"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/media?parent=30300"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/categories?post=30300"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/tags?post=30300"},{"taxonomy":"collections","embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/collections?post=30300"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}