استایل تصویر CSS: افزایش جذابیت بصری با سبک

// HTML
<div class="image-container">
  <img src="https://kinsta.com/blog/css-image-styling/image.jpg" alt="Description of the image">
  <div class="overlay"></div>
</div>

// CSS
.image-container {
  position: relative;
  display: inline-block;
}
.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.image-container:hover .overlay {
  opacity: 1;
}

img {
  transform: scaleX(-1);
}

چرخش عمودی

در کد بالا، an .image-container عنصر تصویر را می پیچد و an .overlay عنصر پوشش در ابتدا شفاف است (opacity: 0) و کل تصویر را پوشش می دهد. هنگام شناور شدن بر روی .image-container، .overlay کدورت به 1، پوشش رنگ را آشکار می کند.

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

چرخش افقی

این alt ویژگی مخفف متن جایگزین است و برای دسترسی ضروری است. این تگ همچنین دو ویژگی اختیاری را ارائه می دهد: width و height. این ویژگی ها به شما امکان می دهد ابعاد تصویر را بر حسب پیکسل مشخص کنید.

وسط تصاویر با CSS

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

افزودن فیلتر به تصاویر: افزایش جلوه های بصری

گاهی اوقات، سناریوهایی وجود دارد که باید عرض و ارتفاع خاصی را برای یک تصویر مشخص کنید. در چنین مواردی می توانید از CSS استفاده کنید object-fit ویژگی برای کنترل نحوه رفتار تصویر در ابعاد مشخص شده.

این width و height برای دستیابی به یک تصویر کاملاً دایره‌ای، ویژگی‌ها باید ابعاد مساوی داشته باشند.

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

img {
  clip-path: circle(50%);
  width: 200px;
  height: 200px;
}

 // HTML
<div class="image-container">
  <img src="https://source.unsplash.com/tMHAmxLyzvA" alt="Boston city skyline" >
  <div class="image-text">Welcome to Kinsta</div>
</div>

// CSS
.image-container {
  position: relative;
}


.image-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  color: white;
  font-size: 20px;
  font-weight: bold;
}

در کد بالا، image-container div به عنوان ظرف هم برای تصویر و هم برای پوشش متن عمل می کند. این position: relative ویژگی برای ایجاد یک زمینه موقعیت یابی به کانتینر اعمال می شود. این image-text سپس از class برای قرار دادن متن کاملاً در داخل ظرف استفاده می شود position: absolute، و top، left، و transform خواص به مرکز آن. این z-index ویژگی تضمین می کند که متن در بالای تصویر ظاهر می شود و شما می توانید ظاهر متن را با رنگ، اندازه قلم و وزن فونت سفارشی کنید.

کدورت تصویر در کد بالا بر روی تنظیم شده است 0.5، در نتیجه یک اثر نیمه شفاف ایجاد می شود. می توانید مقدار opacity را برای دستیابی به سطح شفافیت مطلوب تنظیم کنید.

قرار دادن متن روی تصاویر

همه فیلترها در همه مرورگرها پشتیبانی نمی شوند. قبل از استفاده از یک فیلتر خاص، سازگاری آن را در مرورگرهای مختلف با استفاده از پلتفرم هایی مانند caniuse.com بررسی کنید.

ایجاد پوشش های شناور روی تصاویر

اعمال مقادیر خاص برای width و height ویژگی های یک تصویر می تواند منجر به پیامدهای نامطلوبی مانند فشرده سازی یا تحریف تصویر شود. این امر به ویژه در صورتی صادق است که ابعاد مشخص شده با نسبت تصویر اصلی مطابقت نداشته باشد.