تصویر دورگرد

برای ایجاد تصاویر دورگرد از صفت border-radius استفاده می کنیم.

مثال : 

 

مثال : 

تصویر بند انگشتی (thumbnail)

برای ایجاد تصاویر بند انگشتی از صفت border استفاده می کنیم.

مثال : 

 

مثال : 

 

تصویر واکنش گرا (responsive)

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

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

مثال : 

 

وسط چین کردن تصویر

برای وسط چین کردن یک تصویر در یک صفحه از ;margin: auto استفاده کرده و آن را به یک عنصر سطح بلوک تبدیل کنید.

مثال : 

 

تصاویر یا کارت های پلاروید

براس اینکه تصاویر یا محتوای مورد نظرمان به شکل کارت های روی صفحه دیده شوند از کدهای زیر استفاده می کنیم.

مثال : 

 

تصویر پشت نما (transparent)

صفت opacity می تواند مقادیر بین 0.0 تا 1.0 را دریافت کرده و تصویر مورد نظر را پشت نما کند. مقدار کمتر = پشت نمایی بیشتر.

نکته! برای IE8 و نسخه های قبل از آن ، از (filter:alpha(opacity=x استفاده می شود. x می تواند مقادیر بین 0 تا 100 دریافت کند. مقدار کمتر ، عنصر را بیشتر پشت نما می کند.

مثال : 

 

متن روی تصویر

برای قرار دادن متن و موقعیت دهی آن روی تصویر از کدهای زیر استفاده می شود.

مثال بالا چپ: 

 

 

مثال بالا راست : 

 

 

مثال پایین چپ : 

 

 

مثال پایین راست : 

 

 

مثال وسط چین :

 

 

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

صفت filter در css جلوه های دیداری مانند تاری و تغییر تن رنگ به عناصر می دهد.

نکته! صفت filter در اینترنت اکسپلورر ، edge12 ، سافاری 5.1 و نسخه های قبلی کار نمی کند.

مثال : 

 

مثال : 

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

برای ایجاد جلوه های اشاره روی تصاویر به مثال های زیر توجه کنید.

مثال متن ظاهر شونده : 

 

 

مثال باکس ظاهر شونده : 

 

 

مثال اسلاید از بالا : 

 

 

مثال اسلاید از پایین : 

 

 

مثال اسلاید از چپ : 

 

 

مثال اسلاید از راست : 

 

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

از css می توان برای ایجاد گالری های تصویر استفاده کرد. مثال زیر از کوئری های مدیا برای بازچینی تصاویر در صفحات با اندازه های مختلف استفاده می کند. 

مثال : 

 

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

این یک مثال برای نمایش نحوه کارکرد css و جاوااسکریپت با یکدیگر است. ابتدا با استفاده از css یک پنجره کیفیتی (باکس گفتگو) ایجاد کرده و پیش فرض آن را روی مخفی تنظیم می کنیم.

سپس برای نشان دادن پنجره کیفیتی و برای نمایش تصویر داخل آن (زمانی که کاربر روی تصویر کلیک کند) از جاوااسکریپت استفاده می کنیم.

مثال :