{"id":10304,"date":"2022-06-28T13:00:00","date_gmt":"2022-06-28T11:00:00","guid":{"rendered":"https:\/\/carontestudio.com\/blog\/?p=10304"},"modified":"2022-06-28T08:25:18","modified_gmt":"2022-06-28T06:25:18","slug":"efecto-cristal-css-te-ensenamos-a-crearlo-de-0","status":"publish","type":"post","link":"https:\/\/carontestudio.com\/blog\/efecto-cristal-css-te-ensenamos-a-crearlo-de-0\/","title":{"rendered":"Efecto cristal CSS, te ense\u00f1amos a crearlo de 0"},"content":{"rendered":"\n

En uno de los art\u00edculos anteriores, hablamos del Glassmorphismo o efecto cristal<\/strong> en el mundo del dise\u00f1o gr\u00e1fico<\/a> y web, y os ense\u00f1amos a crearlo en Illustrator para todo tipo de im\u00e1genes o soportes tanto impresos como digitales. Hoy aprenderemos a generar el efecto cristal en CSS para poder aplicarlo en nuestras webs y conseguir uno de los efectos tendencia en el mundo web en 2022<\/strong>.<\/p>\n\n\n\n

Qu\u00e9 es el efecto cristal<\/h2>\n\n\n\n
\n
\n
\"Efecto<\/figure>\n<\/div>\n\n\n\n
\n

Como explicamos en el art\u00edculo anterior, el Glassmorphismo es uno de los efectos tendencia en el mundo del dise\u00f1o en los \u00faltimos a\u00f1os y consiste en aplicar un efecto de tarjeta de cristal a nuestros contenidos para crear un efecto de profundidad y superposici\u00f3n en nuestros dise\u00f1os. De esta manera, podemos superponer contenidos a fondos de im\u00e1genes, degradados, colores o formas y destacar el contenido relevante y ofrecer una perfecta legibilidad y experiencia de usuario \u00f3ptima.<\/p>\n<\/div>\n<\/div>\n\n\n\n

Cu\u00e1ndo se utiliza el efecto cristal en dise\u00f1o web<\/h2>\n\n\n\n

A la hora de estructurar, jerarquizar y ordenar el contenido de un sitio web, las tarjetas son un recurso muy utilizado que aporta al usuario claridad a la hora de entender el contenido que se quiere exponer. El efecto cristal nos ofrece la posibilidad de ser aplicado en este tipo de contenidos en forma de tarjetas, por ejemplo, para superponerlas encima otros contenidos. <\/p>\n\n\n\n

De este modo, en vez de hacer uso de las tarjetas opacas que ocultan todo el contenido posterior que pueda haber, las tarjetas con efecto cristal permiten la visualizaci\u00f3n del contenido del fondo sin perder la legibilidad<\/strong> de los textos que tengan en su interior. Este recurso nos ofrece una mayor integraci\u00f3n<\/strong> de todo el contenido en el dise\u00f1o web.<\/p>\n\n\n\n

Junto a qu\u00e9 recursos gr\u00e1ficos puede ser utilizado el efecto Glassmorphismo para conseguir un dise\u00f1o web actual y coherente:<\/p>\n\n\n\n

\n
\n
  1. Degradados<\/strong>. Los degradados pueden ser parte del fondo, y lo ideal ser\u00eda utilizarlos de una manera sutil, creando degradados dentro de una misma gama crom\u00e1tica o con sutiles variaciones, para que los cambios de un color a otro sean suaves y sutiles.<\/li>
  2. Dise\u00f1os geom\u00e9tricos<\/strong>. El uso de elementos geom\u00e9tricos simples o patrones geom\u00e9tricos puede crear una interfaz de usuario coherente y atractiva junto con el efecto cristal.<\/li>
  3. Dise\u00f1os 3D<\/strong>. Como vimos en el art\u00edculo sobre tendencias en dise\u00f1o web 2022<\/a>, los dise\u00f1os 3D han venido para quedarse, y el efecto cristal es la forma perfecta de integrar estos elementos en un dise\u00f1o web. Por ejemplo, pueden utilizarse en la parte de la posterior de nuestros dise\u00f1os, y superponer encima de estos el efecto cristal para jerarquizar el contenido y permitir la correcta lectura de los contenidos.<\/li><\/ol>\n<\/div>\n\n\n\n
    \n
    \"Glassmorphismo<\/figure>\n<\/div>\n<\/div>\n\n\n\n

    Pasos para crear el efecto cristal<\/h2>\n\n\n\n

    Crear un fichero b\u00e1sico de HTML<\/h3>\n\n\n\n

    El primer paso ser\u00e1 crear un fichero b\u00e1sico de HTML para poder ver nuestro efecto cristal. <\/p>\n\n\n\n

    <!DOCTYPE html>\n<html lang=\"en\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>Efecto cristal CSS<\/title>\n<\/head>\n<body>\n    <!--  Aqu\u00ed a\u00f1adiremos nuestro c\u00f3digo  -->\n<\/body>\n<\/html><\/code><\/pre>\n\n\n\n
    A\u00f1adir estilos b\u00e1sicos a la etiqueta body<\/h3>\n\n\n\n
    A continuaci\u00f3n, en nuestro CSS a\u00f1adiremos algunos estilos b\u00e1sicos, y una imagen de fondo para poder ver nuestro efecto cristal aplicado sobre un fondo:<\/p>\n\n\n\n
    body {\n  padding: 5rem;\n  margin: 0;\n  background-image: url(https:\/\/images.unsplash.com\/photo-1614670453169-89b992542686?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80);\n  background-size: cover;\n  font-family: sans-serif;\n  background-position: center;\n}<\/code><\/pre>\n\n\n\n
    Crear un elemento tarjeta (.card) en HTML <\/h3>\n\n\n\n
    A\u00f1adiremos un elemento tarjeta a la que poder aplicar los efectos del Glassmorphismo. A\u00f1adimos un div de clase card y un peque\u00f1o texto en su interior (este podr\u00e1 tener el contenido que queramos que nuestra tarjeta tenga).<\/p>\n\n\n\n
    <div class=\"card\">\n    <h3 class=\"card-title\">Efecto cristal CSS<\/h3>\n    <p>Aprende a crear tu efecto cristal mediante CSS desde 0.<\/p>\n    <a href=\"https:\/\/carontestudio.com\/<\/a>\">Saber m\u00e1s<\/a>\n<\/div><\/code><\/pre>\n\n\n\n
    Estilos CSS para crear el efecto cristal<\/h3>\n\n\n\n
    Antes de comenzar con el efecto Glassmorphismo, vamos a a\u00f1adir algunos estilos simples a la tarjeta:<\/p>\n\n\n\n
    \n.card {\n  width: 20rem;\n  height: auto;\n  padding: 2rem;\n  border-radius: 1rem;\n  font-size: 1rem;\n  color:white;\n\n}\n\n.card-title {\n  margin-top: 0;\n  margin-bottom: .5rem;\n  font-size: 1.2rem;\n  font-weight: 600;\n}\n.card p{\n  margin-bottom: 1.5rem;\n}\na {\n  background-color: #6363db;\n  border-radius: 0.5rem;\n  color: white;\n  padding: 0.5rem 1rem;\n  text-decoration: none;\n} <\/code><\/pre>\n\n\n\n
    Aplicar un fondo semitransparente y el efecto desenfoque a la tarjeta<\/h4>\n\n\n\n
    Por \u00faltimo, aplicaremos el fondo semitransparente, en nuestro caso, blanco, y a\u00f1adiremos el efecto desenfoque en nuestra tarjeta:<\/p>\n\n\n\n
    .card {\n background: rgba(255, 255, 255, .3);\n -webkit-backdrop-filter: blur(5px);\n backdrop-filter: blur(5px);\n border: 1.5px solid rgba(209, 213, 219, 0.3);\n}<\/code><\/pre>\n\n\n\n
    De esta manera tan sencilla \u00a1Ya tendr\u00edamos nuestro efecto cristal en la tarjeta! Aqu\u00ed tienes el CodePen<\/a> que hemos creado siguiendo estos pasos, para que puedas editarlo y crear tu propio efecto cristal en tus p\u00e1ginas web. <\/p>\n\n\n\n
    \n  See the Pen \n  Untitled<\/a> by Alberto (@carontestudio<\/a>)\n  on CodePen<\/a>.<\/span>\n<\/p>\n