دوره جامع و پروژهمحور طراحی وب با تمرکز روی JavaScript، Ajax و API! با طراحی ریسپانسیو و پروژههای حرفهای مثل دیجیکالا و شمرون کباب مهارتت رو حرفهای کن!
مشاهده بیشتر
این دوره شما رو از مفاهیم پایه تا مباحث پیشرفته مثل JavaScript، React و Next.js پیش میبره. با آموزش پروژهمحور، یک فروشگاه اینترنتی کامل طراحی میکنید و برای ورود به بازار کار آماده میشید!
مشاهده بیشترمشخصات مقاله
-
564
-
0.0
-
2170
-
0
-
0
طراحی تصویر آواتار برای وب سایت
طراحی تصویر آواتار برای وب سایت
در این مقاله می آموزید که چطور با استفاده از 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
