تصاویر واکنشگرا
گرد شده:
دایره ای:
border دار:
متن:
تصاویر گرد شده
کلاس w3-round گوشه های گرد به یک تصویر می افزاید :
تصویر دایره ای
کلاس w3-circleبرای تبدیل عکس به شکل دایره ای استفاده میشود:
تصاویر border دار
کلاس w3-border برای افزودن border اطراف تصویر استفاده میشود:
تصاویر مانند کارت
کلاس های *-w3-card اطراف عنصر <img> پوششی برای نمایش تصویر مانند یک کارت قرار میدهند. (با افزودن سایه)
قرار دادن متن روی تصویر
با کلاس های w3-display میتوان متن ها را روی تصویر در موقعیت مناسب قرار داد:
مثال
<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 استفاده کنید:
اگر شما میخواهید تصویر را به صورت واکنشگرا بزرگ و کوچک کنید ، به خصوصیت width در css مقدار100% بدهید:
اگر میخواهید تصویر واکنشگرای شما از نظر حداکثری محدود شود، از ویژگیmax-width استفاده کنید:
مثال
وضوح و کدری
کلاسهای w3-opacity تصاویر را واضح میکنند:
طبیعی
w3-opacity-min
w3-opacity
w3-opacity-max
مثال
<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">
<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">
<img src="/image.jpg" alt="Table" class="w3-sepia-max">
نکته:کلاسهای w3-sepia در نسخه های IE11 و قدیمی تر پشتیبانی نمیشوند .
افکت های زمان رویداد Hover
شما همچنین میتوانید زمان رفتن موس روی تصاویر افکت های خاصی را برروی تصویر اعمال کنید:
w3-hover-opacity
w3-hover-grayscale
w3-hover-sepia
مثال
<img src="/image.jpg" alt="Einstein" class="w3-hover-grayscale">
<img src="/image.jpg" alt="Einstein" class="w3-hover-sepia">
تغییرشفافیت
افزودن شفافیت زمانی که موس روی تصویر میرود:
حذف شفافیت زمانی که موس روی تصویرمیرود:
کلاسw3-hover-opacity زمان رفتن موس روی تصویر حالت شفاف به آن میدهد و کلاس w3-hover-opacity-off شفافیت را زمان رفتن موس روی آن ، از بین میبرد.
مثال
<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-card-2">
<img src="/img_monterosso.jpg" style="width:100%">
<div class="w3-container">
<h4>Monterosso</h4>
</div>
</div>
</div>
- نوشته شده توسط زهرا داوودی
- بازدید: 3796
