8

Create dreamy fused-glass overlay effect with Yogurt CSS

 3 years ago
source link: https://dev.to/loouislow/create-dreamy-fused-glass-overlay-effect-with-yogurt-css-54jj
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client
Cover image for Create dreamy fused-glass overlay effect with Yogurt CSS

Create dreamy fused-glass overlay effect with Yogurt CSS

Jun 11

・2 min read

Full Documentation

Create a two empty elements stacked together with Position and Top/Bottom/Left/Right utilities.

<div class="relative">
  <!-- Background Layer -->
  <div class="absolute top-0 left-0">
    <img class="..." src="...">
  </div>
  <!-- Foreground Layer -->
  <div class="..."></div>
</div>
Enter fullscreen modeExit fullscreen mode

Set up Background Layer image to spread across the screen with Height and Width utilities.

Set focus on the center of the image with Object Fit and set the alignment to top (optional) with Object Position utilities.

<div class="relative">
  <!-- Background Layer -->
  <div class="absolute top-0 left-0">
    <img class="h-screen w-screen ... object-cover object-top" src="...">
  </div>
  <!-- Foreground Layer -->
  <div class="..."></div>
</div>
Enter fullscreen modeExit fullscreen mode

Use Overflow utilities to prevent any element overflowing the screen edge to hide the scrollbars.

Center for the Foreground Layer with Flex, Justify-Content and Align Items utilities.

<div class="relative ... h-screen ... flex justify-center items-center ... overflow-hidden">
  <!-- Background Layer -->
  <div class="absolute top-0 left-0">
    <img class="h-screen w-screen ... object-cover object-top" src="...">
  </div>
  <!-- Foreground Layer -->
  <div class="..."></div>
</div>
Enter fullscreen modeExit fullscreen mode

At Foreground Layer, set the element to bg-transparent with Background Color and add blur effect with Backdrop Blur utilities. Final touch up to add a dreamy shadow with Box Shadow utilities.

<div class="relative ... h-screen ... flex justify-center items-center ... overflow-hidden">
  <!-- Background Layer -->
  <div class="absolute top-0 left-0">
    <img class="h-screen w-screen ... object-cover object-top" src="...">
  </div>
  <!-- Foreground Layer -->
  <div class="h-72 w-72 ... bg-transparent ... backdrop-filter blur-6 ... shadow-dreamy-md"></div>
</div>
Enter fullscreen modeExit fullscreen mode

Visit Yogurt Playground to have experience of the Yogurt CSS with fullness.

Enjoy then!


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK