Markus - Framework

Overskrift H2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent efficitur varius dui et rhoncus. Fusce sit amet dui eget neque euismod tincidunt. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Maecenas malesuada at libero ut volutpat. Proin aliquet elit sit amet augue efficitur aliquet. Maecenas venenatis, sapien in mollis ultricies, lectus felis ultrices leo, eu volutpat lacus leo eu lacus. Proin mollis ligula et mi auctor placerat.

Overskrift H2

				
					/* ============================
   LIQUID GLASS – START
   ============================ */

/* 1. Wrapper */
.liquid-glass {
  position: relative;
  overflow: hidden;
  /*border-radius: 16px;*/
}

/* 2. Glass layer (blur + refraction) */
.liquid-glass::before {
  content: "";
  position: absolute;
  inset: 0;

  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(10px);

  filter: url(#liquid-glass-filter);
  z-index: 0;
}

/* 3. Frosted white tint */
.liquid-glass::after {
  content: "";
  position: absolute;
  inset: 0;

  background: rgba(255, 255, 255, 0.15);
  z-index: 1;
}

/* 4. Content always on top */
.liquid-glass > * {
  position: relative;
  z-index: 2;
}

/* ============================
   LIQUID GLASS - SLUT
   ============================ */

SVG-filter lægges i en html-widget i footeren:

				
					<svg width="0" height="0" style="position:absolute; left:-9999px; top:-9999px;">
  <filter id="liquid-glass-filter"
          x="-20%" y="-20%" width="140%" height="140%"
          color-interpolation-filters="sRGB">

    <feTurbulence
      type="fractalNoise"
      baseFrequency="0.008"
      numOctaves="3"
      seed="8"
      result="noise" />

    <feGaussianBlur
      in="noise"
      stdDeviation="6"
      result="softNoise" />

    <feDisplacementMap
      in="SourceGraphic"
      in2="softNoise"
      scale="35"
      xChannelSelector="R"
      yChannelSelector="G"
      result="distorted" />

    <feSpecularLighting
      in="softNoise"
      surfaceScale="2"
      specularConstant="0.6"
      specularExponent="20"
      result="specular">
      <feDistantLight azimuth="135" elevation="45" />
    </feSpecularLighting>

    <feBlend
      in="distorted"
      in2="specular"
      mode="screen" />

  </filter>
</svg>