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= rel="stylesheet" /> <script src= integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"> </script> <script src= </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:
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= rel="stylesheet" /> <script src= integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"> </script> <script src= </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:
Semantic-UI Dimmer Blurring Variation
Reference: https://semantic-ui.com/modules/dimmer.html#blurring
Please Login to comment...