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

Main Page Tutorial
موارد آموزشی
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 }

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

صفحهٔ بعد»

«صفحهٔ قبل