Web Design& development programming Studio: March 2022

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);

}

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);

}

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);

}

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);

}

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 ;

}

Saturday, March 12, 2022

Animated-Button Ripple Effect

Animated-Button Ripple Effect

<!DOCTYPE html>

<html>

<head>

<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;

}

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% ;

}

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>

</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 ;}

}

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);

}

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;}

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);

}

Pages

Sunday, March 27, 2022

Tuesday, March 22, 2022

Thursday, March 17, 2022

Wednesday, March 16, 2022

Tuesday, March 15, 2022

Saturday, March 12, 2022

Thursday, March 10, 2022

Monday, March 7, 2022

Saturday, March 5, 2022

Wednesday, March 2, 2022