W3.CSS

W3.CSS ပင်မစာမျက်နှာ W3.CSS နိဒါန်း W3.CSS အရောင်များ W3.CSS ကွန်တိန်နာများ W3.CSS Panels များ W3.CSS နယ်နိမိတ်များ W3.CSS ကတ်များ W3.CSS ပုံသေများ W3.CSS ဖောင့်များ W3.CSS Google W3.CSS စာသား W3.CSS Round W3.CSS Padding W3.CSS အနားသတ်များ W3.CSS ရုပ်ထွက် W3.CSS ခလုတ်များ W3.CSS မှတ်စုများ W3.CSS Quotes W3.CSS သတိပေးချက်များ W3.CSS ဇယားများ W3.CSS စာရင်းများ W3.CSS ပုံများ W3.CSS ထည့်သွင်းမှုများ W3.CSS တံဆိပ်များ W3.CSS Tag W3.CSS အိုင်ကွန်များ W3.CSS တုံ့ပြန်မှု W3.CSS Layout W3.CSS Animations W3.CSS Effects များ W3.CSS ဘားများ W3.CSS Dropdowns W3.CSS Accordions W3.CSS လမ်းညွှန် W3.CSS Sidebar W3.CSS Tabs များ W3.CSS Pagination W3.CSS တိုးတက်မှုဘားများ W3.CSS Slideshow W3.CSS Modal W3.CSS Tooltips W3.CSS ဇယားကွက် W3.CSS ကုဒ် W3.CSS စစ်ထုတ်မှုများ W3.CSS လမ်းကြောင်းများ W3.CSS Case W3.CSS ရုပ်ဝတ္ထု W3.CSS အတည်ပြုခြင်း W3.CSS ဗားရှင်းများ W3.CSS မိုဘိုင်း

W3.CSS အရောင်များ

W3.CSS အရောင်အတန်းများ W3.CSS Color Material ပါ။ W3.CSS Color Flat UI W3.CSS အရောင် Metro UI W3.CSS Color Win8 W3.CSS Color iOS ပါ။ W3.CSS အရောင်ဖက်ရှင် W3.CSS Color Libraries များ W3.CSS Color Schemes W3.CSS Color Themes W3.CSS Color Generator

ဝဘ်အဆောက်အဦ

ဝဘ်မိတ်ဆက် ဝဘ် HTML ဝဘ် CSS ဝဘ် JavaScript ဝဘ်လက်ကွက် Web Band Web Catering ဝဘ် စားသောက်ဆိုင် ဝဘ်ဗိသုကာ

ဥပမာများ

W3.CSS ဥပမာများ W3.CSS သရုပ်ပြများ W3.CSS Templates များ

ကိုးကား

W3.CSS အကိုးအကား W3.CSS ဒေါင်းလုဒ်များ

W3.CSS ပုံများ


လုံးဝန်းသည်-

မြောက်ပိုင်းအလင်း

စက်ဝိုင်း-

သစ်တော

နယ်ခြားထားသည်-

တောင်တွေ

စာသား-

သဘာဝ
သဘာဝ

လုံးဝန်းသောပုံ

နော်ဝေး

w3- round class သည် ပုံတစ်ခုသို့ အဝိုင်းထောင့်များကို ပေါင်းထည့်သည်-

ဥပမာ

<img src="img_snowtops.jpg" class="w3-round" alt="Norway">

စက်ဝိုင်းပုံ

နော်ဝေး

w3-circle class သည် ပုံတစ်ပုံကို စက်ဝိုင်းပုံသဏ္ဍာန်ပြုလုပ်သည်-

ဥပမာ

<img src="snowtops.jpg" class="w3-circle" alt="Alps">


နယ်ခြားထားသောပုံ

နော်ဝေး

w3-border အတန်းသည် ပုံတစ်ဝိုက်တွင် ဘောင်များကို ပေါင်းထည့်သည် -

ဥပမာ

<img src="snowtops.jpg" class="w3-border w3-padding" alt="Alps">

ကတ်တစ်ခုအနေဖြင့် ပုံ

ကတ်တစ်ခုအဖြစ်ပြသရန် w3- card- * အတန်းများကို <img> ဒြပ်စင်တစ်ဝိုက်တွင် ခြုံထားပါ (အရိပ်များထည့်ပါ)

မီးများ

ပုဂ္ဂိုလ်

ရှိမုန်

သူဌေးအပေါင်းတို့၏သူဌေး

ဥပမာ

<div class="w3-card-4">
  <img src="img_avatar.png" alt="Person">
</div>

ရုပ်ပုံစာသား

Position the text in an image with the w3-display-classes:

မီးများ

Top Left

Top Right

Bottom Left

Bottom Right

Left

Right

Middle

Top Middle

Bottom Middle

Example

<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>

Responsive Images

An image can be set to automatically resize itself to fit the size of its container.

If you want the image to scale down if it has to, but never scale up to be larger than its original size, use the w3-image class.

Example

<img src="img_lights.jpg" alt="Lights" class="w3-image">

If you want the image to scale both up and down on responsiveness, set the CSS width property to 100%:

Example

<img src="img_lights.jpg" alt="Lights" style="width:100%">

If you want to restrict a responsive image to a maximum size, use the max-width property:

Example

<img src="img_lights.jpg" alt="Lights" style="width:100%;max-width:400px">

Opacity

The w3-opacity classes make images transparent:

Normal

w3-opacity-min

w3-opacity

w3-opacity-max

Example

<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">

Grayscale

The w3-grayscale classes add a grayscale effect to an image:

Normal

w3-grayscale-min

w3-grayscale

w3-grayscale-max

Example

<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">

Note: The w3-grayscale classes are not supported in IE 11 and earlier versions.


Sepia

The w3-sepia classes add a sepia effect to an image:

Normal

w3-sepia-min

w3-sepia

w3-sepia-max

Example

<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">

Note: The w3-sepia classes are not supported in IE 11 and earlier versions.


Hover Effects

You can also add special effects on hover/mouse-over.

နော်ဝေး

w3-hover-opacity

နော်ဝေး

w3-hover-grayscale

နော်ဝေး

w3-hover-sepia

Example

<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">

Opacity Off

Add transparency on hover:

နော်ဝေး

Remove transparency on hover:

နော်ဝေး

The w3-hover-opacity class adds transparency to the image on mouse-over, and the w3-hover-opacity-off class removes transparency on mouse-over.

Example

<img src="snowtops.jpg" class="w3-hover-opacity" alt="Alps">
<img src="snowtops.jpg" class="w3-opacity w3-hover-opacity-off" alt="Alps">

Constructing a Photo Album

In this example we use the W3.CSS Responsive Grid system to create a photo album that looks good on all devices. You will learn more about this later.

Summer 2015

5 Terre

Monterosso

Vernazza

Manarola

Corniglia

Riomaggiore


Example

<div class="w3-third">
  <div class="w3-card">
    <img src="img_monterosso.jpg" style="width:100%">
    <div class="w3-container">
      <h4>Monterosso</h4>
    </div>
  </div>
</div>