شرح طريقة تأطير التوقيع بالcss

http://www.dzbatna.com/images/icons/iconrote.gif ط´ط±ط* طھط£ط·ظٹط± ط§ظ„طھظˆظ‚ظٹط¹ ط¨ط§ظ„css

---

السلام عليكم ورحمة الله وبركاته


حصرياً شرح طريقة تأطير التوقيع بالcss

كم عودناكم على كل جديد وحصري اليوم سنتعلم طريقة تأطير التوقيع بـ تقنية css


الدرس مفصل سيكون على القالب template الإفتراضي ولاكن يمكن التطبيق على الستايل style المعدل لـ وجود نفس المتغيرات او الاكواد داخل قالب template postbit_legacy

مثال للدرس مفصل
http://www.os6ora-3d.com/up/image14.html

نتوجه إلى القوالب قالب template postbit_legacy نفتح القالب template
او البحث عن القوالب >>>البحث في الستايل style اختار الستايل style المراد التعديل عليه>>>بحث عن النص نضع التالي postbit_legacy >>>واخيراً نضغط بحث
نفتح القالب template بالضغط على كلمة postbit_legacy مرتين بالماوس
وننسخه ونضعه في اي برنامج تحرير ولـ نفترض برنامج المفكرة Notepad

نبحث عن
وننزل بعدها بـ اسطر حوالي خمسة اسطر لـ نشاهد


ننسخ مابين الـ

وهو
رمز Code:

__________________
$post[signature]

الان هذا الإفتراضي وهو هكذا


الان نعدل عليه بالcss
بـ اضافة كلاس بـ الدي آيّ في
اضافة class في div
ويصبح الكود code هكذا
رمز Code:

مثلاً نسمي الكلاس os6ora
يصبح الدي آي في مع الكلاس المسمى هكذا واسم الكلاس سيكون os6ora
رمز Code:

الان هذا الخطوه لـ خبراء الcss ولاكن لمن لم يستخدم الcss من قبل فـ يتابع فقط اما عن خبراء الcss فعليه تطبيق الاوامر بنفسه كيف ما شاء

الان نفتح مستند نص جديد
ونكتب فيه .os6ora ونغلق الكلمه بـ قوس بدايه { فتصبح هكذا
رمز Code:
.os6ora{
الان نعمل سطر او سطربن ونعمل قوس نهايه}
ومابين القوسين الاوامر الخاصه بالcss
الكود code كامل
رمز Code:
.os6ora{ هنا الاوامر }
احبتي في الله هذه الاومر بسيطه جداً ولاكن انا ساضاعها جاهزه وساشرح طريقةها
ولاكن لمن يرغب في تعلم الcss فعليه ببرنامجExpression او DreamWeaver
المهم
سنضع الاومر كـ التالي
خط بالاعلى
خط بالاسفل



خط بالجانب الايمن
حط بالجانب الايسر
توسيط النص
تلوين النص
سيتم وضع خلفيه للتوقيع لمن اراد ان يكون له خلفيه ومن لايرغب فبحذف الامر
خط بالاعلى
border-top:2px aqua solid
خط بالاسفل
border-bottom:2px aqua solid
خط بالايسر
border-right:2px aqua solid
خط بالجانب الايمن
border-left:2px aqua solid
لمن يرغب بالخلفيه او توسيط النص
هذا الاكواد
توسيط النص
text-align: center
خلفية النص
background-color:#c0ffff
وهكذا انتهينـا من اوامر إطار التوقيع
ملاحظة هامه لمن يُريد ان يعمل التأطير بـ شكل كامل دون ان يقسم التأطير اجزء اسفل ويمين ويسار وفوق
نعمل تأطير للكلاس الdiv كامل بالامر
border: 1px solid #C5DBE8


شاهدُ كيف اصبح الان
قبل
http://www.os6ora-3d.com/up/image13.html
بعد
http://www.os6ora-3d.com/up/image15.html

جميل ولاكن عيوبه الان اصبح لدينا خط بالوسط لا يلزم

نستبدل الخط بـ التالي

رمز Code:
توقيع:$post[username]
والان كلاس لـ توقيع username

نضع الامر التالي بداية توقيع $post[username]

رمز Code:

الان اضفنا كلاس

طبعاً تبقى بعد كلمة توقيع اغلاق الدي أي في

فيصبح هكذا الجمله كاملةً
رمز Code:

توقيع:$post[username]

وتبقى لنا الاومر
نضيف التالي
محاذة لليسار
خط تحت الكلمه
مسافه للكلاس + طول الخط{الكلاس}
محاذة لليسار
text-align: right
خط تحت الكلمه
border-bottom: 1px solid #C5DBE8
مسافة الكلاس وطول الكلاس
margin:5px 10px



انتهينـا من انشاء الكلاس الثاني لـ صاحب التوقيع

لـ نشاهد تطبيقنـا بعد الانتهاء

http://www.os6ora-3d.com/up/image14.html


هذه الاكواد الذي تم تطبيقها

الاكواد الcss يضع في css رئيسي>>>تعاريف CSS الإضافية

رمز Code:
.os6ora{ border-top:2px aqua solid; border-bottom:2px aqua solid; border-left:2px aqua solid; border-right:2px aqua solid; text-align: center; background-color:#c0ffff; } .os6ora2{ margin:5px 10px; border-bottom: 1px solid #C5DBE8; text-align: right; }
الكود code الذي بقالب template الpostbit_legacy

رمز Code:

توقيع:$post[username]

$post[signature]

وهكذا انتهينـا من تأطير التوقيع بالcss

طبعاً الالوان يمكنن تغيرها
صفحة الالوان من هُنـا نختار اللون المناسب


وهكذا كان درس مفصلنا تأطير التوقيع بالcss


نشكركم لـ متابعتكم
الدرس مفصل مقدم من عالم أسطورة التعليمي

واخيراً لا اقول إلا اتمنى ان يحوز الدرس مفصل على رضاكم
وإن اصبت فمن الله تعالى وإن اخطأت فمن نفسي والشيطان

اي استفسار او ملاحظه بـ خصوص الشرح طريقة انا مستعد


والله ولي التوفيق

محبكم واخوكم في الله

قناص المزايين
المصدر
عالم أسطورة التعليمي

ألعاب الأندرويد مجانا و حصريا

https://fbcdn-sphotos-d-a.akamaihd.n...93518507_n.png
©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى©