How to Create Scrolling Text (Breaking News) With Html & CSS

Create an HTML file and include a basic structure with a head and body tag. You can use the following code as a starting point and Add the CSS files to your HTML document.....

HTML

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>How to Create Scrolling Text With Html and CSS | CSS Marquee>

    <link rel="stylesheet" href="style.css">

</head>

<body>

</body>

</html>

Inside the body tag, create a container element with a class of "container ".

HTML

<div class="container scroll-right">

   <span>New Articles</span>

   <marquee behavior="" direction="right">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla eum quia error placeat recusandae hic, nostrum doloremque nihil ducimus repellendus ea eius architecto doloribus sed.</marquee>

</div>

Create a CSS file and style your Application Header to make it look nice. You can use the following code as a starting point:

CSS

*{ margin: 0; padding: 0;}

body{ background: #0084ff; font-family: sans-serif; width: 80%; margin: 0 auto;}

.container{ display: flex; align-items: center; background: #eee; margin-top: 40px;}

.container span{ position: relative; display: inline-block; flex-shrink: 0; padding: 8px 20px; background: #f00;

     color: #fff; overflow: hidden; clip-path: polygon(0 0, 90% 0, 100% 100%, 0 100%);}

.scroll-left span{ clip-path: polygon(10% 0, 100% 0, 100% 100%, 0 100%);}

Save the file and open it in a web browser to see your Scrolling Text.

Label

Media Sosial

About Us

Menu Atas

Iklan

How to Create Scrolling Text (Breaking News) With Html & CSS | CSS Marquee 2023

Advertisement

Anak

Wanita