Semantic-UI Dimmer Blurring Variation

Semantic UI is an open-source framework that uses CSS and jQuery to build great user interfaces. It is the same as a bootstrap for use and has great different elements to use to make your website look more amazing. It uses a class to add CSS to the elements. Dimmer is an excellent way to get the user's attention to a specific part of the webpage, ignoring the distractions. A dimmer can be used to blur out its content and gather the user's attention. Semantic UI provides us with the blurring class to blur a dimmer.

Semantic UI Dimmer Blurring Variation Classes:

blurring: Creates a segment that can be blurred with a dimmer.

Syntax:

<div class="ui blurring segment">
  <div class="ui dimmer"></div>
  <p></p>
  ...
</div>

Example 1: In the below example, we have illustrated the dimmer blurring variation.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>Semantic UI Dimmer Blurred Variation</title>
    <link href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" 
          rel="stylesheet" />
    <script src=
"https://code.jquery.com/jquery-3.1.1.min.js"
            integrity=
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" 
            crossorigin="anonymous">
    </script>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js">
    </script>
</head>

<body style="width: 100vw; height: 100vh;">

    <div class="ui container">
        <h2 style="color: green;">GeeksForGeeks</h2>
        <h4>Semantic UI Dimmer Blurred Variation</h4>
        <hr>
        <br />
        <div class="ui blurring segment">
            <div class="ui inverted dimmer"></div>
            

<p>
              Greetings to all the Geeks out there! We
              welcome you to the platform where we consistently
              strive to offer the best of education.
            </p>



            

<p>
              This platform has been designed for every geeks
              wishing to expand knowledge, share their knowledge
              and is ready to grab their dream job. We have millions
              of articles,live as well as online courses, thousands
              of tutorials and much more just for the geek inside you.
              Thank you for choosing and supporting us!
            </p>



            

<p>
              GeeksForGeeks is an amazing website to learn coding.
            </p>



            

<p>
              Machine Learning, Web Development, Android 
              Development, Data Science, you name it, it's 
              all available on GeeksForGeeks.
            </p>


        </div>
    </div>

    <script>
        $('.segment').dimmer('show'); 
    </script>
</body>

</html>

Output:

Semantic-UI Dimmer Blurring Variation — Dimmer Blurring Variation

Example 2: In the below example, we have illustrated how dimmer blurring variation can be used on a webpage.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>Semantic UI Dimmer Blurred Variation</title>
    <link href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" 
         rel="stylesheet" />
    <script src=
"https://code.jquery.com/jquery-3.1.1.min.js"
            integrity=
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" 
            crossorigin="anonymous">
    </script>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js">
    </script>
</head>

<body style="width: 100vw; height: 100vh;">

    <div class="ui container">
        <h2 style="color: green;">GeeksForGeeks</h2>
        <h4>Semantic UI Dimmer Blurred Variation</h4>
        <hr>
        <br />
        <div class="ui blurring segment">
            <div class="ui dimmer">
                <div class="content">
                    <h2 class="ui inverted header">
                        Sign In to view info
                    </h2>
                </div>
            </div>
            

<p>
              Greetings to all the Geeks out there! We
              welcome you to the platform where we consistently
              strive to offer the best of education.
            </p>



            

<p>
              This platform has been designed for every geeks
              wishing to expand knowledge, share their knowledge
              and is ready to grab their dream job. We have millions
              of articles,live as well as online courses, thousands
              of tutorials and much more just for the geek inside you.
              Thank you for choosing and supporting us!
            </p>



            

<p>
              GeeksForGeeks is an amazing website to learn coding.
            </p>



            

<p>
              Machine Learning, Web Development, Android Development,
              Data Science, you name it, it's all available
              on GeeksForGeeks.
            </p>


        </div>
        <button class="ui button" onclick="hide()">
          Sign Out
        </button>
        <button class="ui button" onclick="show()">
          Sign In
        </button>
    </div>

    <script>
        $('.segment').dimmer('show');
        const hide = () => {
            $('.segment').dimmer('show');
        }

        const show = () => {
            $('.segment').dimmer('hide');
        }
    </script>
</body>

</html>

Output:

Reference: https://semantic-ui.com/modules/dimmer.html#blurring

Semantic-UI Dimmer Blurring Variation

Explore