Semantic-UI Content Dimmer Type
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 a great approach to direct the user’s attention to a certain portion of the website while disregarding distractions. A dimmer can be used to obscure unwanted information and draw the user’s attention to a specific portion of the webpage. Semantic UI provides us with an awesome approach to display dimmer content.
Semantic UI Content Dimmer Type Class:
- content: Creates a container for the dimmer content.
Syntax:
<div class="ui dimmer">
<div class="content">
...
</div>
</div>
Example 1: In the below example, we have created a standard dimmer with content.
HTML
<!DOCTYPE html> <html> <head> <title>Semantic UI Dimmer Content Type</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 Content Type</h4> <hr> <br /> <div class="ui segment"> <div class="ui dimmer"> <div class="content"> <h2 class="ui icon inverted header"> <i class="star outline icon"></i> We just want to let you know that GeeksForGeeks is Awesome! </h2> </div> </div> <p>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. </p> <p>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. </p> <p>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. </p> <p>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. </p> </div> <button class="ui button" onclick="openDimmer()"> Open </button> <button class="ui button" onclick="closeDimmer()"> Close </button> </div> <script> const openDimmer = () => { $('.dimmer').dimmer('show'); } const closeDimmer = () => { $('.dimmer').dimmer('hide'); } </script> </body> </html> |
Output:
Semantic-UI Content Dimmer Type
Example 2: In the below example, we have created a dimmer with content and a blurred background.
HTML
<!DOCTYPE html> <html> <head> <title>Semantic UI Dimmer Content Type</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 Content Type</h4> <hr> <br /> <div class="ui blurring segment"> <div class="ui dimmer"> <div class="content"> <h2 class="ui icon inverted header"> <i class="star outline icon"></i> We just want to let you know that GeeksForGeeks is Awesome! </h2> </div> </div> <p>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. </p> <p>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. </p> <p>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. </p> <p>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. </p> </div> <button class="ui button" onclick="openDimmer()"> Open </button> <button class="ui button" onclick="closeDimmer()"> Close </button> </div> <script> const openDimmer = () => { $('.dimmer').dimmer('show'); } const closeDimmer = () => { $('.dimmer').dimmer('hide'); } </script> </body> </html> |
Output:
Semantic-UI Content Dimmer Type
Reference: https://semantic-ui.com/modules/dimmer.html#content-dimmer
Please Login to comment...