پوسترها از رایج ترین اشکال هنری هستند. احتمالاً در کودکی تعدادی از آنها را روی دیوار خود داشته اید. آنها طیف کاملی از افراد، مکان ها و رویدادها را پوشش می دهند.
آنها همچنین به عنوان یک منبع الهام برای طراحان وب عمل می کنند. استفاده آنها از رنگ و تایپوگرافی بخشی از نگاه ما به جهان است. ما می توانیم تأثیر آن را در سراسر وب ببینیم.
علاوه بر این، ما می‌توانیم تجربه را به صورت آنلاین بازسازی و ارتقا دهیم. چیزهای خوبی مانند جلوه های سه بعدی و انیمیشن پوسترها را زنده می کنند. یک عنصر تعاملی نیز وجود دارد. این می تواند به اندازه یک طرح بندی جسورانه قدرتمند باشد.
می خواستیم ببینیم طراحان چگونه از خلاقیت خود استفاده می کنند. بنابراین، ما آرشیو CodePen را برای هنر پوستر زیبا بررسی کردیم. در اینجا چند نمونه وجود دارد که از CSS، جاوا اسکریپت و سایر فناوری ها استفاده می کنند. لذت ببرید!
پوستر متحرک سه بعدی Furiosa CSS توسط Olivier 3lanc
در مورد پوستری صحبت کنید که پر از زندگی است! این رندر سه بعدی شخصیت های فیلم را در یک برش قرار می دهد. کل ارائه شبیه یک دیوراما است. همه چیز توسط CSS پشتیبانی می شود – هیچ جاوا اسکریپتی در چشم نیست.
پوستر متحرک سه بعدی Pen FURIOSA توسط Olivier 3lanc را ببینید
تکثیر و متحرک سازی پوستر زوریخ تونهاله توسط جان یابلونسکی
این قطعه بخشی از پروژه ای است که پوسترهای نمادین را بازسازی می کند. زیبایی اینجا در چیدمان مینیمال و تایپوگرافی جسورانه است. خطوط متحرک یک حس مدرن به این کلاسیک اضافه می کند.
به قلم زوریخ تونهاله (1955) نوشته جان یابلونسکی مراجعه کنید
تمرین پوستر شبکه CSS توسط ویکتوریا برگکوئیست
ترکیبی از Flexbox و CSS Grid به این مثال کمک می کند. تغییر شکل ها بدون این ابزارها تقریبا غیرممکن به نظر می رسد. پاشش رنگ شامل یک نتیجه قانع کننده است.
به تمرین 1 پوستر شبکه Pen CSS توسط ویکتوریا برگکوئیست مراجعه کنید
مجموعه پوستر Donkey Kong توسط دانیل فونتس
در اینجا یک ادای احترام جالب به گذشته است. گیمرها فوراً این سری از تصاویر را از Donkey Kong تشخیص خواهند داد. پوسترهای بازی های ویدیویی کلاسیک دارای ویژگی نورپردازی سرگرم کننده هستند. زنجیر را بکشید تا پوستر مورد علاقه خود را روشن کنید. امتیاز جایزه برای اثر سوسو زدن!
Pen Donkey Kong را ببینید – مجموعه پوستر کوچکی از دانیل فونتس
طراحی پوستر PPL MVR CSS & SVGتوسط کریستوفر ون سنت
پوسترهای گروهی موضوعی رایج در میان طراحان است. شاید به این دلیل است که بسیاری از ما آنها را روی دیوار خود داریم. این سکانس متحرک از آثار هنری چاپی الهام گرفته است. و این نمونه دیگری از توانایی های CSS است.
قلم PPL MVR توسط کریستوفر ون سنت را ببینید
طراحی پوستر گرادیان دوتون گرید توسط Cassie Evans
قدرت CSS Grid واقعی است. پوستر زیبا و پیچیده است. جالب تر از همه، این سبک ها از کمتر از 200 خط تشکیل شده است. کمی رمز و تخیل زیاد می تواند راه درازی را پیش ببرد.
پوستر Pen Grid اثر Cassie Evans را ببینید
پوستر گرانج با جلوه حرکت موج توسط ilithya
چه کسی می تواند در برابر حالات سبک قدیمی که از این پوستر می آید مقاومت کند؟ ظاهر دهه 1990 را به تصویر می کشد – با مثلث های بارانی. برای تغییر زاویه دید عکس، مکان نما را حرکت دهید. این یک تجربه دور از دسترس است، مطمئنا.
پوستر Pen Grunge توسط ilithya را ببینید
پوستر دیجیتال Matrix Resurrections توسط Sparklingman
مجموعه فیلم های ماتریکس با نوع متفاوتی از باران شناخته می شود. این پوستر دیجیتال ممکن است ساده به نظر برسد. با این حال، با کلیک بر روی آن، الگوی سبز و سیاه تغییر می کند. جلوه ظریف است – اما به زیبایی با زیبایی شناسی فیلم مطابقت دارد.
Pen The Matrix Resurrections | پوستر دیجیتال Sparklingman شماره 026 توسط Sparklingman
برداشتی جدید از یک هنر کلاسیک
نمونه‌های بالا حساسیت چاپ کلاسیک را با قابلیت‌های آنلاین ترکیب می‌کنند. این یک تمرین سرگرم کننده است که فراتر از چیزی است که روی دیوار شما آویزان است.
ممکن است پوسترها را ساده انگارانه بدانیم. اما آنها همچنین دنیایی از امکانات را برای طراحان باز می کنند. بنابراین، ما می توانیم از این الهام گرفته و با آن بدویم.
به عنوان مثال، پوسترها ممکن است به ما در بازنگری در طرح‌بندی سنتی وب کمک کنند. عناصری مانند متن عمودی و اشکال منحصر به فرد ظرف به ذهن خطور می کند. آنها می توانند به عنوان سکوی پرتاب ایده ها عمل کنند.
آیا می خواهید نمونه های بیشتری از هنر پوستر آنلاین را ببینید؟ مجموعه CodePen ما را بررسی کنید!
بالا
منبع: https://speckyboy.com/poster-art-css-javascript/