آموزش W3CSS

آموزش W3.CSS – عکس ها

W3.CSS با استفاده از w3-image بعنوان کلاس اصلی، آپشنی برای نمایش عکس ها به شیوه ای زیبا و جذاب فراهم کرده.

نام کلاس

توضیحات

w3-image

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

w3-circle

عکس را داخل یک دایره نمایش میده.

w3-title

برای گذاشتن متن روی عکس استفاده میشه.

w3-card

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

مثال

w3css_images.htm

<html>
   <head>
      <title>The W3.CSS Images</title>
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="https://www.w3schools.com/lib/w3.css">
   </head>
   <body class="w3-container"> 
      <h2>Images Demo</h2>
      <hr/>
      <h3>Simple Image</h3>
      <div class="w3-image">
         <img src="html5-mini-logo.jpg" alt="html5">
      </div>
      <h3>Circled Image</h3>
      <div class="w3-image">
         <img src="html5-mini-logo.jpg" alt="html5" class="w3-circle">
      </div>
      <h3>Text over image</h3>
      <div class="w3-image">
         <img src="html5-mini-logo.jpg" alt="html5">
         <div class="w3-title w3-text-black">Learn HTML5</div> 
      </div>
      <h3>Image as a card</h3>
      <div class="w3-image">
         <img src="html5-mini-logo.jpg" alt="html5" class="w3-card-4">
      </div>        
   </body>
</html>

نتیجه

خروجی کد بالا بصورت زیر خواهد بود.

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

خبـرنــامه

Newsletters

در خبــرنـامه سافت اسکیل عضو شویــد تا جدیدترین هـای سایت را بلافاصله در ایمیل خـود دریافت کنیـد

شما چه نظر و یا سوالی درباره این نوشته دارید؟

مبحث آموزشی

آموزش W3CSS

Learn W3CSS

پرســیدن سؤال جدید

سؤال های تخصصی خود را از ما بپرسید

دنبال کردن تلگرام کانال سافت اسکیل

https://telegram.me/softskill_ir

عملیات کاربران

خبـرنــامه

Newsletters

در خبــرنـامه سافت اسکیل عضو شویــد تا جدیدترین هـای سایت را بلافاصله در ایمیل خـود دریافت کنیـد

کلیک کنید و سوالات خود را از ما بپرسید
لطفا فرم سوال را پر کنید

سوال شما با موفقیت ثبت شد. برای اینکه بتوانیم به شما اطلاع رسانی کنیم، موارد زیر را وارد کنید:

لطفا چند لحظه منتظر بمانید ...