چگونه ایجاد کنید: نوشته‌های پوسته‌ای

چگونه نوشته‌های پوسته‌ای ایجاد کنید

مرحله اول - اضافه کردن HTML:

<div class="image-container">
  <div class="text">NATURE</div>
</div>

مرحله دوم - اضافه کردن CSS:

با استفاده از ویژگی mix-blend-mode می‌توانید نوشته‌های پوسته‌ای را به تصویر اضافه کنید. اما IE یا Edge پشتیبانی نمی‌کنند:

.image-container {
  background-image: url("img_nature.jpg"); /* تصویر استفاده شده - بسیار مهم! */
  background-size: cover;
  position: relative; /* نیاز به قرار دادن خروجی نوشته‌ها در وسط تصویر است */
  height: 300px; /* ارتفاع ثابت */
}
.text {
  background-color: white;
  color: black;
  font-size: 10vw; /* اندازه فونت پاسخ‌گوی نیازها */
  font-weight: bold;
  margin: 0 auto; /* قالب متن را در وسط قرار دهید */
  padding: 10px;
  width: 50%;
  text-align: center; /* متن را در وسط قرار دهید */
  position: absolute; /* متن را قرار دهید */
  top: 50%; /* متن را در وسط قرار دهید */
  left: 50%; /* متن را در وسط قرار دهید */
  transform: translate(-50%, -50%); /* متن را در وسط قرار دهید */
  mix-blend-mode: screen; /* این امکان را می‌دهد که خروجی نوشته‌ها را ببریم */
}

تا حالا امتحان کنید

اگر می‌خواهید متن در قالب سیاه داشته باشید، لطفاً mix-blend-mode تغییر دهید multiply، رنگ پس‌زمینه را به سیاه تغییر دهید، رنگ را به سفید تغییر دهید:

مثال

.text {
  background-color: black;
  color: white;
  mix-blend-mode: multiply;
  ....
}

تا حالا امتحان کنید