احتمالاً با استفاده از متن برای پوشاندن تصویر در فتوشاپ آشنا هستید. این بهترین راه شناخته شده برای افزودن بافت یا حتی پس زمینه تصویر به متن شماست. سپس می توانید از آن متن به عنوان تصویر استفاده کنید روی وبسایت شما؛ با این حال، آیا عالی نیست اگر بتوانید همان افکت را فقط با استفاده از HTML و CSS اعمال کنید؟ خبر خوب این است که شما می توانید! CSS ویژگی هایی مانند پس زمینه-کلیپ و ماسک-تصویر که می توانید برای ایجاد افکت های مشابه با افکت هایی که در فتوشاپ ایجاد می کنید، استفاده کنید. علاوه بر این، می‌توانید از SVG برای کلیپ کردن تصویر با متن نیز استفاده کنید. امروز به گزینه‌ها نگاه می‌کنیم و حتی انیمیشن‌های ساده‌ای را به تصویر می‌کشیم. اگر می خواهید کد را دنبال کنید، می توانید فایل ها را از اینجا دانلود کنید

پشتیبانی از مرورگر

به طور قابل پیش بینی، برخی از ویژگی هایی که ما استفاده خواهیم کرد به طور جهانی پشتیبانی نمی شوند، به این معنی که در مرورگرهایی مانند IE و Firefox از کار می افتند. خبر خوب این است که این ویژگی‌ها بی‌صدا از کار می‌افتند، به این معنی که این تکنیک‌ها یک پیشرفت تدریجی هستند و برای استفاده در سایت‌ها خوب هستند.

برش متن با استفاده از پس زمینه-کلیپ

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

HTML

نشانه گذاری ما به سادگی یک است h1 با کلاس bgClip:

متن کلیپ

حالا بیایید جادو را با CSS اضافه کنیم…

CSS

با تصویری از آسمان شب، بافت را به متن خود اضافه می کنیم. ما همچنین مطمئن خواهیم شد که متن به راحتی با استفاده از آن ارائه می شود صاف کردن فونت توجه داشته باشید که برای این کار رنگ متن باید شفاف باشد، بنابراین ما نیز استفاده خواهیم کرد متن-پر-رنگ: شفاف.

.bgClip {
 background:url('../images/clouds.jpg');
 background-repeat:repeat-x;
 background-position:0 0;
 font-size:200px;
 text-transform:uppercase;
 text-align:center;
 font-family:'Luckiest Guy';
 color:transparent;
 -webkit-font-smoothing:antialiased;
 -webkit-background-clip:text;
 -moz-background-clip:text;
 background-clip:text;
 -webkit-text-fill-color:transparent;
 margin:0;

اکنون فقط می خواهیم یک انیمیشن کوچک اضافه کنیم تا پس زمینه جذاب تر شود:

 -webkit-animation:BackgroundAnimated 15s linear infinite;
 -moz-animation:BackgroundAnimated 15s linear infinite;
 -ms-animation:BackgroundAnimated 15s linear infinite;
 -o-animation:BackgroundAnimated 15s linear infinite;
 animation:BackgroundAnimated 15s linear infinite;
}
 @keyframes BackgroundAnimated {
 from {
 background-position:0 0
 }
 to {
 background-position:100% 0
 }
}
 @-webkit-keyframes BackgroundAnimated {
 from {
 background-position:0 0
 }
 to {
 background-position:100% 0
 }
}
 @-ms-keyframes BackgroundAnimated {<
 from {
 background-position:0 0
 }
 to {
 background-position:100% 0
 }
}
 @-moz-keyframes BackgroundAnimated {
 from {
 background-position:0 0
 }
 to {
 background-position:100% 0
 }
}

نتیجه این است:

برش متن با استفاده از SVG

تکنیک بعدی که به آن نگاه خواهیم کرد، برش SVG است. مشابه روش CSS بالا، SVG همچنین به شما اجازه می‌دهد تا متن را با تصاویر با استفاده از آن برش دهید clipPath ویژگی. معمولاً ویژگی clipPath شامل ویژگی های شکل مانند دایره یا مربع است، اما می توانید از متن نیز استفاده کنید.

SVG

خواهید دید که من از عنصر تصویر HTML برای کلیپ کردن تصویر استفاده می کنم.

 <?xml version="1.0" encoding="UTF-8"?>
<?xml version="1.0" encoding="UTF-8"?>
<?xml version="1.0" encoding="UTF-8"?>
<?xml version="1.0" encoding="UTF-8"?>
<?xml version="1.0" encoding="UTF-8"?>

اگرچه من در اینجا از jpg. استفاده می کنم، اما می توانید از فرمت های دیگر تصویر یا حتی ویدیو استفاده کنید.

CSS

اکنون، تنها کاری که باید انجام دهیم این است که از ویژگی clip-path برای اعمال SVG به عنوان مسیر کلیپ تصویر استفاده کنیم:

.svgClipped {
 -webkit-clip-path: url(#svgPath);
 clip-path: url(#svgPath);
 margin:0 auto;
}

نتیجه این است:

پوشاندن متن با استفاده از ماسک-تصویر

آخرین تکنیکی که می خواهیم به آن نگاه کنیم، بافت سازی متن با آن است ماسک-تصویر عملکرد اصلی این ویژگی این است که ناحیه ای از متن را که قابل مشاهده است برش می دهد روی کدورت

HTML

تنها چیزی که نیاز داریم یک عنصر h1 است که در یک div پیچیده شده است:

CSS

برای پوشاندن تصویر با متن، از -webkit-mask-image برای مشخص کردن تصویر استفاده می کنیم و همچنین یک سایه متن زیبا برای اندازه گیری خوب اضافه می کنیم. در نهایت، می‌خواهم برخی از افکت‌های شناور صاف را برای آشکار کردن کل متن اعمال کنم روی حرکت ماوس (فقط به این دلیل که می توانیم):

#maskText h1 {
 font-size: 200px;
 font-family: 'Lilita One', sans-serif;
 color: #ffe400;
 text-shadow: 7px 7px 0px #34495e;
 text-transform: uppercase;
 text-align: center;
 margin: 0;
 display: block;
 -webkit-mask-image: url('../images/texture.png');
 -webkit-transition:all 2s ease;
 -moz-transition:all 2s ease;
 -o-transition:all 2s ease;
 transition:all 2s ease;
}
 #maskText h1:hover{
 -webkit-mask-image: url('../images/texture-hover.png');
 cursor: pointer;
 color: #ffe400;
}

نتیجه این است:

نتیجه

عالی! شما به تازگی یاد گرفتید که چگونه متن را برش دهید روی راه های مختلف. این ویژگی ها در وقت شما صرفه جویی می کند و شما را از فتوشاپ دور می کند. مهمتر از آن، آنها برخلاف jpg پویا هستند. CSS و SVG راه درازی را پیموده‌اند، و تکنیک‌هایی مانند اینها در چند سال آینده با پیشرفت مرورگرها استاندارد خواهند شد.