021-20483015

استایل تصویر در CSS

در این درس استفاده استایل برای تصاویر را یاد خواید گرفت

تصاویر گرد

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

Paris

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

Paris

تصاویر گرد
img {
    border-radius: 50%;
}
مشاهده مثال

تصویر بند انگشتی

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

Paris

 

تصاویر کوچک
img {
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 5px;
    width: 150px;
}

<img src="paris.jpg" alt="Paris">
مشاهده مثال

 

Paris

 

تصاویر کوچک لینک دار
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>
مشاهده مثال

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

تصاویر ریسپانسیو به صورت خودکار به اندازه صفحه نمایش تنظیم می شوند.
تغییر اندازه پنجره مرورگر برای دیدن اثر:

Norway

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

تصاویر واکنش گرا
img {
    max-width: 100%;
    height: auto;
}
مشاهده مثال

تصویر در مرکز صفحه

برای تصویر در مرکز صفحه  ، margin سمت چپ و راست را به خودکار تنظیم کنید و آن را به یک عنصر block تبدیل کنید:

Paris

 

تصویر در مرکز
img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 50%;
}
مشاهده مثال

تصاویر و کارت Polaroid

تصویر Polaroid
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 باشد. مقدار پایین تر، شفاف تر:

توجه داشته باشید: IE8 و پیشتر از filter:alpha(opacity=x) استفاده می کند. می تواند یک مقدار را از 0 تا 100 بگیرد. مقدار پایین تر عنصر را شفاف تر می کند.

 

Forest

شفافیت تصویر
img {
    opacity: 0.5;
    filter: alpha(opacity=50); /* For IE8 and earlier */
}
مشاهده مثال

متن روی تصویر

نحوه قرار دادن متن در یک تصویر:

Image Text

مثال متن روی تصویر در سمت چپ بالا

مثال متن روی تصویر در سمت راست بالا

مثال متن روی تصویر در سمت چپ پایین

مثال متن روی تصویر در سمت راست پایین

مثال متن روی تصویر در وسط

فیلتر تصویر

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

توجه: ویژگی فیلتر در Internet Explorer، Edge 12 یا Safari 5.1 و قبل از آن پشتیبانی نمی شود.

فیلتر تصویر
img {
    -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
    filter: grayscale(100%);
}
مشاهده مثال

چرخش تصویر

ماوس خود را بر روی تصویر قرار دهید:

چرخش عکس
img:hover {
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
}
مشاهده مثال

گالری عکس ریسپانسیو

از 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 و جاوا اسکریپت است.
ابتدا از CSS برای ایجاد یک پنجره modal (کادر محاوره ای) استفاده کنید و آن را به طور پیش فرض پنهان کنید.
سپس، یک جاوا اسکریپت برای نشان دادن پنجره modal  و برای نمایش تصویر داخل modal ، هنگامی که یک کاربر بر روی تصویر کلیک می کند، استفاده کنید:

حالت تصویر
// Get the modal
var modal = document.getElementById('myModal');

// Get the image and insert it inside the modal - use its "alt" text as a caption
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;
}

// Get the  element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks on  (x), close the modal
span.onclick = function() {
    modal.style.display = "none";
} 
مشاهده مثال

 

نظر شما

لطفا نام و نام خانوادگی خود را وارد کنید
لطفا ایمیل خود را وارد کنید لطفا ایمیل صحیح وارد کنید.
لطفا متن نظر خود را وارد کنید
>

یادگیری CSS

مقالات و دروس

به خبرنامه مدرسه طراحی وب ایران (وب مهراز) بپیوندید.

لطفا شماره همراه صحیح وارد کنید.
لطفا ایمیل صحیح وارد کنید.

مقالات مرتبط