استایل‌دهی تصاویر

از ویکی‌کد، دانشنامهٔ برنامه‌نویسی
پرش به ناوبری پرش به جستجو
Main Page Tutorial
Css-menu.jpg
موارد آموزشی
CSS پیشرفته
۱گوشه‌های گرد
۲کادر تصاویر
۳پس‌زمینه‌ها
۴رنگ‌ها
۵Gradientها
۶سایه‌ها
۷افکت‌های متن
۸قلم‌های وب
۹2D Transforms
۱۰3D Transforms
۱۱Transitions
۱۲انیمیشن‌ها
۱۳Tooltip
۱۴استایل‌دهی تصاویر
۱۵ویژگی object-fit
۱۶دکمه‌ها
۱۷مثال‌های صفحه‌بندی (Pagination)
۱۸ستون‌های متعدد
۱۹رابط کاربری
۲۰متغیرها
۲۱Box Sizing
۲۲Flexbox
۲۳Media Queries
۲۴مثال‌های Media Queries
واکنش‌گرایی
Grid در CSS
مثال‌ها
مرجع‌ها

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

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

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

مثال

تصویر با گوشه گرد:
img {
  border-radius: 8px;
}

مثال

تصویر دایره‌ای:
img {
  border-radius: 50%;
}

تصاویر کوچک

از ویژگی border برای ساختن تصاویر کوچک استفاده کنید:

تصویر کوچک: تصویر کوچک به عنوان لینک:
مثال
1 img {
2   border: 1px solid #ddd;
3   border-radius: 4px;
4   padding: 5px;
5   width: 150px;
6 }
7 
8 <img src="paris.jpg" alt="Paris">

مثال
 1 img {
 2   border: 1px solid #ddd;
 3   border-radius: 4px;
 4   padding: 5px;
 5   width: 150px;
 6 }
 7 
 8 img:hover {
 9   box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
10 }
11 
12 <a href="paris.jpg">
13   <img src="paris.jpg" alt="Paris">
14 </a>

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

تصاویر واکنش گرا به صورت خودکار تنظیم می‌شوند تا با اندازه صفحه نمایش همخوانی داشته باشد.

اندازه مرورگر را تغییر دهید تا اثر آن را ببینید :

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

مثال
1 img {
2   max-width: 100%;
3   height: auto;
4 }


نکته: مطالب بیشتری را در مورد طراحی وب واکنش گرا در آموزش RWD در CSS ما بخوانید.

وسط چین کردن یک عکس

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

مثال
1 img {
2   display: block;
3   margin-left: auto;
4   margin-right: auto;
5   width: 50%;
6 }


تصاویر/کارت های Polaroid (قطبی)

مثال
 1 div.polaroid {
 2   width: 80%;
 3   background-color: white;
 4   box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
 5 }
 6 
 7 img {width: 100%}
 8 
 9 div.container {
10   text-align: center;
11   padding: 10px 20px;
12 }


تصاویر شفاف

ویژگی opacityمی‌تواند مقداری بین ۰٫۰ – ۱٫۰ بگیرد. مقدار کمتر، شفافیت بیشتر:

مثال
img {
  opacity: 0.5;
}


متن تصویر

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

مثال

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


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

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

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

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

img {
  filter: grayscale(100%);
}

مشاهدهٔ نتیجه»

نکته: به مرجع Filter در CSS ما مراجعه کنید تا مطالب بیشتری را در مورد Filterها در CSS بیاموزید.

پوشش تصویر در هنگام Hover

ساخت یک پوشش تصویر در هنگام hover:

مثال

متن Fade in:

مشاهدهٔ نتیجه»

مثال

Fade in درون یک جعبه:

مشاهدهٔ نتیجه»

مثال

Slide in (بالا):

مشاهدهٔ نتیجه»

مثال

Slide in (پایین):

مشاهدهٔ نتیجه»

مثال

Slide in (چپ):

مشاهدهٔ نتیجه»

مثال

Slide in (راست):

مشاهدهٔ نتیجه»

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

نشانه‌گر ماوس را روی تصویر قرار دهید:

مثال
img:hover {
  transform: scaleX(-1);
}


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

CSS می‌تواند برای ساخت گالری تصاویر نیز استفاده شود. این مثال از media queryها برای چینش دوباره تصاویر در صفحه نمایش های دارای اندازه‌های متفاوت استفاده می‌کند. اندازه پنجره مرورگر را تغییر دهید تا اثر آن را ببینید:

مثال
 1 .responsive {
 2   padding: 0 6px;
 3   float: left;
 4   width: 24.99999%;
 5 }
 6 
 7 @media only screen and (max-width: 700px){
 8   .responsive {
 9     width: 49.99999%;
10     margin: 6px 0;
11   }
12 }
13 
14 @media only screen and (max-width: 500px){
15   .responsive {
16     width: 100%;
17   }
18 }


نکته: مطالب بیشتری را در مورد طراحی وب واکنش گرا در آموزش RWD در CSS ما بخوانید.

تصویر Modal (پیشرفته)

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

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

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

مثال
 1 // Get the modal
 2 var modal = document.getElementById('myModal');
 3 
 4 // Get the image and insert it inside the modal - use its "alt" text as a caption
 5 var img = document.getElementById('myImg');
 6 var modalImg = document.getElementById("img01");
 7 var captionText = document.getElementById("caption");
 8 img.onclick = function(){
 9   modal.style.display = "block";
10   modalImg.src = this.src;
11   captionText.innerHTML = this.alt;
12 }
13 
14 // Get the <span> element that closes the modal
15 var span = document.getElementsByClassName("close")[0];
16 
17 // When the user clicks on <span> (x), close the modal
18 span.onclick = function() {
19   modal.style.display = "none";
20 }



منابع آموزشی