دورة css للمبتدئين الدرس السابع


فهاد الدرس السابع من سلسلة css للمبتدئين غادي نشوفوا les animations ف css ف les animations كيمكنونا باش نزيدوا des effets ل les éléments html ديالنا فغادي نشوفوا كيفاش نديرو animation ل les boutons و les images بمجموعة مختلفة من les propriétés css.


1- كيفاش نخدم ب transforms

ف transfrom هي واحد ل propriété css لي كتمكن من إضافة تغيير للشكل ديال واحد ل élément html فهنا مثلا فالكود زدنا واحد ل bouton html لي فالملف style.css زدنالها style css فيه des propriétés لي déjà شفناهم فل hover ديال ل bouton يعني ملي كنحط عليها la souris عندي transfrom لي كتاخد ل fonction translate لي كتمكن من تغيير ل position ديال élémnt سوا عموديا ب translateY أو أفقيا ب translateX أو بجوج ب translate لي كتاخد قيمة عبارة عن px فمثلا هنا زدنا ل bouton box-shadow لي شفناه فدروس سابقة وفل hover كنحيدوه وكنزيدو لل bouton transform لي كتاخد ل fonction translateY يعني كنغير ل position عموديا ب 4px الكود لي زدنا هو : 

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

ف transfrom كتاخد ايضا fonction rotate لي كتمكن باش نحركوا واحد ل élément html تبعا لعقارب الساعة أو عكسها وهاد ال fonction كتاخد القيمة بالدرجات (degré) فهنا فالمثال عندنا une image لي ب css حددنا الطول والعرض ديالها ول border منبعد كنزيدولها فل hover ديالها يعني ملي كتكون فوقها la souris ل prop transform لي كتاخد ل fonction rotate لي عطيناها 20 درجة فبحال translate يمكنلك تدير rotate عموديا ب rotateY أو أفقيا ب rotateX الكود لي زدنا هو :

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

ف transfrom كتاخد ايضا fonction scale لي كتمكن ياش نزيدو ف la taille ديال واحد ل élément html فهنا فالمثال عندنا une image لي ب css حددنا الطول والعرض ديالها ول border منبعد كنزيدولها فل hover ديالها يعني ملي كتكون فوقها la souris ل prop transform لي كتاخد ل fonction scale لي عطيناها 2 ولي كتعني بلي كنزيدو فحجم الصورة ب 2 دالمرات فالطول وفالعرض الكود لي زدنا هو :

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

ف css animations كيمكنونا من تغيير style ديال واحد ل élément html ولي باش نستعملوهم كيخصنا أول حاجة نديكلاريوهم ف keyframes@  فالمثال لي عندنا كنحتفظوا بنفس ل bouton لي شفنا قبل فقط كنزيدولو ل animation لي كيف قلنا كنزيدوها فل keyframes فل animation ديالنا غادي تبدل لون ل background  كنبداو من لحمر ونمشيو لصفر وكنعطيوها اسم لي به فل bouton كنعيطولها هنا عطيناها buttonAn فل bouton كنعطيوها ل animation-name لي هو buttonAn و animation-duration لي هي المدة عطيناها 4 ديال الثواني الكود لي زدنا هو :

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

ف css transitions كيمكنونا من تغيير style ديال واحد ل élément html بسلاسة يعني كيكون واحد ل effet مصاحب للتغيير لي زدنا فهنا فالمثال احتفظنا بنفس الصورة لي كانت عندنا ولي فل hover ديالها غيرنا ل height ديالها لل 600 وفل img زدنالها transition لي عطيناها ل propriété لي بغينا نزيدولها ل effet ولي هنا هي height ولي كنعطيها durée لي 2 ثواني وكاين ل prop ease-in-out لي كتحدد باش ل effet يكون بطيء فلول وفلخر ديال transition فيمكنلك تجرب هادشي لي شفنا كامل فالمتصفح ديالك الكود لي زدنا هو :

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