What is Marquee Tags?
Marquee is an important tag of html that is used for scrolling texts,images and many more with the help of marquee tags you can make your scrolling texts,announcements,notifications attractive.
 |
| Image Source:Google |
Marquee Tags
- Behavior: it allows users to change the style type of marquee like scroll,alternate and sliding
- Direction: Set the direction of marquee like up,down,left and right
- Width: Set a width to marquee in pixels or in percentage
- Height: Set a height to marquee in pixels or in percentage
- Bgcolor: Give a background color to scrolling text
- Scroll amount: Give a speed to scrolling text
Scrolling Up text
<marquee direction="up" width="auto;" height="80px">Scrolling Up Text</marquee>
Preview
Scrolling Down Text
<marquee direction="down" width="auto;" height="80px">Scrolling Up Text</marquee>
Preview of Scrolling Down Text
Right Scrolling text
<marquee direction="right" width="auto;" height="80px">Scrolling Up Text</marquee>
PreviewLeft Scrolling text
<marquee direction="left width="auto;" height="80px">Scrolling Up Text</marquee>Alternate Text
<marquee behavior="alternate" width="auto;" height="80px;">Scrolling Up Text</marquee>Scrolling Text With Background Color
<marquee behavior="alternate" height="80px" width="auto" bgcolor="pink;">scrolling text with background color</marquee>
Preview
Scrolling text with background color in a frame
<marquee behavior="alternate" style="border:2px solid black" height="80px" width="auto" bgcolor="pink;">scrolling text with background color</marquee>
Preview
Scrolling Up Text in a Frame with Background Color
<marquee behavior="alternate" height="80px" width="auto" style="border:2px solid black" bgcolor="pink;">scrolling text with background color</marquee>
Preview
Scrolling text in a frame
<marquee behavior="scroll" height="80px" width="auto" style="border:2px solid black" bgcolor="pink;">scrolling text with background color</marquee>
Preview
Scrolling text in a frame with scroll amount
<marquee behavior="scroll" scrollamount="10" height="80px" width="auto" style="border:2px solid black" bgcolor="pink;">scrolling text with background color</marquee>
Preview
Image Scrolling
<marquee><img height="200" src="Your Image Address" width="200" /><img height="200" src="Your Image Address" width="200" /><img height="200" src="Your Image Address" width="200" /><img height="200" src="Your Image Address" width="200" /><img height="200" src="Your Image Address" width="200" /><img height="200" src="Your Image Address" width="200" /><img height="200" src="Your Image Address" width="200" /><img height="200" src="Your Image Address" width="200" /><img height="200" src="Your Image Address" width="200" /><img height="200" src="Your Image Address" width="200" /><img height="200" src="Your Image Address" width="200" /><img height="200" src="Your Image Address" width="200" /><img height="200" src="Your Image Address" width="200" /><img height="200" src="Your Image Address" width="200" /><img height="200" src="Your Image Address" width="200" /><img height="200" src="Your Image Address" width="200" /><img height="200" src="Your Image Address" width="200" /><img height="200" src="Your Image Address" width="200" /><img height="200" src="Your Image Address" width="200" /><img height="200" src="Your Image Address" width="200" /><img height="200" src="Your Image Address" width="200" /><img height="200" src="Your Image Address" width="200" /><img height="200" src="Your Image Address" width="200" />
</marquee>
Preview of Scrolling Image
Marquee Bounce
<marquee direction="down" width="auto" height="200px" behavior="alternate" style="border:solid">
<marquee behavior="alternate">
Preview of Bounce
</marquee>
</marquee>
Preview Marquee Announcements
<style>
.announcement
{
width:290px;
height:280px;
box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;
border:3px solid black;
border-radius:10px;
bgcolor:red;
}
.badge {
background-color: #f58f2a;
border-radius: 3px;
color: #fff;
margin-left: 4px;
margin-right: 4px;
padding: 3px 5px 3px 4px;
font-weight:bold;
text-transform: uppercase;
}
.googleblog
{
border:3px solid black;
width:290px;
border-radius:12px;
text-align:center;
background-color:red;
color:white;
}
.text1
{
margin-top:-40px;
text-decoration:underline; color:White;
text-align:center;
font-weight:600;
font-size:20px;
height:20px;
font-weight:bold;
box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
}
</style>
<div class="googleblog"><b>Announcements</b></div> <marquee direction="up" class="announcement">
<ul style="text-align: left;">
<li><span style="color: #660000; font-family: helvetica; font-size: medium;">Some text</span></li><span style="color: #660000; font-family: helvetica; font-size: medium;"><br /></span><hr /><span style="color: #660000; font-family: helvetica; font-size: medium;"><br /></span><li><span style="color: #660000; font-family: helvetica; font-size: medium;">Some text </span></li><span style="color: #660000; font-family: helvetica; font-size: medium;"><br /></span><hr /><span style="color: #660000; font-family: helvetica; font-size: medium;"><br />
</span><li><span style="color: #660000; font-family: helvetica; font-size: medium;">Some text</span></li><span style="color: #660000; font-family: helvetica; font-size: medium;"><br /></span><hr /><span style="color: #660000; font-family: helvetica; font-size: medium;"><br />
</span><li><span style="color: #660000; font-family: helvetica; font-size: medium;">Some text</span></li><span style="color: #660000; font-family: helvetica; font-size: medium;"><br /></span><hr /><span style="color: #660000; font-family: helvetica; font-size: medium;"><br />
</span><li><span style="color: #660000; font-family: helvetica; font-size: medium;">Some text</span></li><span style="color: #660000; font-family: helvetica; font-size: medium;"><br /></span><hr /><span style="color: #660000; font-family: helvetica; font-size: medium;"><br />
</span><li><span style="color: #660000; font-family: helvetica; font-size: medium;">Some text</span></li><span style="color: #660000; font-family: helvetica; font-size: medium;"><br /></span><hr /><span style="color: #660000; font-family: helvetica; font-size: medium;"><br />
</span><li><span style="color: #660000; font-family: helvetica; font-size: medium;">Some text </span></li><span style="color: #660000; font-family: helvetica; font-size: medium;"><br /></span><hr /><span style="color: #660000; font-family: helvetica; font-size: medium;"><br />
</span><li><span style="color: #660000; font-family: helvetica; font-size: medium;">Some text</span></li><span style="color: #660000; font-family: helvetica; font-size: medium;"><br /></span><hr /><span style="color: #660000; font-family: helvetica; font-size: medium;"><br />
</span><li><span style="color: #660000; font-family: helvetica; font-size: medium;">Some text</span></li><span style="color: #660000; font-family: helvetica; font-size: medium;"><br /></span><hr /><span style="color: #660000; font-family: helvetica; font-size: medium;"><br />
</span><li><span style="color: #660000; font-family: helvetica; font-size: medium;">Some text</span></li></ul>
</marquee>
Preview
Announcements
Bahut badhiyaa banaye ho bro
ReplyDeletethanks bhai
DeletePost a Comment
Enter comments by following community guidelines