ساخت تصویر آواتار با 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 به این کلاس استایل بدهیم.
خروجی بدون استایل :
خروجی بدون استایل به صورت زیر خواهد بود:
از نظر اندازه و شکل ظاهری اصلا شبیه به آواتار نیست ولی با کمک استایل های موجود در css که در ادامه به بررسی آنها می پردازیم اقدام به تغییر دادن ظاهر آواتار می کنیم.
در وهله‌ی اول باید سایز تصویر را متناسب با سایز تصویر یک آواتار کاهش بدهیم. برای این کار در بخش استایل اندازه عرض و ارتفاع تصویر را کاهش می دهیم. برای ایجاد یک تصویر آواتار عرض و ارتفاع 50 px مناسب می باشد.
بنابراین در قسمت css و استایل کد های زیر را می نویسیم:
.avatar {
vertical-align: middle;
width: 50px;
height: 50px;
{
در بالا اندازه تصویر آواتار را به یک مربع 50 در 50 تبدیل کردیم و با کمک خصوصیت vertical-align بیان کردیم که تراز بندی عمودی یک عنصری را تنظیم می کند. مقادیری که vertical-align دریافت می کند را می توانید از اینجا مشاهده کنید.
خروجی کار تا به اینجا به صورت زیر خواهد بود:
اندازه تصویر متناسب شد ولی از نظر ظاهری هنوز جای تغییر دارد. برای شکل دادن به آواتار و حالت دایره ای کردن آن از کد زیر استفاده می کنیم:
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 که در ادامه به عکس می دهیم اعمال بشود.
در تصویر بالا عکس وسطی با قرار گرفتن موس بر رویش بزرگتر می شود و حالت زیباتری به عکس آواتار ما می دهد. قابلیت های 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” رسیدیم. امیدواریم مورد پسند شما قرار گرفته باشد. نظرات خود را با ما در کامنت ها مطرح کنید.
مهندس محسن صادق نژاد
دبیر | مهندس نرم افزار دانشگاه شهید رجایی