تنظیم استایل تصاویر با CSS

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

تصویر گرد

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

مثال

تصویر با گوشه‌های گرد:

img {
  border-radius: 8px;
}

آزمایش کنید

مثال

تصویر گرد:

img {
  border-radius: 50%;
}

آزمایش کنید

تصویر پیش‌نمایش

با استفاده از border با استفاده از این ویژگی‌ها تصویر پیش‌نمایش ایجاد کنید.

تصویر پیش‌نمایش:

Coffee

مثال

img {
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 5px;
  width: 150px;
}
<img src="paris.jpg" alt="Paris">

آزمایش کنید

به عنوان تصویر پیش‌نمایش لینک:

مثال

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;
}

آزمایش کنید

توضیح:در آموزش CSS RWD در اینجا بیشتر درباره طراحی وب پاسخگو یاد بگیرید.

تصویر مرکزی

برای قرار دادن تصویر در وسط، حاشیه‌های جانبی را تنظیم کنید به: auto و آن را به عنوان عنصر بلوک تنظیم کنید:

Coffee

مثال

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

آزمایش کنید

عکس پولاروید / کارت

Tulip

زرد تtulip

Tulip

قرمز تtulip

مثال

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 است. هرچه ارزش کمتر باشد، شفاف‌تر خواهد بود:

Tulip

opacity 0.2

Tulip

opacity 0.5

Tulip

opacity 1 ( پیش‌فرض )

مثال

img {
  opacity: 0.5;
}

آزمایش کنید

متنی در تصویر

چگونه متنی را در تصویر قرار دهیم:

مثال

CodeW3C.com Logo
سمت چپ پایین
سمت چپ بالا
سمت راست بالا
سمت راست پایین
وسط

آزمایش کنید:

سمت چپ بالا سمت راست بالا سمت چپ پایین سمت راست پایین وسط

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

CSS filter این ویژگی‌ها (مانند تار و شدت) را به عناصر اضافه می‌کند.

توجه:مرورگرهای Internet Explorer یا Edge 12 از ویژگی filter پشتیبانی نمی‌کنند.

مثال

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

img {
  filter: grayscale(100%);
}

آزمایش کنید

توضیح:لطفاً وب‌سایت ما را بازدید کنید: دستورالعمل مرجع فیلترهای CSS، برای اطلاعات بیشتری در مورد فیلترهای CSS مراجعه کنید.

افزودن تصویر به حالت مورب

برای ایجاد تأثیرات افزودنی هنگام قرار گرفتن ماوس روی تصویر، ایجاد کنید:

مثال 1

ورود متن:

Avatar
سلام دنیا

آزمایش کنید

مثال 2

جعبه وارد:

Avatar
بیل

آزمایش کنید

مثال 3

ورود از بالا:

Avatar
سلام دنیا

آزمایش کنید

مثال 4

ورود از پایین:

Avatar
سلام دنیا

آزمایش کنید

مثال 5

ورود از چپ:

Avatar
سلام دنیا

آزمایش کنید

مثال 6

ورود از راست:

Avatar
سلام دنیا

آزمایش کنید

تصویر را برعکس کنید

لطفاً ماوس خود را روی تصویر ببرید:

پارک ورزشی

مثال

img:hover {
  transform: scaleX(-1);
}

آزمایش کنید

کتابخانه تصاویر پاسخ‌گو

ما می‌توانیم از 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 RWD آموزش‌های بیشتری در مورد طراحی وب واکنش‌گرا در اینجا یاد بگیرید.

مدال تصویر (Image Modal)

این یک مثال از نحوه همکاری CSS و JavaScript است.

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

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

زمین چمن

آزمایش کنید