٪۴۰ تخفیف تابستانه شروع شد! بزرگترین حراج سال ما

به ما بپیوندید

آموزش تصاویر یک ظاهر طراحی شده CSS

بیاموزید که چگونه تصاویر را با استفاده از CSS سبک کنید. تصاویر گرد شده از border-radiusویژگی برای ایجاد تصاویر گرد استفاده کنید: مثال تصویر گرد: img { border-radius: 8px; } مثال تصویر حلقه شده: img { border-radius: 50%; } تصاویر بند…

محمد یوسفی

13 جولای 2021

بیاموزید که چگونه تصاویر را با استفاده از 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 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;
}

مرکز یک تصویر

برای قرار دادن یک تصویر ، حاشیه چپ و راست را autoروی آن تنظیم کنید و آن را به یک blockعنصر تبدیل کنید:

مثال

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. مقدار پایین تر ، شفاف تر:

تیرگی 0.2

تیرگی 0.5

تیرگی 1
(پیش فرض)

مثال

img {
  opacity: 0.5;
}

متن تصویر

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


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

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

توجه: ویژگی فیلتر در Internet Explorer یا Edge 12 پشتیبانی نمی شود.

مثال

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

img {
  filter: grayscale(100%);
}

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

ایجاد یک اثر همپوشانی در شناور



تلنگر یک تصویر

ماوس خود را بر روی تصویر حرکت دهید:


مثال

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 و JavaScript چگونه می توانند با هم کار کنند.

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

سپس ، هنگامی که کاربر روی تصویر کلیک می کند ، از JavaScript برای نشان دادن پنجره modal و نمایش تصویر داخل 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";
}

منبع

مطالب مرتبط

0 0 رای ها
امتیازدهی به مقاله
اشتراک در
اطلاع از
guest
0 نظرات
بازخورد (Feedback) های اینلاین
مشاهده همه دیدگاه ها