توی این پست می‌خوام چند وب‌سایت رو بهتون معرفی کنم تا بتونید ازشون برای طراحی‌هاتون ایده بگیرید.

مثلاً اگه برای طراحی یک دکمه یا بخش خاصی از سایتتون ایده‌ای ندارید و دنبال الهام گرفتن هستید، این سایت‌ها برای پیدا کردن ایده‌های جذاب، عالی هستن:

سایت اول: Behance.net
پلتفرم متعلق به شرکت ادوبی که می‌تونید توش پروژه‌های کامل و نمونه‌کارهای حرفه‌ای طراحان سراسر جهان رو با جزئیات دقیق بررسی کنید.

سایت دوم: Dribbble.com
بهترین مرجع برای دیدن طرح‌های بصری و رابط کاربری (UI). اگر دنبال ایده‌های سریع و جذاب برای ترکیب رنگ، فرم‌ها و دکمه‌ها هستید، اینجا بی‌نظیره.

سایت سوم: Awwwards.com
جایی برای دیدن سایت‌های برنده جایزه! اگر می‌خواید طراحی‌های خلاقانه، ترندهای روز و انیمیشن‌های متفاوت وب رو ببینید، حتماً به این سایت سر بزنید.

سایت چهارم: ThemeForest.net
با اینکه یک فروشگاه قالب وب‌سایت محسوب میشه، اما معدن ایده‌های کاربردیه. می‌تونید با دیدن دموی قالب‌های پرفروش، ساختار استاندارد و چیدمان اصولی سایت‌ها رو یاد بگیرید.

سایت پنجم: Mobbin.com
یک آرشیو فوق‌العاده از اسکرین‌شاتِ اپلیکیشن‌های واقعی و موفق دنیا. برای ایده گرفتن در زمینه تجربه کاربری (UX) و مسیرهای کاربری (User Flow) بهترین انتخابه.

< @awat_dev />

آچار فرانسه ریسپانسیو در CSS؛ آشنایی با ویژگی aspect-ratio

تا حالا براتون پیش اومده که بخواهید یک تصویر، ویدیو یا ظرف (Container) همیشه یک نسبت ابعاد مشخص (مثل مربع ۱:۱ یا مستطیل ۱۶:۹) رو حفظ کنه، حتی وقتی اندازه صفحه نمایش تغییر میکنه؟

قبل از این که ویژگی aspect-ratio به CSS اضافه بشه، طراحان وب مجبور بودند از ترفندهای عجیبی مثل تکنیک "Padding-bottom hack" (دادن پدینگ درصدی بر اساس عرض) استفاده کنند که کدها رو پیچیده و خواندنشون رو سخت می‌کرد. اما خوشبختانه امروزه با این ویژگی مدرن، کار بسیار راحت‌تر شده است.



چرا باید از aspect-ratio استفاده کنیم؟

جلوگیری از پرش محتوا (CLS): وقتی تصاویر یا ویدیوها لود میشن، فضای خالی خودشون رو از قبل رزوم می‌کنن و صفحه ناگهان به هم نمیریزه.
کدنویسی تمیز و کوتاه: نیازی به محاسبات پیچیده ریاضی یا کدهای اضافی نیست.* ریسپانسیو خودکار: به راحتی با تغییر سایز مرورگر، ابعاد عنصر متناسب با نسبت تعیین‌شده تغییر میکنه.

نحوه استفاده و مثال‌های کاربردی

نحوه‌ی نوشتن این ویژگی بسیار ساده است. شما فقط کافیه نسبت عرض به ارتفاع رو به شکل عرض / ارتفاع جلوی آن بنویسید:

.square-box {
  width: 100%;
  aspect-ratio: 1 / 1;
}


.video-container {
  width: 100%;
  aspect-ratio: 16 / 9;
}


.hero-banner {
  width: 100%;
  aspect-ratio: 21 / 9;
}

نکته حرفه‌ای:
شما حتی میتونید مقادیر رو به صورت اعشاری هم وارد کنید؛ مثلاً aspect-ratio: 1.5 دقیقا همان کارکرد aspect-ratio: 3 / 2 رو داره. همچنین ترکیب این ویژگی با object-fit: cover روی تصاویر باعث میشه عکس‌ها بدون به هم خوردن دفرمه شدن، به زیبایی درون قاب خودشان جای بگیرند.

پس همیشه برای اینکه نشون بدی موفقی به ظاهر فقط توجه نکن

🎨 ساخت شکل‌های جذاب با CSS و Clip-Path!
تا حالا خواستی یک عکس یا المان رو به شکل مثلث، ستاره، چندضلعی یا حتی شکل‌های خاص نمایش بدی؟ 🤩

اینجاست که clip-path وارد میشه!
🔹 با clip-path می‌تونیم قسمت مشخصی از یک عنصر رو نمایش بدیم و بقیه قسمت‌ها رو برش بزنیم.
مثلاً:

.box {
  width: 200px;
  height: 200px;
  background: dodgerblue;

  clip-path: polygon(
    50% 0%,
    100% 100%,
    0% 100%
  );
}

📌 کد بالا یک عنصر مربعی رو به شکل مثلث درمیاره. 🔺
چند مقدار پرکاربرد:
🔸 circle() → دایره

🔸 ellipse() → بیضی

🔸 polygon() → چندضلعی

🔸 inset() → برش از داخل
💡 نکته: clip-path برای طراحی کارت‌ها، تصاویر، بنرها و افکت‌های مدرن سایت خیلی کاربردیه.


@awat_dev

این SCSS دقیقا چیه

اس‌سی‌اس‌اس یه روش بهتر برای نوشتن کدهای سی‌اس‌اسه.

باهاش می‌تونیم:

▫️ از متغیرها استفاده کنیم
▫️ کدهامون رو مرتب‌تر بنویسیم
▫️ کدهای تکراری رو کمتر کنیم
▫️ استایل‌ها رو راحت‌تر مدیریت کنیم

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

💡 خلاصه:
اس‌سی‌اس‌اس باعث میشه نوشتن و مدیریت کدهای سی‌اس‌اس راحت‌تر و حرفه‌ای‌تر بشه،ولی الان دیگه اونقدر ها استفاده ای نداره ، چون روز به روز css داره فیچر های SCSS رو به خودش اضافه می‌کنه

دوستان اکانت جمنای پرو به فروش می‌رسد با قیمت 500 هزار تومان اگر تمایل به خرید داشتید به دایرکت پیام بدید

فروش اکانت جمنای پرو

@awat_admin
دایرکت☝🏽

‏آیا میدانستید؟ 🗿

‏"()document.write"

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

‏باهاش خیلی ساده می‌تونستی یه متن رو مستقیم بندازی توی صفحه:‏

document.write("Hello World");

‏امروزه دیگه تقریباً کسی ازش استفاده نمی‌کنه و بیشتر یه یادگاری از روزای قدیم وب محسوب میشه

#فسیل


@awat_dev

رفقا این نمونه فرم log in برای تمرین html CSS خیلی مناسبه

@awat_dev

تصویر بک گراند فرم

@awat_dev

از این چالش ها برگزار کنیم شما انجام بدین؟؟

سری دوم معرفی تگ ها