إضافة تأثير الحركة على شعار مدونتك بتنقية css الاحترافية
الزيارات:
الزيارات:
mahmoud elbohy | 9:14 ص |
اضافات بلوجر
فى هذا الموضوع من مدونة ابداعاتى سنتعلم كيفية اضافة تأثير الحركة على شعار مدونتك بشكل احترافى بتقنية css وهذه الخاصية تعطى شكل حيوى وجذاب لمدونتك وتتميز بأنها خفيفة جدا لا تؤثر على سرعة مدونتك على الاطلاق وقبل الشرح أرجو أن تنضموا لأعضاء مدونتنا الكرام بالضغط على زر متابعة
طريقة التركيب
الفكـــــــــــــــرة الأولــــــــــــــى
(1) ابحث عن ]]></b:skin>
(2) اضف قبله هذا الكــــــــود
#header img{ width:256px; /* عرض الصورة التي ستظهر عليه أي العرض الجديد */height:67px; /* إرتفاع الصورة التي ستظهر عليه أي الإرتفاع الجديد */-moz-transition: all 1s;-webkit-transition: all 1s;-o-transition: all 1s; }#header img:hover{ width:514px; /*عرض الصورة الأصلي الذي صممته */height:134px; /* إرتفاع الصورة الأصلي الذي صممته */-moz-transition: all 1s;-webkit-transition: all 1s;-o-transition: all 1s; }
قم بتغير الإرتفاع و العرض حسب الصورة التي صممتها، القيم الأولى هي المقاسات التي سيظهر بها شعارك على المدونة و القيم الثانية هي المقاسات التي سيظهر بها شعارك بعد مرور زر الفأرة عليه
الفكـــــــــــــــــــــرة الثانية
و إن كنت من الأشخاص اللذين لا يحبون وضع الصور في الشعار و تريد تطبيق هذا التأثير على عنوان مدونتك فالأمر بسيط جدا، ما عليك سوى وضع الكود التالي قبل الوسم
]]></b:skin>
وتحفظ النوذج
#header h1{ -moz-transition: all 1s;-webkit-transition: all 1s;-o-transition: all 1s; }#header h1:hover{ font-size:80px; /*حجم الكتابة بعد مرور زر الفأرة عليها */color:#FF00FF; /* لون الكتابة بعد مرور زر الفأرة عليها */margin-left:-30px; /* نسبة الإزاحة لليسار */-moz-transition: all 1s;-webkit-transition: all 1s;-o-transition: all 1s; }
غير البيانات الموضحة بالكود بما يناسبك
التسميات:
اضافات بلوجر
بقلم محمود سعيد
اسمى محمود سعيد البوهى مدون مصرى عاشق للبلوجر والتصميم أسعى لتقديم محتوى حصرى عبر مدونة ابداعاتى قد الامكان لاساهم فى إثراء المحتوى العربى وجعله منافسا للمحتوى الأجنبىروابط هذه التدوينة قابلة للنسخ واللصق | |
URL | |
HTML | |
BBCode |
0 التعليقات:
إرسال تعليق