استایل‌دهی تصاویر با 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 استایل‌دهی کنید و از تکنیک‌های مختلف برای نمایش بهتر آنها استفاده کنید.
برای ارسال نظر لطفا ابتدا وارد حساب کاربری خود شوید. صفحه ورود و ثبت نام