כיצד ליצור עדכון RSS עם הלוגו
RSS feed logo הוא אחד הלוגו הנפוץ ביותר בעיצוב אתרים, בשל הפונקציה הוא התייחס. ראית הדרכות רבות על ציור הלוגו RSS feed באמצעות תוכנה גרפית כמו Photoshop, אבל מה לגבי ציור זה אך ורק באמצעות CSS3? כן, שמעת אותי :-)
בהזדמנות זו אני רוצה להראות לך את הדרך הקלה ליצור תקן RSS הזנת הלוגו עם CSS3 בלבד, אז בצע את ערכת הלימוד עם צעדים מקיפים וגרפיקה כדי לקבל את עדכון CSS3 הראשון שלך!
הנה תצוגה מקדימה של מה שאתה תהיה ליצור בתוך רגע. ניתן גם להוריד את קבצי המקור בסוף המדריך.
שלב 1
צור קובץ HTML, הכנס את הקוד הבא לקובץ אם הוא ריק לחלוטין.
שלי ראשון - הכנס את ה- HTML שלך כאן -
שלב 2
הכנס את הקוד הבא לקובץ HTML כדי ליצור תיבת עדכונים.
HTML עבור תיבת עדכון
CSS עבור תיבת עדכון
span.feed-box display: block; רוחב: 200px; גובה: 200px; שוליים: 0 אוטומטי; רקע: # F9A004; תיבת צל: 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; -Wbkit-box-shadow: 1px 1px 0 # C27C03, 2px 5px 0 # C27C03, 6px 6px 0 # C27C03, -moz-border-radius: 20px; -webkit-border-radius: 20px; border-radius: 20px; span.feed-box * float: right; בלוק תצוגה;
זוהי התוצאה שתשיג:
שלב 3
אנו מציירים תיבה אחרת שנמצאת בתוך תיבת ההזנה הראשונה, לכן שים את קוד ה- HTML להלן בקוד ה- HTML של תיבת ההזנה הראשונה. כמו כן, נוסיף כאן גבול.
HTML עבור תיבת עדכונים קטנה יותר
CSS לתיבת הזנות קטנה יותר
span.feed-box .feed-box-in border: 4px solid # FFC563; רוחב: 184px; גובה: 184px; שוליים: 4px 4px 0 0; -moz-border-radius: 20px; -webkit-border-radius: 20px; border-radius: 20px; / * overflow: hidden; * /
זוהי התוצאה שתשיג:
שלב 4
בשלב זה נהיה ביצוע 1/4 מעגל גדול. שים את קוד ה- HTML של 1/4 מעגל גדול לתוך קוד ה- HTML להאכיל את קוד קטן, ומעל הקוד שלה:
HTML עבור 1/4 מעגל גדול
CSS עבור 1/4 מעגל גדול
span.feed-box .feed-box-in .feed-quarter-circle-big margin: 16px 16px 0 0; רוחב: 260px; גובה: 260px; border: 30px solid # FFDEA5; -moz-border-radius: 260px; -webkit-border-radius: 260px; border-radius: 260px;
זוהי התוצאה שתשיג:
שלב 5
אנחנו נהיה עושה את המעגל 1/4 עכשיו, לשים את קוד ה- HTML למטה לתוך קוד ה- HTML של המעגל הגדול.
HTML עבור 1/4 מעגל קטן
CSS עבור 1/4 מעגל קטן
span.feed-box .feed-box-in .feed-Quarter-circle-big .feed-Quarter-circle-small margin: 16px 16px 0 0; רוחב: 176px; גובה: 176px; border: 26px solid # FFDEA5; -moz-border-radius: 176px; -webkit-border-radius: 176px; border-radius: 176px
זוהי התוצאה שתשיג:
שלב 6
בשלב 6 המעגל הקטן ביותר ייווצר בתוך המעגל הקטן, אז לשים את קוד ה- HTML לתוך קוד ה- HTML של המעגל הקטן.
HTML עבור המעגל הקטן ביותר
CSS עבור המעגל הקטן ביותר
span.feed-box .feed-box-in .feed-Quarter-circle-big .feed-Quarter-circle-small -feed-circle margin: 24px 24px 0 0; רקע: # FFDEA5; רוחב: 70px; גובה: 70px; -moz-border-radius: 70px; -webkit-border-radius: 70px; border-radius: 70px
זוהי התוצאה שתשיג:
טאץ' אחרון
חפש את הקוד, / * overflow: hidden; * / ולאחר מכן להחליף עם קוד זה, overflow: hidden;, אז כן! אתה רק להשיג CSS3 RSS Feed הלוגו!
בונוס: הוסף אפקט ריחוף
אתה לא רוצה את הזנות RSS בלוג ללא אפקט ריחוף קסום, נכון? פשוט להוסיף את סגנון CSS להלן כדי להשיג את זה!
CSS עבור אפקט ריחוף
span.feed-box: העבר את העכבר רקע: # 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: רחף .feed-box-in border-color: # 58FC55; span.feed-box: העבר בריחוף .feed-box-in .feed-Quarter-circle-big, span.feed-box: העבר את העכבר .feed-box-in .feed-Quarter-circle-big .feed-Quarter-circle -סליקה border-color: # B9FFB7; span.feed-box: העבר את העכבר .feed-box-in .feed-Quarter-circle-big .feed-Quarter-circle-small .feed-circle background: # B9FFB7;
תצוגה מקדימה והורדות
להלן תצוגה מקדימה של הלוגו של עדכון CSS3 בגדלים שונים ובסגנון שונה. אם אתה לא יכול להשיג צעד מסוים, אתה יכול להוריד את קבצי המקור מדי.
- תצוגה מקדימה CSS3 RSS logo (גדול)
- תצוגה מקדימה CSS3 RSS logo (בינוני)
- תצוגה מקדימה CSS3 RSS logo (קטן)
- תצוגה מקדימה CSS3 RSS logo (בינוני, הפוך)
- הורד CSS3 RSS קבצי מקור לוגו (.רוכסן)
הערת העורך: פוסט זה נכתב על ידי ארהם קנדני עבור Hongkiat.com. אירחם, הידוע גם בשם Indaam, הוא מעצב אינטרנט מפתח מאינדונזיה. הוא גם אוהב CSS ו WordPress נושא פיתוח.
