ساخت تصویر آواتار با HTML & CSS

منتشر شده در 20 آوریل 2021 آخرین به روز رسانی در 20 آوریل 2021
مهندس محسن صادق نژاد
2486 0
ساخت تصویر آواتار با HTML و CSS

این پست با مسیر متخصص CSS مرتبط است. مشاهده مسیر (Roadmap)

این پست با مسیر متخصص HTML مرتبط است. مشاهده مسیر (Roadmap)

در آموزش امروز قصد داریم تا نحوه ایجاد تصاویر آواتاری که در سایت ها مشاهده می کنید را بررسی کنیم. در انتهای آموزش شما خواهید توانست یک تصویر آواتار همانند زیر ایجاد کنید. پس تا انتها همراه آموزش “ساخت تصویر آواتار با HTML & CSS” باشید.

ساخت تصویر آواتار با HTML & CSS :

در بالا سه تصویر آواتار مشاهده می کنید. برای ساخت تصویر از تگ img باید استفاده کنیم.

<img src="avatar-img.png" alt="Avatar" class="avatar">

در بخش اول تگ img و قسمت src آدرس عکسی که می خواهیم در آواتار قرار بدهیم را می آوریم. در بخش دوم و قسمت alt یک توضیحی درباره عکس موجود می نویسیم تا در صورت بروز مشکلاتی از قبیل در دسترس نبودن عکس و یا پاک شدن آن توضیحی برای کاربر نمایش داده شود. در بخش سوم هم یک کلاس برای تگ img تعریف کرده ایم تا در قسمت css به این کلاس استایل بدهیم.

خروجی بدون استایل :

خروجی بدون استایل به صورت زیر خواهد بود:

ساخت تصویر آواتار با HTML & CSS
ساخت تصویر آواتار با HTML و CSS

از نظر اندازه و شکل ظاهری اصلا شبیه به آواتار نیست ولی با کمک استایل های موجود در css که در ادامه به بررسی آنها می پردازیم اقدام به تغییر دادن ظاهر آواتار می کنیم.

در وهله‌ی اول باید سایز تصویر را متناسب با سایز تصویر یک آواتار کاهش بدهیم. برای این کار در بخش استایل اندازه عرض و ارتفاع تصویر را کاهش می دهیم. برای ایجاد یک تصویر آواتار عرض و ارتفاع 50 px مناسب می باشد.

بنابراین در قسمت css  و استایل کد های زیر را می نویسیم:

.avatar {
  vertical-align: middle;
  width: 50px;
  height: 50px;
{

در بالا اندازه تصویر آواتار را به یک مربع 50 در 50 تبدیل کردیم و با کمک خصوصیت vertical-align بیان کردیم که تراز بندی عمودی یک عنصری را تنظیم می کند. مقادیری که vertical-align دریافت می کند را می توانید از اینجا مشاهده کنید.

خروجی کار تا به اینجا به صورت زیر خواهد بود:

ساخت تصویر آواتار با HTML & CSS

اندازه تصویر متناسب شد ولی از نظر ظاهری هنوز جای تغییر دارد. برای شکل دادن به آواتار و حالت دایره ای کردن آن از کد زیر استفاده می کنیم:

border-radius: 50%;

با این کار یک حالت دایره ای شکل به عکس ما داده می شود و ظاهر شکیل تری خواهد یافت. کد هایی که تا به اینجا استفاده کرده ایم را به طور کامل در کادر زیر قرار می دهیم :

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.avatar {
  vertical-align: middle;
  width: 50px;
  height: 50px;
  border-radius: 50%;
}
</style>
</head>
<body>
<h2>TuTsxEn AcaDemy</h2>
<img src="favicon-tutsxen-Red.png" alt="Avatar" class="avatar">
</body>
</html>

می توانیم برای زیبا تر شدن کار از خصوصیت hover در css استفاده کنیم تا با قرار گرفتن موس بر روی آواتار خصوصیت های transition و transform که در ادامه به عکس می دهیم اعمال بشود.

ساخت تصویر آواتار با HTML & CSS
ساخت تصویر آواتار با HTML & CSS

در تصویر بالا عکس وسطی با قرار گرفتن موس بر رویش بزرگتر می شود و حالت زیباتری به عکس آواتار ما می دهد. قابلیت های transition و transform را بعدا به طور کاملتری بررسی خواهیم کرد.

تمامی کد ها :

کد های کامل این آواتار ها به صورت زیر خواهد بود:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.avatar {
  vertical-align: middle;
  width: 50px;
  height: 50px;
  border-radius: 50%;
}
.avatar:hover {
transition: all 1s linear;
transform: scale(1.2);
}
</style>
</head>
<body>
<h2>TuTsxEn AcaDemy</h2>
<img src="favicon-tutsxen-Red.png" alt="Avatar" class="avatar">
<img src="avatar-img.png" alt="Avatar" class="avatar">
<img src="favicon-tutsxen.png" alt="Avatar" class="avatar">
</body>
</html>

به پایان آموزش “ساخت تصویر آواتار با HTML & CSS” رسیدیم. امیدواریم مورد پسند شما قرار گرفته باشد. نظرات خود را با ما در کامنت ها مطرح کنید.