Sunday, March 27, 2022

The 3D Rotete()Method

The 3D Rotete()Method


 <!DOCTYPE html>

<html>


<head>

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

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

    <link rel="STYLESHEET" type="text/css" href="web.css">

    <title>web design</title>

</head>


<body>

<h1>The rotete()Method</h1>

<p>The rotete()Method roteted an element its around X-axis at a give degree</p>

<div>This a normal div element</div>

<div class="mydiv">This div element is rotete 150 degree</div>

</body>


</html>


CSS 3D Rotete Style

 div{

    width: 300px;

    height:100px;

    background-color: yellow;

    border:1px solid black ;

}

.mydiv{

    transform: rotatex(150deg);

}

at No comments:

Tuesday, March 22, 2022

The Matrix()Method

 The Matrix()Method




 <!DOCTYPE html>

<html>


<head>

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

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

    <link rel="STYLESHEET" type="text/css" href="web.css">

    <title>web design</title>

</head>


<body>

<h1>The Matrix()Method</h1>

<p>The Matrix()Method Matrix combines all the 2d transforms into one</p>

<div> The  a normal div element</div>

<div class="mydiv1">Use the Matrix()Method</div>

<div class="mydiv2">Another we use of the Matix()Method</div>

</body>


</html>


CSS Matrix Method Style

 div{

    width: 300px;

    height:100px;

    background-color: yellow;

    border: 1px solid black;

}

.mydiv1{

    transform: matrix(1,-0.3,0,1,0,0);

}

.mydiv2{

    transform: matrix(1,0,0.5,1,150,0);

}

at No comments:

Thursday, March 17, 2022

The SkewY()Method

 The SkewY()Method

 

<!DOCTYPE html>

<html>


<head>

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

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

    <link rel="STYLESHEET" type="text/css" href="web.css">

    <title>web design</title>

</head>


<body>

<h1>The SkewY()Method</h1>

<p>The SkewY()Method skew an element along the Yaxis by give angle</p>

<div>This a normal div element</div>

<div id="mydiv">This div element is skew 20degree along the Yaxis</div>

</body>


</html>


CSS SkewY()Method Style

 div{

    width: 300px;

    height:100px;

    background-color: yellow;

    border:1px solid black;

}

#mydiv{

    transform: skewY(20deg);

}

at No comments:

Wednesday, March 16, 2022

The SkewX()Method

 The SkewX()Method


 <!DOCTYPE html>

<html>


<head>

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

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

    <link rel="STYLESHEET" type="text/css" href="web.css">

    <title>web design</title>

</head>


<body>

<h1>The SkewX()Metod</h1>

<p>The skewx()method skew an element along the Xaxis by the give angle</p>

<div>This a nomal  div element</div>

<div id="mydiv">The div element 20 degree along the Xaxis</div>

</body>


</html>


CSS Skew()Method Style

 div{

    width: 300px;

    height: 100px;

    background-color: yellow;

    border:1px solid black ;

}

#mydiv{

    transform: skewX(20deg);

}

at No comments:

Tuesday, March 15, 2022

Animated Button

 Animated Button


 <!DOCTYPE html>

<html>


<head>

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

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

    <link rel="STYLESHEET" type="text/css" href="web.css">

    <title>web design</title>

</head>


<body>

<h2>Animated Button</h2>

<button class="button" style="vertical-align: middle;"><span>Hover</span></button>

</body>


</html>


CSS Animated Button Style

 .button{

    display: inline-block;

    border-radius: 4px;

    background-color: #f4511e;

    border: none;

    color: #fff;

    text-align: center;

    font-size:28px;

    padding:20px;

    width:200px;

    transition: all 0.5s;

    cursor: pointer;

    margin:5px;

}

span{

    cursor: pointer;

    display: inline-block;

    position: relative;

    transition:0.5s;

}

span::after{

    content: '\00bb';

    position: absolute;

    opacity:0 ;

    top: 0;

    right:-20px;

    transition:0.5s;

}

.button:hover span{

    padding-right:-25px;

}

.button:hover span::after{

    opacity: 1;

    right:0 ;

}

at No comments:

Saturday, March 12, 2022

Animated-Button Ripple Effect

 Animated-Button Ripple Effect


 <!DOCTYPE html>

<html>


<head>

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

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

    <link rel="STYLESHEET" type="text/css" href="web.css">

    <title>web design</title>

</head>


<body>

<h2>Animated-Button Ripple Effect</h2>

<button class="button">Click Me</button>

</body>


</html>


CSS Ripple Effect Style

 .button{

    position: relative;

    background-color: #4caf50;

    border: none;

    font-size:28px;

    color: #ffff;

    text-align: center;

    padding:20px;

    width:200px;

    transition-duration:0.4s ;

    text-decoration: none;

    overflow: hidden;

    cursor: pointer;

}

.button::after{

    content:"" ;

    background-color: #f1f1f1;

    display: block;

    position: absolute;

    padding-top:300%;

    padding-left:350%;

    margin-left:-20px !important;

    margin-top:-120%;

    opacity:0;

    transition:all 0.8s;

}

.button:active::after{

    padding:0;

    margin:0;

    opacity: 1;

    transition: 0s;

}

at No comments:

Thursday, March 10, 2022

Responsive Pricing Table

 Responsive Pricing Table


 <!DOCTYPE html>

<html>


<head>

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

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

    <link rel="STYLESHEET" type="text/css" href="web.css">

    <title>web design</title>

</head>


<body>

<h2 style="text-align: center;">Responsive Pricing Tables</h2>

<p style="text-align: center;">Resize the brower windows to see the effect</p>

<div class="column">

    <ul class="pricing">

        <li class="header">Baise</li>

        <li class="grey">$ 9.99/ year</li>

        <li>10GB Storage</li>

        <li>10 Emails</li>

        <li>10 Domains</li>

        <li>1GB Bandwidth</li>

        <li class="grey" class="button" >Singn Up</li>

    </ul>

</div>

<div class="column">

    <ul class="pricing">

        <li class="header" style="background-color:#04aa6d;">Pro</li>

        <li class="grey">$ 24.99/ year</li>

        <li>25GB Storage</li>

        <li>25 Emails</li>

        <li>25 Domains</li>

        <li>2GB Bandwidth</li>

        <li class="grey" class="button" >Singn Up</li>

    </ul>

</div>

<div class="column">

    <ul class="pricing">

        <li class="header">Premium</li>

        <li class="grey">$ 49.99/ year</li>

        <li>50GB Storage</li>

        <li>50 Emails</li>

        <li>50 Domains</li>

        <li>5GB Bandwidth</li>

        <li class="grey" class="button" >Singn Up</li>

    </ul>

</div>

</body>


</html>


CSS Responsive Pricing Table Style

 *{

    box-sizing: border-box;

}

.column{

    float: left;

    width:33.3%;

    padding:8px;

}

.pricing{

    list-style-type: none;

    border-bottom:1px solid #eee ;

    margin:0px;

    padding:0px;

    -webkit-transition:0.3s ;

    transition:0.3s ;

}

.pricing:hover{

    box-shadow:0 8px 12px 0 rgba(0,0,0,0.2) ;

}

.header{

    background-color: #111;

    color: #fff;

    font-size:25px ;

}

 .pricing li{

border-bottom:1px solid #eee;

text-align: center;

padding:20px ;   

}

.pricing .grey{

    background-color: #eee;

    padding:20px;

}

.li .button{

    background-color: #04aa6d;

    border: none;

    color: #fff;

    text-align: center;

    padding:10px 25px;

    text-decoration: none;

    font-size:18px ;

}

@media screen and(width=:600px;) {

.column{

    width:100% ;

}

}

at No comments:

Monday, March 7, 2022

Sidebar with icon

 Sidebar with icon



 <!DOCTYPE html>

<html>


<head>

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

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

    <link rel="STYLESHEET" type="text/css" href="web.css">

    <title>web design</title>

</head>


<body>

<div class="sidebar">

    <a href="#"><i class="fa fa-fw fa-home"></i>Home</a>

    <a href="#"><i class="fa fa-fw fa-wrench"></i>Services</a>

    <a href="#"><i class="fa fa-fw fa-user"></i>Clients</a>

    <a href="#"><i class="fa fa-fw fa-envelope"></i>Contact</a>

</div>

<div class="main">

    <h2>Sidebar with icon</h2>

    <p>The side navigation is of full(100%)Height and always shows</p>

    <p>Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.

    </p>

    <p>Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.

    </p>

</div>

</body>


</html>


CSS Sidebar  with icon Style

 .sidebar{

    height:100%;

    width:160px;

    position: fixed;

    z-index: 1;

    top:0;

    left:0;

    background-color:#111;

    overflow-x: hidden;

    padding-top:16px;

}

.sidebar a{

    padding:6px 8px 6px 16px;

    text-decoration: none;

    font-size:20px;

    color: #818181;

    display: block;

}

.sidebar a:hover{

    color: #f1f1f1;

}

.main{

    margin-left:160px;

    padding:0 10px;

}

@media screen and(max-width:450;) {

    .sidebar{

        padding-top:15px ;

    }

    .sidebar a{font-size:20px ;}

}

at No comments:

Saturday, March 5, 2022

How to a Loader

 How to a Loader 


 <!DOCTYPE html>

<html>


<head>

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

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

    <link rel="STYLESHEET" type="text/css" href="web.css">

    <title>web design</title>

</head>


<body>

<h1>How to Create a Loader</h1>

<div class="loader"></div>

</body>


</html>


    CSS Loader Animated Style

 .loader{

    border:16px solid #f3f3f3;

    border-radius:50%;

    border-top:16px solid blue;

    width:120px;

    height:120px ;

    -webkit-animation:spin 2s linear infinite ;

    animation:spin 2s linear infinite;

}

-webkit-@keyframes spin{

    0%{

        transform: rotate(0deg);

    }

    100%{

        transform: rotate(360deg);

    }

}

@keyframes spin{

    0%{

        transform: rotate(0deg);

    }

    100%{

        transform: rotate(360deg);

    }

}

at No comments:

CSS Alert Button

 CSS Alert Button


 <!DOCTYPE html>

<html>


<head>

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

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

    <link rel="STYLESHEET" type="text/css" href="web.css">

    <title>web design</title>

</head>


<body>

    <h1>CSS Alert Button</h1>

    <button class="btn sucess">Sucess</button>

    <button class="btn info">Info</button>

    <button class="btn waring">Waring</button>

    <button class="btn danger">Danger</button>

    <button class="btn defaulf">Defaulf</button>


</body>


</html>


CSS Alert Button Style

 .btn{

    border: none;

    color: white;

    padding:14px 28px;

    font-size:17px;

    cursor: pointer;

}

.sucess{

    background-color: green;

}

.sucess:hover{background-color: #46a049;}

.info{background-color:blue;}

.info:hover{background-color:#0b7dda ;}

.waring{background-color: orange;}

.waring:hover{background-color:#e68a00;}

.danger{background-color: red;}

.danger:hover{background-color: #de190b;}

.defaulf{

    background-color: gray;

    color: #000;

}

.defaulf:hover{background-color: #ddd;}

at No comments:

Wednesday, March 2, 2022

The ScaleY()Method

 The ScaleY()Method

 

<!DOCTYPE html>

<html>


<head>

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

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

    <link rel="STYLESHEET" type="text/css" href="web.css">

    <title>web design</title>

</head>


<body>

    <h1>The ScaleY()Method </h1>

    <p>The ScaleY()Method increase or decease the height of an element</p>

    <div>The div element is half of its original height</div>

</body>


</html>


CSS The ScaleY()Method Style

 div{

    margin:150px;

    width:200px;

    height:100px;

    background-color: yellow;

    border:1px solid black;

    transform: scaleY(0.5);

}

at No comments:
Subscribe to: Posts (Atom)

JavaScript Animated

  JavaScript Animated <!DOCTYPE html> <html> <style> #myContainer {   width: 400px;   height: 400px;   position: relative;...

  • Button on Image
     Button on Image Code   <!DOCTYPE html> <html>     <head>         <link rel="stylesheet" href="https://c...
  • JavaScript Variables
      JavaScript  Variables 4 Ways to Declare a JavaScript Variable: Using  var Using  let Using  const Using nothing   What are Variables? Vari...
  • The Scale()Method
     The Scale()Method   <!DOCTYPE html> <html> <head>     <link rel="stylesheet" href="https://cdnjs.cloudf...