طراحی تصویر آواتار برای وب سایت
در این مقاله می آموزید که چطور با استفاده از CSS و Html تصاویر آواتار ایجاد کنید.
از ویژگی border-radiusاستفاده کنید تا به تصویر حاشیه دورانی اضافه کنید. استفاده از عدد 50% ، تصویر را به شکل دایره ایجاد میکند.
قدم اول : کد HTML را اضافه کنید.
مثال :
قدم دوم : کد CSS را اضافه کنید.
مثال :
مولفه های height و width را مطابق یکدیگر تنظیم کنید تا تصویر درست به نظر بیاید و از ویژگی border-radius استفاده کنید تا به تصویر حاشیه دورانی اضافه کنید. استفاده از 50% باعث میشود تصویر به شکل دایره نمایش داده شود
img {
border-radius: 50%;
}
نمونه مثال Avatar Images:
<h2>Avatar Images</h2>
<img src="http://articles.tahlildadeh.com/image.axd?picture=img_avatar_1.png" " alt="Avatar" class="avatar">
<img src="http://articles.tahlildadeh.com/image.axd?picture=img_avatar2.png" alt="Avatar" class="avatar">
خروجی Avatar Images
