كيفية إنشاء آر إس إس الشعار مع CSS3
يعد شعار موجز ويب لـ RSS أحد أكثر الشعارات استخدامًا في تصميم الويب ، نظرًا للوظيفة التي يشير إليها. لقد شاهدت العديد من البرامج التعليمية حول رسم شعار موجز ويب لـ RSS باستخدام برنامج رسومي مثل Photoshop ، ولكن ماذا عن رسمها بحتة باستخدام CSS3? نعم ، سمعتني :-)
في هذه الفرصة ، أود أن أوضح لك الطريقة السهلة لإنشاء شعار تغذية RSS قياسي باستخدام CSS3 فقط ، لذلك اتبع البرنامج التعليمي مع الخطوات والرسومات الشاملة للحصول على أول شعار تغذية CSS3!
إليك معاينة لما ستقوم بإنشائه خلال دقيقة واحدة. يمكنك أيضًا تنزيل الملفات المصدر في نهاية البرنامج التعليمي.
الخطوة 1
قم بإنشاء ملف HTML ، وأدخل الكود التالي في الملف إذا كان فارغًا تمامًا.
رسالتي الأولى في تغذية RSS CSS3 - أدخل HTML الخاص بك هنا -
الخطوة 2
أدخل الرمز أدناه في ملف HTML لإنشاء مربع موجز.
HTML لصندوق الأعلاف
المغلق لمربع تغذية
span.feed-box display: block؛ العرض: 200px؛ الطول: 200px؛ الهامش: 0 السيارات ؛ خلفية: # 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؛ - الحد من دائرة نصف قطرها: 20px. -Wkkit-border-radius: 20px ؛ نصف قطر الحدود: 20 بكسل ؛ span.feed-box * float: right؛ العرض محجوب؛
هذه هي النتيجة التي ستحققها:
الخطوه 3
سنرسم مربعًا آخر يقع داخل مربع التغذية الأول ، لذا ضع رمز HTML أدناه في رمز HTML الخاص بصندوق التغذية الأول. سنضيف أيضًا الحدود كحاجز هنا.
HTML لصندوق تغذية أصغر
المغلق لصندوق تغذية أصغر
span.feed-box .feed-box-in border: 4px solid # FFC563؛ العرض: 184 بكسل ؛ الارتفاع: 184 بكسل ؛ الهامش: 4px 4px 0 0 ؛ - الحد من دائرة نصف قطرها: 20px. -Wkkit-border-radius: 20px ؛ نصف قطر الحدود: 20 بكسل ؛ /* إخفاء الفائض؛ * /
هذه هي النتيجة التي ستحققها:
الخطوة 4
في هذه الخطوة سنكون 1/4 دائرة كبيرة. ضع كود HTML في الدائرة الكبيرة 1/4 في كود HTML لصندوق التغذية الصغير ، وأدناه هو الكود:
HTML ل 1/4 دائرة كبيرة
المغلق ل 1/4 دائرة كبيرة
span.feed-box .feed-box-in .feed-quarter-circle-big margin: 16px 16px 0 0؛ العرض: 260 بكسل ؛ الارتفاع: 260 بكسل ؛ الحدود: 30px الصلبة # FFDEA5 ؛ - الحد من دائرة نصف قطرها: 260px ؛ -Wkkit-border-radius: 260px ؛ نصف قطر الحدود: 260 بكسل ؛
هذه هي النتيجة التي ستحققها:
الخطوة 5
سننشئ الدائرة 1/4 الصغيرة الآن ، ونضع كود HTML أدناه في كود HTML الخاص بالدائرة الكبيرة.
HTML ل 1/4 دائرة صغيرة
المغلق ل 1/4 دائرة صغيرة
span.feed-box .feed-box-in .feed -ربع-circle-large .feed-quarter-circle-small margin: 16px 16px 0 0؛ العرض: 176 بكسل ؛ الارتفاع: 176 بكسل ؛ الحدود: 26px صلب # FFDEA5 ؛ - الحد الأقصى لنصف القطر: 176 بكسل ؛ -Wkkit-border-radius: 176px ؛ نصف قطر الحدود: 176 بكسل
هذه هي النتيجة التي ستحققها:
الخطوة 6
في الخطوة 6 ، سيتم إنشاء أصغر دائرة داخل الدائرة الصغيرة ، لذا ضع كود HTML الخاص بها في كود HTML الخاص بالدائرة الصغيرة.
HTML لأصغر دائرة
المغلق لأصغر دائرة
span.feed-box .feed-box-in .feed -ربع-circle-large .feed -ربع-circle-small .feed-circle margin: 24px 24px 0 0؛ الخلفية: # FFDEA5 ؛ العرض: 70 بكسل ؛ الارتفاع: 70 بكسل ؛ -Moz-border-radius: 70px ؛ -Wkkit-border-radius: 70px ؛ نصف قطر الحدود: 70 بكسل
هذه هي النتيجة التي ستحققها:
اللمسات الأخيرة
ابحث في الكود, /* إخفاء الفائض؛ * / ثم استبدال مع هذا الرمز, إخفاء الفائض؛, إذن نعم! لقد حققت للتو شعار CSS3 لـ RSS Feed!
المكافأة: إضافة تأثير التحويم
لن ترغب في شعار تغذية RSS الخاص بك دون تأثير تحوم السحرية ، أليس كذلك؟ فقط أضف نمط 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 -ربع-circle-big، span.feed-box: hover .feed-box-in .feed -ربع-circle-large .feed-quarter-circle - صغيرة border-colour: # B9FFB7؛ span.feed-box: hover .feed-box-in .feed -ربع-circle-large .feed -ربع-circle-small .feed-circle background: # B9FFB7؛
معاينات وتنزيلات
فيما يلي معاينات لشعار موجز CSS3 بأحجام مختلفة ونمط مختلف. إذا لم تتمكن من تحقيق خطوة معينة ، يمكنك تنزيل الملفات المصدر أيضًا.
- معاينة CSS3 RSS logo (كبير)
- معاينة CSS3 RSS logo (متوسط)
- معاينة CSS3 RSS logo (صغير)
- معاينة CSS3 RSS logo (متوسطة ، مقلوبة)
- قم بتنزيل ملفات مصدر CSS3 RSS Logo (الرمز البريدي)
ملحوظة المحرر: هذا هو مكتوب من قبل إيرهام كينديني ل Hongkiat.com. Irham ، المعروف أيضًا باسم Indaam ، هو مصمم ومطور ويب من إندونيسيا. كما يحب تطوير موضوع CSS و WordPress.
