Horizontal Marquee News ticker using Html & Css

Horizontal Marquee News ticker is the one of the important thing in website pages. Today we will see how to create this simple News ticker. The Horizontal marquee is one of the method to display flash news scrolling horizontally. Every website needs this type of news ticker section to display flash news in their website.

Here is the different div i am using to display horizontally marquee news ticker. text1 div is to display the marquee text and .news span is the heading text for flash news. news div for overall width. This is very simple here i am using different colors you can change it by using simple css code. Below is the demo page and also have the download page visit the demo page to see the live demo for this example. I hope this simple concept really helpful.

<html>
<head>
<title> Horizontal Marquee News ticker using Html & Css </title>
<style>
.blue {
background: #347fd0;
}

.news {
box-shadow: inset 0 -15px 30px rgba(0,0,0,0.4), 0 5px 10px rgba(0,0,0,0.5);
width: 890px;
margin: 20px auto;
overflow: hidden;
border-radius: 4px;
padding: 1px;
-webkit-user-select: none;
}

.news span {
float: left;
color: #fff;
padding: 9px;
position: relative;
top: 1%;
box-shadow: inset 0 -15px 30px rgba(0,0,0,0.4);
font: 16px ‘Raleway’, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-webkit-user-select: none;
cursor: pointer;
}

.text1{

box-shadow:none !important;
width: 750px;
}
</style>
</head>
<body>
<div class=”news blue”>
<span>Latest News</span><span class=”text1″ ><marquee>Marquee text…..</marquee></span>
</div>
</body>
</head>
</html>

Other Posts You May Enjoy

Leave a Reply Cancel reply