Marquee allows a scrolling text in an HTML file.
Attributes :
1) behavior - This attribute defines the way the text will scroll withing the marquee. Values can ve scroll, slide or alternate.
2) bgcolor - To set the background color for marquee.
3) direction - Sets the direction for the text to scroll, slide. Values can be left, right, up down. If no direction is specified than default is left
4) height - To set the height of marquess
5) scrollamount - Sets the amount of scrolling at each interval in pixels. The default value is 6.
Attributes :
1) behavior - This attribute defines the way the text will scroll withing the marquee. Values can ve scroll, slide or alternate.
2) bgcolor - To set the background color for marquee.
3) direction - Sets the direction for the text to scroll, slide. Values can be left, right, up down. If no direction is specified than default is left
4) height - To set the height of marquess
5) scrollamount - Sets the amount of scrolling at each interval in pixels. The default value is 6.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title> New Document </title> <meta name="Generator" content="EditPlus"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <style type='text/css'> .CSSTableGenerator { margin:0px;padding:0px; width:50%; box-shadow: 10px 10px 5px #888888; border:1px solid #000000; -moz-border-radius-bottomleft:0px; -webkit-border-bottom-left-radius:0px; border-bottom-left-radius:0px; -moz-border-radius-bottomright:0px; -webkit-border-bottom-right-radius:0px; border-bottom-right-radius:0px; -moz-border-radius-topright:0px; -webkit-border-top-right-radius:0px; border-top-right-radius:0px; -moz-border-radius-topleft:0px; -webkit-border-top-left-radius:0px; border-top-left-radius:0px; }.CSSTableGenerator table{ border-collapse: collapse; border-spacing: 0; width:100%; height:100%; margin:0px;padding:0px; }.CSSTableGenerator tr:last-child td:last-child { -moz-border-radius-bottomright:0px; -webkit-border-bottom-right-radius:0px; border-bottom-right-radius:0px; } .CSSTableGenerator table tr:first-child td:first-child { -moz-border-radius-topleft:0px; -webkit-border-top-left-radius:0px; border-top-left-radius:0px; } .CSSTableGenerator table tr:first-child td:last-child { -moz-border-radius-topright:0px; -webkit-border-top-right-radius:0px; border-top-right-radius:0px; }.CSSTableGenerator tr:last-child td:first-child{ -moz-border-radius-bottomleft:0px; -webkit-border-bottom-left-radius:0px; border-bottom-left-radius:0px; }.CSSTableGenerator tr:hover td{ } .CSSTableGenerator tr:nth-child(odd){ background-color:#e5e5e5; } .CSSTableGenerator tr:nth-child(even) { background-color:#ffffff; }.CSSTableGenerator td{ vertical-align:middle; border:1px solid #000000; border-width:0px 1px 1px 0px; text-align:left; padding:7px; font-size:14px; font-family:Times New Roman; font-weight:normal; color:#000000; }.CSSTableGenerator tr:last-child td{ border-width:0px 1px 0px 0px; }.CSSTableGenerator tr td:last-child{ border-width:0px 0px 1px 0px; }.CSSTableGenerator tr:last-child td:last-child{ border-width:0px 0px 0px 0px; } .CSSTableGenerator tr:first-child td{ background:-o-linear-gradient(bottom, #cccccc 5%, #b2b2b2 100%); background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #cccccc), color-stop(1, #b2b2b2) ); background:-moz-linear-gradient( center top, #cccccc 5%, #b2b2b2 100% ); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#cccccc", endColorstr="#b2b2b2"); background: -o-linear-gradient(top,#cccccc,b2b2b2); background-color:#cccccc; border:0px solid #000000; text-align:center; border-width:0px 0px 1px 1px; font-size:20px; font-family:Times New Roman; font-weight:bold; color:#000000; } .CSSTableGenerator tr:first-child:hover td{ background:-o-linear-gradient(bottom, #cccccc 5%, #b2b2b2 100%); background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #cccccc), color-stop(1, #b2b2b2) ); background:-moz-linear-gradient( center top, #cccccc 5%, #b2b2b2 100% ); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#cccccc", endColorstr="#b2b2b2"); background: -o-linear-gradient(top,#cccccc,b2b2b2); background-color:#cccccc; } .CSSTableGenerator tr:first-child td:first-child{ border-width:0px 0px 1px 0px; } .CSSTableGenerator tr:first-child td:last-child{ border-width:0px 0px 1px 1px; } </style> </head> <body> <div class="CSSTableGenerator" > <table> <tr><td>Marquee Behaviour - Scroll</td></tr> <tr><td> <marquee behavior="scroll" direction="left" scrollamount="2">Slower From Left</marquee></td></tr> <tr><td><marquee behavior="scroll" direction="left" scrollamount="6">Faster From Left</marquee></td></tr> <tr><td><marquee behavior="scroll" direction="right" >Faster From Right</marquee></td></tr> <tr><td><marquee behavior="scroll" direction="up">Goes Up</marquee></td></tr> <tr><td><marquee behavior="scroll" direction="down">Goes Down</marquee></td></tr> </table> </div> <br/> <br/> <div class="CSSTableGenerator" > <table> <tr><td>Marquee Behaviour - Slide</td></tr> <tr><td><marquee behavior="slide" direction="right">Slide from right. Stop at left</marquee></td></tr> <tr><td><marquee behavior="slide" direction="left">Slide from left. Stop at right</marquee></td></tr> </table> </div> <br/> <br/> <div class="CSSTableGenerator" > <table> <tr><td>Marquee Behaviour - Alternate</td></tr> <tr><td><marquee behavior="alternate" direction="left">Alternate from Left</marquee></td></tr> <tr><td><marquee behavior="alternate" direction="right">Alternate from Right</marquee></td></tr> </table> </div> <br/> <br/> </body> </html>
No comments:
Post a Comment