50 الگو و پترن طراحی شده فقط با CSS بدون استفاده از JavaScript (کد آماده)

رسانیکامنبع: https://rasanika.com

توی این پست می خوام یه کالکشن از 50 الگوی مختلف و منحصر به فرد CSS قرار بدم. همه الگو ها با CSS ساخته شدند و بدون JavaScript هستند.

همه الگو ها تقریبا چنین ساختاری دارند:

html {
  --s: 50px; /* تغییر سایز */
  --c1: red; /* تغییر رنگ یک */
  --c2: blue; /* تغییر رنگ دو */

  /* کد الگو... */
}

هر الگو رو داخل کدباکس قرار دادم که اگر خواستید بتونید کد هاش رو به راحتی کپی و استفاده کنید:

امیدوارم این الگو ها به دردتون خورده باشه. همچنین مقالات و ویدیو های بیشتری هم می تونید راجع به 👈 CSS در رسانیکا ببینید.