پروژه تصویرسازی با استفاده از CSS

با اضافه کردن بیستمین طرح به پروژه single div CSS illustration یا تصویرسازی با استفاده از CSS و یک عنصر HTML تصمیم گرفتم کمی در مورد این پروژه بنویسم.

می‌توانید پیش‌نمایش پروژه را که با استفاده از github pages ساخته شده در این لینک ببینید، همچنین برخی از طرح‌ها بصورت جدا در CodePen نیز منتشر شده‌اند و در این collection قابل مشاهده هستند.

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

قبل از اینکه به single div CSS illustration بپردازیم باید بدانید CSS illustration یا تصویر سازی با استفاده از CSS چیست؟

CSS drawing یا CSS illustration یعنی اینکه با استفاده از HTML و CSS تصویرسازی انجام دهید یا نقاشی بکشید، در این کارها از هیچ تصویری استفاده نمی‌شود و تنها با استفاده از CSS و HTML در ویرایشگر متن کدنویسی می‌شود. با جستجو می‌توانید موارد متعددی را پیدا کنید، برای نمونه می‌توانم به این تصویرسازی از Diana Smith اشاره کنم.

روش انجام کار خیلی پیچیده نیست، کافیست یک طرح پیچیده را بعنوان مجموعه‌ای از شکل‌های هندسی ساده‌‌ در نظر بگیرید، سپس این شکل‌های ساده را با استفاده از HTML و CSS رسم نموده و با استفاده از ویژگی position به گونه‌ای در صفحه قرار دهید که طرح نهایی را ایجاد کند، همچنین برای طرح‌های پیچیده‌تر لازم هست از ویژگی‌های پیشرفته تر CSS نظیر clip-path ،mask-image و transform استفاده کنید.

ایده پروژه single div CSS از کجا آمده است؟

همیشه کارهایی تحت عنوان single div CSS را در CodePen می‌دیدم، در این کارها برای تصویرسازی از CSS و فقط یک عنصر HTML استفاده می‌شود. با توجه به اینکه خودم با استفاده از CSS تصویرسازی‌هایی انجام داده بودم، می‌دانستم انجام همچین کارهایی خیلی ساده نیست و کنجکاو بودم روش کار را یاد بگیرم بنابراین تصمیم گرفتم اطلاعات بیشتری در مورد نحوه انجام تصویرسازی با استفاده از یک عنصر HTML بدست آورم.

بعد از جستجو به مقاله‌ای با عنوان Single Div Drawings with CSS برخوردم و اطلاعاتی در خصوص روش انجام کار بدست آوردم ولی نکته مهم‌تر آشنایی با نویسنده مقاله Lynn Fisher بوده است. Lynn Fisher در طول یک دهه تصویرسازی‌ها و طرح‌های زیادی را با استفاده از یک عنصر HTML و CSS انجام داده و تحت عنوان پروژه‌ای به نام single-div CSS بروی گیت‌هاب منتشر کرده است.

بعد از دیدن پروژه single-div CSS تصمیم گرفتم پروژه‌ای مشابه را شروع کنم تا فرصتی برای یادگیری عمیق‌تر CSS داشته باشم و همچنین فعالیتم در Github و CodePen را افزایش دهم.

نحوه انجام تصویرسازی با استفاده از CSS و یک عنصر HTML

اساس تصویرسازی با استفاده از یک عنصر HTML استفاده از ویژگی background در CSS است. ویژگی background این قابلیت را دارد که تعداد متعددی مقدار دریافت کند در واقع شما می‌توانید تعداد نامحدودی background-image با اندازه‌ها و موقعیت‌های مختلف را به یک عنصر HTML اختصاص دهید.

همچنین این امکان وجود دارد که از linear-gradient، radial-gradient و conic-gradient بعنوان background-image استفاده کنید؛ با استفاده از ویژگی‌های نام برده شده می‌توانید بسیاری از شکل‌های پایه‌ای مثل مربع، مستعطیل، دایره، نیم‌دایره و مثلث را در سایز‌های مختلف ایجاد کنید و با ترکیب شکل‌های مختلف طرح‌های پیچیده‌ای را ایجاد کنید.

بعنوان مثال کدهای زیر را در نظر بگیرید:

  background: 
  /* مثلث */
  conic-gradient(from 45deg, transparent 25%, #e63946 25% 50%, transparent 50%) center / 200px 200px,
  /* دایره */
  radial-gradient(#f1faee 79px, transparent 80px) center / 160px 160px,
  /* مربع */
  linear-gradient(#457b9d, #457b9d) center / 200px 200px;
  background-repeat: no-repeat;

خروجی کد زیر سه شکل پایه‌ای مربع، دایره و مثلث خواهد بود که به ترتیب روی هم قرار می‌گیرند.

در کنار استفاده از background-image های متعدد، ویژگی‌هایی مانند box-shadow و mask-image هم در این روش بسیار کاربردی هستند. ترفند دیگر استفاده از عنصرهای مجازی (pseudo elements) است که کمک بزرگی هستند و در اکثر تصویرسازی‌ها از این عنصرها استفاده می‌شود.

چه چیزهایی از این پروژه آموختم

محدودیت در استفاده از عنصر HTML برای تصویرسازی باعث شد با ویژگی‌های جدیدی از CSS آشنا شوم و جزئیاتی در مورد ویژگی‌هایی که از قبل می‌دانستم یاد بگیرم؛ یکی از این موارد ویژگی‌های مرتبط با background بود همچنین استفاده زیاد از توابع مربوط به گرادیانت (gradient) باعث یادگیری عمیق‌تر این توابع شد.

برای اولین بار از mask-image و ویژگی‌های مرتبط مانند mask-size و mask-position استفاده کردم و در خصوص تفاوت mask-image و clip-path اطلاعات جدیدی به دست آوردم.

بعد از اینکه به دلیل محدودیت‌های استفاده از عنصر HTML با ویژگی z-index به مشکل برخوردم مقاله‌ای با عنوان What No One Told You About Z-Index پیدا کردم و با مفاهیمی مانند Stacking Order و Stacking Contexts آشنا شدم که برایم جدید بود و به حل مشکلی که داشتم کمک کرد.

در نهایت با بررسی تصویرسازی‌های مختلفی که به روش single div ساخته شده بودند، روشی جالب برای ساخت pixel art با استفاده از ویژگی box-shadow یاد گرفتم و توانستم با استفاده از CSS animation شکلی که ساختم را متحرک کنم.

جمع بندی

تصویر سازی با استفاده از CSS کمک کرد خیلی از مفاهیم مهم CSS را به خوبی درک کنم و یاد بگیرم، پروژه single div CSS illustration و ایجاد محدودیت برای عنصرهای HTML هم باعث ایجاد نگرش جدیدی شد و کمترین دست‌آوردش یک پروژه ساده است که فکر می‌کنم نشان دهنده توانایی‌ام در CSS باشه. پیشنهاد می‌کنم حتما برای یک بار هم که شده سعی کنید با استفاده از CSS یک تصویرسازی انجام دهید، مطمئن باشید نتیجه خوبی خواهد داشت.