Showing posts with label CSS. Show all posts

Matrix3D() CSS Function of the Transform Property

Video Tutoral at https://youtu.be/kR4_IWzL168

The matrix3d() CSS function of the transform property defines a 3D transformation as a 4 x 4 homogeneous matrix. It contains 16 parameters like scaleX, scaleY, scaleZ, shearZX, perspectiveX, translateX, and so on.

►The scaleX will scale the element toward the X direction. In other words, it represents the scaleX() which is also used in the matrix() CSS function.

►The ShearYX shears an element by moving the element toward the Y direction and expanding toward the X direction. In other words, it represents the skewY() which is also used in the matrix() CSS function.

►The shearZX parameter shears an element by moving the element toward the Z direction and expanding toward the X direction.

►Perspective X. It supports the negative value.

►The shearXY parameter shears an element by moving the element toward the X direction and expanding toward the Y direction. In other words, it represents the skewX() which is also used in the matrix() CSS function.

►The ScaleY scales the element toward the Y direction. In other words, it represents the scaleY() which is also used in the matrix() CSS function.

►The shearZY parameter shears an element by moving the element toward the Z direction and expanding toward the Y direction.

►Perspective Y. It supports the negative values.

►The shearXZ parameter shears an element by moving the element toward the X direction and expanding toward the Z direction.

►The shearYZ parameter shears an element by moving the element toward the Y direction and expanding toward the Z direction.

►The ScaleZ scales toward the Z direction.

►Perspective Z. It supports the negative values.

►Translate X Y and Z. The translations of X and Y are also being used in the matrix() CSS function.

►PerspectiveScale. It doesn't support the negative values.

Use the code below to learn more.

<!DOCTYPE html>
<html>
<head>
   <style>
html {
  height: 100%;
  box-sizing: border-box;
}

body {
  position: relative;
  margin: 0;
  min-height: 100%;
  display: grid;
  justify-content: center;
  align-items: center;
  box-sizing: inherit;
}

  .threeD {
  width: 200px;
  height: 200px;
  transform-style: preserve-3d;
  rotate: 1 -1 0 -30deg;
  scale: 0.6 0.6 0.6;
  transition: 3s ease all;
}  

.threeD:hover {
  transform: matrix3d(  1, 0, 0, 0,
                                  0, 1, 0, -0.005,
                                  0, 0, 1, 0,
                                  0, 0, 0, 1
                                 )
}

 .area {
  width: 100%;
  height: 100%;
  position: absolute;
  opacity: 0.8;
  color: white;
  font-size: 10em;
  display: grid;
  align-items: center;
  text-align: center;
  border: solid 20px #2effea;
  }

.front {
  transform: translate3d(0, 0, 1.2in);
  background: #ff2ed9;
}

.back {
  transform:  translateZ(-120px) rotateY(180deg);
  background: #c02eff;
}

.left {
  right: 80px;
  transform: rotateY(270deg);
  background: #f5ff2e;
}

.right {
  left: 120px;
  transform: rotateY(90deg);
  background: #ffab2e;
}

.top {
  bottom: 80px;
  transform: rotateX(90deg);
  background: blue;
}

.bottom {
  top: 120px;
  transform:  rotateZ(180deg) rotateX(90deg);
  background: #34eb7d;
}

  </style>
</head>

<body>
<div class="threeD"> 
<div class="area front">1</div>  
<div class="area back">2</div>
<div class="area left">3</div> 
<div class="area right">4</div> 
<div class="area top">5</div>
<div class="area bottom">6</div>  
</div>
</body>

</html>

Border CSS part-3

You can put the different sizes of border-width on the four sides of a border as shown here: border-width: 4px 11px 21px 35px; The border-width CSS property can be used with other properties like border-style", "border-radius", and "border-color" to create customized borders for HTML elements. Use the code below to create a border with different sizes on the four sides of a border.

Video Tutoral at https://youtu.be/aognRKnStVE

HTML

<!DOCTYPE html>
<html>
 <head>
     <style>
           .my-border {
                        border-style: solid;
                        border-color: darkgreen;
                        border-radius: 30px;
                        border-width: 4px 11px 21px 35px;
                        width: 80%;
                        color: blue;
                        text-align: center;
                        font-size: 50pt;
                        font-weight: bold;
                        font-family: arial;
                        background: yellow;
                      }

  p {
        padding: 100px;
}
     </style>
 </head>
<body>

<center>
<div class="my-border">
    <p>This is my text inside the border.</p>
</div>
</center>

</body>
</html>

Border CSS part-2

Video Tutoral at https://youtu.be/uZNPqO05z3E

<html>
<title></title>

<head>

<style>
       .border {
                border-left: 5px dotted #09edc7;
                border-top: 5px dotted blue;
                border-right: 5px dotted #09edc7;
                border-bottom: 5px dotted green;
                text-align: center;
                width: 70%;
                margin-left: 15%;
               }
</style>

</head>

<body>
<div class="border">MY BORDER</div>
</body>

<footer></footer>
</html>

Result:

MY BORDER

Border CSS part-1

Today let's learn how to create borders by using a tag in HTML coding. It is very easy and simple. So guys, let's learn it with great interest.

Open a notepad and type any text between the opening and closing of the <div> tag. Then save the notepad as any file name you want but make sure to add .HTML at the end of your file name. After that open the HTML file with any web browser.

Add a border outside the text that we have typed. You can type style="border: 5px solid #42f5ef;" at the opening of the <div tag>. Go to file and click Save.

Reload the web page on the browser. This time you can see a border outside the text. The size of the border is 5px. You can keep any border size you want. The type of border is "solid". #42f5ef is the color code of the border. You can keep the text alignment to the center by adding text-align: center; as shown here style="border: 5px solid #42f5ef; text-align: center;"

You can reduce the width of the border. Let's say the width of the border is 30%. (style="border: 30px dotted #af2eff; text-align: center; width: 30%;"). You can also increase the height of the border but here I have kept the height of the border as it is. Let's bring the border to the Center. You can do it by using a <center> tag.

You can change the border type from "solid" to "double", dotted, dashed, groove, ridge, inset, and outset. Now let's also add a border-radius. I am keeping the border-radius to 15px. (style="border:30px dotted #af2eff; text-align:center; width:30%; border-radius:15px;").

<center>
<div style="border: 5px dotted #af2eff; text-align: center; width: 30%; border-radius:15px;">
She shall sail ship on sea
</div>
</center>

If you want to add a border to your blogger or website, you can copy the code that we have created and paste it into the HTML area of your blogger or website.

That's it, guys. Thanks for reading and goodbye until next time.

Border Part Two at https://c815.blogspot.com/2022/11/border-css-part-2.html

CSS for the Curved Moon

Video Tutoral at https://youtu.be/z4ful90PAAE

<!DOCTYPE html>
<html>
<head>
     <style>
      * {
          background: #315a78;
        }

       .wrapper {
          height: 800px;
          width: 1200px;
          display: flex;
          align-items: center;
          justify-content: center;
               }
        
       .curved-moon {
          height: 400px;
          width: 400px;
          box-shadow: 80px -80px 0px 8px #faf36b;
          border-radius: 50%;
                    }

     </style>
</head>
<body>

<h2 style="color: yellow;">Curved Moon</h2>
<div class="wrapper">
<div class="curved-moon"></div>
</div>

</body>
</html>

CSS for a Vertical Scroll Bar

Video Tutoral at https://youtu.be/Eq2DgQsqrjM

<html>
<head>
 <style>
       .scroll-bar {
         height: 100%;
         width:130px;
         border:1px solid grey;
         font-family: 'GestaRegular', Arial, Helvetica, sans-serif;
         overflow: auto;
}

::-webkit-scrollbar {
width: 10px; 
}

::-webkit-scrollbar-track {
border: 1px solid #bdffe6;
border-radius: 8px;
}

::-webkit-scrollbar-thumb {
background: #bdffe6;  
border-radius: 8px;
}

::-webkit-scrollbar-thumb:hover {
background: #a2fcdb;
}
 </style>
</head>

<body>

<div class="scroll-bar">
If you keep the height 100%, the scroll effect will start only after the texts exceeding 100% height. If you keep the height 100%, the scroll effect will start only after the texts exceeding 100% height.If you keep the height 100%, the scroll effect will start only after the texts exceeding 100% height.If you keep the height 100%, the scroll effect will start only after the texts exceeding 100% height.If you keep the height 100%, the scroll effect will start only after the texts exceeding 100% height.If you keep the height 100%, the scroll effect will start only after the texts exceeding 100% height.If you keep the height 100%, the scroll effect will start only after the texts exceeding 100% height.If you keep the height 100%, the scroll effect will start only after the texts exceeding 100% height.If you keep the height 100%, the scroll effect will start only after the texts exceeding 100% height.If you keep the height 100%, the scroll effect will start only after the texts exceeding 100% height.If you keep the height 100%, the scroll effect will start only after the texts exceeding 100% height.If you keep the height 100%, the scroll effect will start only after the texts exceeding 100% height.If you keep the height 100%, the scroll effect will start only after the texts exceeding 100% height.If you keep the height 100%, the scroll effect will start only after the texts exceeding 100% height.If you keep the height 100%, the scroll effect will start only after the texts exceeding 100% height.If you keep the height 100%, the scroll effect will start only after the texts exceeding 100% height.
</div>

</body>
</html>

Scroll CSS With Links

Video Tutoral at https://youtu.be/o-gqJjppJ10

<html>
<head>
 <style>
       .scrollbar-link {
         width: 50%;
         border:0.1px solid grey;
         overflow: auto;
         white-space: nowrap;
         background: black; 
         padding: 3px;  
}
        a {
        display: inline-block; 
        padding: 15px; 
        text-decoration: none; 
        color: yellow; 
        font-family: 'GestaRegular', Arial, Helvetica, sans-serif; 
        font-size: 18px;
}
      a:hover {
      background-color: yellowgreen;
}
 </style>
</head>

<body>
<center>
<div class="scrollbar-link" >
  <a href="#">Home</a>
  <a href="#">Health</a>
  <a href="#">Wealth</a>
  <a href="#">Love</a>
  <a href="#">Compassion</a>
  <a href="#">Selfless</a>
  <a href="#">Happiness</a>
  <a href="#">All The Sentient Beings Are Our Parents</a>
  <a href="#">Pray For All The Sentient Beings</a>
  <a href="#">Support</a>
  <a href="#">Frequently Asked Questions</a>  
  <a href="#">Contact Us</a>
</center>
</body>
</html>

CSS for a Horizontal Scrollbar

<html>
<head>
 <style>
       .scroll-bar {
         height:130px;
         width: 80%;
         border:1px solid grey;
         font-family: 'GestaRegular', Arial, Helvetica, sans-serif;
         overflow: auto;
         white-space: nowrap;
}


 </style>
</head>

<body>

<div class="scroll-bar">
If you keep the height 100%, the scroll effect will start only after the texts exceeding 100% height. If you keep the height 100%, the scroll effect will start only after the texts exceeding 100% height.<br/>
If you keep the height 100%, the scroll effect will start only after the texts exceeding 100% height. If you keep the height 100%, the scroll effect will start only after the texts exceeding 100% height.<br/>
If you keep the height 100%, the scroll effect will start only after the texts exceeding 100% height. If you keep the height 100%, the scroll effect will start only after the texts exceeding 100% height.<br/>
If you keep the height 100%, the scroll effect will start only after the texts exceeding 100% height. If you keep the height 100%, the scroll effect will start only after the texts exceeding 100% height.<br/>
If you keep the height 100%, the scroll effect will start only after the texts exceeding 100% height. If you keep the height 100%, the scroll effect will start only after the texts exceeding 100% height.<br/>
If you keep the height 100%, the scroll effect will start only after the texts exceeding 100% height. If you keep the height 100%, the scroll effect will start only after the texts exceeding 100% height.<br/>
If you keep the height 100%, the scroll effect will start only after the texts exceeding 100% height. If you keep the height 100%, the scroll effect will start only after the texts exceeding 100% height.<br/>
If you keep the height 100%, the scroll effect will start only after the texts exceeding 100% height. If you keep the height 100%, the scroll effect will start only after the texts exceeding 100% height.<br/>
If you keep the height 100%, the scroll effect will start only after the texts exceeding 100% height. If you keep the height 100%, the scroll effect will start only after the texts exceeding 100% height.<br/>
If you keep the height 100%, the scroll effect will start only after the texts exceeding 100% height. If you keep the height 100%, the scroll effect will start only after the texts exceeding 100% height.<br/>
If you keep the height 100%, the scroll effect will start only after the texts exceeding 100% height. If you keep the height 100%, the scroll effect will start only after the texts exceeding 100% height.<br/>
</div>

</body>
</html>

CSS for the National Flag of the United States

<html>
<head>
  <style>
       body {
              background: rgb(63,94,251);
              background: radial-gradient(circle, rgba(63,94,251,1) 0%, rgba(224,29,201,0.8634804263502276) 100%);
              }
 
       table {
              height: 456px;
              width: 800px;
             }

       table, td {
              border: solid 0px;
              border-collapse: collapse;
                }

       tr:nth-child(odd) {
              background: #bf0b30;           
                         }

        tr:nth-child(even) {
              background: #ffffff;
                         }

        * {
              margin: 20px;
                   }

        .stars {
              background: #002768;
              width: 288px;
              height: 245px;
              margin-top: -476px;
               }

         p {
             color:#fffeff;
             font-size: 33px;
             line-height: 7px;
             letter-spacing: 15px;
             text-align: center;
               }
  </style>

</head>
<body>


<div>
<table>
<tr><td></td></tr>
<tr><td></td></tr>
<tr><td></td></tr>
<tr><td></td></tr>
<tr><td></td></tr>
<tr><td></td></tr>
<tr><td></td></tr>
<tr><td></td></tr>
<tr><td></td></tr>
<tr><td></td></tr>
<tr><td></td></tr>
<tr><td></td></tr>
<tr><td></td></tr>
</table>

<div class="stars">
<p><br/><br/>★★★★★★</p>
<p>★★★★★</p>
<p>★★★★★★</p>
<p>★★★★★</p>
<p>★★★★★★</p>
<p>★★★★★</p>
<p>★★★★★★</p>
<p>★★★★★</p>
<p>★★★★★★</p>
</div>

</div>
</body>
</html>

Hexagon CSS

<!DOCTYPE html>
<html>

<head>
     <style>
         body {
                   background: darkgreen;
}

      .my-hexagon {
                 width: 150px;
                 border-left: 80px solid transparent;
                 border-right: 80px solid transparent;
                 border-top: 150px solid pink;
                 position: absolute;
                 left: 50%;
                 top: 50%;
                 transform: translate(-50%, -50%);
}
     .my-hexagon:after {
                 content: "";
                 width: 150px;
                 border-left: 80px solid transparent;
                 border-right: 80px solid transparent;
                 border-bottom: 150px solid pink;
                 position: absolute;
                 left: 50%;
                 top: -224.4px;
                 transform: translate(-50%, -50%);
}

     </style>
</head>

<body>
   <div class="my-hexagon"></div>
</body>

</html>

Down Triangle CSS

<!DOCTYPE html>
<html>

<head>
     <style>
.down-triangle {
   border-left: 100px solid transparent;
   border-right: 100px solid transparent;
   border-top: 172px solid green;
   width: 0;
}
     </style>
</head>

<body>
   <div class="down-triangle"></div>
</body>

</html>

Right Triangle CSS

<!DOCTYPE html>
<html>

<head>

     <style>

   .right-triangle {
             border-top: 100px solid transparent;
             border-bottom: 100px solid transparent;
             border-right: 172px solid green;
             width: 0;
}

     </style>

</head>
 <body>
   
<div class="right-triangle"></div>

 </body>

</html>

CSS for A Right Sidebar Responsive Website

<!DOCTYPE html>
<html>

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

<style>
* {
  box-sizing: border-box;
}

body{
  font-family:Arial;
  text-align: justify;
}

.header {
  background:#dbf7ff;
  padding: 15px; 
  color:darkblue;
  font-size:11pt;
  text-align: center;
}
.main-body {
  float: left;
  width: 70%;
  padding: 0px 20px 20px 80px;
}
.right-sidebar {
  float: right;
  width: 30%;
  padding: 0px 80px 10px 20px;
}

footer {
  background:#dbf7ff;
  float: left;
  width: 100%;
  padding: 30px;
  height: 80px;
  text-align: center;
}

@media only screen and (max-width:768px) {
  /* Desktops/Tablets: */
  .main-body {
    width: 70%;
    }

  .right-sidebar {
    width: 30%;
  }
}

@media only screen and (max-width:568px) {
  /* For mobile phones: */

  .main-body, .right-sidebar {width:100%;
               }
  .main-body {
    padding: 0px 20px 0px 20px;
    }

  .right-sidebar {
    padding: 0px 20px 3px 20px;
    }
}
</style>

</head>
<body>

<div class="header">
  <h1>Responsive Website</h1>
  <h3>-Right Sidebar</h3>
</div>

 <div class="main-body">
    <h2>Body</h2>
    <p>Malesuada proin libero nunc consequat interdum varius sit amet. Euismod lacinia at quis risus sed vulputate odio. Quam quisque id diam vel quam elementum. Suscipit adipiscing bibendum est ultricies integer. Ornare aenean euismod elementum nisi quis eleifend quam adipiscing vitae. At tellus at urna condimentum. Pellentesque nec nam aliquam sem et tortor consequat id porta.</p>

<p>Malesuada proin libero nunc consequat interdum varius sit amet. Euismod lacinia at quis risus sed vulputate odio. Quam quisque id diam vel quam elementum. Suscipit adipiscing bibendum est ultricies integer. Ornare aenean euismod elementum nisi quis eleifend quam adipiscing vitae. At tellus at urna condimentum. Pellentesque nec nam aliquam sem et tortor consequat id porta.</p>
    <img src="https://i.ytimg.com/vi/Ij1nTHUtOso/maxresdefault.jpg" style="width:100%; display: block;"/>
</div>

  <div class="right-sidebar">
    <h2>Sidebar</h2>
    <p>At tellus at urna condimentum. Enim facilisis gravida neque convallis. Urna cursus eget nunc scelerisque viverra mauris in aliquam. </p>
    <h2>Suscipit</h2>
    <p>Tincidunt eget nullam non nisi est sit amet facilisis magna. Enim ut tellus elementum sagittis vitae.</p>
    <h2>Condimentum</h2>
    <p>Volutpat lacus laoreet non curabitur gravida arcu. Ligula ullamcorper malesuada proin libero nunc consequat interdum.</p>
  </div>
  
<footer>
COPYRIGHT © <script type='text/javascript'>document.write(new Date().getFullYear())</script><a href="https://v815.blogspot.com/" target="_blank"> Vast Site</a>
</footer>

</body>
</html>

Left Sidebar Responsive Website

<!DOCTYPE html>
<html>

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

<style>
* {
  box-sizing: border-box;
}

body{
  font-family:Arial;
  text-align: justify;
}

.header {
  background:#dbf7ff;
  padding: 15px; 
  color:darkblue;
  font-size:11pt;
  text-align: center;
}
.main-body {
  float: right;
  width: 70%;
  padding: 0px 80px 20px 20px;
}
.left-sidebar {
  float: left;
  width: 30%;
  padding: 0px 20px 10px 80px;
}

footer {
  background:#dbf7ff;
  float: left;
  width: 100%;
  padding: 30px;
  height: 80px;
  text-align: center;
}

@media only screen and (max-width:768px) {
  /* Desktops/Tablets: */
  .main-body {
    width: 70%;
    }

  .left-sidebar {
    width: 30%;
  }
}

@media only screen and (max-width:568px) {
  /* For mobile phones: */

  .main-body, .left-sidebar {width:100%;
               }
  .main-body {
    padding: 0px 20px 0px 20px;
    }

  .left-sidebar {
    padding: 0px 20px 3px 20px;
    }
}
</style>

</head>
<body>

<div class="header">
  <h1>Responsive Website</h1>
  <h3>-Left Sidebar</h3>
</div>

 <div class="main-body">
    <h2>Body</h2>
    <p>Malesuada proin libero nunc consequat interdum varius sit amet. Euismod lacinia at quis risus sed vulputate odio. Quam quisque id diam vel quam elementum. Suscipit adipiscing bibendum est ultricies integer. Ornare aenean euismod elementum nisi quis eleifend quam adipiscing vitae. At tellus at urna condimentum. Pellentesque nec nam aliquam sem et tortor consequat id porta.</p>

<p>Malesuada proin libero nunc consequat interdum varius sit amet. Euismod lacinia at quis risus sed vulputate odio. Quam quisque id diam vel quam elementum. Suscipit adipiscing bibendum est ultricies integer. Ornare aenean euismod elementum nisi quis eleifend quam adipiscing vitae. At tellus at urna condimentum. Pellentesque nec nam aliquam sem et tortor consequat id porta.</p>
    <img src="https://i.ytimg.com/vi/SHzTju0Kkhc/maxresdefault.jpg" style="width:100%; display: block;"/>
</div>

  <div class="left-sidebar">
    <h2>Sidebar</h2>
    <p>At tellus at urna condimentum. Enim facilisis gravida neque convallis. Urna cursus eget nunc scelerisque viverra mauris in aliquam. </p>
    <h2>Suscipit</h2>
    <p>Tincidunt eget nullam non nisi est sit amet facilisis magna. Enim ut tellus elementum sagittis vitae.</p>
    <h2>Condimentum</h2>
    <p>Volutpat lacus laoreet non curabitur gravida arcu. Ligula ullamcorper malesuada proin libero nunc consequat interdum.</p>
  </div>

<footer>
COPYRIGHT © <script type='text/javascript'>document.write(new Date().getFullYear())</script><a href="https://v815.blogspot.com/" target="_blank"> Vast Site</a>
</footer>

</body>
</html>

CSS for Left & Right Sidebars-Responsive Website

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>

<style>
* {
  box-sizing: border-box;
}

body{
  font-family:Arial;
  text-align: justify;
}

header {
  background:#e303fc;
  padding: 15px; 
  color:white;
  font-size:11pt;
  text-align: center; 
}

.main-body {
  float: left;
  margin-left:25%;
  width: 50%;
  padding: 0px 20px 15px 20px;
}

.left-sidebar {
  float: left;
  margin-left:-75%;
  width: 25%;
  padding: 0px 20px 15px 80px;
}

.right-sidebar {
  float: right; 
  width: 25%;
  padding: 0px 80px 15px 20px;
}

.sidebarbgc {
  padding:0px 5px 0px 5px;
  background: #dbe9ff;
  border-radius:15px;
}

footer {
  background:#e303fc;
  float: left;
  width: 100%;
  padding: 30px;
  height: 80px;
  text-align: center;
}

@media only screen and (max-width:768px) {
  /* Desktops/Tablets: */
  .main-body {
    width: 50%;
    }

  .left-sidebar {
    width: 25%;
  }

  .right-sidebar {
  }
}

@media only screen and (max-width:568px) {
  /* For mobile phones: */

  .main-body, .right-sidebar, .left-sidebar {
    width:100%;
               }
  .main-body {
    padding: 0px 20px 0px 20px;
    margin-left:0;
    }

  .left-sidebar {
    padding: 0px 20px 0px 20px;
    margin-left:0;
  }

  .right-sidebar {
    padding: 0px 20px 10px 20px;
    margin-top: -5%;
    }
}
</style>

</head>
<body>

<header>
  <h2>Responsive Website</h2>
  <h3>-Right & Left Sidebars</h3>
</header>

 <div class="main-body">
    <h3>Body</h3>
    <p>Malesuada proin libero nunc consequat interdum varius sit amet. Euismod lacinia at quis risus sed vulputate odio. Quam quisque id diam vel quam elementum. Suscipit adipiscing bibendum est ultricies integer. Ornare aenean euismod elementum nisi quis eleifend quam adipiscing vitae. At tellus at urna condimentum. Pellentesque nec nam aliquam sem et tortor consequat id porta.</p>

<p>Malesuada proin libero nunc consequat interdum varius sit amet. Euismod lacinia at quis risus sed vulputate odio. Quam quisque id diam vel quam elementum. Suscipit adipiscing bibendum est ultricies integer. Ornare aenean euismod elementum nisi quis eleifend quam adipiscing vitae. At tellus at urna condimentum. Pellentesque nec nam aliquam sem et tortor consequat id porta.</p>
    <img src="https://i.ytimg.com/vi/C07UjNSULBA/maxresdefault.jpg" style="width:100%; display: block;"/>
</div>

  <div class="left-sidebar">
   <div class="sidebarbgc">
    <h2 style="color: #fc03c6;">Left Sidebar</h2>
    <p>At tellus at urna condimentum. Enim facilisis gravida neque convallis. Urna cursus eget nunc scelerisque viverra mauris in aliquam. </p>
    <h3>Suscipit</h3>
    <p>Tincidunt eget nullam non nisi est sit amet facilisis magna. Enim ut tellus elementum sagittis vitae.</p>
    <h3>Condiment</h3>
    <p>Volutpat lacus laoreet non curabitur gravida arcu. Ligula ullamcorper malesuada proin libero nunc consequat interdum.</p>
  </div></div>

  <div class="right-sidebar">
   <div class="sidebarbgc">
    <h2 style="color: #fc03c6;">Right Sidebar</h2>
    <p>At tellus at urna condimentum. Enim facilisis gravida neque convallis. Urna cursus eget nunc scelerisque viverra mauris in aliquam. </p>
    <h3>Suscipit</h3>
    <p>Tincidunt eget nullam non nisi est sit amet facilisis magna. Enim ut tellus elementum sagittis vitae.</p>
    <h3>Condiment</h3>
    <p>Volutpat lacus laoreet non curabitur gravida arcu. Ligula ullamcorper malesuada proin libero nunc consequat interdum.</p>
  </div></div>

<footer>
COPYRIGHT © <script type='text/javascript'>document.write(new Date().getFullYear())</script><a href="https://v815.blogspot.com/" target="_blank"> Vast Site</a>
</footer>

</body>
</html>

Japanese Flag CSS

<!DOCTYPE html>
<html lang="en">
<head>
  <style>

body {
     background: darkgreen;
     margin: 100px;	 
}

.flag {
	     width: 600px;
		 height: 375px;
		 background: white;
		 display: table-cell;
		 vertical-align: middle;
}

.round-red {
	     width: 200px;
		 height: 200px;
		 background: red;
		 border-radius: 50%;
}  
  
  </style>
</head>
<body>

<div class="wrapper">
<div class="flag" align="center">
<div class="round-red"></div>
</div>
</div>

</body>
</html>

How To Turn Off Underline and Hover Hand icon from a Link in HTML

In this lesson, we are gonna learn how to turn off the underline and mouse hover hand icon from a link in HTML by using CSS. It is very easy. To remove the underline from a link, add here text-decoration: none; We can also remove the hover hand icon. Just add, pointer-events: none;

<!DOCTYPE html>
<html>
<head>

   <style>
           a {
            text-decoration: none;
            pointer-events: none;
        }
    </style>

</head>
<body align="center" style="font-size: 100px;">

        <a href="#">Test Link</a>

</body>
</html>

The min-width property in CSS

The min-width property in CSS defines the minimum width of an element. We can use the min-width property to prevent the width of an element or content from breaking down the lines.

<!DOCTYPE html>
<html>
<head>
    <style>
          div {
             min-width: 1200px;
          }
     </style>
</head>
<body>

<div style="font-size: 100px;">This is a test of min-width.</div>

</body>
</html>

Using min-height & min-width in a span tag

In this post, you will see how the min-height and min-width are being used in a span tag. Watch the above video for more information.

<!DOCTYPE html>
<html>
<head>
    <style>
          span {
           min-width: 1100px;
           min-height: 100px;
           background: greenyellow;
           display: inline-block; /* display: grid;(or flex) align-items: center; justify-content: center; */
          }
     </style>
</head>
<body>

<span style="font-size: 100px;">Min-width & min-height.</span>

</body>
</html>

position: relative;

The position relative helps to shift an element relative to its normal position. It allows us to adjust with top, right, bottom, or left properties.

<!DOCTYPE html>
<head>
    <title>Relative Positioning</title>
    <style>
           p {
               position: relative;
               left: 100px;
               top: 300px;
           }
    </style>
</head>
<body>
      <p>The position relative helps to shift an element relative to its normal position. It allows you to adjust with top, right, bottom, or left properties. </p>
</body>
</html>

 <!DOCTYPE html>
    <html>
     <head>
        <title>Relative Positioning</title>
<style>

.parent {
     position: relative;
     left: 100px;
     top: 100px;
     width: 300px;
     height: 200px;
     border: 5px solid #f542e6;
   } 
   
   .child {
     position: absolute;
     left: 50%;
     top: 50%;
     transform: translate(-50%, -50%);
     width: 150px;
     height: 100px;
     border: 4px solid #f542e6;
   }
   
   </style>
   </head>
   <body>
   
   <div class="parent">Parent 
     <div class="child">Child</div>
   </div>
   
   </body>
   </html>

Comforting Tools

Pages

Popular Posts