Tutorials Point, posted 10h 51m 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 11h 6m 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 11h 26m 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 11h 35m 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 11h 42m 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 11h 51m 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 11h 55m 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 12h 32m 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 12h 35m 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>

Tutorials Point, posted 12h 42m ago

Animation on CSS line height property

<!DOCTYPE html>
<html>
   <head>
      <style>
         p {
            animation: mymove 3s infinite;
            line-height: 20px;
         }
         @keyframes mymove {
            70% {
               line-height: 50px;
            }
         }
      </style>
   </head>
   <body>
      <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! </p>
   </body>
</html>

1 2 3 4 5 6 7 ... 312 Next
Advertisements
Loading...