Tutorials Point, posted 18h 35m ago

CSS user-select Property

<!DOCTYPE html>
<html>
   <head>
      <style>
         div {
            user-select: none;
         }
      </style>
   </head>
   <body>
      <h2>This is demo heading</h2>
      <div>This is demo text. You won't be able to select it.</div>
   </body>
</html>

Tutorials Point, posted 18h 41m ago

Usage of rgb() CSS Function

<!DOCTYPE html>
<html>
   <head>
      <style>
         h1 {
            background-color:hsl(0,100%,50%);
         }
         h2 {
            background-color:hsl(192,89%,48%);
         }
         p {
            background-color:rgb(0,0,255);
            color: rgb(255,255,255);
         }
      </style>
   </head>
   <body>
      <h1>Red Background</h1>
      <h2>Blue Background</h2>
      <p>This is demo text!</p>
   </body>
</html>

Tutorials Point, posted 18h 42m ago

CSS Animate border property

<!DOCTYPE html>
<html>
   <head>
      <style>
         div {
            width: 500px;
            height: 400px;
            background: yellow;
            border: 5px dashed yellow;
            background-image: url('https://www.tutorialspoint.com/latest/microservice_architecture.png');
            animation: myanim 3s infinite;
            background-position: bottom left;
            background-size: 50px;
         }
         @keyframes myanim {
            20% {
               background-color: maroon;
               background-position: bottom right;
               background-size: 90px;
               border: 25px solid orange;
            }
         }
      </style>
   </head>
   <body>
      <div></div>
   </body>
</html>

Tutorials Point, posted 18h 49m ago

CSS Background-size property Animation

<!DOCTYPE html>
<html>
   <head>
      <style>
         div {
            width: 500px;
            height: 400px;
            background: yellow;
            background-image: url('https://www.tutorialspoint.com/latest/microservice_architecture.png');
            animation: myanim 3s infinite;
            background-position: bottom left;
            background-size: 50px;
         }
         @keyframes myanim {
            20% {
               background-color: maroon;
               background-position: bottom right;
               background-size: 90px;
            }
        }
      </style>
   </head>
   <body>
      <div></div>
   </body>
</html>

Tutorials Point, posted 18h 52m ago

CSS column-rule-width property

<!DOCTYPE html>
<html>
   <head>
      <style>
         div {
            width: 600px;
            height: 300px;
            background: white;
            border: 10px solid red;
            animation: myanim 3s infinite; 
            bottom: 30px;
            position: absolute;
            column-rule: 10px inset orange;
            column-count: 4;
         }
         @keyframes myanim {
            20% {
               bottom: 100px;
               box-shadow: 30px 45px 70px orange;
               column-rule-color: black;
               column-rule-width: 20px;
            }
         }
      </style>
   </head>
   <body>
      <h2>Performing Animation on column rule width property</h2>
      <div>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! This is demo text! This is demo text! This is demo text! This is demo text!</div>
   </body>
</html>

Tutorials Point, posted 18h 57m ago

CSS column rule property

<!DOCTYPE html>
<html>
   <head>
      <style>
         div {
            width: 600px;
            height: 300px;
            background: white;
            border: 10px solid red;
            animation: myanim 3s infinite;
            bottom: 30px;
            position: absolute;
            column-count: 4;
         }
         @keyframes myanim {
            20% {
               bottom: 100px;
               box-shadow: 30px 45px 70px orange;
               column-rule: 10px inset red;
            }
         }
      </style>
   </head>
   <body>
      <h2>Performing Animation on column rule property</h2>
      <div>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! This is demo text! This is demo text! This is demo text! This is demo text!</div>
   </body>
</html>

Tutorials Point, posted 19h 13m ago

Flex Items Horizontally with CSS

<!DOCTYPE html>
<html>
   <head>
      <style>
         .mycontainer {
            display: flex;
            flex-direction: row;
            background-color: #2C3E50;
         }
         .mycontainer > div {
            background-color: #F7F9F9;
            text-align: center;
            line-height: 40px;
            font-size: 25px;
            width: 100px;
            margin: 5px;
         }
      </style>
   </head>
   <body>
      <h1>Quiz</h1>
      <div class="mycontainer">
         <div>Q1</div>
         <div>Q2</div>
         <div>Q3</div>
         <div>Q4</div>
         <div>Q5</div>
         <div>Q6</div>
      </div>
   </body>
</html>

Tutorials Point, posted 19h 17m ago

Java Pollard’s Rho Algorithm

public class PollardsRho {
   int num = 65;
      public int gcd(int a, int b) {
         int gcd = 0;
         for(int i = 1; i <= a || i <= b; i++) {
            if( a%i == 0 && b%i == 0 ) {
               gcd = i;
            }
         }
         return gcd;
      }
      int g(int x) {
         return ((x*x)-1) % num;
      }
      public static void main(String args[]) {
         PollardsRho obj = new PollardsRho();
         int x = 2, y = 2, d = 1;
         while(d==1) {
            x = obj.g(x);
            y = obj.g(obj.g(y));
            d = obj.gcd((x - y), obj.num);
         }
         if (d == obj.num) {
            System.out.println("Cannot calculate GCD for this element");
         }else {
            System.out.println("One of the divisors of given number is "+d);
         }
      }
}

Tutorials Point, posted 19h 20m ago

Top Left Corner Border CSS

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

Tutorials Point, posted 19h 28m ago

Border Radius Properties with CSS

<html>
   <head>
      <style>
         #rcorner {
            border-radius: 25px;
            background: #85C1E9;
            color: white;
            padding: 20px;
            width: 200px;
            height: 250px;
         }
      </style>
   </head>
   <body>
      <p id = "rcorner">Rounded corners!</p>
   </body>
</html>

Previous 1 ... 4 5 6 7 8 9 10 ... 1377 Next
Advertisements
Loading...