آموزش نقاشی با HTML و CSS


نویسنده : عرفان مولا
موضوع : طراحی وب
زمان انتشار : ۳ ماه پیش

خب سلام، امیدوارم که حالتون خوب باشه و اینجور داستانا، یسری از بچه‌ها اشاره کردند که فردا روز جهانی طراحی‌وب هست (الان که این رو منتشر می‌کنم، دیروز بود و گذشته)، به [...]
آموزش نقاشی با HTML و CSS

خب سلام، امیدوارم که حالتون خوب باشه و اینجور داستانا، یسری از بچه‌ها اشاره کردند که فردا روز جهانی طراحی‌وب هست (الان که این رو منتشر می‌کنم، دیروز بود و گذشته)، به مناسبت همین موضوع تصمیم گرفتم یه آموزشی بسازم که بتونیم با استفاده از HTML و CSS که به طراحی وب مربوط میشه، تصاویر متشکل از پیکسل‌ های زیاد خلق کنیم و کنار همدیگه بچینیم و یه تصویر درست و حسابی بتونیم تحویل بگیریم

تک به تک پیکسل‌ها آبجکت های HTML هستند و می‌تونیم به هر مدلی که دلمون میخواد انگولکشون کنیم (:

توی ویدیو از مکانیزم عکس های پیکسلی صحبت می‌کنیم و بعدش پیکسل به پیکسل میخونیم و رنگ‌هارو درمیاریم و از شیفت کردن باینری و گرفتن RGB و … تا اینکه در نهایت یک نقاشی رو بصورت کامل با HTML و CSS ترسیم می‌کنیم و یکسری چیز های دیگه که یادم نیست

ویدیو رو می‌تونید توی زیر ببینید، یکسری توضیحات هم پایین ویدیو میدم :

اسکریپت کوتاهی هم که نوشتیم، همراه با نقاشی خوشگل ادوارد مونک، از طریق این لینک گیت‌هاب قابل دسترس هستش و می‌تونید دانلود کنید و تغییرات/بهبودات خودتون رو اعمال کنید روش و درصورت لزوم می‌تونید Pull Request هم بزنید

ولی واقعا هدف چیه ؟ منطقی هست که هیچ آدم عاقلی نمیاد از HTML و CSS برای نقاشی استفاده کنه، شاید یه تلاش بی‌خود باشه، درست مثل تمرین مسابقه دو با کفش های پاشنه‌بلند، تا زمانی که فرمت های درست و حسابی encode و decode کردن media از جمله تصویر هست و Image Viewer های مرسوم هستند، نیازی به این‌کارها نیست، ولی خب ایده اینه که چیز یاد بگیریم و یکسری کار هایی با وب بکنیم که برای این‌کار ساخته نشده، درست مثل وصل کردن یه پنکه‌سقفی به پراید و بعدش فاز گرفتن و استفاده بعنوان هلی‌کوپتر (:

در کل می‌تونه تجربه خوبی برای شروع درک مفاهیم پیکسل‌ها در تصویر و … باشه و برای دوستان علاقه‌مند به حوزه می‌تونه شروعی باشه که تکنیک های بهینه‌سازی (encode)‌ تصاویر خودشون رو توسعه بدند یا حتی درکی باشه برای دوستان از کیفیت تصاویر بر اساس پیکسل که شروع کنند تکنیک های anti-aliasing خودشون رو توسعه بدند و غیره و غیره (:

در کل زیاد نوشتم، عادت ندارم برای مطالب ویدیوی اینقدر بنویسم ولی خب چاره‌ای نیست، ویدیو رو زدم آپلود بشه و با این سرعت اینترنت فعلی طول می‌کشه و از روی بیکاری ناچار میشم بنویسم

بهرحال امیدوارم که مفید باشه و اینجور حرفا

موفق باشید

آیا مقاله برای شما مفید بود ؟

خیر

0

تقریبا

0

بله

1

برای ثبت نظر باید وارد حساب کاربری خود شوید
رای شما با موفقیت ثبت شد
متاسفانه خطایی در ثبت نظر رخ داد

Iran Developers Telegram Group

نظرات کاربران


Mimvhd

Mimvhd

فقط اونجا که گفتی "وصل کردن یه پنکه‌سقفی به پراید و بعدش فاز گرفتن و استفاده بعنوان هلی‌کوپتر"
👍😂

برای پاسخ دادن باید وارد شوید

نکات ارسال نظرات

نظرات فینگلیش به هیچ عنوان تایید نخواهند شد

هنگام نوشتن نام و ایمیل معتبر خود را وارد نمایید

در دیدگاه هایتان از الفاظ مناسب استفاده کنید

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *