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

384

0

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

این پست بخشی از مسیر متخصص CSS است. اگر به این مسیر علاقه مندید اینجا کلیک کنید.

این پست بخشی از مسیر متخصص HTML است. اگر به این مسیر علاقه مندید اینجا کلیک کنید.

در آموزش امروز قصد داریم تا نحوه ایجاد تصاویر آواتاری که در سایت ها مشاهده می کنید را بررسی کنیم. در انتهای آموزش شما خواهید توانست یک تصویر آواتار همانند زیر ایجاد کنید. پس تا انتها همراه آموزش “ساخت تصویر آواتار با 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” رسیدیم. امیدواریم مورد پسند شما قرار گرفته باشد. نظرات خود را با ما در کامنت ها مطرح کنید.

مهندس محسن صادق نژاد

دبیر | مهندس نرم افزار دانشگاه شهید رجایی

2سال در کنار تاتژن

اشتراک
اطلاع از
guest
0 Comments
Inline Feedbacks
View all comments