كيفية تصميم شعار الــ RSS عن طريق CSS3 خطوة بخطوة

الكاتب : Brahim Bennani
التصنيف : عالم البرمجة, عالم التصميم, CSS3, RSS

RSS هي اختصار لمصطلح Really Simple Syndication

وهي خدمة تقوم على تقنية سهلة تجعلك قادراً على متابعة آخر الأخبار والتطورات من مواقعك

المفضلة لدى إدراجها دون الرجوع إلى تصفح تلك المواقع .

وشعار تغذية الــ RSS يعتبر من أشهر الشعارات أو الأيقونات في عالم تصميم الويب ، حيث أنك كلما

تصفحت موقعاً ما إلا ووجدت هذه الأيقونة . ففي غالب الأمر يتم تصميمها عن طريق برنامج Photoshop أو غيره من برامج التصميم . إلا أننا في هذا الموضوع سنقوم بتصميمها عن طريق تقنية الــ CSS3 .

ننشئ ملف HTML جديد ، ثم نضع بداخله الكود التالي إذا كان الملف فارغ

بعد إنشاء الملف ، نقوم بكتابة الكود التالي .. بين وسمي body طبعاً

الآن ، نقوم بالعمل على CSS

نقوم بكتابة الكود التالي ، بين وسمي style طبعاً

span.feed-box{ display:block; width:200px; height:200px; margin:0 auto; background:#F9A004; box-shadow: 1px 1px 0 #C27C03, 2px 2px 0 #C27C03, 3px 3px 0 #C27C03, 4px 4px 0 #C27C03, 5px 5px 0 #C27C03, 6px 6px 0 #C27C03; -moz-box-shadow: 1px 1px 0 #C27C03, 2px 2px 0 #C27C03, 3px 3px 0 #C27C03, 4px 4px 0 #C27C03, 5px 5px 0 #C27C03, 6px 6px 0 #C27C03; -webkit-box-shadow: 1px 1px 0 #C27C03, 2px 2px 0 #C27C03, 3px 3px 0 #C27C03, 4px 4px 0 #C27C03, 5px 5px 0 #C27C03, 6px 6px 0 #C27C03; -moz-border-radius: 20px; -webkit-border-radius: 20px; border-radius: 20px; } span.feed-box *{ float: rightright; display: block; }

النتيجة المُحصل عليها لحد الآن

الآن ، سنقوم بعمل صندوق تغذية أصغر من السابق لكي نضعه بداخل هذا الأخير

إذن ، نقوم بكتابة الكود التالي ، بداخل span الخاص بالصندوق الأول ( الأكبر )

ومن تم كود CSS للصندوق الداخلي ( الأصغر )

لتكون النتيجة المُحصل عليها لحد الآن كالتالي

الآن نقوم بعمل الأشكال الداخلية

بداخل الــ span الخاص بالإطار الداخلي والذي يحمل كلاس بإسم feed-box-in ، نقوم بكتابة span أخرى
ونعطيها كلاس بإسم feed-quarter-circle-big كالتالي

وهذا كود CSS الخاص بالكلاس feed-quarter-circle-big

والنتيجة لحد الآن

الآن ، سنقوم بعمل دائرة أخرى أصغر .. وجعلها داخل الدائرة الأكبر

نعطيها كلاس بإسم feed-quarter-circle-small

عندها سنحصل على :

الآن سنضيف واحدة أخرى بالوسط

لنحصل على الشكل

لمسة أخيرة :)

نبحث عن

/* overflow: hidden; */

ونعوضه بـ

overflow: hidden;

لنحصل على أيقونة الــ RSS عن طريق الرائعة CSS3

وعندما نريد أن نستعملها ، نقوم بتصغيرها عن طريق الــ CSS

واختيار القياسات المناسبة ..

قبل أن ننتهي ، سنضيف حركة الــ Hover عند مرور الفأرة حول الأيقونة

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

span.feed-box:hover{ background:#07C103; box-shadow: 1px 1px 0 #058E02, 2px 2px 0 #058E02, 3px 3px 0 #058E02, 4px 4px 0 #058E02, 5px 5px 0 #058E02, 6px 6px 0 #058E02; -moz-box-shadow: 1px 1px 0 #058E02, 2px 2px 0 #058E02, 3px 3px 0 #058E02, 4px 4px 0 #058E02, 5px 5px 0 #058E02, 6px 6px 0 #058E02; -webkit-box-shadow: 1px 1px 0 #058E02, 2px 2px 0 #058E02, 3px 3px 0 #058E02, 4px 4px 0 #058E02, 5px 5px 0 #058E02, 6px 6px 0 #058E02; } span.feed-box:hover .feed-box-in{ border-color: #58FC55; } span.feed-box:hover .feed-box-in .feed-quarter-circle-big, span.feed-box:hover .feed-box-in .feed-quarter-circle-big .feed-quarter-circle-small{ border-color: #B9FFB7; } span.feed-box:hover .feed-box-in .feed-quarter-circle-big .feed-quarter-circle-small .feed-circle{ background: #B9FFB7; }

تحميل

لتحميل شعار الــ RSS جاهز ، بـ 4 أحجام كما هو موضح في الصورة ، إضغط على الرابط التالي :

تحميل

باسوورد فك الضغط :

th3web.blogspot.com

إذا كان لديك أي استفسار أو مشكل ، قُم بكتابة رد أسفل الموضوع .

ولا تنسى مشاركة هذا الموضوع مع أصدقائك بالضغط على أحد الأزرار على يسار الشاشة .

2 الـتـعـلـيـقـات

Unknown says:

23 أبريل 2012 في 00:08

شكراً لك أخي إبراهيم
Brahim Bennani يقول :

23 أبريل 2012 في 00:18

مرحباً بك أخي الغالي

كيفية تصميم شعار الــ RSS عن طريق CSS3 خطوة بخطوة

2 الـتـعـلـيـقـات

كتابة تعليق

إعـلانـات

تـابـعـنـا

نظام التشغيل الذي تفضل ؟

كافة التصنيفات