خط ثلاثى الابعاد بتقنية CSS لمدونات بلوجر

خط ثلاثى الابعاد 3D بواسطة تقنيات css

3D text font for blogger css

من خلال تقنية CSS ,تغيير نمط الخطوط الى خط ثلاثى الابعاد

انماط ثلاثية الابعاد لمدونات بلوجر  

اعداد ستايل ثلاثى الابعاد للخطوط الافتراضية لمدونات بلوجر , ومن خلال تقنية css بواسطة محرر نماذج CSS  الافتراضى فى اعدادات قالب بلوجر

خطوط ثلاثية الابعاد 3D بواسطة تقنيات css

شرح اضافة كود css لقالب بلوجر لتغيير نمط الخط الافتراضى لمدونة بلوجر الى خط ثلاثى الابعاد

سوف تجد هذة الخاصية مفيدة لتمميز عنوان , وصف , عنوان الرسالة , عنوان الشريط الجانبى  ,,  بخطوة واحدة فقط من خلال محرر نماذج وانماط css تغيير ستايل الخط الى خط ثلاثى الابعاد

اولا : اذهب الى تخصيص  فى قالب بلوجر
اذهب الى التبويب متقدم ثم اضغط اضافة css  : كما بالصورة التوضيحية التالية

ثانيا : اضف النمط ( كود css )  التالى حسب ما تريد ظهورة فى المدونة , لاضافة خط ثلاثى الابعاد الى :

عنوان المدونة ( h1 )  اضف الكود التالى

.h1 {

text-shadow: 0 1px 0 #ccc,

               0 2px 0 #c9c9c9,

               0 3px 0 #bbb,

               0 4px 0 #b9b9b9,

               0 5px 0 #aaa,

               0 6px 1px rgba(0,0,0,.1),

               0 0 5px rgba(0,0,0,.1),

               0 1px 3px rgba(0,0,0,.3),

               0 3px 5px rgba(0,0,0,.2),

               0 5px 10px rgba(0,0,0,.25),

               0 10px 10px rgba(0,0,0,.2),

               0 20px 20px rgba(0,0,0,.15);

}

وصف المدونة ( h2 )   اضف الكود التالى

.Header .description {

text-shadow: 0 1px 0 #ccc,

               0 2px 0 #c9c9c9,

               0 3px 0 #bbb,

               0 4px 0 #b9b9b9,

               0 5px 0 #aaa,

               0 6px 1px rgba(0,0,0,.1),

               0 0 5px rgba(0,0,0,.1),

               0 1px 3px rgba(0,0,0,.3),

               0 3px 5px rgba(0,0,0,.2),

               0 5px 10px rgba(0,0,0,.25),

               0 10px 10px rgba(0,0,0,.2),

               0 20px 20px rgba(0,0,0,.15);

}

عنوان الرسالة ( h3 )   اضف الكود التالى

.h3 {

text-shadow: 0 1px 0 #ccc,

               0 2px 0 #c9c9c9,

               0 3px 0 #bbb,

               0 4px 0 #b9b9b9,

               0 5px 0 #aaa,

               0 6px 1px rgba(0,0,0,.1),

               0 0 5px rgba(0,0,0,.1),

               0 1px 3px rgba(0,0,0,.3),

               0 3px 5px rgba(0,0,0,.2),

               0 5px 10px rgba(0,0,0,.25),

               0 10px 10px rgba(0,0,0,.2),

               0 20px 20px rgba(0,0,0,.15);

}

عنوان الشريط الجانبى ( h2 )   اضف الكود التالى

.sidebar .widget h2 {

text-shadow: 0 1px 0 #ccc,

               0 2px 0 #c9c9c9,

               0 3px 0 #bbb,

               0 4px 0 #b9b9b9,

               0 5px 0 #aaa,

               0 6px 1px rgba(0,0,0,.1),

               0 0 5px rgba(0,0,0,.1),

               0 1px 3px rgba(0,0,0,.3),

               0 3px 5px rgba(0,0,0,.2),

               0 5px 10px rgba(0,0,0,.25),

               0 10px 10px rgba(0,0,0,.2),

               0 20px 20px rgba(0,0,0,.15);

}

اضغط : تطبيق على المدونة بعد الانتهاء من اضافة كود CSS ,, ثم قم بمعاينة المدونة 

احصل دوريا على اخر مقالات كود بلوجر