ساخت تصویر انیمیشنی با استفاده از CSS

ساخت تصویر انیمیشنی با استفاده از CSS

ساختن تصاویر با استفاده از css یک راه سرگم کننده برای تمرین و به چالش کشیدن مهارت‌های خود میباشد. این کار میتواند مانند یک استراحت برای بیرون آمدن از این فضای روزمره تحت وب باشد. تمام چیزی که برای اجرای این کار نیاز دارید یک صفحه خالی و نوشتن چند خط کد css است!

بهتر است قبل از شروع به چند نکته مهم که اساتید css به آن اشاره داشته اند بپردازیم.

طرح را ساده ببینید!

وقتی میخواهید یک اثر هنری با css درست کنید، بهتر است به چند تصویر به عنوان مرجع نگاه کنید و از آنها ایده بگیرید. حالا کافیست آن اشکال را به شکل ساده‌ای ببینید و بخواهید آنها را با اشکال اولیه ای که در css وجود دارد بسازید.

از بک‌گراند روشن استفاده کنید

وقتی که در طراحی خود از چند شکل همرنگ استفاده میکنید و این شکلها با هم تداخل یا به اصطلاح overlapping داشته باشند دیگر برای‌تان مشکل میشود که ببینید این شکلها دقیقا در کجا جای گرفته اند و یا چطور به نظر میرسند. برای حل این مشکل بهتر است از بک‌گراندهایی با تصاویر و یا رنگهای روشن و شاد استفاده کنید.

استفاده از واحدهای نسبی

همیشه به یاد داشته باشید که برای طراحی در فضای وب نباید از واحدهای ثابت و یکسان استفاده کرد.

فرض کنید تمام عناصر صفحه خود را با PX مقدار دهی کرده‌اید و کاربری بخواهد به هر دلیلی سایز صفحه خود را تغییر دهد. اما همیشه یک عنصر که 20px اندازه داشته تا ابد همین مقدار میماند که این باعث عدم انعطاف پذیری عناصر در سایزها و دیوایس‌های مختلف است. پس بهتر است از واحدهای نسی استفاده کنید.

اما شاید با خود بگویید از چه واحد نسبی استفاده کنیم. جواب بسیاری از طراحان با تجربه css به شما، واحد rem میباشد. در این واحد تمامی اندازه‌ها بر اساس ریشه اصلی صفحه یعنی سند html مقیاس بندی میشود و این مقدار برای همه مرورگرها به طور پیش فرض برابر با 16pxاست. به بیان دیگر هر 1rem برابر با 16px است.

خب. حالا اگر آماده هستید به سراغ طراحی یک تصویر متحرک با استفاده از css برویم.

 

1. با یک container شروع کنید

بهتر است برای نگه‌داشتن و مدیریت کردن اشکال مختلف طرحه خود، آنها را در یک div که معمولا container نام گذاری میشود، قرار دهیم. با اینکار ما میتوانیم هرسه قسمت طرح خود را، یعنی بالونها، قسمت سر و قسمت بدن را در یک div نگهداری کنیم.


 
 
 
 

به طور معمول باید برای container مقدار position: relative در نظر بگیریم تا دیگر عناصری که درون این container قرار دارند، نسبت به آن در جای مناسبی قرار بگیرند.برای این منظور کافیست به عناصری که درون container هستند مقدار position: absolute بدیهم و یک ارتفاع و عرض مناسب برایشان تعریف کنیم. در غیر اینصورت تعیین محل جایگیری عناصر داخل container یا همان عناصر فرزند، کار سخت و مشکلی میشود.

در استایل‌های خود، رنگ‌های اصلی خود را بر اساس متغیرهای Sassبه کار ببرید تا قابلیت استفاده مجدد داشته باشد. فانکشن‌های ()lighten و ()darken در Sass ، رنگها و سایه‌هایی ایجاد میکند که میتواند به عنوان نقاط روشن یا تیره کاراکتر شما استفاده شود.

2. استایل دهی به قسمت head

در این طرح، قسمت head مانند یک نقطه مرکزی زیبایی میسازد. برای ساخت کله‌ی طرح خود، ما نیاز داریم تا یک <div> داخل بخش haed خود ایجاد کنیم و به آن div عرض و ارتفاع و رنگ زمینه بدهیم. خب حالا بهتر است شکل div خود را بیشتر به صورت کله ک گربه نزدیک کنیم. یکی از رایج‌ترین شیوه ها استفاده از خاصیت border-radius در css است. با این خاصیت میتوانید مقادیر بردار x و y طرح خود را خمیده کنید و همانطور ک گفتیم بهتر است از واحد rem استفاده کنید.

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

.face {
	border-top-left-radius: 50% 4.5rem;
	border-top-right-radius: 50% 4.5rem;
	border-bottom-left-radius: 50% 3rem;
	border-bottom-right-radius: 50% 3rem;
	...
}

بعد از اینکه با استفاده از border-radius کله‌ی کاراکتر خود را ساختیم حالا نوبت به عناصر فرزند بخش head میرسد که شمامل اجزای صورت آن مانند بینی، گونه، دهان و چشم میباشد.

3. طراحی بدن کاراکتر

حالا نوبت به طراحی بدن کاراکتر رسیده. فراموش نکنید که همچون گذشته ابتدا یک div برای این قسمت بسازید. باید به خوبی با استفاده از همان تکنیک border-radius به ساخت بدن و اعضای آن مانند بازوها، پاها و دم بپردازیم. اگر به طرح دقت کنید خطهایی را میبینید که روی پشت بدن این گربه وجود دارد که گویی در جایی از بدن بریده شده‌اند. برای اینکار باید از دستور overflow: hidden استفاده کنید.

اگر میخواهید عمق بیشتری به بدن بدهید میتوانید از خاصیت ()transform: skew استفاده کنید.

و اما نوبت میرسد به دم! برای اطراحی دم این گربه که به شکل پیچ و تاب خورده میباشد، کافیست همانطور که اشاره کردیم طرح را ساده بینید! حالا با کمی دقت میتوان گفت که برای طراحی این دم میتوان از سه مستطیل جداگانه استفاده کرد که هر کدام از این مستطیلها را میتوان با استفاده از چرخاندن و مقداردهی پوزیشن، در بالای همدیگر قرار داد.

برای دیده شدن بهتر پاها و بازوها، از رنگهای اصلی ولی تیره‌تر استفاده کنید.

4. اضافه کردن بادکنک‌ها

برای بادکنکها باید چند div بسازید که از یک استایل مشترک استفاده میکنند و تنها تفاوتشان در چندمین فرزند عنصر بودن است. به کدهای زیر توجه کنید:

.string {
	height: 1rem;
	width: 9rem;
	border-right: solid 1px $white;
	border-left: solid 1px $white;
	border-bottom: solid 1px $white;
border-bottom-left-radius: 50% 1rem; 
border-bottom-right-radius: 50% 1rem;
}

5.متحرک کردن طرح

ما میتوانیم با استفاده از keyframes@ مقداری حرکت و زندگی به کاراکتر خود ببخشیم. بازو، پاها، گوشها و دم میتواند با کمی ()transform: rotate به حرکت در بیایند.

@mixin animateRotate($name, $start, $end) {
@keyframes #{$name} {
		0%, 100% { transform: rotate(#{$start}deg) }
		50% { transform: rotate(#{$end}deg) }
	}
}

در نهایت با یک خاصیت ()transform: translateY که مقدار آن برای مثال روی 5ثانیه تنظیم شده، میتوان مقداری حرکت به کاراکتر خود بدهیم.

اگر میخواهید کمی واقعی‌تر به نظر بیاید به چشمهای طرح خود قابلیت باز و بسته شدن بدهید. این قابلیت با اضافه کردن خاصیت (transform: scaleY(0.1 به چشمها امکان پذیر است.

امیدواریم از این مطلب لذت برده باشید و در طرح های خود از آن استفاده کنید.

منبع: creativebloq

کد خبر: 2764 | 15:15، 1398-06-30 نسخه چاپی ارسال به