اضافة تكبير شعار المدونة بتقنية CSS3

 طريقة وضع شعار المدونة

هذه الطريقة تستخدم تقنية CSS3 و لكي تقوم بتركيبها على مدونتك يجب أن تفتح دهنك جيدا أنها تحتاج للقليل من الجهد و الرياضيات نعم كما سمعت لكن لا تقلق سنشرح كل شيء ببساطة إن شاء الله.

قم بإختيار صورة كبيرة أو صمم شعار المدونة بحجم و مساحة أكبر. و لتفهم ذالك أكثر سنجري بعض العمليات الحسابية ليتضح لك الأمر. 

لنفترض أن لدينا صورة بحجم 1024px في العرض و 768px في الإرتفاع و تريد تقليل حجمها دون فقد جودتها. فإذا كنت تريد أن يكون عرض الصورة الجديدة 500px فما هي قيمة إرتفاع الصورة؟؟؟

 

ولكي نحصل على القيمة الصحيحة سنقوم بإجراء عملية حسابية بسيطة و معروفة، و هي لمعرفة القيمة X نضرب القيمة A في B و نقسمها على Y.

و لأوضح القاعدة أكثر لمن لم يفهم نقوم بضرب العرض المرغوب في الإرتفاع الأصلي و النتيجة نقسمها على العرض الحقيقي لصورة، و النتيجة ستكون هي قيمة الإرتفاع لصورة الجديدة. الأن سنطبق هذا عمليا لتفهم أكثر.

نقوم بضرب قيمة عرض الصورة الجديدة و هي 500 في إرتفاع الصورة الأصلية و هو 768 و النتيجة ستكون 384,000px بعد ذالك نقوم بقسمة النتيجة على عرض الصورة الأصلية و هو 1024 و النتيجة المحصل عليها ستكون 375px و هي القيمة لإرتفاع الصورة الجديدة.

و إذا كنت تريد معرفة العرض بدل الإرتفاع قم بنفس العملية لكن بالإتجاه المعاكس، بضرب الإرتفاع في العرض الأصلي لصورة و النتيجة تقسمها على الإرتفاع الأصلي لصورة.

الأن إنتهينا من العمليات الحسابية و ننتقل لتطبيق ما تعلمناه على شعار المدونة ليظهر بالشكل المرغوب. عندما تقوم بتصميم تعار مدونتك صممه بحجم كبير لكي يظهر جيدا عندما يتم تكبيره، الكود الموجود بالأسفل هو نفس الكود اللذي أضعه في مدونتي لتفهم أكتر.

- الأن توجه للوحة التحكم ثم تحرير HTML و ابحث عن الكود التالي  ]]></b:skin> و ضع الكود قبله

#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; }
الأمر بسيط جدا كل ما في الأمر هو أن تعرف مقاس الصورة بدقة و حجم الخط و انتهى الأمر، و الأن تمتع بالمظهر الجديد و الإحترافي لمدونتك



الى اللقاء