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

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

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

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

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

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

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

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

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

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

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

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

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

اجتماعی چوبی

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

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

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

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

SocialMate

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

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

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

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

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

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

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

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

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

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

تنظیم محتوا:

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

اجتماعی کردن

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

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

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

سوماکرو

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

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

وضوح فایل 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 هستند.

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

ساختار html

توضیحات کد:این یک div واحد با کلاس اشتراک گذاری است که حاوی پیوندهایی به شبکه های اجتماعی است. پیوند در یک پنجره پاپ آپ جداگانه باز می شود، این تابع onClick=window.open مسئول این کار است. جایگزینی لینک یک مقاله با این کد انجام می شود. هر پیوند کلاس مخصوص به خود را دارد که از طریق آن تصویر دکمه اختصاص داده می شود.

این درج از طریق کد منبع کامل می شود. و سپس باید استایل های css را اضافه کنید.

درج بلوک در کد منبع single.php از طریق توابع تم

هشدار: قبل از شروع، یک نسخه پشتیبان از فایل functions.php خود تهیه کنید!

برای استفاده از این گزینه باید فایل functions.php را باز کنید و در آخر این کد را اضافه کنید:

توضیحات کد:مکانی که دکمه های رسانه های اجتماعی در آن قرار می گیرند توسط کلید API comments_template تعیین می شود. این کلید مکان را قبل از نظرات تعیین می کند. خود کد دکمه اجتماعی در تگ های پشتی برای باز و بسته کردن php محصور شده است. در کد آنها را با رنگ قرمز مشخص کردم. این کل ترفند درج کد html به php از طریق توابع تم است.

در این و این روش تمام شده است، اجازه دهید به آپلود تصاویر در سایت برویم.

آپلود تصاویر دکمه در سرور

به عنوان مثال، من چندین اسپرایت با تصاویر دکمه های اجتماعی آماده کردم. می توانید آنها را دانلود کنید.

اسپرایتی که من به عنوان مثال استفاده می کنم تنها 3.97 کیلوبایت است و فقط دکمه های لازم را در خود دارد. و از آنجایی که این یک sprite است، پس فقط یک درخواست به پایگاه داده وجود دارد و نه برای هر دکمه جداگانه.

تصاویر را دانلود کنید یا تصاویر خود را تهیه کنید و در سایت خود آپلود کنید. من فکر می کنم این نباید مشکلی باشد. علاوه بر این، برای طراحی دکمه‌ها از طریق سبک‌های css، پیوندی به این sprite لازم است.

از جمله سبک های CSS

البته، این مرحله را می توان در ابتدا انجام داد، اما من ترجیح می دهم ابتدا تمام کارهای فنی پیچیده را انجام دهم و سپس به کارهای کوچک زیبا با سبک های css ادامه دهم.

بنابراین، فایل style.css که مسئول طراحی سایت شما است را باز کنید. و این استایل ها را بچسبانید:

اشتراک‌گذاری یک (نمایش: بلوک درون خطی؛ تراز عمودی: ارث بردن؛ حاشیه: 5 پیکسل 0 0 2 پیکسل؛ بالشتک: 0 پیکسل؛ اندازه قلم: 0 پیکسل؛ عرض: 40 پیکسل؛ ارتفاع: 40 پیکسل؛ پس‌زمینه: url ("http://test ..png ") بدون تکرار پیمایش 0px 0px شفاف؛) .share a.vkontakte ( پس زمینه: url("http://test..png") بدون تکرار اسکرول -168px 0px transparent;) .share a.google ( پس زمینه: url("http://test..png") بدون تکرار پیمایش -252 پیکسل 0 پیکسل شفاف؛ ) .share a.livejournal ( پس زمینه: url("http://test..png") بدون تکرار scroll -336px 0px transparent; ) .share a.twitter ( background: url("http://test..png") no-repeat scroll -42px 0px transparent;) .share a.mail ( پس زمینه: url("http ://test..png ") پیمایش بدون تکرار -294px 0px شفاف؛ ) .share a.odnoklassniki ( پس زمینه: url("http://test..png") بدون تکرار اسکرول -126px 0px transparent; ) .share a.pinterest ( پس زمینه: url("http://test..png") بدون تکرار اسکرول -210px 0px شفاف؛ ) .share a.liveinternet ( پس زمینه: url("http://test..png ") پیمایش بدون تکرار -378px 0px transparent; ) .share a.evernote ( پس زمینه: url("http://test..png") بدون تکرار اسکرول -420px 0px شفاف؛ ) .share a.bookmark ( پس زمینه: url("http://test.. png ") بدون تکرار پیمایش -462px 0px شفاف؛ ) .share a.email ( پس زمینه: url("http://test..png") بدون تکرار -504px 0px transparent;) .share a.print ( پس‌زمینه: url("http://test..png") پیمایش بدون تکرار -546px 0px شفاف؛ ) .share a.digg ( پس‌زمینه: url("http://test..png") پیمایش بدون تکرار -588px 0px شفاف؛ ) .share a.spring ( پس زمینه: url("http://test..png") بدون تکرار پیمایش -630px 0px شفاف؛ )

توضیحات کد:کلاس .share ظاهر کلی بلوک، اندازه هر دکمه، padding را تعریف می کند و یک پس زمینه یکنواخت را تنظیم می کند. و سپس هر پیوند کلاس مخصوص به خود را دارد و به هر پیوند از طریق خاصیت پس زمینه، ظاهر یک دکمه اختصاص داده می شود. دکمه ها به صورت css sprite رندر می شوند و هر دکمه 40 پیکسل عرض و 40 پیکسل ارتفاع دارد و 2 پیکسل بین آنها قرار می گیرد که به شما امکان می دهد تصویر را برای هر دکمه به طور دقیق تعریف کنید. یعنی دکمه اول 0 و دکمه دوم 42 و ... مشخص شده است. در کد، این مقادیر به رنگ نارنجی نشان داده شده است. پیوند به اسپرایت نیز با رنگ نارنجی برجسته شده است، شما آن را به مسیر اسپرایت خود تغییر می دهید.

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

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

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

ورود شما را به وبلاگم خوش آمد می گویم. امروز می خواهم قدم به قدم نحوه ساخت دکمه های رسانه های اجتماعی در html و css را به شما نشان دهم. بیایید از صفر کامل شروع کنیم و در پایان به نتیجه مطلوب خواهیم رسید. رو به جلو!

سبک های نشانه گذاری و پایه

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

بیایید فعلا این سبک ها را اضافه کنیم:

اشتراک گذاری(
عرض: 280 پیکسل
حاشیه: 0 خودکار;
بالشتک: 10 پیکسل
پس زمینه: #D3CDEE;
}
اشتراک گذاری من (
حاشیه سمت راست: 15 پیکسل.
رنگ سیاه؛
تبدیل متن: بزرگ;
}

ما کمی ظرف را برای پیوندها (اندازه ها، لایه ها، پس زمینه) و کتیبه طراحی کردیم.

آیکون های تزئینی

اجتماعی (
صفحه نمایش: بلوک درون خطی
عرض: 40 پیکسل
ارتفاع: 40 پیکسل؛
پس زمینه: #bdc3c7;
vertical-align: وسط;
حاشیه سمت راست: 10px;
}

با ویژگی display: inline-block، مطمئن شدیم که پیوندهای ما به عناصر بلوک تبدیل شده اند، اما در عین حال توانایی ایستادن در یک ردیف را حفظ می کنیم. بعد، ابعاد و تورفتگی را در سمت راست مشخص کنید تا بلوک ها به هم نخورند.

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

مرحله نهایی

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

به طور خلاصه، ما به چنین تصویری نیاز داریم. برای من حدود 120/40 است.

قوانین زیر را به سبک های css اضافه کنید:

social-vk(
پس زمینه: url(icon.png);
}
.social-fb(
پس زمینه: url(icon.png) -40px 0;
}
.social-tw(
پس زمینه: url(icon.png) -78px 0;
}

ما یک بلوک کاملاً طراحی شده با نمادها در خروجی دریافت می کنیم.

میفهمی چطوری گرفتیم؟ اگه نه پس توضیح میدم هر بلوک لینک دارای سایز 40 در 40 است. بر این اساس وقتی یک تصویر پس زمینه 120 در 40 برای آن قرار می دهیم، بلوک به سادگی نمی تواند آن را کاملاً جا دهد و در نتیجه تا جایی که می تواند جا می گیرد.

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

با نوشتن در پس‌زمینه به این صورت: پس‌زمینه: url(icon.png) -40px 0، به صراحت نشان می‌دهیم که برای بلوک social-fb، تصویر پس‌زمینه باید دقیقاً از موقعیت مشخص شده نمایش داده شود - عرض چهل پیکسل به سمت چپ. و در ارتفاع بدون افست، زیرا نیازی به آن نیست. به همین سادگی است، واقعا

چه چیز دیگری می تواند انجام شود؟

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

اجتماعی(
شعاع حاشیه: 5 پیکسل
}

در مرحله دوم، می توانید یک قاب به آنها اضافه کنید.

حاشیه: 3px بنفش جامد.

با توجه به طرح، رنگ بنفش در این مورد برای ما مناسب است، به نظر من. همچنین می توانید گوشه های خود محفظه پیوند را گرد کنید.

باز هم، گزینه های طراحی زیادی وجود دارد. و البته به راحتی می توانید رنگ ها را تغییر دهید. در این مقاله، من این گزینه طراحی را به شما پیشنهاد می کنم، اما اکنون می توانید به راحتی آن را به روش خود انجام دهید: زرد، سبز، قرمز و هر نماد دیگری.

نتیجه

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

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

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

یوری نمتس

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

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

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

دانلود

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

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

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

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

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

مرحله 1 - HTML

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

بعد از اینکه همه منابع را دانلود کردید، باید افکتی را که دوست دارید انتخاب کنید. اثر من در پرونده است index.html. این فایل همچنین شامل تمام استایل های لازم برای ایجاد افکت شناور می باشد.

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

مرحله 2 - CSS

سبک ها در هر فایل HTML بین بلوک ها قرار دارند . یعنی در هر فایل با افکت های مختلف، در این بلوک در بالای سند، سبک های مربوطه وجود دارد.

شما باید این سبک ها را بگیرید و در شیوه نامه خود قرار دهید:

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

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

نتیجه

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