Create Stylish Skew Border Box Using HTML5 & CSS3

تحریریں 2

Create this stylish Skew Box Model with #Hover Effect for your Web Pages. This model can be use for Price Table, Product Table, Profile Boxes and for many other functions. It will make the look of your web page so beautiful.


The box model is create with purely using HTML5 and CSS3. You can create this model within a few minutes by following the steps below.

A video tutorial is also available at our YouTube Channel name J Techs you can watch this tutorial and also lot of many other Web Designing and Web Development Tutorial available with easy methods where you can learn alot. You can also download the source code of this model from link below.


Watch Video Tutorial first:
So Please Subscribe to our channel and share like and comment at our blogger posts, you tube videos. here are the steps below to create the stylish skew border box model.

Step1: Create a index.html file and write the following code.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Skew Border</title>
    <link rel="stylesheet" href="Style.css">
</head>
<body>
   <div class="container">
       <div class="box">
           <div class="content">
               <h2>01</h2>
               <h3>Box 01</h3>
           <p>
               This is a dummy text you can remove it.This is a dummy text you can remove it.This is a dummy text you can remove it.This is a dummy text you can remove it.This is a dummy text you can remove it.This is a dummy text you can remove it.This is a dummy text you can remove it.
           </p>
           <a href="">Read More</a>
           </div>
       </div>
              <div class="box">
           <div class="content">
               <h2>02</h2>
               <h3>Box 02</h3>
           <p>
               This is a dummy text you can remove it.This is a dummy text you can remove it.This is a dummy text you can remove it.This is a dummy text you can remove it.This is a dummy text you can remove it.This is a dummy text you can remove it.This is a dummy text you can remove it.
           </p>
           <a href="">Read More</a>
           </div>
       </div>
      
              <div class="box">
           <div class="content">
               <h2>03</h2>
               <h3>Box 03</h3>
           <p>
               This is a dummy text you can remove it.This is a dummy text you can remove it.This is a dummy text you can remove it.This is a dummy text you can remove it.This is a dummy text you can remove it.This is a dummy text you can remove it.This is a dummy text you can remove it.
           </p>
           <a href="">Read More</a>
           </div>
       </div>
      
              <div class="box">
           <div class="content">
               <h2>04</h2>
               <h3>Box 0</h3>
           <p>
               This is a dummy text you can remove it.This is a dummy text you can remove it.This is a dummy text you can remove it.This is a dummy text you can remove it.This is a dummy text you can remove it.This is a dummy text you can remove it.This is a dummy text you can remove it.
           </p>
           <a href="">Read More</a>
           </div>
       </div>
   </div>
   
</body>
</html>


Step2: Create a style.css file and type the following CSS code:

body{
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: #060c21;
    font-family: sans-serif;
}
.container{
    position: relative;
    width: 90%;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    grid-template-rows: auto;
    grid-gap: 0 40px;
}
.container .box{
    position: relative;
    height: 400px;
    background: #060c21;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #000;
}

.container .box:before{
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: #fff;
    transform: skew(2deg,2deg);
    z-index: -1;
}
.container .box:nth-child(1):before{
    background: linear-gradient(315deg, #ff0057, #e64a19);
}
.container .box:nth-child(2):before{
   background: linear-gradient(315deg, #89ff00, #00bcd4);
}
.container .box:nth-child(3):before{
    background: linear-gradient(315deg, #e91e63, #5d02ff);
}
.container .box:nth-child():before{
    background: linear-gradient(315deg, #ff0000, #ffc107);
}

.content{
    position: relative;
    padding: 20px;
}
.box .content h2{
    position: absolute;
    top: -60px;
    right: 20px;
    padding: 0;
    font-size: 10em;
    color: rgba(255, 255, 255, .05);
    transition: 0.5s;
}
.box:hover .content h2{
    top: -140px;
}
.box .content h3{
    margin: 0 0 10px;
    padding: 0;
    font-size: 24px;
    font-weight: 500;
    color: #fff;
}
.box .content p{
    margin: 0;
    padding: 0;
    color: #fff;
    font-size: 16px;
}
.box .content a  {
    position: relative;
    margin: 20px 0 0;
    padding: 10px 20px;
    text-decoration: none;
    border: 1px solid #fff;
    display: inline-block;
    color: #fff;
    transition: 0.5s;
    transform: translateY(-40px);
    opacity: 0;
    visibility: hidden;
}
.box:hover .content a{
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
}
.box .content a:hover{
    color: #000;
    background: #fff;
}


Here We have done our skew border box model.

*To Download the source code Click here..

*Download Link is in the description of video.
Tags

2 Comments

Post a Comment

Previous Post Next Post