استخدم سى اس اس الإصدار الثالث ( css3 ) لتجميل مدونتك - دليل كامل لكيفية الاستخدام

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

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

وسوف نتمكن من خلال هذه التدوينه عمل تعديل مخصص لكل إضافه وإضفاء مظهر خاص بكل إضافه موجوده على مدونتنا.

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

أولا : كل أداه لها إسم معرف ( id ) خاص بها فى كود html الخاص بالمدونه, وهو ما سنقوم بالتعديل من خلاله ولذا فهو أهم شىء سوف نقوم بالبحث عنه.

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

<b:widget id='Followers1' locked='false' title='المتابعون' type='Followers'/>

المتابعون .. هو إسم الأداه التى قمنا بالبحث عنه.

followers1 .. هو إسم المعرف الذى نريده ونحتاجه لعمل تعديلاتنا.

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

رابعا : نبحث عن الكود التالى

]]></b:skin>

خامسا : وهى الخطوه الأهم - إضافة لمسات css3 على الأداه

نضع الأكواد التاليه قبل الكود السابق مباشرة

#followers1 {

نضع هنا الكود الذى نريده

}

#followers1:hover {

نضع هنا الكود الذى نريده

}

والان إنتهى الأمر .. ولكنى كتبت فى الأكواد ( نضع هنا الكود الذى نريده ) إذا ما هو الكود الذى نريده ... لا تتعجلوا سأخبركم الأن.

سأدلكم على الموقع الذى أتعامل معه أنا شخصيا لسهولته ودقته وهو موقع css3 generator الذى يصنع أكواد لهذا الغرض.

نفتح الموقع وسأشرح لكم الخواص المهمه به كى يتم التعامل معه بحرية كل شخص كما يريد ويعدل فى الأكواد كما يريد.

ستفتح لك قائمه بها هذه الإختيارات :

Border Radius وهو الإختيار الخاص بالحدود ( border ) وشكلها, ويطرح عليك سؤال عندما تدخل على هذا الإختيار وهو

Are your borders going to be rounded equally?    Yes   No

ومعناه هل تريد الحدود الخاصه بالأداه حوافها متماثله فى نسبة الإلتواء ؟؟

إن كنت تريد عمل حواف متماثله فى الإلتواء فقم بإختيار yes وستصبح الحدود على الشكل التالى

وسيكون الكود الخاص بها مثل هذا

-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;

والقيمه 20px هى مقدار الإلتواء ويمكنك التحكم فيه بالزياده أو بالنقص كما تريد.

أما إن كنت تريد عمل حواف غير متماثله فى الإلتواء فقم بإختيار NO وستصبح الحدود على الشكل التالى

وسيكون الكود الخاص بها مثل هذا

-moz-border-radius-topleft: 50px;
-moz-border-radius-topright: 0px;
-moz-border-radius-bottomright: 50px;
-moz-border-radius-bottomleft: 0px;
-webkit-border-radius: 50px 0px 50px 0px;
border-radius: 50px 0px 50px 0px;

والقيم 50px و 0px هما مقدار إلتواء الحواف وكما نرى فإن هناك قدره على التحكم فى كل حافه ومقدار إلتوائها من الإربع حواف الموجوده.

نقم الإن بإضافة الكود الذى أنشأناه فى مكانه المخصص فى كود html الذى ذكرناه سابقا ( نضع هنا الكود الذى نريده ) ليصبح شكله كالتالى :

#followers1 {

-moz-border-radius-topleft: 50px;
-moz-border-radius-topright: 0px;
-moz-border-radius-bottomright: 50px;
-moz-border-radius-bottomleft: 0px;
-webkit-border-radius: 50px 0px 50px 0px;
border-radius: 50px 0px 50px 0px;

}

ولكن يتبقى الأن جزء آخر من الكود وهو

#followers1:hover {

نضع هنا الكود الذى نريده

}

ولنعرف أن الوسم 

:hover

يحدد شكل الأداه عند المرور عليها بمؤشر الماوس, ونستطيع استخدامه لعمل تأثير من خلال إعطاء شكل للأداه فى العرض العادى وعند مرور الماوس عليها يتغير شكلها لتعطى بذلك تأثيرا ساحرا على الأداه, ومن الممكن أن يكون الكود كاملا كالآتى

 #followers1 {

-moz-border-radius-topleft: 50px;
-moz-border-radius-topright: 0px;
-moz-border-radius-bottomright: 50px;
-moz-border-radius-bottomleft: 0px;
-webkit-border-radius: 50px 0px 50px 0px;
border-radius: 50px 0px 50px 0px;

}

#followers1:hover {

-moz-border-radius-topleft: 100px;
-moz-border-radius-topright: 20px;
-moz-border-radius-bottomright: 100px;
-moz-border-radius-bottomleft: 20px;
-webkit-border-radius: 100px 20px 100px 20px;
border-radius: 100px 20px 100px 20px;

}

وكما نلاحظ فالقيم 50px , 0px هى القيم التى ستكون عليها حواف الأداه فى الوضع العادى

والقيم 100px و 20px هى القيم التى ستكون عليها حواف الأداه عند مرور الماوس عليها

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

Box Shadow وهو الإختيار الخاص بظل الأداه, وهو يضيف ظلا للأداه,

ويعطيك الموقع إختيارات عديده للتحكم فى شكل الظل ولونه ودرجة وضوحه ( عليك أنت القيام بالتجربه ) وسيكون الكود المعطى من الموقع كالتالى

-webkit-box-shadow: 3px 3px 5px 4px #000000;
-moz-box-shadow: 3px 3px 5px 4px #000000;
box-shadow: 3px 3px 5px 4px #000000;

Text Shadow وهو الخيار الذى يعطى ظلا للكتابه أو للخط المستخدم فى الأداه.
وهناك الكثير من الإختيارات الأخرى ولكنى سأتركها لكم لتجربتها بأنفسكم والتوصل إلى ما تريدونه.

كما يمكنكم التحكم فى لون الخلفيه بإضافة الكود التالى إلى الأكواد

background:#ff3388;

ويتحكم الكود البرتقالى فى اللون ونستطيع تغييره كما نريد.
ومن الممكن أن يصبح الكود النهائى كالتالى ( هذا الكود من كود مدونتى ) :

#Followers1 {
padding: 10px;
background:#ffd600;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
#Followers1:hover {
padding: 10px;
background:#fae46f;
-webkit-border-radius: 40px;
-moz-border-radius: 40px;
border-radius: 40px;
}

أتمنى أن تكون هذه التدوينه قد أدت المطلوب منها.