สไปรท์ CSS โดยใช้ตัวอย่างการติดตั้งปุ่มลิงก์ "สมัครรับข้อมูลอัปเดต" บนบล็อก ไอคอนอินเทอร์เฟซที่สวยงาม รวมอยู่ในสไปรท์เดียว ไอคอนเหล่านี้เชื่อมต่อง่ายมาก
แหล่งข้อมูลออนไลน์สำหรับการสร้าง สไปรต์ CSSตัวอย่างเช่น http://spritepad.wearekiss.com/ หรือ http://www.spritecow.com/ อย่างไรก็ตาม คุณสามารถค้นหาสิ่งที่เหมาะกับคุณได้อย่างง่ายดาย ที่นี่ฉันจะใช้แบบสำเร็จรูป สไปรต์ CSS. พวกเขาอยู่ที่นี่:
โครงสร้าง HTML
คอนเทนเนอร์ div ทั่วไปประกอบด้วยคอนเทนเนอร์ div ปุ่มโซเชียลด้วยการเปลี่ยนแปลง
โครงสร้าง CSS สำหรับการใช้สไปรท์
body( พื้นหลัง: url("fon.png"); color: #1aa5ca; ) .box ( margin: 250px; padding: 25px; พื้นหลัง: #; text-indent: -9999px; display: inline-block; ) .click ( พื้นหลัง: url("click.png"); ความกว้าง: 200px; ความสูง: 86px; จอแสดงผล: บล็อก; ) .vk( พื้นหลัง: url("vc.png"); ความกว้าง: 51px; ความสูง: 52px; ระยะขอบ: 10px ; ตำแหน่งพื้นหลัง: 0 0px; การเปลี่ยนแปลง: ความทึบ 0.5s; -moz-transition: ความทึบ 0.5s; /* Firefox 4 */ -webkit-transition: ความทึบ 0.5s; /* Safari และ Chrome */ -o-transition: ความทึบ 0.5s; /* Opera */ ความทึบ: 0.6; float: left; ) .vk:hover ( พื้นหลัง: url("vc.png"); width: 51px; ความสูง: 52px; ตำแหน่งพื้นหลัง: 0 -51px; ความทึบ: 1; ) .ya( พื้นหลัง: url("ya.png"); ความกว้าง: 50px; ความสูง: 50px; ระยะขอบ: 10px; ตำแหน่งพื้นหลัง: 0 0px; การเปลี่ยนแปลง: ความทึบ 0.5s; -moz-transition: ความทึบ 0.5s; /* Firefox 4 */ -webkit-transition: ความทึบ 0.5s; /* Safari และ Chrome */ -o-transition: ความทึบ 0.5s; /* Opera */ ความทึบ: 0.6; float: ซ้าย; ) .ya :hover ( พื้นหลัง: url("ya.png"); ความกว้าง: 50px; ความสูง: 50px; ตำแหน่งพื้นหลัง: 0 -50px; ความทึบ: 1; ) .ma( พื้นหลัง: url("ma.png"); ความกว้าง: 51px; ความสูง: 52px; ระยะขอบ: 10px; ตำแหน่งพื้นหลัง: 0 0px; การเปลี่ยนแปลง: ความทึบ 0.5s; -moz-transition: ความทึบ 0.5s; / * Firefox 4 */ -webkit-transition: opacity 0.5s; /* Safari และ Chrome */ -o-transition: opacity 0.5s; /* Opera */ opacity: 0.6; float: left; ) .ma:hover ( พื้นหลัง : url("ma.png"); ความกว้าง: 51px; ความสูง: 52px; ตำแหน่งพื้นหลัง: 0 -51px; ความทึบ: 1; )เราระบุ ตำแหน่งพื้นหลัง: 0 0px;.โปรดทราบว่าฉันตั้งค่าความทึบเป็น 0.6 ซึ่งเป็นความโปร่งใสเล็กน้อย เมื่อโฮเวอร์ความทึบ: 1; ทั้งหมดนี้เกิดขึ้นใน (0.5 วินาที) การเปลี่ยนแปลง: ความทึบ 0.5s;.ตำแหน่งรูปภาพเปลี่ยนไปเมื่อวางเมาส์เหนือ ตำแหน่งพื้นหลัง: 0 -51px;.
การใช้เทคนิคนี้คุณสามารถทำได้อย่างมาก ปรับภาพให้เหมาะสม(โทรไปยังเซิร์ฟเวอร์น้อยลง)
ป.ล. หากคุณมีคำถามใด ๆ เขียน!
เรายังคงเข้าสังคมในไซต์ของเรา ผู้อ่านมักพบว่าเป็นการสะดวกที่จะรับการอัปเดตบล็อกโดยตรงไปยังเครือข่ายโซเชียลที่พวกเขาชื่นชอบ เรามาให้โอกาสพวกเขากันเถอะ ในการดำเนินการนี้ คุณจะต้องลงทะเบียนบนโซเชียลเน็ตเวิร์กเดียวกันนี้ คุณสามารถสร้างโปรไฟล์สำหรับผู้ดูแลระบบหรือผู้เขียนไซต์ หรือคุณสามารถสร้างเพจสาธารณะสำหรับบริษัทหรือโครงการได้ ในอนาคต คุณจะต้องเผยแพร่ข่าวสารและการอัปเดตไซต์ไปยังฟีดข่าวโปรไฟล์ของคุณเป็นประจำ เพื่อให้สมาชิกของคุณได้ทำความคุ้นเคยกับพวกเขา อย่างไรก็ตามนี่เป็นวิธีที่สะดวกในการใช้สิ่งที่เราติดตั้งไว้ก่อนหน้านี้ เราจะออกแบบลิงก์ไปยังโปรไฟล์โซเชียลโดยใช้เทคนิค CSS sprite หรือ CSS sprite
CSS sprite และ sprite โดยทั่วไปคืออะไร?
สไปรท์- ชุดรูปภาพเล็กๆ ที่รวมเป็นภาพเดียว สิ่งนี้ทำเพื่อไม่ให้ดาวน์โหลดรูปภาพขนาดเล็กน้ำหนักเบา 10-20 ภาพจากเซิร์ฟเวอร์ไปยังคอมพิวเตอร์ของผู้ใช้ แต่เพื่อส่งเป็นสตรีมเดียวโดยรวมเป็นไฟล์เดียว สไปรท์ในการออกแบบเว็บไซต์มาจากอุตสาหกรรมเกม ซึ่งพวกมันถูกใช้เพื่อสร้างกราฟิกแอนิเมชั่น 2D เช่น การยิงสัตว์ประหลาด เป็นต้น
ในการออกแบบเว็บไซต์ ยังมีการใช้เทคนิคในการรวมไอคอนต่างๆ ไว้ในไฟล์เดียว เช่น:
ดังที่คุณเห็นในตัวอย่างนี้ ไม่เพียงแต่รวบรวมไอคอนเครือข่ายโซเชียลไว้ในไฟล์เดียว แต่ยังรวมไปถึงองค์ประกอบการออกแบบอื่นๆ เช่น ลูกศร ปุ่ม “ถูกใจ” เป็นต้น แต่การรวมกราฟิกทั้งหมดที่ใช้บนไซต์เป็นสไปรท์เดียวนั้นไม่ถูกต้องทั้งหมด เป็นการดีกว่าที่จะแบ่งองค์ประกอบออกเป็นกลุ่มและโหลดเฉพาะสิ่งที่จำเป็นบนหน้าบางประเภทเท่านั้น
ในภาพนี้ ฉันพยายามแสดงหลักการทำงานของสไปรต์ CSS ในเชิงแผนผัง หากบล็อกมีขนาดใหญ่กว่าภาพพื้นหลัง บล็อกนั้นจะถูกวางไว้ที่มุมซ้ายบนตามค่าเริ่มต้น หากระบุไม่ทำซ้ำในรูปแบบ CSS แต่เราสามารถเปลี่ยนตำแหน่งของภาพพื้นหลังโดยสัมพันธ์กับมุมซ้ายบนของบล็อกได้ สิ่งนี้มีประโยชน์อย่างยิ่งหากบล็อกนั้นมีขนาดเท่ากับไอคอนแยกต่างหาก เรามีไอคอนเจ็ดไอคอน แต่ละไอคอนมีขนาด 32x32 พวกมันอยู่ในแนวนอน ดังนั้นเราจึงไม่จำเป็นต้องเปลี่ยนตำแหน่งของพื้นหลังในแนวตั้ง เรากำหนดตำแหน่งของภาพพื้นหลัง -32 px เราได้ไอคอนในบล็อก -64 px - ไอคอน Facebook เป็นต้น
จะสร้างปุ่มลิงค์ไปยังโปรไฟล์บนโซเชียลเน็ตเวิร์กได้อย่างไร?
หลังจากลงทะเบียนในชุมชนที่เกี่ยวข้องและใน ฉันได้รับลิงก์ไปยังโปรไฟล์ ที่อยู่ฟีด RSS ของฉัน และลิงก์ไปยังแบบฟอร์มสมัครสมาชิกเพื่อรับการอัปเดตทางไปรษณีย์ จากนั้นฉันรวมพวกมันเข้ากับโค้ดต่อไปนี้และวางลงในวิดเจ็ตข้อความในแผงผู้ดูแลระบบ WordPress:
จุดยึดลิงก์ในโค้ดนี้ใช้แท็ก : . นี่คือบล็อกที่แสดงไอคอนที่ต้องการ การชดเชยภาพพื้นหลังถูกตั้งค่าไว้ในไฟล์สไตล์ สไตล์.cssผ่านทรัพย์สิน ตำแหน่งพื้นหลัง:
/* ปุ่มสำหรับสมัครรับการอัปเดต*/ .spmenu ( padding: 0px; margin: 0px; color: #4682B4; text-align: left; font-size: 100%; ) .spmenu a, .spmenu a:hover ( เคอร์เซอร์ : ตัวชี้; สี: #1E90FF; การตกแต่งข้อความ: ไม่มี; ขนาดตัวอักษร: 100%; ) .spmenu span ( จอแสดงผล: inline-block; ความกว้าง: 32px; ความสูง: 32px; พื้นหลัง: url("images/icons.png " ) ไม่ทำซ้ำ ) .spmenu span.sprite_gplus (ตำแหน่งพื้นหลัง: 0px 0px;) .spmenu span.sprite_twitter (ตำแหน่งพื้นหลัง: -32px 0px;) .spmenu span.sprite_fbook (ตำแหน่งพื้นหลัง: -64px 0px; ) .spmenu span.sprite_rss (ตำแหน่งพื้นหลัง: -96px 0px;) .spmenu span.sprite_email (ตำแหน่งพื้นหลัง: -128px 0px;)
ดังนั้นสำหรับแต่ละองค์ประกอบ ภายในชั้นเรียน” น้ำอสุจิ» ตั้งค่าภาพพื้นหลัง ไอคอน.pngซึ่งเป็นชุดไอคอน โปรดทราบว่า เป็นองค์ประกอบแบบอินไลน์ตามข้อกำหนด HTML ดังนั้นเพื่อให้มีขนาดที่เข้มงวด (ความกว้างและความสูง) เราต้องเปลี่ยนวิธีการแสดงเพื่อบล็อก คุณสมบัติซีเอสเอส(เส้น: จอแสดงผล: อินไลน์บล็อก;). ขนาดบล็อก 32x32 ตรงกับรูปแบบของไอคอนของเราทุกประการ
บ่อยครั้งแทน ใช้แท็ก , , ฯลฯ ฉันคิดว่าแนวทางนี้ผิด เหตุใดจึงต้องเปลี่ยนรูปแบบของแท็กมาตรฐานหากมีแท็กสากล . แท็ก โดยทั่วไปจะสร้างคำขอเพิ่มเติมไปยังเซิร์ฟเวอร์ และเรากำลังใช้สไปรท์เพื่อพยายามลดจำนวนคำขอเหล่านี้
ฉันจะหาไอคอนของสไปรท์ได้จากที่ไหน?
- วาดมันเอง
- ค้นหาในเครื่องมือค้นหาตามรูปภาพ
- มีคอลเลกชันไอคอนพิเศษบนอินเทอร์เน็ตที่มักแจกฟรี
- เครือข่ายโซเชียลและบริการหลายแห่งแสดงโลโก้และไอคอนอย่างเป็นทางการบนเว็บไซต์ของตนซึ่งสามารถใช้ในแอปพลิเคชันของตนได้
- หากต้องการสร้างไฟล์สไปรท์สำหรับไอคอนโซเชียลเน็ตเวิร์กโดยอัตโนมัติ คุณสามารถใช้บริการได้ เลือกไอคอนตามลำดับที่ต้องการ บันทึกไฟล์เก็บถาวรด้วยสคริปต์ แกะออกแล้วดูภาพ ไอคอน.png- ไฟล์สไปรท์ที่เสร็จแล้ว
นอกจากการแสดงไอคอนแล้ว สไปรท์ยังมีประโยชน์ในการพัฒนาเมนูแบบเคลื่อนไหว เมื่อคุณเลื่อนเมาส์ไปเหนือรายการนั้น เมนูจะมืดลงหรือสว่างขึ้น จากนั้นปุ่มสองชุดจะถูกจัดเก็บไว้ในไฟล์สไปรท์ และตำแหน่งของภาพพื้นหลังจะถูกเปลี่ยนแบบไดนามิกโดยใช้ JS โดยขึ้นอยู่กับเหตุการณ์ "เลื่อนเมาส์ไปเหนือ"
เมนูของปุ่มพร้อมลิงก์ไปยังช่องทางในการรับการอัปเดตซึ่งสัญญาไว้ตอนต้นของบันทึกได้เสร็จสิ้นแล้วและนี่คือจุดที่ฉันจะจบบทความ สมัครรับข้อมูลอัปเดต ความสนุกเพิ่งเริ่มต้น
29 ตุลาคม 2019 โพสต์ได้รับการปรับปรุงแล้ว
ยูริ เนเม็ตส์
เอฟเฟกต์ปุ่ม สังคมออนไลน์สำหรับไซต์
คุณคิดว่าเป็นไปได้ไหมที่จะรวมปุ่มโซเชียลมีเดียและรูปภาพเข้าด้วยกัน เพื่อให้ทั้งคู่ดูสวยงามและสร้างสรรค์มาก ใช่ สามารถทำได้ดีมาก ในลักษณะที่น่าสนใจ. และไม่ใช่แม้แต่อันเดียว แต่มีหลายอัน เพื่อให้ชัดเจนยิ่งขึ้น ในบทความนี้คุณจะพบ 12 วิธีในการสร้างเอฟเฟกต์สุดเจ๋งสำหรับปุ่มโซเชียลมีเดียเมื่อวางเมาส์เหนือรูปภาพ ในบางกรณี ไม่เพียงแต่จำเป็นต้องชี้เท่านั้น แต่ยังต้องคลิกเมาส์ด้วย ซึ่งเพิ่มการโต้ตอบด้วย วิธีที่ไม่ธรรมดาในการเน้นไซต์ของคุณโดยใช้เอฟเฟกต์ดังกล่าวเมื่อวางเมาส์เหนือรูปภาพ
ดูและดาวน์โหลดตัวอย่างทั้ง 12 รายการได้จากลิงค์ด้านล่าง:
ดาวน์โหลด
อย่างไรก็ตาม มีบทความอีกสองสามบทความเกี่ยวกับหัวข้อนี้บนเว็บไซต์เกี่ยวกับเอฟเฟกต์โฮเวอร์:
ถ้าคุณชอบเอฟเฟกต์ก็ใช้มัน!
ตัวอย่างเช่น ฉันชอบเอฟเฟกต์แรก วางเมาส์เหนือภาพด้านล่างเพื่อดูเอฟเฟกต์
(ชี้ไปที่ภาพ)
เป็นวิธีที่น่าสนใจในการเน้นภาพที่สำคัญที่สุดทั้งบนไซต์และบนไซต์ขายแบบหน้าเดียว แต่อย่างที่ฉันได้เขียนไปแล้ว มีเอฟเฟกต์มากกว่านั้นมาก (12!)
ขั้นตอนที่ 1 - HTML
ไอคอนที่คุณเห็นบนปุ่มโซเชียลมีเดียใช้ FA (Font Awesome) ไอคอนเหล่านี้เชื่อมต่อกันเป็นบรรทัดเดียวระหว่างบล็อก :
1 | <ลิงค์ rel = "สไตล์ชีท" href = "http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> |
หลังจากที่คุณดาวน์โหลดแหล่งข้อมูลทั้งหมดแล้ว คุณต้องเลือกเอฟเฟกต์ที่คุณต้องการ เอฟเฟกต์ของฉันอยู่ในไฟล์ ดัชนี.html. ไฟล์นี้ยังมีสไตล์ที่จำเป็นทั้งหมดเพื่อสร้างเอฟเฟกต์โฮเวอร์
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <div class = "image-effect-fall-back"> <div class = "share-layer"> <a href = "#" class = "ปุ่มแชร์แชร์ผ่าน vk" > <ฉันคลาส = "ฟ้า fa-vk"> i > ติดต่อกับ</ก> <a href = "#" คลาส = "ปุ่มแชร์ แชร์ผ่าน Facebook"> <i class = "ฟ้า ฟ้า-facebook" > i > เฟสบุ๊ค</ก> <a href = "#" คลาส = "ปุ่มแชร์แชร์ผ่าน Twitter"> <i class = "ฟ้า ฟ้า-ทวิตเตอร์" > i > ทวิตเตอร์</ก> </div> <div class = "เลเยอร์รูปภาพ" > <img src = "images/tree.jpg" width = "500" alt = "เซิร์ฟแคลิฟอร์เนีย" > !} </div> </div> |
โครงสร้างที่จำเป็นทั้งหมดอยู่ที่นั่น สิ่งที่เหลืออยู่คือการตั้งค่าสไตล์ใน CSS ดังนั้นเราจึงไปยังขั้นตอนที่ 2 และในขณะเดียวกันก็เป็นขั้นตอนสุดท้าย
ขั้นตอนที่ 2 - CSS
สไตล์อยู่ในตัวทุกคน ไฟล์ HTMLระหว่างบล็อก . นั่นคือในแต่ละไฟล์ที่มีเอฟเฟกต์ต่างกัน สไตล์ที่เกี่ยวข้องจะอยู่ในบล็อกนี้ที่ด้านบนของเอกสาร
คุณต้องนำสไตล์เหล่านี้ไปใส่ในไฟล์สไตล์ของคุณ:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 | .image-effect-fall-back ( กว้าง : 500px ; ความสูง : 300px ; ตำแหน่ง : สัมพันธ์ ; ระยะขอบ : 0 อัตโนมัติ ; -webkit-perspective : 800px ; มุมมอง : 800px ; ) .image-effect-fall-back .image-layer ( ตำแหน่ง : สัมบูรณ์ ; บน : 0 ; ซ้าย : 0 ; ความสูง : 300px ; -webkit-transition : 0.6s; การเปลี่ยนแปลง : 0.6s; z-index : 1 ; ) .image-effect-fall-back :hover .image- เลเยอร์ ( -webkit-transform : หมุน X (70deg) ; แปลง : หมุน X (70deg) ; ล้น : มองเห็นได้ ; ) .image-effect-fall-back .image-layer img ( ความสูง : 100% ; ) .image-effect-fall -back .image-layer :before ( content : "" ; ตำแหน่ง : แน่นอน ; top : 0 ; left : 0 ; width : 100% ; height : 100% ; พื้นหลัง : rgba(0 , 0 , 0 , 0.5 ) ; box -shadow : 0 0 100px 50px rgba(0 , 0 , 0 , 0.5 ) ; ความทึบ : 0 ; -webkit-transition : ทั้งหมด 0.5s; transition : ทั้งหมด 0.5s; -webkit-transform : หมุนX(114deg) TranslateZ(-26px) ) แปล Y(110px ) ขนาด (0.75 ) ; แปลงร่าง :หมุนX(114deg) แปลZ(-26px ) แปลY(110px ) สเกล(0.75 ) ; -webkit-transform-origin : ด้านล่าง ; -ms-transform-origin : ด้านล่าง ; ต้นกำเนิดการเปลี่ยนแปลง: ด้านล่าง; ) .image-effect-fall-back :hover .image-layer :before ( ความทึบ : 0.3 ; ) .image-effect-fall-back .share-layer( ตำแหน่ง : แน่นอน ; ด้านล่าง : 100px ; ซ้าย : 0 ; ความกว้าง : 100% ; ความสูง : 100px ; ความทึบ : 0 ; z-index : 10 ; -webkit-transition : 0.6s; transition : 0.6s; -webkit-transform :oteX(70deg) ; การแปลง :rotateX(70deg) ; ) .image - เอฟเฟกต์ตกกลับ :hover .share-layer ( ความทึบ : 1 ; -webkit-transform : หมุนX(0deg) แปลY(-70px ) ; การแปลง : หมุนX(0deg) แปลY(-70px ) ; ) /*รูปแบบสำหรับทุกปุ่ม*/.share-button( display : inline-block; text- decoration : none ; color : #ffffff ; padding : 12px ; width : 90px ; border-radius : 2px ; margin : 25px 10px ; ) /*สีของปุ่มโซเชียลมีเดีย*/.share-via-vk ( สีพื้นหลัง : #4C75A3 ; ) .share-via-facebook ( สีพื้นหลัง : #3b5998 ; ) .share-via-twitter ( สีพื้นหลัง : #00aced ; ) |
ฉันจะเตือนคุณทันที: ตัวอย่างบางส่วนใช้ jQuery เนื่องจากคุณต้องคลิกที่รูปภาพเพื่อให้ได้ผลเต็มที่ คุณเพียงแค่ต้องใช้โค้ด JS ทั้งหมดที่ใช้ในหน้าพร้อมตัวอย่างที่คุณต้องการ
ความสนใจ!หลังจากที่คุณวางโค้ด CSS ลงในสไตล์ชีตของคุณแล้ว ปุ่มต่างๆ อาจไม่ปรากฏเหมือนกับในตัวอย่างทุกประการ อาจเป็นเพราะไฟล์สไตล์ของคุณมีสไตล์ที่แตกต่างกันสำหรับองค์ประกอบและคลาสที่ใช้ในการสาธิต
บทสรุป
ตามกฎแล้ว เรายินดีต้อนรับความคิดสร้างสรรค์เสมอ ฉันคิดว่าที่นี่ทุกคนจะสามารถเลือกเอฟเฟกต์หนึ่งรายการจากทั้งหมด 12 รายการ และใช้มันในโครงการของตนเองในอนาคต
- การเปลี่ยนขนาดไม่ส่งผลต่อคุณภาพ
- แสดงผลได้อย่างสมบูรณ์แบบบนอุปกรณ์ทุกชนิด รวมถึงอุปกรณ์ที่มีจอภาพ Retina
- การประยุกต์ใช้รูปแบบต่างๆ เกือบทุกรูปแบบที่ใช้กับข้อความ เช่น พื้นหลัง สี เงา ฯลฯ
- ความง่ายในการใช้งาน
เรานำเสนอแบบอักษรที่คุณสนใจด้วยไอคอนเครือข่ายโซเชียล
1. ฟอนต์ไอคอนโซเชียล RONDO
ไอคอนแบบอักษรที่ยอดเยี่ยมสำหรับโซเชียลเน็ตเวิร์กยอดนิยมบางส่วนและอื่นๆ อีกมากมาย แต่น่าเสียดายที่ไอคอนสำหรับอันที่เรารักหายไป2. Fontello - เครื่องมือสร้างฟอนต์ไอคอน
เครื่องมือสร้างไอคอนพร้อมชุดไอคอนสำเร็จรูปขนาดใหญ่ ข้อดีประการหนึ่งคือความสามารถในการเลือกเฉพาะไอคอนที่จำเป็นและสร้างแบบอักษรจากไอคอนเหล่านั้นซึ่งจะส่งผลดีต่อการเพิ่มประสิทธิภาพเพจและความเร็วในการโหลดของแบบอักษรดังกล่าว ข้อดีอีกประการหนึ่งคือการมีไอคอนสำหรับเครือข่ายโซเชียลเช่น VKontakte และ Odnoklassniki3. แบบอักษรไอคอนโซเชียลโมโน
โซลูชันที่ดีเยี่ยมสำหรับการรวมไอคอนแบบอักษรเข้ากับโปรเจ็กต์ โค้ดที่ฝังใน CSS, SCSS และ ตัวอย่าง HTML. ข้อเสียเปรียบเพียงอย่างเดียวคือการไม่มีโซเชียลเน็ตเวิร์กยอดนิยมของรัสเซีย4. Pixeden - ชุดไอคอนโซเชียล
ไอคอนที่สวยงามพร้อมหน้าสาธิตที่ทรงพลัง คุณสามารถเห็นความสวยงามของการใช้ไอคอนแบบอักษรและจัดสไตล์ด้วย CSSเราขอนำเสนอชุดไอคอนเครือข่ายโซเชียลที่ดีที่สุด 30 อันดับแรกสำหรับเว็บไซต์ บล็อก ร้านค้าออนไลน์ หรือแหล่งข้อมูลบนเว็บอื่น ๆ ของคุณ
เนื่องจากแต่ละไซต์มีสไตล์ เน้น และของตัวเอง กลุ่มเป้าหมายการเลือกไอคอนที่เหมาะสมอาจเป็นเรื่องยากทีเดียว
การเลือกนี้นำเสนอชุดไอคอนที่ดีที่สุดสำหรับทั้งคู่ การใช้งานสากลและสิ่งที่ลงตัวกับการออกแบบเว็บไซต์ที่มีเอกลักษณ์เฉพาะตัวที่สุด
โดยทั่วไปแล้ว ไอคอนจะอยู่ที่ส่วนท้ายของเว็บไซต์หรือบล็อก
แนะนำให้มีไอคอนมากถึง 5-6 ไอคอน
ชุดไอคอนมงกุฎขวดเก่า
ไอคอนเก๋ไก๋ดั้งเดิมในรูปแบบของฝาขวดจะเป็นส่วนเสริมที่ยอดเยี่ยมบนเว็บไซต์ของร้านกาแฟ บาร์ หรือร้านค้าออนไลน์ที่มีธีม
การวาดองค์ประกอบคุณภาพสูงและการออกแบบที่สดใสจะดึงดูดผู้เยี่ยมชมแหล่งข้อมูลบนเว็บให้ทำความคุ้นเคยกับเพจของคุณบนโซเชียลเน็ตเวิร์กอย่างแน่นอน
ชุดประกอบด้วย 20 ไอคอน ซึ่งแต่ละไอคอนได้รับการออกแบบเป็นรูปภาพแยกกันในรูปแบบ PNG
แสตมป์โซเชียลมีเดียวินเทจ
ไอคอนโซเชียลมีเดียแบบวินเทจจะเข้ากับธีมของเว็บไซต์ท่องเที่ยวหรือบล็อกเกี่ยวกับสถานที่ท่องเที่ยวทั่วโลกได้อย่างลงตัว ช่างภาพมืออาชีพมักใช้ไอคอนเหล่านี้เพื่อเพิ่มลิงก์โซเชียลมีเดียไปยังแฟ้มผลงานของตน
รูปแบบไฟล์ – PNG, PSD ความละเอียดของแต่ละไอคอนคือ 256x256px
สังคมไม้
ชุดนี้ประกอบด้วยไอคอนโซเชียลมีเดียสิบอัน
นอกจากนี้ยังมีรูปภาพสำหรับฟีด RSS และการสมัครรับอีเมล
เอกสารกราฟิกแต่ละเอกสารในไฟล์เก็บถาวรมีไฟล์ทรัพยากรของตัวเองซึ่งคุณสามารถแก้ไขภาพวาดได้อย่างอิสระหรือบันทึกในรูปแบบอื่น
รูปแบบเริ่มต้นคือ PNG
โซเชียลเมท
ชุดนี้เป็นสากลและเหมาะสำหรับใช้บนเว็บไซต์หรือโครงการเว็บใด ๆ
สำหรับการแก้ไขไฟล์ส่วนบุคคล แต่ละองค์ประกอบจะมาพร้อมกับ ไฟล์ต้นฉบับพีเอสดี.
ความละเอียดของภาพคือ 128x128px, 64x64px และ 32x32p
เว็กเตอร์ 3 มิติโซเชียลไอคอน
ไอคอน 3 มิติจาก Vector แสดงถึงชุดองค์ประกอบที่สมบูรณ์สำหรับส่วนท้ายของเว็บไซต์ของคุณ ซึ่งได้รับการแจกจ่ายฟรีโดยไม่มีค่าใช้จ่าย
การออกแบบที่สดใสและน่าจดจำจะดึงดูดสมาชิกใหม่มาที่เพจของคุณบนโซเชียลเน็ตเวิร์ก
รูปแบบไฟล์เป็น PNG (รวมถึงเอกสาร PSD ต้นฉบับ) ความละเอียด - 256x256px.
ภาพร่างทางสังคม
Social Sketches คือชุดไอคอนสติกเกอร์ต้นฉบับฟรีสำหรับลิงก์ที่คลิกได้บนโซเชียลเน็ตเวิร์ก
รูปภาพประเภทที่ไม่ซ้ำใครจะดึงดูดความสนใจของผู้ใช้ทรัพยากร
ตั้งค่าเนื้อหา:
- 16 ไอคอน;
- 6 ความละเอียดที่แตกต่างกันสำหรับแต่ละองค์ประกอบ (32px, 48px และ 64px, 128px, 256px และ 512px)
- รูปแบบ PNG มาตรฐาน
เข้าสังคม
Socialize คือชุดไอคอนทรงกลมเรียบร้อย 12 อันสำหรับเครือข่ายโซเชียล โปรดทราบว่าแต่ละไซต์เสนอภาพหลายภาพในคราวเดียว
ด้วยวิธีนี้ คุณสามารถเลือกองค์ประกอบที่เหมาะสมที่สุดเพื่อให้เหมาะกับสไตล์ของเว็บไซต์หรือบล็อกของคุณ
รูปภาพประเภทเวกเตอร์จะถูกบันทึกในรูปแบบ SVG
โซมาโคร
Somacro เป็นไอคอนคุณภาพสูง 45 ไอคอนสำหรับโซเชียลมีเดียยอดนิยมทั้งหมด รวมถึง เฟสบุ๊ค , ทวิตเตอร์,Steamตลอดจนการจ่ายเงิน ระบบเพย์พาล,เว็ปมันนี่.
ไอคอนจำนวนมากจะช่วยให้คุณสามารถออกแบบส่วนท้ายของร้านค้าออนไลน์ขนาดใหญ่หรือเว็บไซต์ส่วนตัวในรูปแบบเดียวกันได้
ความละเอียดไฟล์ 500×500 พิกเซล ภาพแต่ละภาพมีให้เลือกทั้งแบบมีกรอบหรือไม่มีกรอบ ส่งผลให้มีไฟล์ที่แตกต่างกันทั้งหมด 90 ไฟล์
ไอคอนโซเชียลมีเดียบูล
Bulb Icons เป็นชุดไอคอนยอดนิยมสำหรับแหล่งข้อมูลเกี่ยวกับวิทยาศาสตร์
การออกแบบที่น่าสนใจของแต่ละภาพจะเข้ากันได้อย่างลงตัวกับบล็อกเกี่ยวกับวิทยาศาสตร์ ข้อเท็จจริงที่น่าสนใจ, เทคโนโลยี.
รูปที่ 9
ไอคอนโซเชียลมีเดียที่โปร่งใส
ไอคอนนี้เข้ากันได้ดีกับเว็บไซต์ใด ๆ โดยไม่คำนึงถึงการออกแบบและธีม
ชุดที่เหมาะสำหรับผู้ชื่นชอบความเรียบง่าย
สิ่งเดียวคือรูปภาพอาจกลมกลืนกับพื้นหลังที่สว่างเกินไป
ขนาดที่มีจำหน่าย: 48, 56, 72, 96, 128, 256 และ 512 พิกเซล จำนวนภาพในไฟล์เก็บถาวรคือ 40
ไอคอนวงกลมแบนพร้อมจอประสาทตา
แต่ละภาพมีโทนสีที่สดใสและสะท้อนถึงสไตล์ของแต่ละโซเชียลเน็ตเวิร์ก
ชุดนี้ประกอบด้วยรูปภาพที่ไม่ซ้ำกัน 65 รูปสำหรับเว็บไซต์ โปรแกรมยอดนิยม สนามเด็กเล่น และเครื่องมืออื่นๆ
สติ๊กเกอร์ไอคอนโซเชียลมีเดีย
ไอคอนสดใสสำหรับเว็บไซต์จาก Vectezy จะเป็นเครื่องมือที่ยอดเยี่ยมในการดึงดูดผู้ใช้ หน้าโซเชียลบริษัท ของคุณ.
สามารถใช้รูปภาพได้อย่างอิสระจากการออกแบบทั่วไปของหน้าเว็บ
พวกเขาจะดูดีเท่าเทียมกันทั้งบนพื้นหลังที่มืดและสว่าง
ไอคอนโซเชียลมีเดียสีเทา
ชุดไอคอนโซเชียลมีเดียที่แรเงาประกอบด้วยรูปภาพ 40 ภาพพร้อมเอฟเฟกต์เงา
การออกแบบที่สดใสเหมาะสำหรับการใช้งานบนไซต์ที่มีการออกแบบที่สว่าง
ไฟล์เก็บถาวรสามารถดาวน์โหลดได้สองรูปแบบ
อันแรกมีใบอนุญาตฟรี ส่วนอันที่สองมีซอร์สโค้ดและขายในราคา 3 ดอลลาร์
ความละเอียดที่ใช้ได้คือ 48, 56, 72, 96, 128 และ 256 พิกเซล รูปแบบ - PNG
ไอคอนเส้นธรรมดา
รูปภาพทั้งหมดมีเฉพาะสีขาวเท่านั้น ดังนั้นชุดนี้จึงควรใช้กับส่วนท้ายที่มีพื้นหลังสีเข้ม
ไม่เพียงแต่มีไอคอนของเว็บไซต์ยอดนิยมเท่านั้น แต่ยังมีรูปภาพสำหรับระบบการชำระเงิน Wi-Fi และอื่นๆ อีกมากมายอีกด้วย
ไอคอนมอนสเตร
Iconmonstr เป็นแหล่งข้อมูลทั้งหมดที่นักพัฒนาเผยแพร่ไอคอนเฉพาะของเขาสำหรับเว็บไซต์เป็นประจำ
ในบรรดารูปภาพมากกว่า 500 ภาพ คุณจะพบไอคอนขาวดำสำหรับเว็บไซต์หรือเครื่องมือต่างๆ
สามารถดาวน์โหลดไฟล์ทั้งหมดได้ฟรี
นอกจากนี้ ในหน้าทรัพยากร คุณสามารถเลือกความละเอียดและรูปแบบไฟล์ที่ต้องการได้
ชุดไอคอนโซเชียลมีเดียลองชาโดว์
ชุดไอคอน Social Media Long Shadow ประกอบด้วยไฟล์ 35 ไฟล์สำหรับเครือข่ายโซเชียลต่างๆ แต่ละไอคอนมีรูปทรงสี่เหลี่ยมจัตุรัส สร้างขึ้นในสีของทรัพยากรที่กำหนด และเหมาะสำหรับไซต์ทุกประเภท
ไฟล์เก็บถาวรมีเฉพาะไฟล์ในรูปแบบ PNG
ไอคอนโซเชียลการออกแบบวัสดุ
ไอคอนเวกเตอร์ 8 ไอคอนในรูปแบบ SVF จะช่วยให้คุณไม่เพียงเพิ่มลิงก์ที่คลิกได้ที่น่าสนใจไปยังเว็บไซต์ของคุณ แต่ยังทำการปรับเปลี่ยนไฟล์ของคุณเองอีกด้วย คุณสามารถเปลี่ยนความละเอียด เพิ่มเงา เปลี่ยนสี ปรับความโปร่งใส และอื่นๆ อีกมากมาย
รูปภาพพร้อมใช้งานสำหรับ Instagram, YouTube Facebook, Pinterest, Linkedin, Skype, Google+
พิคอน โซเชียล
Picons Social เป็นชุดไอคอนโซเชียลมีเดียระดับมืออาชีพที่มีรูปภาพที่แตกต่างกันมากกว่า 60 ภาพ
รูปภาพทั้งหมดจัดทำในรูปแบบขาวดำและมีการออกแบบที่ "สว่าง" สวยงาม
เหมาะสำหรับการใช้งานสากลบนไซต์ที่มีการออกแบบให้สว่าง
ไฟล์เก็บถาวรมีหลายรูปแบบสำหรับแต่ละไอคอน:
- .PSD;
- .กำไรต่อหุ้น;
- .ไฟล์ PDF;
- .PNG;
- .EMF.
เซอร์เคิลแอนด์โรลโซเชียลมีเดียไอคอน
ไอคอนโซเชียลมีเดีย 16 ไอคอนจะเป็นส่วนเสริมที่ยอดเยี่ยมสำหรับเว็บไซต์ของคุณ
การออกแบบที่สดใสจะช่วยให้คุณสามารถเน้นฟิลด์ลิงก์ไปยังหน้าในแหล่งข้อมูลอื่นได้อย่างสวยงาม
ขนาดของแต่ละภาพคือ 58 และ 40 พิกเซล
นอกจากนี้ยังมีแหล่งที่มาสำหรับการแก้ไขใน Photoshop
ไอคอนโซเชียลมีเดียแบบแบนมินิมอลลิสต์
ไฟล์เก็บถาวรประกอบด้วยไอคอนเรียบง่ายและไม่มีระดับเสียง 85 ไอคอนสำหรับเครือข่ายโซเชียล
แต่ละภาพมี 4 ภาพ สไตล์ที่แตกต่างซึ่งช่วยให้คุณสามารถเลือกการออกแบบที่ดีที่สุดที่เหมาะกับการออกแบบหน้าเว็บได้
ไอคอนมี 2 รูปแบบ ได้แก่ PNG และ SVG
มีรุ่นสีและขาวดำให้เลือก
ไอคอนโซเชียลมีเดียเฮ็กซ์
ไอคอนชุดนี้ทำเป็นรูปหกเหลี่ยม
นักพัฒนาได้โอนโทนสีไปยังแต่ละเครือข่ายโซเชียล
บนเว็บไซต์ของผู้พัฒนา คุณสามารถดาวน์โหลดแต่ละไอคอนแยกกันได้ หลังจากเลือกรูปแบบและความละเอียดแล้ว
มีการออกแบบที่ไม่ซ้ำกันทั้งหมด 32 แบบ
ชุดเวกเตอร์ไอคอนโซเชียลมีเดียแบบแบน
มีไอคอนสำหรับการโฮสต์วิดีโอ RSS ระบบการชำระเงิน และส่วนต่างๆ ของเว็บไซต์บล็อกเกอร์
นอกจากนี้ ชุดนี้ยังมีไอคอนสำหรับ HTML5 และ CSS
รูปแบบไฟล์ - PNG ความละเอียด – 58 พิกเซล
ไอคอนโซเชียลมีเดียขั้นสูงแบบแฟลต
แต่ละไอคอนมีเอฟเฟกต์เงาและมีสีสันสดใส
ขนาดที่ใช้ได้คือ 72, 96, 128, 256 และ 512 พิกเซล
แต่ละองค์ประกอบมีให้เลือกใช้ในการออกแบบโทนสีอ่อนและสีเข้มของไซต์
ไอคอนโซเชียลมีเดียสไตล์ iOS
ดาวน์โหลดไฟล์เก็บถาวรจากเว็บไซต์ของนักพัฒนาและรับซอร์สโค้ดสำหรับการแก้ไขเนื้อหาเป็นการส่วนตัว
รูปแบบที่ใช้ได้คือ .EPS และ .AI
ไอคอนสังคมกรันจ์แฟลต
ไอคอนที่ยอดเยี่ยมในสไตล์ Grunge คือ ทางเลือกที่ดีที่สุดสำหรับเว็บไซต์ของสตูดิโอเต้นรำ ยิม พอร์ทัลเพลง บริษัทแผ่นเสียง ตลอดจนองค์กรและแหล่งข้อมูลอื่น ๆ ที่มีรูปแบบที่สร้างขึ้นในทิศทางเมือง
แต่ละไฟล์มีอยู่ในรูปแบบ PSD
ไอคอนโซเชียลมีเดียเรขาคณิต
ไอคอนฟรีสำหรับโซเชียลมีเดียซึ่งสร้างในสไตล์เรขาคณิต จะเป็นส่วนเสริมที่ดีสำหรับร้านขายเครื่องสำอาง ร้านขายน้ำหอม หรือบล็อก
โทนสีมาตรฐานของไอคอนทำด้วยฮาล์ฟโทนอ่อน
นอกจากนี้ คุณยังสามารถเลือกตัวเลือกสไตล์ที่สว่างขึ้นหรือเข้มขึ้นได้
ทั้งหมดมีอยู่ในไฟล์เก็บถาวรเดียว
ไอคอนโซเชียลมีเดียโรจี้
ชุดไอคอนจากนักวาดภาพประกอบเว็บไซต์ที่มีชื่อเสียงจะเน้นความเป็นเอกเทศของทรัพยากรบนเว็บ และดึงดูดสมาชิกมายังโซเชียลมีเดียของคุณมากขึ้น
รูปภาพทั้งหมดจัดทำแยกกันเป็นภาพสีและขาวดำ
มีภาพสนามเด็กเล่น การจัดเก็บเมฆและเครือข่ายโซเชียล
ไอคอน Adobe Muse
ไอคอนเวกเตอร์จาก Adobe เป็นหนึ่งในตัวเลือกที่ดีที่สุดสำหรับการออกแบบส่วนท้ายแบบมินิมอลลิสต์
ในชุดประกอบด้วยรูปภาพไซต์ยอดนิยมบนมือถือจำนวน 60 รูป ระบบปฏิบัติการ, ที่เก็บข้อมูลบนคลาวด์, ระบบการชำระเงิน และแหล่งข้อมูลบนเว็บยอดนิยมอื่น ๆ
120 แฮนด์ Drawn Social Media Icons
เมื่อดาวน์โหลดชุดนี้ คุณจะได้รับไอคอนโซเชียลมีเดียที่วาดด้วยมือไม่ซ้ำใคร 120 ไอคอน
แต่ละภาพมีการออกแบบที่ประสบความสำเร็จและมีการวาดเส้นที่ชัดเจน
มันจะเข้ากันได้ดีกับการออกแบบเว็บไซต์ธีม DIY หรือแหล่งข้อมูลอื่นใดที่เกี่ยวข้องกับความคิดสร้างสรรค์โดยเฉพาะ
รูปแบบที่ใช้ได้คือ PNG และ SVG