CSS sprites به عنوان مثال نصب دکمه‌های پیوند در وبلاگ «اشتراک به‌روزرسانی‌ها. آیکون های رابط زیبا که در یک جن پیچیده شده اند اتصال این نمادها بسیار آسان است

منابع آنلاین برای ایجاد جن CSS، مانند http://spritepad.wearekiss.com/ یا http://www.spritecow.com/. با این حال، شما به راحتی می توانید مواردی را که مناسب شما هستند پیدا کنید. در اینجا من از آماده استفاده خواهم کرد جن CSS. اینجا اند:

ساختار html

ظروف div در یک div کانتینری عمومی قرار می گیرند دکمه های اجتماعیبا انتقال

ساختار CSS برای استفاده از sprites

body( پس زمینه: url("fon.png")؛ رنگ: #1aa5ca; ) .box (حاشیه: 250 پیکسل؛ بالشتک: 25 پیکسل؛ پس‌زمینه: #؛ تورفتگی متن: -9999 پیکسل؛ نمایشگر: بلوک درون خطی؛ ) .کلیک کنید ( پس زمینه: url("click.png")؛ عرض: 200 پیکسل؛ ارتفاع: 86 پیکسل؛ نمایش: بلوک؛ ) .vk( پس زمینه: url("vc.png")؛ عرض: 51 پیکسل؛ ارتفاع: 52 پیکسل؛ حاشیه: 10 پیکسل ؛ پس‌زمینه موقعیت: 0 0 پیکسل؛ انتقال: کدورت 0.5 ثانیه؛ -moz-transition: شفافیت 0.5 ثانیه؛ /* فایرفاکس 4 */ -کیت-انتقال وب: شفافیت 0.5 ثانیه؛ /* سافاری و کروم */ -o-transition: opacity 0.5s؛ /* Opera */ opacity: 0.6; float: left; ) .vk:hover ( پس زمینه: url("vc.png")؛ عرض: 51px؛ ارتفاع: 52px؛ موقعیت پس زمینه: 0 -51px. کدورت: 1; ) .ya( پس‌زمینه: url ("ya.png")؛ عرض: 50 پیکسل؛ ارتفاع: 50 پیکسل؛ حاشیه: 10 پیکسل؛ موقعیت پس‌زمینه: 0 0 پیکسل؛ انتقال: کدورت 0.5 ثانیه؛ -moz-transition: کدورت 0.5s؛ /* Firefox 4 */ -webkit-transition: opacity 0.5s؛ /* Safari و Chrome */ -o-transition: opacity 0.5s؛ /* Opera */ opacity: 0.6; float: left; .ya :هور( پس زمینه: url("ya.png"); عرض: 50 پیکسل ارتفاع: 50 پیکسل؛ موقعیت پس زمینه: 0-50 پیکسل. کدورت: 1 ) .ma( پس‌زمینه: url("ma.png")؛ عرض: 51 پیکسل؛ ارتفاع: 52 پیکسل؛ حاشیه: 10 پیکسل؛ موقعیت پس‌زمینه: 0 0 پیکسل؛ انتقال: کدورت 0.5 ثانیه؛ -moz-transition: تیرگی 0.5 ثانیه؛ / * فایرفاکس 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؛ opacity: 1; )

مشخص نمودن پس‌زمینه موقعیت: 00px.توجه داشته باشید که opacity را روی 0.6 تنظیم کردم، مقداری شفافیت. در کدورت شناور: 1؛، همه چیز در (0.5 ثانیه) اتفاق می افتد انتقال: کدورت 0.5 ثانیه؛.موقعیت تصویر با شناور تغییر کرد موقعیت پس زمینه: 0-51px؛.

با استفاده از این تکنیک می توان بهینه سازی تصاویر(تماس های کمتر با سرور).

P.S. اگر سوالی دارید بنویسید!

ما به اجتماعی کردن سایت‌هایمان ادامه می‌دهیم. اغلب برای خوانندگان راحت است که به‌روزرسانی‌های وبلاگ را مستقیماً در شبکه اجتماعی مورد علاقه خود دریافت کنند. بیایید این فرصت را به آنها بدهیم. برای این کار باید در همین شبکه های اجتماعی ثبت نام کنید. شما می توانید یک نمایه از مدیریت یا نویسنده سایت ایجاد کنید، یا می توانید یک صفحه عمومی برای یک شرکت یا پروژه ایجاد کنید. در آینده باید به طور مرتب اخبار و به روز رسانی سایت را در فیدهای خبری پروفایل خود منتشر کنید تا مشترکین شما با آنها آشنا شوند. به هر حال، این کار با کمک مواردی که قبلاً نصب کردیم راحت است. پیوند به پروفایل های اجتماعی با استفاده از تکنیک CSS sprite یا CSS sprites صادر می شود.

CSS sprites و sprite به طور کلی چیست؟

جن- مجموعه ای از تصاویر کوچک که در یک ترکیب شده اند. این کار به این منظور انجام می شود که 10-20 عکس سبک وزن کوچک را از سرور به رایانه کاربر بارگیری نکنید، بلکه آنها را در یک جریان ارسال کنید و آنها را در یک فایل ترکیب کنید. Sprites در طراحی وب از صنعت بازی آمده است، جایی که از آنها برای ایجاد گرافیک های متحرک دو بعدی، مانند تیراندازی به هیولاها و غیره استفاده می شود.

در طراحی وب سایت نیز از تکنیکی استفاده می شود که در آن آیکون های مختلف در یک فایل ترکیب می شوند، به عنوان مثال به صورت زیر:

همانطور که در این مثال می بینید، نه تنها آیکون های رسانه های اجتماعی، بلکه سایر عناصر طراحی مانند فلش ها، دکمه های "لایک" و غیره نیز در یک فایل جمع آوری شده اند. اما ترکیب کاملاً تمام گرافیک هایی که در سایت استفاده می شود در یک sprite کاملاً صحیح نیست. بهتر است عناصر را به گروه ها تقسیم کنید و فقط مواردی را که در نوع خاصی از صفحه ضروری هستند بارگذاری کنید.

در این تصویر سعی کردم اصل css sprites را به صورت شماتیک نشان دهم. در مواردی که بلوک بزرگتر از تصویر پس‌زمینه است، اگر بدون تکرار در سبک‌های css تنظیم شده باشد، به طور پیش‌فرض در گوشه سمت چپ بالا قرار می‌گیرد. اما می توانیم موقعیت تصویر پس زمینه را نسبت به گوشه سمت چپ بالای بلوک تغییر دهیم. این به ویژه در صورتی مفید است که بلوک، برای مثال، از نظر اندازه با یک نماد جداگانه برابر باشد. ما هفت نماد هر کدام 32x32 داریم. آنها به صورت افقی چیده شده اند، بنابراین ما نیازی به تغییر موقعیت پس زمینه به صورت عمودی نداریم. موقعیت تصویر پس زمینه را روی -32 پیکسل قرار دهید، نماد را در بلوک، -64 پیکسل - نماد فیس بوک و غیره را دریافت می کنیم.

چگونه می توان دکمه-لینک به پروفایل ها در شبکه های اجتماعی ایجاد کرد؟

پس از ثبت‌نام در انجمن‌های مربوطه و در پیوندهایی به پروفایل‌ها، آدرس فید RSS و پیوندی به فرم اشتراک برای دریافت به‌روزرسانی‌ها از طریق پست دریافت کردم. سپس آنها را در کد زیر ترکیب کردم و آن را در یک ویجت متنی در پنل مدیریت وردپرس قرار دادم:

لنگر پیوند در این کد از تگ استفاده می کند : . این اوست که همان بلوکی است که نماد مورد نظر در آن نمایش داده می شود. تغییر تصویر پس زمینه در فایل سبک تنظیم شده است style.cssاز طریق ملک موقعیت پس زمینه:

/* دکمه‌های اشتراک به‌روزرسانی*/ .spmenu ( بالشتک: 0 پیکسل؛ حاشیه: 0 پیکسل؛ رنگ: #4682B4؛ تراز متن: چپ؛ اندازه قلم: 100%؛ ) .spmenu a, .spmenu a:hover ( مکان نما: اشاره گر ؛ رنگ: #1E90FF؛ تزیین متن: هیچ؛ اندازه قلم: 100%؛ ) .spmenu (نمایش: بلوک درون خطی؛ عرض: 32 پیکسل؛ ارتفاع: 32 پیکسل؛ پس زمینه: url ("images/icons.png" ) بدون تکرار؛ ) .spmenu span.sprite_gplus (پس‌زمینه موقعیت: 0px 0px;) .spmenu span.sprite_twitter (پس‌زمینه موقعیت: -32px 0px;) spmenu span.sprite_rss(background-position: -96px 0px;) .spmenu span.sprite_email(background-position: -128px 0px;)

بنابراین برای هر عنصر داخل کلاس " spmenu» تصویر پس زمینه تنظیم شده است icons.png، که مجموعه ای از نمادها است. توجه کنید که یک عنصر درون خطی مطابق با مشخصات HTML است، بنابراین برای دادن ابعاد دقیق (عرض و ارتفاع)، باید نحوه نمایش آن را برای مسدود کردن تغییر دهیم. ویژگی های CSS(خط: صفحه نمایش: بلوک درون خطی). اندازه بلوک 32x32 فقط با قالب نمادهای ما مطابقت دارد.

اغلب به جای از برچسب ها استفاده کنید , , و غیره، به نظر من این رویکرد اشتباه است. چرا سبک برچسب های استاندارد را تغییر دهید اگر یک جهانی وجود دارد . یک برچسب به طور کلی یک درخواست اضافی برای سرور ایجاد می کند و ما فقط از sprites استفاده می کنیم و سعی می کنیم تعداد این درخواست ها را کاهش دهیم.

از کجا می توانم نمادهای اسپرایت را دریافت کنم؟

  1. خودت را بکش
  2. در موتور جستجو در میان تصاویر جستجو کنید.
  3. مجموعه های ویژه ای از نمادها در وب وجود دارد که اغلب به صورت رایگان در اختیار شما قرار می گیرد.
  4. بسیاری از شبکه‌ها و سرویس‌های اجتماعی نشان‌ها و آیکون‌های رسمی را در وب‌سایت‌های خود نمایش می‌دهند که می‌توان از آنها در برنامه‌های کاربردی خود استفاده کرد.
  5. برای ایجاد یک فایل sprite از آیکون های رسانه های اجتماعی به صورت خودکار، می توانید از این سرویس استفاده کنید. نمادها را به ترتیب مناسب انتخاب کنید، بایگانی را با اسکریپت ذخیره کنید، بسته بندی کنید و تصویر را ببینید icons.png- فایل اسپرایت به پایان رسید.

Sprites علاوه بر نمایش آیکون ها، هنگام توسعه یک منوی متحرک مفید است، هنگامی که ماوس را روی آیتم قرار می دهید، یا کم نور می شود یا روشن می شود. سپس دو مجموعه از دکمه‌ها در فایل sprite ذخیره می‌شوند و در رویداد “mouseover”، موقعیت تصویر پس‌زمینه را با استفاده از JS به صورت پویا تغییر می‌دهند.

منوی دکمه-لینک کانال های دریافت آپدیت که در ابتدای یادداشت وعده داده شده بود انجام شد و این پایان مقاله است. در به روز رسانی ها مشترک شوید، جالب ترین چیز تازه شروع شده است.

29 اکتبر 2019 ورودی به روز شده است

یوری نمتس

جلوه های دکمه شبکه های اجتماعیبرای سایت

آیا فکر می کنید امکان ترکیب دکمه ها و تصاویر رسانه های اجتماعی وجود دارد؟ تا هر دو بسیار زیبا و خلاقانه به نظر برسند. بله، شما می توانید آن را بسیار انجام دهید راه جالب. و نه تنها یک، بلکه چندین. برای دقیق تر بودن، در این مقاله 12 روش برای ایجاد جلوه های جالب برای دکمه های رسانه های اجتماعی هنگام قرار دادن ماوس روی یک تصویر پیدا خواهید کرد. در برخی موارد، نه تنها باید شناور شوید، بلکه روی ماوس نیز کلیک کنید، که تعامل را نیز اضافه می کند. یک راه غیرمعمول برای متمایز کردن سایت شما استفاده از چنین جلوه های شناور تصویر است.

هر 12 نمونه را از لینک زیر مشاهده و دانلود کنید:

دانلود

به هر حال، در مورد اثرات شناور، چند مقاله دیگر در این سایت در این زمینه وجود دارد:

این اثر را دوست داشتم - از آن استفاده کنید!

به عنوان مثال، من اولین اثر را دوست داشتم. برای مشاهده افکت، نشانگر را روی تصویر زیر نگه دارید.

(مانوس را روی تصویر نگه دارید)

روشی کاملاً جذاب برای برجسته کردن مهمترین تصاویر هم در سایت و هم در سایت فروش یک صفحه. اما، همانطور که قبلاً نوشتم، اثرات بسیار بیشتری وجود دارد (12!).

مرحله 1 - HTML

آیکون هایی که روی دکمه های رسانه های اجتماعی می بینید از FA (Font Awesome) استفاده می کنند. این آیکون ها در یک خط بین بلوک ها متصل می شوند :

1 <پیوند rel="stylesheet" href= "http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">

بعد از اینکه همه منابع را دانلود کردید، باید افکتی را که دوست دارید انتخاب کنید. اثر من در پرونده است index.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-fallback"> <div class="share layer"> <a href = "#" class = "share-button share-via-vk" > <i class = "fa fa vk" > در تماس با</a> <href = "#" کلاس = "اشتراک گذاری دکمه اشتراک گذاری از طریق فیس بوک"> <i class = "fa facebook" > فیس بوک</a> <href = "#" کلاس = "اشتراک گذاری دکمه اشتراک از طریق توییتر"> <i class = "fa fa-twitter" > توییتر</a> </div> <div class="image-layer"> <img src = "images/tree.jpg" عرض = "500" alt = "(!LANG:California surf" > !} </div> </div>

تمام ساختار لازم وجود دارد. باقی مانده است که فقط سبک ها را در CSS تنظیم کنید. بنابراین به مرحله دوم و در عین حال آخرین مرحله می رویم.

مرحله 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-layer.im. (موقعیت: مطلق؛ بالا: 0؛ چپ: 0؛ ارتفاع: 300 پیکسل؛ -webkit-transition: 0.6 ثانیه؛ انتقال: 0.6 ثانیه؛ z-index: 1؛ ) .image-effect-fall-back:hover .image- لایه( -webkit-transform : rotateX(70deg) ; transform : rotateX(70deg) ; overflow : قابل مشاهده؛ ) .image-effect-fall-back .image-layer img (ارتفاع: 100%;) .image-effect-fall -back .image-layer :before (محتوا: ""؛ موقعیت: مطلق؛ بالا: 0؛ سمت چپ: 0؛ عرض: 100%؛ ارتفاع: 100%؛ پس زمینه: rgba(0، 0، 0، 0.5)، کادر -shadow : 0 0 100px 50px rgba(0 , 0 , 0 , 0.5 ) ؛ opacity : 0 ؛ webkit-transition : all 0.5s, transition : all 0.5s; webkit-transform : rotateX(de-2xZ)1(1) ) translateY(110px ) scale(0.75 ) ؛ transform : rotateX(114deg) translateZ(-26px ) translateY(110px ) scale(0.75 ) ; -webkit-transform-origin : bottom ; -ms-transform-origin : bottom ; transform-origin : bottom ; ) .image-effect-fall-back :hover .image-layer :before ( opacity : 0.3 ; ) .image-effect-fall-back .share-layer( position : absolute ; bottom : 100px ; left : 0 , width : 100%؛ ارتفاع: 100 پیکسل؛ کدورت: 0؛ z-index: 10؛ -webkit-transition: 0.6s؛ انتقال: 0.6s؛ -webkit-transform: rotateX(70deg)؛ تبدیل: rotateX(70)deg. -effect-fall-back :hover .share-layer ( opacity : 1 ; -webkit-transform : rotateX(0deg) translateY(-70px ) ؛ transform : rotateX(0deg) translateY(-70px ; ) /*سبک برای همه دکمه ها*/.share-button(نمایش: بلوک درون خطی؛ متن-تزیین: هیچکدام؛ رنگ: #ffffff؛ بالشتک: 12 پیکسل؛ عرض: 90 پیکسل؛ شعاع حاشیه: 2 پیکسل؛ حاشیه: 25 پیکسل 10 پیکسل؛ ) /*رنگ دکمه های شبکه های اجتماعی*/.share-via-vk ( پس زمینه رنگ: #4C75A3 ; ) .share-via-facebook ( پس زمینه رنگ: #3b5998 ;)

فوراً به شما هشدار می دهم: در برخی از نمونه ها از jQuery استفاده شده است، زیرا در آنجا، برای جلوه کامل، باید روی تصویر کلیک کنید. شما فقط باید تمام کدهای JS استفاده شده در صفحه را با مثالی که دوست دارید بردارید.

توجه!پس از اینکه کد CSS را در شیوه نامه خود قرار دادید، ممکن است دکمه ها دقیقاً همانطور که در مثال نشان داده شده است نمایش داده نشوند. این ممکن است به این دلیل باشد که فایل استایل شما دارای سبک های متفاوتی برای عناصر و کلاس هایی است که در دمو استفاده می شود.

نتیجه

به عنوان یک قاعده، خلاقیت همیشه مورد استقبال قرار می گیرد. فکر می‌کنم در اینجا همه می‌توانند از بین ۱۲ افکت یک افکت را برای خود انتخاب کنند و در آینده در پروژه‌های خود از آن استفاده کنند.

  • تغییر اندازه بر کیفیت تأثیر نمی گذارد،
  • به طور کامل در همه دستگاه ها، از جمله دستگاه هایی که دارای صفحه نمایش رتینا هستند، نمایش داده می شود.
  • اعمال تقریباً هر سبکی که برای متن قابل استفاده است، مانند پس‌زمینه، رنگ، سایه‌ها و غیره،
  • سهولت اجرا؛
این مزایا باعث محبوبیت نمادهای فونت در بین طراحان، توسعه دهندگان شده و توسط CSS/فریم ورک هایی مانند .
فونت هایی با آیکون های شبکه های اجتماعی مورد توجه شماست.

1. RONDO SOCIAL ICON FONT

آیکون های فونت بسیار عالی برخی از محبوب ترین شبکه های اجتماعی و نه تنها، بلکه متاسفانه هیچ نمادی برای عزیزانمان وجود ندارد.

2. Fontello - آیکون فونت ژنراتور

مولد آیکون، با مجموعه عظیمی از آیکون های آماده. یکی از مزیت ها امکان انتخاب فقط آیکون های لازم و تولید فونت از آنهاست که تاثیر مطلوبی بر بهینه سازی صفحه و سرعت بارگذاری چنین فونتی خواهد داشت. از جمله مزایا می توان به وجود نمادهای شبکه های اجتماعی مانند Vkontakte و Odnoklassniki نیز اشاره کرد.

3.Mono Social Icons Font

یک راه حل ایده آل برای ادغام سریع آیکون های فونت در یک پروژه، در حال حاضر یک کد جاسازی شده برای CSS، SCSS و مثال HTML. تنها ایراد آن عدم وجود شبکه های اجتماعی محبوب روسی است.

4. Pixeden - بسته آیکون اجتماعی

آیکون های خوب با صفحه نمایشی قدرتمند، می توانید زیبایی استفاده از آیکون های فونت و استایل دادن به آنها را با CSS ببینید.

ما 30 مجموعه آیکون رسانه های اجتماعی برتر را برای وب سایت، وبلاگ، فروشگاه آنلاین یا سایر منابع وب شما به توجه شما معرفی می کنیم.

از آنجایی که هر سایتی سبک، تمرکز و مخاطب هدف، پیدا کردن نمادهای مناسب می تواند بسیار دشوار باشد.

این مجموعه شامل بهترین مجموعه آیکون ها برای هر دو است استفاده جهانیو آنهایی که حتی در منحصر به فردترین طراحی وب سایت کاملاً مناسب هستند.

آیکون ها معمولا در فوتر یک وب سایت یا وبلاگ قرار می گیرند.

استفاده از حداکثر 5-6 نماد توصیه می شود.

مجموعه آیکون تاج بطری قدیمی

نمادهای سبک اصلی به شکل درب بطری افزودنی عالی برای یک کافه، بار یا یک فروشگاه آنلاین موضوعی خواهند بود.

طراحی عناصر با کیفیت بالا و طراحی روشن مطمئناً بازدیدکنندگان را به منبع وب جذب می کند تا با صفحات شما در شبکه های اجتماعی آشنا شوند.

این مجموعه از 20 آیکون تشکیل شده است که هر کدام به صورت تصویری مجزا با فرمت PNG طراحی شده اند.

تمبر رسانه های اجتماعی قدیمی

نمادهای رسانه های اجتماعی قدیمی کاملاً با موضوع یک سایت مسافرتی یا یک وبلاگ درباره جاذبه های جهان مطابقت دارند. این آیکون ها اغلب توسط عکاسان حرفه ای برای اضافه کردن لینک های رسانه های اجتماعی به نمونه کارهای خود استفاده می شود.

فرمت های فایل - PNG، PSD. وضوح هر نماد 256x256 پیکسل است.

اجتماعی چوبی

این مجموعه از ده آیکون برای رسانه های اجتماعی تشکیل شده است.

همچنین، یک تصویر برای RSS-feed و اشتراک ایمیل وجود دارد.

هر یک از اسناد گرافیکی آرشیو فایل منبع مخصوص به خود را دارد که با آن می توانید عکس را خودتان ویرایش کنید یا در قالب دیگری ذخیره کنید.

فرمت پیش فرض PNG است.

SocialMate

این مجموعه جهانی است و برای استفاده در هر وب سایت یا پروژه وب مناسب است.

برای ویرایش شخصی فایل ها، هر عنصر پیوست شده است فایل اصلی PSD.

وضوح تصویر 128x128px، 64x64px و 32x32p است.

وکتور آیکون های اجتماعی سه بعدی

آیکون های سه بعدی از وکتور مجموعه کاملی از عناصر برای فوتر سایت شما هستند که به صورت کاملا رایگان توزیع می شوند.

یک طراحی روشن و به یاد ماندنی باعث جذب مشترکین جدید به صفحات شما در شبکه های اجتماعی می شود.

فرمت فایل PNG (به علاوه سند اصلی PSD) است. وضوح - 256x256px.

طرح های اجتماعی

Social Sketches مجموعه ای رایگان از نمادهای برچسب اصلی برای پیوندهای رسانه های اجتماعی قابل کلیک است.

ظاهر منحصر به فرد تصاویر توجه کاربران منابع را به خود جلب می کند.

تنظیم محتوا:

  • 16 آیکون;
  • 6 مجوزهای مختلفبرای هر عنصر (32px، 48px، و همچنین 64px، 128px، 256px، و 512px)؛
  • فرمت استاندارد PNG

اجتماعی کردن

Socialize مجموعه ای از 12 نماد گرد و منظم رسانه های اجتماعی است. توجه داشته باشید که برای هر سایت، چندین تصویر به صورت همزمان ارائه می شود.

بنابراین، می توانید مناسب ترین عنصر را برای سبک سایت یا وبلاگ خود انتخاب کنید.

تصاویر از نوع برداری با فرمت SVG ذخیره می شوند.

سوماکرو

Somacro 45 آیکون با کیفیت برای همه رسانه های اجتماعی محبوب از جمله، فیس بوک , توییتر، استیم و پرداخت سیستم های پی پال، وب مانی.

تعداد زیادی آیکون به شما این امکان را می دهد که فوترهای یک فروشگاه اینترنتی بزرگ یا سایت شخصی را به همان سبک طراحی کنید.

وضوح فایل 500×500 پیکسل است. هر عکس به صورت قاب یا بدون قاب در دسترس است که در مجموع 90 فایل مختلف را شامل می شود.

نمادهای رسانه اجتماعی لامپ

Bulb Icons یک بسته نماد محبوب برای منابع علمی است.

طراحی جالب هر تصویر کاملاً در بلوک علم قرار می گیرد، حقایق جالب، فن آوری.

شکل 9

آیکون های رسانه های اجتماعی شفاف

این نماد با هر سایتی، صرف نظر از طرح و موضوع آن، به خوبی پیش می رود.

مجموعه ای مناسب برای دوستداران مینیمالیسم.

تنها چیزی که وجود دارد این است که تصاویر می توانند با پس زمینه خیلی روشن ادغام شوند.

اندازه های موجود: 48، 56، 72، 96، 128، 256 و 512 پیکسل. تعداد تصاویر موجود در آرشیو 40 عدد می باشد.

نمادهای دایره مسطح شبکیه چشم آماده است

هر تصویر دارای یک طرح رنگی پر جنب و جوش است و سبک هر یک از شبکه های اجتماعی را منعکس می کند.

این مجموعه شامل 65 تصویر منحصر به فرد برای وب سایت ها، برنامه های محبوب، زمین های بازی و ابزارهای دیگر است.

استیکرهای آیکون رسانه های اجتماعی

آیکون های روشن برای وب سایت های Vectezy ابزاری عالی برای جذب کاربران خواهد بود صفحات اجتماعیشرکت شما.

بدون توجه به طراحی کلی صفحات وب می توان از تصاویر استفاده کرد.

آنها در هر دو زمینه تاریک و روشن به یک اندازه خوب به نظر می رسند.

آیکون های شبکه های اجتماعی سایه دار

مجموعه Shaded Social Media Icons شامل 40 تصویر افکت سایه است.

طراحی روشن برای استفاده در سایت هایی با طراحی سبک مناسب است.

آرشیو را می توان در دو نسخه دانلود کرد.

اولی دارای مجوز رایگان است، دومی حاوی کد منبع است و به قیمت 3 دلار فروخته می شود.

رزولوشن های موجود 48، 56، 72، 96، 128 و 256 پیکسل هستند. فرمت - PNG.

آیکون های خط ساده

همه تصاویر فقط به رنگ سفید موجود هستند، بنابراین مجموعه باید در فوترهایی با پس زمینه تیره استفاده شود.

نه تنها نمادهای سایت های محبوب، بلکه تصاویری برای سیستم های پرداخت، Wi-Fi و بسیاری دیگر نیز موجود است.

Iconmonstr

Iconmonstr یک منبع کامل است که در آن توسعه دهنده به طور مرتب آیکون های سایت منحصر به فرد خود را منتشر می کند.

در میان بیش از 500 عکس، نمادهای سیاه و سفید را برای هر سایت یا ابزاری پیدا خواهید کرد.

تمامی فایل ها به صورت رایگان قابل دانلود هستند.

همچنین، در صفحه منبع، می توانید وضوح و فرمت فایل مورد نظر خود را انتخاب کنید.

مجموعه آیکون سایه طولانی رسانه های اجتماعی

مجموعه آیکون سایه طولانی رسانه اجتماعی شامل 35 فایل برای شبکه های اجتماعی مختلف است. هر نماد به شکل مربع است، در رنگ های منبع تعیین شده ساخته شده است و برای سایت هایی با هر جهتی مناسب است.

آرشیو فقط حاوی فایل های PNG است.

نمادهای اجتماعی طراحی متریال

8 آیکون وکتور با فرمت SVF به شما این امکان را می دهد که نه تنها لینک های قابل کلیک جذابی را به سایت خود اضافه کنید، بلکه تنظیمات خود را نیز در فایل انجام دهید. می توانید وضوح را تغییر دهید، سایه اضافه کنید، رنگ را تغییر دهید، شفافیت را تنظیم کنید و موارد دیگر.

تصاویر برای Instagram، YouTube Facebook، Pinterest، Linkedin، Skype، Google+ در دسترس هستند.

Picons Social

Picons Social یک بسته آیکون رسانه های اجتماعی حرفه ای با بیش از 60 تصویر مختلف است.

تمامی تصاویر با فرمت سیاه و سفید ساخته شده اند و طراحی دلپذیر و سبکی دارند.

برای استفاده جهانی در سایت هایی با طراحی سبک عالی است.

چندین قالب برای هر نماد به طور همزمان در بایگانی موجود است:

  • .PSD;
  • .EPS;
  • .PDF;
  • .PNG;
  • .EMF.

دایره و گرد آیکون های رسانه های اجتماعی

16 آیکون رسانه های اجتماعی افزودنی عالی برای وب سایت شما خواهند بود.

طراحی روشن به زیبایی زمینه پیوند به صفحات در منابع دیگر را برجسته می کند.

اندازه هر تصویر 58 پیکسل و 40 پیکسل است.

همچنین منابعی برای ویرایش در فتوشاپ وجود دارد.

آیکون های رسانه های اجتماعی مینیمالیست تخت

این آرشیو شامل 85 نماد مینیمالیستی بدون حجم برای شبکه های اجتماعی است.

هر عکس 4 عدد دارد سبک متفاوت، که به شما امکان می دهد بهترین طرحی را انتخاب کنید که با طراحی صفحه وب مناسب باشد.

آیکون ها به طور همزمان دو فرمت دارند - PNG و SVG.

نسخه های رنگی و سیاه و سفید موجود است.

آیکون های رسانه های اجتماعی هگز

این مجموعه از آیکون ها به صورت شش ضلعی ساخته شده است.

توسعه دهنده طرح رنگ هر شبکه اجتماعی را تحویل داد.

در وب‌سایت توسعه‌دهنده، می‌توانید هر آیکون را پس از انتخاب فرمت و وضوح آن به طور جداگانه دانلود کنید.

در مجموع 32 طرح منحصر به فرد موجود است.

بسته وکتور آیکون رسانه های اجتماعی تخت

آیکون هایی برای میزبانی ویدیو، RSS، سیستم های پرداخت، بخش های سایت بلاگر وجود دارد.

همچنین، مجموعه شامل آیکون هایی برای HTML5، CSS است.

فرمت فایل Png است. وضوح - 58 پیکسل.

آیکون های پیشرفته رسانه های اجتماعی تخت

هر نماد دارای افکت سایه است و در رنگ های روشن ساخته شده است.

سایزهای موجود 72، 96، 128، 256 و 512 پیکسل هستند.

هر عنصر در طراحی برای رنگ های روشن و تیره سایت موجود است.

نمادهای رسانه های اجتماعی به سبک iOS

آرشیو را از سایت توسعه دهنده دانلود کنید و کد منبع را برای ویرایش محتوای شخصی دریافت کنید.

فرمت های موجود .EPS و .AI هستند.

نمادهای اجتماعی تخت گرانج

آیکون های سبک گرانج شگفت انگیز هستند بهترین انتخاببرای سایت یک استودیو رقص، یک سالن ورزشی، یک پورتال موسیقی، یک شرکت ضبط و همچنین سازمان ها و منابع دیگر که سبک آن در جهت شهری ساخته شده است.

هر فایل با فرمت PSD موجود است.

نمادهای هندسی رسانه های اجتماعی

آیکون های رایگان برای رسانه های اجتماعی که به سبک هندسی ساخته شده اند، افزودنی خوبی برای فروشگاه لوازم آرایشی، عطرسازی، وبلاگ خواهند بود.

طرح رنگ استاندارد آیکون ها در نیمه رنگ های روشن ساخته شده است.

همچنین، می‌توانید گزینه‌های یک ظاهر طراحی روشن‌تر یا تیره‌تر را انتخاب کنید.

همه آنها در یک آرشیو موجود هستند.

آیکون های رسانه های اجتماعی Rogie

مجموعه ای از نمادها از یک تصویرگر معروف وب بر فردیت یک منبع وب تأکید می کند و حتی مشترکین بیشتری را به رسانه های اجتماعی شما جذب می کند.

تمامی تصاویر به صورت جداگانه رنگی و سیاه و سفید ساخته شده اند.

تصاویر زمین بازی موجود، فضای ذخیره ابریو شبکه های اجتماعی

نمادهای Adobe Muse

آیکون های وکتور از Adobe یکی از بهترین گزینه ها برای طراحی های مینیمالیستی فوتر هستند.

این مجموعه شامل 60 عکس از سایت های محبوب موبایل است سیستم های عامل، ذخیره سازی ابری، سیستم های پرداخت و سایر منابع محبوب وب.

120 آیکون رسانه های اجتماعی طراحی شده با دست

این مجموعه را دانلود کنید و 120 آیکون منحصر به فرد رسانه های اجتماعی با دست ترسیم شده را دریافت خواهید کرد.

هر تصویر دارای طراحی موفق و ترسیم واضحی از خطوط است.

این به خوبی با طراحی یک وب سایت با مضمون DIY یا هر منبع دیگری که به خلاقیت اختصاص داده شده است، سازگار است.

فرمت های موجود PNG و SVG هستند.