سبد خرید (0)

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

گرد شده:

Northern Lights

دایره ای:

Forest

border دار:

Mountains

متن:

Nature
طبیعی :
 

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

Norway

کلاس  w3-round گوشه های گرد به یک تصویر می افزاید :

مثال

<img src="/img_fjords.jpg" class="w3-round" alt="Norway">
خودتان امتحان کنيد »

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

Norway

کلاس  w3-circleبرای تبدیل عکس به شکل دایره ای استفاده میشود:

مثال

<img src="/fjords.jpg" class="w3-circle" alt="Norway">
خودتان امتحان کنيد »

تصاویر border دار

Norway

کلاس w3-border برای افزودن border اطراف تصویر استفاده میشود:

مثال

<img src="/fjords.jpg" class="w3-border w3-padding" alt="Norway">
خودتان امتحان کنيد »

تصاویر مانند کارت

کلاس های *-w3-card اطراف عنصر <img>  پوششی برای نمایش تصویر مانند یک کارت قرار میدهند. (با افزودن سایه)

 

مثال

<div class="w3-card-4">
  <img src="/img_avatar.png" alt="Person">
</div>
خودتان امتحان کنيد »

قرار دادن متن روی تصویر

با کلاس های w3-display میتوان متن ها را روی تصویر در موقعیت مناسب قرار داد:

 

مثال

<div class="w3-display-container">
  <img src="/img_lights.jpg" alt="Lights">
  <div class="w3-display-topleft w3-container">Top Left</div>
  <div class="w3-display-topright w3-container">Top Right</div>
  <div class="w3-display-bottomleft w3-container">Bottom Left</div>
  <div class="w3-display-bottomright w3-container">Bottom Right</div>
  <div class="w3-display-left w3-container">Left</div>
  <div class="w3-display-right w3-container">Right</div>
  <div class="w3-display-middle w3-large">Middle</div>
  <div class="w3-display-topmiddle w3-container">Top Middle</div>
  <div class="w3-display-bottommiddle w3-container">Bottom Middle</div>
</div>
خودتان امتحان کنيد »

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

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

اگر شما میخواهیدتصاویر راتا جای ممکن  کوچکتر کنید ،اما نمیخواهید از اندازه طبیعی آن بزرگترش کنید، از کلاس w3-image استفاده کنید:

مثال

<img src="/img_lights.jpg" alt="Lights" class="w3-image">
خودتان امتحان کنيد »

اگر شما میخواهید تصویر را به صورت واکنشگرا بزرگ و کوچک کنید ، به خصوصیت width  در css  مقدار100% بدهید:

مثال

<img src="/img_lights.jpg" alt="Lights" style="width:100%">
خودتان امتحان کنيد »

اگر میخواهید تصویر واکنشگرای شما از نظر حداکثری محدود شود، از ویژگیmax-width   استفاده کنید:

مثال

<img src="/img_lights.jpg" alt="Lights" style="width:100%;max-width:400px">
خودتان امتحان کنيد »

وضوح و کدری

کلاسهای w3-opacity تصاویر را واضح میکنند:

طبیعی

w3-opacity-min

w3-opacity

w3-opacity-max

 

مثال

<img src="/img_forest.jpg" alt="Forest" class="w3-opacity-min">
<img src="/img_forest.jpg" alt="Forest" class="w3-opacity">
<img src="/img_forest.jpg" alt="Forest" class="w3-opacity-max">
خودتان امتحان کنيد »

سیاه سفید

برای افزودن افکت سیاه سفید به تصویر از کلاس های  w3-grayscale  استفاده کنید:

Normal

w3-grayscale-min

w3-grayscale

w3-grayscale-max

 

مثال

<img src="/image.jpg" alt="Table" class="w3-grayscale-min">
<img src="/image.jpg" alt="Table" class="w3-grayscale">
<img src="/image.jpg" alt="Table" class="w3-grayscale-max">
خودتان امتحان کنيد »

نکته:کلاسهای w3-grayscale  در نسخه های IE11  و قدیمی تر پشتیبانی نمیشوند .


رنگ های قرمز قهوه ای

برای افزودن افکت رنگ های قرمز قهوه ای از  کلاس های w3-sepia برروی تصویر استفاده میکنیم:

Normal

w3-sepia-min

w3-sepia

w3-sepia-max

 

مثال

<img src="/image.jpg" alt="Table" class="w3-sepia-min">
<img src="/image.jpg" alt="Table" class="w3-sepia">
<img src="/image.jpg" alt="Table" class="w3-sepia-max">
خودتان امتحان کنيد »

نکته:کلاسهای w3-sepia  در نسخه های IE11  و قدیمی تر پشتیبانی نمیشوند .


افکت های زمان رویداد Hover

شما همچنین میتوانید زمان رفتن موس روی تصاویر  افکت های خاصی را برروی تصویر اعمال کنید:

Norway

w3-hover-opacity

Norway

w3-hover-grayscale

Norway

w3-hover-sepia

مثال

<img src="/image.jpg" alt="Einstein" class="w3-hover-opacity">
<img src="/image.jpg" alt="Einstein" class="w3-hover-grayscale">
<img src="/image.jpg" alt="Einstein" class="w3-hover-sepia">
خودتان امتحان کنيد »

تغییرشفافیت

افزودن شفافیت زمانی که موس روی تصویر میرود:

Norway

حذف شفافیت زمانی که موس روی تصویرمیرود:

Norway

کلاسw3-hover-opacity  زمان رفتن موس روی تصویر حالت شفاف به آن  میدهد و کلاس w3-hover-opacity-off شفافیت را زمان رفتن موس روی آن ، از بین میبرد.

مثال

<img src="/fjords.jpg" class="w3-hover-opacity" alt="Norway">
<img src="/fjords.jpg" class="w3-opacity w3-hover-opacity-off" alt="Norway">
خودتان امتحان کنيد »

ساخت آلبوم تصاویر

در این مثال ما با استفاده از سیستم شبکه بندی W3.CSS  یک آلبوم تصاویر که در همه نمایشگرها به خوبی  نمایش میدهد، می سازیم.بعدا در این مورد بیشتر می آموزیم

 

تابستان2015

5 Terre

Monterosso

Vernazza

Manarola

Corniglia

Riomaggiore

مثال

<div class="w3-third">
  <div class="w3-card-2">
    <img src="/img_monterosso.jpg" style="width:100%">
    <div class="w3-container">
      <h4>Monterosso</h4>
    </div>
  </div>
</div>
خودتان امتحان کنيد »