تنظیم سبک تصویر با CSS
- صفحه قبلی CSS ابزار توضیح
- صفحه بعدی CSS object-fit
یاد بگیرید که چگونه از CSS برای تنظیم سبک تصویر استفاده کنید.
تصویر با گوشه‌های گرد
استفاده از border-radius ویژگی برای ایجاد تصویر با گوشه‌های گرد:
تصویر کوچک
استفاده از border ویژگی برای ایجاد تصویر کوچک.
تصویر کوچک:
مثال
img {
border: 1px solid #ddd;
border-radius: 4px;
padding: 5px;
width: 150px;
}
<img src="paris.jpg" alt="Paris">
تصاویر پاسخگو
تصاویر پاسخگو به طور خودکار تنظیم می‌شوند تا با اندازه صفحه نمایش سازگار شوند.
اگر می‌خواهید تصویر را به اندازه مورد نیاز کوچک کنید، اما نمی‌خواهید بزرگتر از اندازه اصلی شود، کد زیر را اضافه کنید:
مثال
img {
max-width: 100%;
height: auto;
}
توصیه:در آموزش CSS RWD در ما بیشتر درباره طراحی وب پاسخگو یاد بگیرید.
تصویر در وسط
برای قرار دادن تصویر در وسط، لطفاً حاشیه‌های جانبی را تنظیم کنید به صورت 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 {عرض: 100%}
div.container {
justify-content: center;
پدینگ: 10px 20px;
}
تصویر شفاف
شفافیت محدوده ارزش این ویژگی 0.0 - 1.0 است. هرچه ارزش کمتر باشد، شفاف‌تر است:
شفافیت 0.2
شفافیت 0.5
شفافیت 1 (پیش‌فرض)
مثال
img {
شفافیت: 0.5;
}
متنی در تصویر
چگونه متنی را در تصویر قرار دهیم:
مثال
به طور مستقیم امتحان کنید:
فیلتر تصویر
CSS فیلتر ویژگی‌ها ویژگی‌های بصری (مانند تار و پرتویی) را به عناصر اضافه می‌کنند.
توجه داشته باشید:اینترنت اکسپلورر یا Edge 12 از ویژگی filter پشتیبانی نمی‌کند.
مثال
تمام تصاویر را به سیاه و سفید (100٪ خاکستری) تغییر دهید:
img {
فیلتر: grayscale(100%);
}
توصیه:لطفاً وب‌سایت ما را بازدید کنید: دستورالعمل‌های مرجع فیلتر CSS، برای اطلاعات بیشتر در مورد فیلترهای CSS مراجعه کنید.
افزودن تأثیرات روی تصویر
افزودن تأثیرات روی ماوس:
تصویر را برگردانید
لطفاً ماوس خود را روی تصویر ببرید:
مثال
img:hover {
ترانسفورم: scaleX(-1);
}
کتابخانه تصاویر پاسخگو
ما می‌توانیم از CSS برای ایجاد کتابخانه تصاویر انعطاف‌پذیر استفاده کنیم.
این مثال از جستجوی رسانه‌ای برای تغییر ترتیب تصاویر در اندازه‌های مختلف صفحه استفاده می‌کند. اندازه پنجره مرورگر را تغییر دهید تا تأثیر را مشاهده کنید:
مثال
.responsive {
پدینگ: 0 6px;
فلوت: چپ;
عرض: 24.99999%;
}
@media only screen and (max-width: 700px){
.responsive {
عرض: 49.99999%;
مجرد: 6px 0;
}
}
@media only screen and (max-width: 500px){
.responsive {
width: 100%;
}
}
توصیه:لطفاً در آموزش CSS RWD در اینجا بیشتر درباره طراحی وب واکنشگرا یاد بگیرید.
مودال تصویر (Image Modal)
این یک مثال از اینکه چگونه CSS و JavaScript با هم همکاری می‌کنند است.
ابتدا، با استفاده از CSS پنجره مودال (محاوره) ایجاد کنید و به طور پیش‌فرض آن را مخفی کنید.
بعد، هنگام کلیک کاربر بر روی تصویر، با استفاده از JavaScript پنجره مودال را نمایش داده و در داخل آن تصویر را نمایش دهید:
- صفحه قبلی CSS ابزار توضیح
- صفحه بعدی CSS object-fit
