สไปรท์ 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 ตรงกับรูปแบบของไอคอนของเราทุกประการ

บ่อยครั้งแทน ใช้แท็ก , , ฯลฯ ฉันคิดว่าแนวทางนี้ผิด เหตุใดจึงต้องเปลี่ยนรูปแบบของแท็กมาตรฐานหากมีแท็กสากล . แท็ก โดยทั่วไปจะสร้างคำขอเพิ่มเติมไปยังเซิร์ฟเวอร์ และเรากำลังใช้สไปรท์เพื่อพยายามลดจำนวนคำขอเหล่านี้

ฉันจะหาไอคอนของสไปรท์ได้จากที่ไหน?

  1. วาดมันเอง
  2. ค้นหาในเครื่องมือค้นหาตามรูปภาพ
  3. มีคอลเลกชันไอคอนพิเศษบนอินเทอร์เน็ตที่มักแจกฟรี
  4. เครือข่ายโซเชียลและบริการหลายแห่งแสดงโลโก้และไอคอนอย่างเป็นทางการบนเว็บไซต์ของตนซึ่งสามารถใช้ในแอปพลิเคชันของตนได้
  5. หากต้องการสร้างไฟล์สไปรท์สำหรับไอคอนโซเชียลเน็ตเวิร์กโดยอัตโนมัติ คุณสามารถใช้บริการได้ เลือกไอคอนตามลำดับที่ต้องการ บันทึกไฟล์เก็บถาวรด้วยสคริปต์ แกะออกแล้วดูภาพ ไอคอน.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"> ติดต่อกับ</ก> <a href = "#" คลาส = "ปุ่มแชร์ แชร์ผ่าน Facebook"> <i class = "ฟ้า ฟ้า-facebook" > เฟสบุ๊ค</ก> <a href = "#" คลาส = "ปุ่มแชร์แชร์ผ่าน Twitter"> <i class = "ฟ้า ฟ้า-ทวิตเตอร์" > ทวิตเตอร์</ก> </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
  • การประยุกต์ใช้รูปแบบต่างๆ เกือบทุกรูปแบบที่ใช้กับข้อความ เช่น พื้นหลัง สี เงา ฯลฯ
  • ความง่ายในการใช้งาน
เนื่องจากข้อดีเหล่านี้ ไอคอนแบบอักษรจึงได้รับความนิยมในหมู่นักออกแบบ นักพัฒนา และถูกใช้โดย CSS/frameworks เช่น .
เรานำเสนอแบบอักษรที่คุณสนใจด้วยไอคอนเครือข่ายโซเชียล

1. ฟอนต์ไอคอนโซเชียล RONDO

ไอคอนแบบอักษรที่ยอดเยี่ยมสำหรับโซเชียลเน็ตเวิร์กยอดนิยมบางส่วนและอื่นๆ อีกมากมาย แต่น่าเสียดายที่ไอคอนสำหรับอันที่เรารักหายไป

2. Fontello - เครื่องมือสร้างฟอนต์ไอคอน

เครื่องมือสร้างไอคอนพร้อมชุดไอคอนสำเร็จรูปขนาดใหญ่ ข้อดีประการหนึ่งคือความสามารถในการเลือกเฉพาะไอคอนที่จำเป็นและสร้างแบบอักษรจากไอคอนเหล่านั้นซึ่งจะส่งผลดีต่อการเพิ่มประสิทธิภาพเพจและความเร็วในการโหลดของแบบอักษรดังกล่าว ข้อดีอีกประการหนึ่งคือการมีไอคอนสำหรับเครือข่ายโซเชียลเช่น VKontakte และ Odnoklassniki

3. แบบอักษรไอคอนโซเชียลโมโน

โซลูชันที่ดีเยี่ยมสำหรับการรวมไอคอนแบบอักษรเข้ากับโปรเจ็กต์ โค้ดที่ฝังใน 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 คือชุดไอคอนสติกเกอร์ต้นฉบับฟรีสำหรับลิงก์ที่คลิกได้บนโซเชียลเน็ตเวิร์ก

รูปภาพประเภทที่ไม่ซ้ำใครจะดึงดูดความสนใจของผู้ใช้ทรัพยากร

ตั้งค่าเนื้อหา:

เข้าสังคม

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