نمایش یک عکس به صورت دارای گوشه های گرد (Rounded Image)، با کلاس های به شکل کلی *-w3-round ، در W3.CSS

با کلاس های به شکل کلی *-w3-round در چارچوب W3.CSS ، می توانیم تعیین کنیم که گوشه‌ های یک عکس، به صورت گرد شده (Rounded Image) نمایش داده شوند. این کلاس ها (Class) عبارتند از :

تفاوت این کلاس ها (Class)، در میزان گرد شدن گوشه های عکس می باشد و نام آنها نشان می دهد که تا چه میزان، گوشه های عکس را گرد می کنند.

کلاس مورد نظرمان (مثلا کلاس w3-round) را به صورت زیر برای تگ img ذکر می کنیم (تگ img برای نمایش عکس به کار می رود - کلید شماره 507 ) :

به مثال زیر توجه کنید :

مثال

بخش مهم کدها :

کد کامل صفحه HTML :

<!DOCTYPE html>
<html>
 <head>
 <link rel="stylesheet" href="w3.css">
 </head>

<body>
 <div class="w3-container">
 
 Normal :
 
 <img src="kelidestan_image.jpg">
 
 
 w3-round-small :
 
 <img src="kelidestan_image.jpg" class="w3-round-small">
 
 
 w3-round :
 
 <img src="kelidestan_image.jpg" class="w3-round">
 
 
 w3-round-large :
 
 <img src="kelidestan_image.jpg" class="w3-round-large">
 
 
 w3-round-xlarge :
 
 <img src="kelidestan_image.jpg" class="w3-round-xlarge">
 
 
 w3-round-xxlarge :
 
 <img src="kelidestan_image.jpg" class="w3-round-xxlarge">
 
 
 kelidestan.com
 
 </div>
 </body>
</html>

نتیجه :

دسته بندی عکس ها (Image)، در W3.CSS

نویسنده علیرضا گلمکانی

شماره کلید 26267

گزینه ها

به اشتراک گذاری (Share) در شبکه های اجتماعی

FaceBook Twitter Digg Reddit LinkedIn Pinterest StumbleUpon

نظرات 0 0 0

ارسال نظر جدید (بدون نیاز به عضو بودن در وب سایت)

*** نام تو کلید هر چه بستند ***

کپی برداری سایر وب سایت ها از محتوای آموزشی کلیدستان ممنوع می باشد (بیشتر بدانید)