فيديو الدرس
كود عنوان قسم التوصيات
يتم وضع الكود قبل العنوان ” Before ”
/* Main Text Before Code */
content: "";
width: 12px;
height: 12px;
background-color: #203db0;
position: absolute;
border-radius: 50%;
top: 50%;
transform: translateY(-50%);
left: -30px;
يتم وضع الكود قبل العنوان فى حالة الهوفر
/* Main Text Before Code " Hover " */
z-index: -1;
animation: left-move 0.5s linear forwards;
كود لعنوان القسم
/* Main title Transation */
transition-delay: 0.5s;
كود لعنوان القسم فى حالة الهوفر
/* Main title hover state */
color: white;
transition-delay: 0.5s;
يتم وضع الكود بعد العنوان
/* Main Text After Code */
content: "";
width: 12px;
height: 12px;
background-color: #203db0;
position: absolute;
border-radius: 50%;
top: 50%;
transform: translateY(-50%);
right: -30px;
كود بعد العنوان فى حالة الهوفر
/* Main Text After Code " Hover " */
z-index: -1;
animation: right-move 0.5s linear forwards;
كود يتم وضعه فى الصفحة لتحريك العنوان
/* Animation Code */
@keyframes left-move {
50% {
left: 0;
width: 12px;
height: 12px;
}
100% {
left: 0;
border-radius: 0;
width: 100%;
height: 100%;
}
}
@keyframes right-move {
50% {
right: 0;
width: 12px;
height: 12px;
}
100% {
right: 0;
border-radius: 0;
width: 100%;
height: 100%;
}
}
نشرة ووردبريس البريدية
إشترك فى النشرة البريدية لتحصل على إشعارات بالدروس الجديدة, نصائح ووردبريس إحترافية, والعروض والخصومات لجميع منتجات ووردبريس.
الألوان المستخدمة فى الدرس
لون خلفية القسم الرئيسى واطار الصور : رمادى / ececec
لون خلفية عنوان القسم: أزرق / 203db0