Tutorials Point, posted 10h 23m ago

CSS margin-top

<!DOCTYPE html>
<html>
   <head>
      <style>
         div {
            background-color: orange;
            animation: myanim 4s infinite;
            color: white;
         }
         @keyframes myanim {
            30% {
               margin-top: 30px;
            }
         }
      </style>
   </head>
   <body>
      <h2>Heading One</h2>
      <div>
         This is demo text.
      </div>
   </body>
</html>

Tutorials Point, posted 1d 3h ago

CSS transform-origin property

<!DOCTYPE html>
<html>
   <head>
      <style>
         #demo1 {
            position: relative;
            height: 300px;
            width: 400px;
            border: 2px solid black;
            margin: 100px;
            padding: 5px;
         }
         #demo2 {
            padding: 30px;
            position: absolute;
            border: 1px solid black;
            background-color: orange;
            transform: rotate(45deg);
            transform-origin: 30% 10%;
            animation: mymove 3s infinite;
         }
         @keyframes mymove {
            30% {
               transform-origin: 0 0 0;
            }
         }
      </style>
   </head>
   <body>
      <h1>CSS transform-origin property</h1>
      <div id = "demo1">
         <div id="demo2">Demo</div>
      </div>
   </body>
</html>

Tutorials Point, posted 1d 3h ago

CSS min-height

<!DOCTYPE html>
<html>
   <head>
      <style>
         div {
            overflow: auto;
            width: 350px;
            background-color: blue;
            color: white;
            border: 1px solid black;
            animation: myanim 3s infinite;
         }
         @keyframes myanim {
            30% {
               min-height: 250px;
            }
         }
      </style>
   </head>
   <body>
      <h1>Example of min-height</h1>
      <div>
         <p>This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text.</p>
      </div>
   </body>
</html>

Tutorials Point, posted 1d 4h ago

CSS Animation on max-width

<!DOCTYPE html>
<html>
   <head>
      <style>
         div {
            overflow: auto;
            background-color: blue;
            color: white;
            border: 1px solid black;
            animation: myanim 3s;
         }
         @keyframes myanim {
            30% {
               max-width: 250px;
            }
         }
      </style>
   </head>
   <body>
      <h1>Example of max-width</h1>
      <div>
         <p>This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is
         demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text.</p>
      </div>
   </body>
</html>

Tutorials Point, posted 1d 4h ago

CSS right property

<!DOCTYPE html>
<html>
   <head>
      <style>
         #demo {
            position: absolute;
            right: 0;
            width: 300px;
            height: 200px;
            background-color: blue;
            animation: myanim 5s infinite;
         }
         @keyframes myanim {
            30% {
               right: 350px;
            }
         }
      </style>
   </head>
   <body>
      <h1>CSS right property</h1>
      <div id = "demo">
         <h1>This is demo text.</h1>
      </div>
   </body>
</html>

Tutorials Point, posted 1d 4h ago

CSS margin-right property

<!DOCTYPE html>
<html>
   <head>
      <style>
         div {
            background-color: blue;
            animation: myanim 4s infinite;
            color: white;
         }
         @keyframes myanim {
            30% {
               margin-right: 30px;
            }
         }
      </style>
   </head>
   <body>
      <h2>Heading One</h2>
      <div>
         This is demo text.
      </div>
   </body>
</html>

Tutorials Point, posted 1d 4h ago

Opacity Property with CSS

<!DOCTYPE html>
<html>
   <head>
      <style>
         #demo1 {
            position: absolute;
            top: 60px;
            width: 300px;
            height: 150px;
            background-color: lightblue;
            animation: myanim 4s infinite;
         }
         #demo2 {
            position: absolute;
            top: 90px;
            left: 30px;
            width: 300px;
            height: 150px;
            background-color: orange;
            animation: myanim 3s infinite;
         }
         #demo3 {
            position: absolute;
            top: 120px;
            left: 60px;
            width: 350px;
            height: 150px;
            background-color: coral;
         }
         @keyframes myanim {
            30% {
               opacity: 0.4;
            }
         }
      </style>
   </head>
   <body>
      <p>Showing opacity</p>
      <div id = "demo1">
         <h1>End div</h1>
      </div>
      <div id = "demo2">
      </div>
      <div id = "demo3">
         <h1>Start div</h1>
      </div>
   </body>
</html><!DOCTYPE html>
<html>
   <head>
      <style>
         #demo1 {
            position: absolute;
            top: 60px;
            width: 300px;
            height: 150px;
            background-color: lightblue;
            animation: myanim 4s infinite;
         }
         #demo2 {
            position: absolute;
            top: 90px;
            left: 30px;
            width: 300px;
            height: 150px;
            background-color: orange;
            animation: myanim 3s infinite;
         }
         #demo3 {
            position: absolute;
            top: 120px;
            left: 60px;
            width: 350px;
            height: 150px;
            background-color: coral;
         }
         @keyframes myanim {
            30% {
               opacity: 0.4;
            }
         }
      </style>
   </head>
   <body>
      <p>Showing opacity</p>
      <div id = "demo1">
         <h1>End div</h1>
      </div>
      <div id = "demo2">
      </div>
      <div id = "demo3">
         <h1>Start div</h1>
      </div>
   </body>
</html>

Tutorials Point, posted 1d 4h ago

CSS margin-left property

<!DOCTYPE html>
<html>
   <head>
      <style>
         div {
            background-color: gray;
            animation: myanim 3s infinite;
            color: white;
         }
         @keyframes myanim {
            30% {
               margin-left: 20px;
            }
         }
      </style>
   </head>
   <body>
      <h2>Heading One</h2>
      <div>
         This is demo text.
      </div>
   </body>
</html>

Tutorials Point, posted 1d 5h ago

CSS flex lines with equal space

<!DOCTYPE html>
<html>
   <head>
      <style>
         .mycontainer {
            display: flex;
            height: 200px;
            background-color: #5D6D7E;
            align-content: space-between;
            flex-wrap: wrap;
         }
         .mycontainer > div {
            background-color: #EBF5FB;
            text-align: center;
            line-height: 60px;
            font-size: 30px;
            width: 100px;
            margin: 5px;
         }
      </style>
   </head>
   <body>
      <h1>Queue</h1>
      <div class = "mycontainer">
         <div>Q1</div>
         <div>Q2</div>
         <div>Q3</div>
         <div>Q4</div>
         <div>Q5</div>
         <div>Q6</div>
         <div>Q7</div>
         <div>Q8</div>
      </div>
   </body>
</html>

Tutorials Point, posted 1d 5h ago

Border Top Right Radius property in CSS

<html>
   <head>
      <style>
         #rcorner {
            border-radius: 25px;
            border-top-right-radius: 45px;
            background: orange;
            padding: 20px;
            width: 400px;
            height: 250px;
         }
      </style>
   </head>
   <body>
      <p id = "rcorner">Rounded border-top-right corner!</p>
   </body> 
</html>

Advertisements
Loading...