توسط : [ad_1]
حالا بیایید وارد مراحل شویم. اول از همه، شما نیاز دارید ویژوال کامپوزر را نصب کنید و یک صفحه جدید ایجاد کنید، اگر قبلا این کار را نکرده اید. تو خوب هستی که با نسخه رایگان همراه شوید از آنجایی که تمام ویژگی های مورد نیاز وجود دارد.
برای افزودن ماسک SVG سفارشی به تصویر با ویژوال کامپوزر:
- SVG خود را انتخاب کنید. شکل مورد نظر خود را با استفاده از هر نرم افزار ویرایش برداری ایجاد کنید و آن را به عنوان یک فایل SVG صادر کنید. از طرف دیگر، می‌توانید از هر فرمت تصویری که از شفافیت پشتیبانی می‌کند (PNG، WebP) استفاده کنید، اما پیشنهاد می‌کنیم از SVG استفاده کنید، زیرا پاسخگویی یا مقیاس‌پذیری ماسک شما را به خطر نمی‌اندازد.
- فایل SVG خود را در وردپرس آپلود کنید. برای افزودن پشتیبانی SVG به سایت وردپرس خود، باید آن را به صورت دستی یا از طریق افزونه ای مانند SVG ایمن. سپس، فایل را در کتابخانه رسانه آپلود کرده و مسیر را در فایل SVG خود کپی کنید.
- یک عنصر Single Image اضافه کنید. این عنصری است که ماسک را به آن اضافه خواهیم کرد. برای اضافه کردن آن، روی دکمه «+» در ویرایشگر کلیک کنید، «تصویر واحد» را جستجو کنید و روی آن کلیک کنید. علاوه بر این، شما همچنین می توانید یک تصویر پس زمینه به a اضافه کنید سطر یا ستون.
- تصویر را تغییر دهید. اکنون که عنصر تصویر خود را اضافه کرده ایم، روی دکمه “ویرایش” کلیک کرده و تصویر خود را اعمال کنید. می‌توانید یک مورد جدید آپلود کنید، یکی را از کتابخانه رسانه خود انتخاب کنید یا از هزاران مورد انتخاب کنید تصاویر استوک رایگان از Unsplash.
- یک نام کلاس اضافی به تصویر خود اعمال کنید. پنجره “ویرایش” را باز کنید و یک نام کلاس اضافی به تصویر خود در تنظیمات عمومی اضافه کنید. برای اهداف این آموزش، آن را نام می بریم “ماسک”.
- CSS سفارشی را به صفحه اضافه کنید. به تنظیمات در نوار پیمایش بروید و کد زیر را به زبانه CSS سفارشی به صورت محلی (یا به صورت جهانی اگر قصد استفاده از آن را در سراسر سایت خود دارید) اضافه کنید:
.mask { mask: url() no-repeat center; -webkit-mask: url() no-repeat center; mask-size: 100%; -webkit-mask-size: 100%; } - نام کلاس اضافی را وارد کنید. نام کلاس اضافی را که در مراحل قبل به عنصر تصویر خود اعمال کردید اضافه کنید و آن را به خط اول این کد اضافه کنید. در این مورد – “ماسک”.
- آدرس فایل ماسک SVG خود را وارد کنید. برای مکان یابی URL، به کتابخانه رسانه وردپرس خود بروید، روی تصویر SVG که آپلود کرده اید کلیک کنید و به جزئیات پیوست نگاه کنید. حالا لینک را در داخل وارد کنید “ماسک: url ()” و “-webkit-mask: url()” خواص و بس!
به هر حال، ما نیاز داریم “وبکیت” ویژگی برای اطمینان از سازگاری با مرورگرهای وب که از موتور WebKit استفاده می کنند، که در درجه اول سافاری است.
ماسک SVG نمایش داده نمی شود؟ اگر از CDN استفاده می کنید که دسترسی به فایل SVG را به دلایل امنیتی مسدود یا محدود می کند، ممکن است ماسک SVG نمایش داده نشود. برای حل این مشکل، ممکن است لازم باشد دسترسی CDN را پیکربندی کنید یا SVG را در جای دیگری ذخیره کنید.
علاوه بر این، شما همچنین می توانید اندازه، تراز و تکرار ماسک خود را برای ایجاد الگوها تغییر دهید که در ادامه توضیح خواهیم داد.
برای تغییر اندازه، تغییر موقعیت، و ایجاد یک الگو با ماسک SVG
این “اندازه” ویژگی در CSS به عرض و ارتفاع ماسک و می تواند بر روی چیدمان و موقعیت آن در صفحه تاثیر بگذارد. CSS “اندازه” خاصیت در ویژوال کامپوزر را می توان در واحدها و مقادیر مختلفی مانند:
- پیکسل (px)
- درصدها (%)
- فونت نسبی (em)
- و فونت ریشه (rem)
این “مرکز” خاصیت را تعریف می کند موقعیت ماسک (اما نه تصویر) و آن را هم به صورت افقی و هم به صورت عمودی درون عنصر متمرکز می کند. مقادیر ویژگی position را می توان با استفاده از واحدها و مقادیر مختلف ذکر شده در بالا یا با استفاده از کلمات کلیدی مانند:
- “بالا” / “پایین”
- “چپ راست”
این “تکرار” دارایی تعیین می کند چگونه ماسک باید تکرار شود برای پر کردن عنصر، و می توان آن را تنظیم کرد “بدون تکرار”، که در این مورد انجام دادیم یا تکرار کنیم:
- به صورت افقی – “تکرار-x”
- و به صورت عمودی – “تکرار-y”
برای قابل مشاهده بودن الگوها، مطمئن شوید که مقدار اندازه را نیز کوچکتر از خود عنصر تنظیم کرده اید.
جایگزینی برای پوشش SVG
راه دیگری برای ایجاد ماسک استفاده از clipping در CSS است، اما اجازه دهید در مورد اینکه چرا ترجیح می دهیم صحبت کنیم پوشاندن روی بریدن.
ویژگی های CSS “ماسک” و “مسیر کلیپ” می توان از هر دو برای ایجاد ماسک با SVG استفاده کرد، اما تفاوت هایی در رفتار و استفاده دارند.
“ماسک” با استفاده از یک تصویر، قسمت هایی از یک عنصر را قابل مشاهده یا پنهان می کند “مسیر کلیپ” شکل بخش قابل مشاهده یک عنصر را با استفاده از پارامترهای SVG تعریف می کند.
استفاده كردن “clipPath” همچنین نیاز به استفاده از شناسه عنصر به جای نام کلاس و HTML خالص برای درج بردار SVG دارد.
به طور کلی، “ماسک” همه کاره تر و انعطاف پذیرتر است و کنترل بیشتری بر شفافیت، شیب ها، اندازه و تراز SVG های شما ارائه می دهد.
بنابراین، اگر فقط می خواهید شکل یک عنصر را تعریف کنید، به دنبال آن بروید “مسیر کلیپ”. اما اگر می خواهید کنترل بیشتری روی شکل خود داشته باشید، “ماسک” پسر شماست
با کیت ماسک SVG ما شروع کنید
اکنون که مراحل را می دانید، همه موارد را بررسی کنید ماسک های SVG رایگان که می توانید با کیت ما دانلود کنید و ببینید بازآفرینی آنها چقدر آسان است.
[ad_2]
Source link
