Web Design& development programming Studio

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

}

Web Design& development programming Studio

Pages

Saturday, March 5, 2022

How to a Loader

CSS Alert Button

Wednesday, March 2, 2022

The ScaleY()Method

JavaScript Animated

Report Abuse

Labels