دورة css للمبتدئين الدرس السابع
1- كيفاش نخدم ب transforms
//index.html code
<button>valider</button>
//style.css code
button{
background: #4CAF50;
color: #fff;
padding: 20px;
display: block;
margin: 30px auto;
border: none;
font-size: 20px;
border-radius: 5px;
box-shadow: 0 6px #c9c9c9;
}
button:hover{
cursor: pointer;
box-shadow: 0 0 #fff;
transform: translateY(4px);
}
2- كيفاش نخدم بل fonction rotate
//index.html code
<img src="bg.jpg" alt="">
//style.css code
img{
margin: 20px 0;
width: 200px;
height: 300px;
display: block;
margin: 0 auto;
border: 2px solid #ff8800;
}
img:hover{
transform: rotate(20deg);
}
3- كيفاش نخدم بل fonction scale
//index.html code
<img src="bg.jpg" alt="">
//style.css code
img{
margin: 20px 0;
width: 200px;
height: 300px;
display: block;
margin: 0 auto;
border: 2px solid #ff8800;
}
img:hover{
transform: scale(2);
}
4- كيفاش نخدم بل animations
//index.html code
<button>valider</button>
//style.css code
@keyframes buttonAn {
from {background-color: red;}
to {background-color: yellow;}
}
button{
background: #4CAF50;
color: #fff;
padding: 20px;
display: block;
margin: 30px auto;
border: none;
font-size: 20px;
border-radius: 5px;
box-shadow: 0 6px #c9c9c9;
animation-name: buttonAn;
animation-duration: 4s;
}
5- كيفاش نخدم ب transitions
//index.html code
<img src="bg.jpg" alt="">
//style.css code
img{
margin: 20px 0;
width: 200px;
height: 300px;
display: block;
margin: 0 auto;
border: 2px solid #ff8800;
transition: height 2s ease-in-out;
}
img:hover{
height: 600px;
}