- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to Use Divs to Grab Users Attention Without Overflowing Window?
In HTML, the div tag is also known as the division tag in HTML. HTML uses the div tag to create content divisions in web pages such (text, images, header, footer, navigation bar, etc).
It is required to close the div tag, which has an opening (<div>) and closing (</div>) tag. Because it makes it easier to break off material on a web page, the Div element is the most useful one in web development.
Let’s dive into the article for getting better understanding on using the div to grab user’s attention without overflowing window.
Using div to grab user attention without overflowing window
When an element's content is too large to fit within a designated space, the overflow property in HTML determines whether to clip it or add scrollbars. Only block elements with a specified height can use the overflow feature.
Let's look at some examples of how to grab users' attention without overflowing the window using div to learn more −
Example
In the following example, we are running the script and creating an animation to grab the user's attention.
<!DOCTYPE html>
<html>
<body style="background-color:#EAFAF1">
<style>
.tutorial::before {
content: "";
pointer-events: none;
border-radius: 45%;
border: 11px solid #7D3C98;
position: absolute;
animation: attention 2s cubic-bezier(1,0,.1,0) infinite;
}
@keyframes attention {
40%,to {
transform: scale(5);
opacity: 0;
}
}
</style>
<p><a href="https://www.tutorialspoint.com/index.htm" class="tutorial">
Click To Open..!
</a></p>
</body>
</html>
When the script gets executed, it will generate an output consisting of a link displayed on the webpage along with an animated ring that plays around the ring with a timer.
60 Views
