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

منذ 6 سنوات imadbelasri Css
CS

فهاد الدرس السابع من سلسلة 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;
}
                                                        
                                                    

دروس ذات صلة

CS

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

فهاد الدرس الأول من سلسلة css للمبتدئين غادي نشوفوا كيفاش نزيدو css فملف خارجي عوض الطريقة الأولى لي...


CS

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

فهاد الجزء الثاني من دورة css للمبتدئين غادي نكملو داكشي لي بدينا فالجزء السابق غادي نشوفوا كيف...


CS

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

فهاد الدرس الثالت من دورة css للمبتدئين غادي نشوفوا المزيد من les propriétés غادي نشوفو كيفاش يمكن ن...


CS

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

فهاد الدرس الرابع من دورة css للمبتدئين غادي نشوفوا كيفاش نزيدو des styles css ل les listes فكي...


CS

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

فهاد الدرس الخامس من دورة ال css غادي نكملوا الدورة ديالنا غادي نشوفوا كيفاش نزيدوا les icons كاين ب...


CS

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

فهاد الدرس السادس من دورة CSS للمبتدئين غادي نشوفوا d'autres propriétés css ولي غادي يمكنونا باش نتع...


CS

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

فهاد الدرس السابع من سلسلة css للمبتدئين غادي نشوفوا les animations ف css ف les animations كيمكنونا...