آموزش استایل دهی به تصاویر در CSS

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

تصاویر گرد شده در CSS

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

img {
  border-radius: 8px;
}

img {
  border-radius: 50%;
}

برای یادگیری اینکه چگونه به تصاویر شکل دهید و آنها را به صورت دایره ای و بیضی یا  چند ضلعی در بیاورید، این مقاله را مطالعه کنید.

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

برای ایجاد تصاویر بند انگشتی(thumbnail) از ویژگی border استفاده کنید. 

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

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>

 تصاویر واکنشگرا در CSS

تصاویر واکنشگرا به طور اتوماتیک تنظیم می شوند تا به سایز صفحه ی نمایش درآیند و در آن جا شوند.  پنجره ی مرورگر را تغییر اندازه دهید تا نتیجه را مشاهده کنید:

اگر می خواهید یک تصویر در صورت لزوم کوچک شود، اما هرگز بزرگتر از سایز اصلی خود نشود، کدهای زیر را مورد استفاده قرار دهید:

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

نکته: برای مطالعه ی بیشتر در مورد طراحی واکنشگرای وب می توانید به این مقاله مراجعه کنید.

 ایجاد تصاویر پولاروید

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

آموزش تصاویر شفاف در CSS

با استفاده از ویژگی opacity می توانیم یک مقدار را از 0.0 تا 1.0 برای شفافیت یک تصویر مشخص کنیم. هرچه این مقدار کمتر باشد، شفافیت بیشتر است:

img {
  opacity: 0.5;
}

 همچنین به مقاله ی فیلترهای تصویر در CSS نگاهی بیندازید تا بیاموزید که چگونه از ویژگی filter برای اضافه کردن افکت های بصری (مانند opacity و blur و ... ) در تصاویر استفاده کنید.

 متن برای تصویر(Image Text)

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

<div class="container">
  <img src="/img_5terre.jpg" alt="Cinque Terre" width="600" height="400">
  <div class="topleft">متن بالا و سمت چپ</div>
</div>

<div class="container">
  <img src="/other/img_5terre.jpg" alt="تصویر مورد نظر" width="600" height="400">
  <div class="topright">تصویر بالا و سمت راست</div>
</div>

<div class="container">
  <img src="/other/img_5terre.jpg" alt="تصویر مورد نظر" width="600" height="400">
  <div class="bottomleft">متنی در سمت پایین و چپ</div>
</div>

<div class="container">
  <img src="/other/img_5terre.jpg" alt="تصویر مورد نظر" width="600" height="400">
  <div class="bottomright">متن پایین و سمت راست</div>
</div>

<div class="container">
  <img src="/other/img_5terre_wide.jpg" alt="تصویر مورد نظر" width="1000" height="300">
  <div class="center">متن در وسط تصویر</div>
</div>

 محو شدن پوشش

ایجاد یک افکت پوشش در hover:

<div class="container">
  <img src="/other/img_avatar.png" alt="آواتار" class="image">
  <div class="overlay">
    <div class="text">سلام به شما</div>
  </div>
</div>

<div class="container">
  <img src="/other/img_avatar.png" alt="آواتار" class="image" style="width:100%">
  <div class="middle">
    <div class="text">احسان عباسی</div>
  </div>
</div>

<div class="container">
  <img src="/other/img_avatar.png" alt="آواتار" class="image">
  <div class="overlay">
    <div class="text">سلام به شما</div>
  </div>
</div>

<div class="container">
  <img src="/other/img_avatar.png" alt="آواتار" class="image">
  <div class="overlay">
    <div class="text">سلام بر شما</div>
  </div>
</div>

<div class="container">
  <img src="/other/img_avatar.png" alt="آواتار" class="image">
  <div class="overlay">
    <div class="text">سلام بر شما</div>
  </div>
</div>

<div class="container">
  <img src="/other/img_avatar.png" alt="آواتار" class="image">
  <div class="overlay">
    <div class="text">سلام بر شما</div>
  </div>
</div>

 وارونه کردن یک تصویر

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

گالری تصاویر واکنشگرا در CSS

با استفاده از 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

این یک مثال برای نشان دادن همکاری CSS و JavaScript است. ابتدا با استفاده از CSS یک پنجره ی مودال(modal) ایجاد می کنیم و به طور پیش فرض آن را مخفی می کنیم. آنگاه با استفاده از جاوا اسکریپت وقتی که کاربر روی تصویر کلیک می کند، پنجره ی مودال را نمایش می دهیم: 

// Get the modal
var modal = document.getElementById('myModal');

// Get the image and insert it inside the modal - use its "alt" text as a caption
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;
}

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
  modal.style.display = "none";
}