CSS – استایل تصاویر (Style Images)

استایل‌دهی تصاویر با CSS

در این بخش یاد می‌گیرید که چگونه تصاویر را با استفاده از CSS استایل‌دهی کنید.

تصاویر گرد

برای ایجاد تصاویر گرد از خاصیت border-radius استفاده کنید:

تصویر گرد:

img {
  border-radius: 8px;
}

تصویر دایره‌ای:

img {
  border-radius: 50%;
}

تصاویر بندانگشتی

برای ایجاد تصاویر بندانگشتی از خاصیت border استفاده کنید.

تصویر بندانگشتی:

img {
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 5px;
  width: 150px;
}

تصویر بندانگشتی به عنوان لینک:

img {
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 5px;
  width: 150px;
}

img:hover {
  box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
}
<a href="paris.jpg">
  <img src="paris.jpg" alt="Paris">
</a>

تصاویر واکنش‌گرا

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

برای دیدن تأثیر، پنجره مرورگر را تغییر اندازه دهید:

مثال:

img {
  max-width: 100%;
  height: auto;
}

مرکز کردن تصویر

برای مرکز کردن یک تصویر، مقدار margin-left و margin-right را به auto تنظیم کرده و آن را به یک عنصر بلوکی تبدیل کنید:

مثال:

img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
}

تصاویر/کارت‌های پولاروید

مثال:

div.polaroid {
  width: 80%;
  background-color: white;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

img {
  width: 100%;
}

div.container {
  text-align: center;
  padding: 10px 20px;
}

تصویر شفاف

خاصیت opacity می‌تواند مقداری بین 0.0 تا 1.0 بگیرد. مقدار پایین‌تر، شفافیت بیشتری دارد:

مثال:

img {
  opacity: 0.5;
}

فیلترهای تصویر

خاصیت فیلتر CSS، افکت‌های بصری (مانند تاری و اشباع) را به یک عنصر اضافه می‌کند.

مثال: تغییر رنگ تمامی تصاویر به سیاه و سفید (100% خاکستری):

img {
  filter: grayscale(100%);
}

عکس گالری واکنش‌گرا

CSS می‌تواند برای ایجاد گالری‌های تصویری استفاده شود. این مثال از رسانه‌های کوئری برای ترتیب تصاویر در اندازه‌های مختلف صفحه استفاده می‌کند. پنجره مرورگر را تغییر اندازه دهید تا تأثیر آن را ببینید:

.responsive {
  padding: 0 6px;
  float: left;
  width: 24.99999%;
}

@media only screen and (max-width: 700px) {
  .responsive {
    width: 49.99999%;
    margin: 6px 0;
  }
}

@media only screen and (max-width: 500px) {
  .responsive {
    width: 100%;
  }
}

مدال تصویر (پیشرفته)

این یک مثال برای نشان دادن چگونگی کار کردن CSS و JavaScript با هم است.

ابتدا از CSS برای ایجاد یک پنجره مدال (کادر دیالوگ) استفاده کنید و آن را به طور پیش‌فرض پنهان کنید.

سپس از JavaScript برای نمایش پنجره مدال و نمایش تصویر درون آن استفاده کنید:

// دریافت مدال
var modal = document.getElementById('myModal');

// دریافت تصویر و قرار دادن آن درون مدال - استفاده از متن "alt" به عنوان توضیحات
var img = document.getElementById('myImg');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");

img.onclick = function(){
  modal.style.display = "block";
  modalImg.src = this.src;
  captionText.innerHTML = this.alt;
}

// دریافت عنصر <span> که مدال را می‌بندد
var span = document.getElementsByClassName("close")[0];

// هنگامی که کاربر بر روی <span> (x) کلیک می‌کند، مدال بسته می‌شود
span.onclick = function() {
  modal.style.display = "none";
}

با این توضیحات، می‌توانید به راحتی تصاویر را با CSS استایل‌دهی کنید و از تکنیک‌های مختلف برای نمایش بهتر آنها استفاده کنید.

پست های مرتبط

مطالعه این پست ها رو از دست ندین!
JavaScript - رویدادها (Events)

JavaScript – رویدادها (Events)

رویدادهای HTML رویدادها در HTML، “اتفاقاتی” هستند که برای عناصر HTML رخ می‌دهند. این اتفاقات می‌توانند ناشی از کار...

بیشتر بخوانید
JavaScript - سازنده‌های شیء (Object Constructors)

JavaScript – سازنده‌های شیء (Object Constructors)

ساخت آبجکت با تابع سازنده (Object Constructor Function) برای ساخت چندین آبجکت مشابه، از تابع سازنده استفاده می‌شود. این...

بیشتر بخوانید
JavaScript - نمایش شیء (Object Display)

JavaScript – نمایش شیء (Object Display)

نحوه نمایش آبجکت‌ها در جاوااسکریپت هنگام نمایش یک آبجکت جاوااسکریپت به صورت مستقیم، خروجی معمولاً به شکل [object Object]...

بیشتر بخوانید

نظرات

سوالات و نظراتتون رو با ما به اشتراک بذارید

برای ارسال نظر لطفا ابتدا وارد حساب کاربری خود شوید.