آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

طراحی تصویر آواتار برای وب سایت

آموزش جاوا اسکریپت

طراحی تصویر آواتار برای وب سایت


در این مقاله می آموزید که چطور با استفاده از CSS و Html تصاویر آواتار ایجاد کنید.


از ویژگی border-radiusاستفاده کنید تا به تصویر حاشیه دورانی اضافه کنید. استفاده از عدد 50% ، تصویر را به شکل دایره ایجاد میکند.


قدم اول : کد HTML را اضافه کنید.
مثال :


Avatar
                

قدم دوم :   کد 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  

طراحی تصویر آواتار برای وب سایت
  • 21
  •    0
  • تاریخ ارسال :   1400/01/18

دانلود PDF دانلود سورس کد دانشجویان گرامی اگر این مطلب برای شما مفید بود لطفا ما را در GooglePlus محبوب کنید
رمز عبور: tahlildadeh.com یا www.tahlildadeh.com
ارسال دیدگاه نظرات کاربران
شماره موبایل دیدگاه
عنوان پست الکترونیک

ارسال

آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

تمامی حقوق این سایت متعلق به آموزشگاه تحلیل داده می باشد .