วิธีสร้างโลโก้ RSS Feed ด้วย CSS3
โลโก้ฟีด RSS เป็นหนึ่งในโลโก้ที่ใช้บ่อยที่สุดในการออกแบบเว็บเนื่องจากฟังก์ชั่นที่อ้างถึง คุณเห็นบทเรียนมากมายเกี่ยวกับการวาดโลโก้ฟีด RSS โดยใช้ซอฟต์แวร์กราฟิกเช่น Photoshop แต่จะเป็นอย่างไร วาดมันอย่างหมดจดโดยใช้ CSS3? อ๋อคุณได้ยินฉัน :-)
ในโอกาสนี้ฉันอยากจะแสดงให้คุณเห็นวิธีง่ายๆในการสร้างโลโก้ตัวดึงข้อมูล RSS มาตรฐานด้วย CSS3 ดังนั้นให้ทำตามขั้นตอนและกราฟิกที่ครอบคลุมเพื่อรับโลโก้ตัวดึงข้อมูล CSS3 ตัวแรกของคุณ!
นี่คือตัวอย่างของสิ่งที่คุณจะสร้างในไม่กี่นาที คุณยังสามารถดาวน์โหลดไฟล์ต้นฉบับได้ในตอนท้ายของบทช่วยสอน.
ขั้นตอนที่ 1
สร้างไฟล์ HTML แทรกรหัสต่อไปนี้ลงในไฟล์หากไฟล์นั้นว่างเปล่า.
โลโก้ตัวดึงข้อมูล RSS3 CSS3 ของฉันเป็นครั้งแรก - แทรก 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 6 # 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 6 # C27C03; -moz-border-radius: 20px; -webkit-border-radius: 20px; รัศมีเส้นขอบ: 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; รัศมีเส้นขอบ: 20px; / * ล้น: ซ่อนอยู่; * /
นี่คือผลลัพธ์ที่คุณจะได้รับ:
ขั้นตอนที่ 4
ในขั้นตอนนี้เราจะทำวงกลมใหญ่ 1/4 วางรหัส HTML ของวงกลมขนาดใหญ่ 1/4 ลงในรหัส HTML ของกล่องฟีดขนาดเล็กลงและด้านล่างคือรหัสของมัน:
HTML สำหรับ 1/4 Big Circle
CSS สำหรับ 1/4 Big Circle
span.feed-box. feed-box-in. feed-quarter-circle-big margin: 16px 16px 0 0; ความกว้าง: 260px; ความสูง: 260px; เส้นขอบ: 30px solid # FFDEA5; -moz-border-radius: 260px; -webkit-border-radius: 260px; รัศมีเส้นขอบ: 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; เส้นขอบ: 26px solid # FFDEA5; -moz-border-radius: 176px; -webkit-border-radius: 176px; รัศมีเส้นขอบ: 176px
นี่คือผลลัพธ์ที่คุณจะได้รับ:
ขั้นตอนที่ 6
ในขั้นตอนที่ 6 วงกลมเล็กที่สุดจะถูกสร้างขึ้นภายในวงกลมเล็กดังนั้นใส่รหัส HTML ลงในรหัส HTML ของวงกลมเล็ก.
HTML สำหรับแวดวงที่เล็กที่สุด
CSS สำหรับแวดวงที่เล็กที่สุด
span.feed-box. feed-box. in -feed-circle-big .feed-quarter-circle-small .feed-circle margin: 24px 24px 0 0; พื้นหลัง: # FFDEA5; ความกว้าง: 70px; ความสูง: 70px; -moz-border-radius: 70px; -webkit-border-radius: 70px; รัศมีเส้นขอบ: 70px
นี่คือผลลัพธ์ที่คุณจะได้รับ:
สัมผัสการตกแต่ง
ค้นหารหัส, / * ล้น: ซ่อนอยู่; * / จากนั้นแทนที่ด้วยรหัสนี้, ล้น: ซ่อนอยู่;, ใช่แล้ว! คุณเพิ่งได้รับโลโก้ CSS3 RSS Feed!
โบนัส: เพิ่มเอฟเฟ็กต์โฮเวอร์
คุณจะไม่ต้องการโลโก้ฟีด RSS โดยไม่มีเอฟเฟ็กต์โฮเวอร์ใช่ไหม? เพียงเพิ่มสไตล์ CSS ด้านล่างเพื่อให้บรรลุ!
CSS สำหรับ Hover Effect
span.feed-box: โฮเวอร์ พื้นหลัง: # 07C103; กล่องเงา: 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 6 # 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 6 # x 05xE6 span.feed-box: โฮเวอร์. feed-box-in border-color: # 58FC55; span.feed-box: โฮเวอร์. feed-box-in .feed-ควอเตอร์วงกลมใหญ่, span.feed-box: โฮเวอร์. feed-box-in. feed-quarter-circle .feed-quarter-circle - ขนาดเล็ก สีเส้นขอบ: # B9FFB7; span.feed-box: โฮเวอร์. feed-box-in .feed-quarter-circle-big .feed-ควอเตอร์วงกลมเล็ก. feed-circle background: # B9FFB7;
ตัวอย่างและดาวน์โหลด
นี่คือตัวอย่างของโลโก้ฟีด CSS3 ในขนาดและสไตล์ที่แตกต่างกัน หากคุณไม่สามารถทำตามขั้นตอนได้คุณสามารถดาวน์โหลดไฟล์ต้นฉบับได้.
- ดูตัวอย่างโลโก้ RSS3 ของ CSS3 (ใหญ่)
- ดูตัวอย่างโลโก้ RSS3 ของ CSS3 (ขนาดกลาง)
- ดูตัวอย่างโลโก้ RSS3 ของ CSS3 (เล็ก)
- ดูตัวอย่างโลโก้ RSS3 ของ CSS3 (ปานกลาง, กลับด้าน)
- ดาวน์โหลดไฟล์ต้นฉบับโลโก้ CSS3 RSS (.zip)
หมายเหตุจากบรรณาธิการ: โพสต์นี้เขียนโดย Irham Kendeni สำหรับ Hongkiat.com Irham หรือที่รู้จักกันในนาม Indaam เป็นผู้ออกแบบและพัฒนาเว็บไซต์จากประเทศอินโดนีเซีย เขายังรักการพัฒนาธีม CSS และ WordPress.
