Html and Css & Jsآموزش

این یه تکنیک جالب برای استفاده از box-shadow در CSS هست!

🎨 تکنیک لایه‌بندی Box Shadow
؛box-shadow در CSS می‌تونه لایه‌بندی بشه! یعنی می‌تونی چندین سایه روی هم قرار بدی تا جلوه‌های زیباتری بسازی.

چرا این تکنیک باحاله؟
• سایه واقعی‌تر - با لایه‌های مختلف
• مرز مجازی - بدون استفاده از border
• انعطاف‌پذیری - کنترل کامل روی ظاهر

📝 مثال کد

.box {
  width: 200px;
  height: 100px;
  background: #3498db;
  border-radius: 10px;
  
  /* لایه ۱: سایه اصلی */
  box-shadow: 
    0 4px 8px rgba(0, 0, 0, 0.2);
  
  /* لایه ۲: سایه دوم (پخش بیشتر) */
  box-shadow: 
    0 4px 8px rgba(0, 0, 0, 0.2),
    0 8px 16px rgba(0, 0, 0, 0.1);
  
  /* لایه ۳: مرز مجازی */
  box-shadow: 
    0 4px 8px rgba(0, 0, 0, 0.2),
    0 8px 16px rgba(0, 0, 0, 0.1),
    0 0 0 2px rgba(255, 255, 255, 0.5);
}

🔍 توضیح لایه‌ها
لایه ۱: سایه اصلی

0 4px 8px rgba(0, 0, 0, 0.2)

• 0: افقی (بدون جابجایی)
• 4px: عمودی (پایین)
• 8px: پخش (blur)
• rgba(0, 0, 0, 0.2): رنگ مشکی با شفافیت ۲۰%

لایه ۲: سایه دوم

0 8px 16px rgba(0, 0, 0, 0.1)

• پخش بیشتر برای عمق بیشتر
• شفافیت کمتر برای نرم‌تر شدن

لایه ۳: مرز مجازی

0 0 0 2px rgba(255, 255, 255, 0.5)

• 0 0 0: بدون جابجایی و blur
• 2px: ضخامت مرز
• rgba(255, 255, 255, 0.5): رنگ سفید با شفافیت ۵۰%

🎯 کاربردهای این تکنیک
۱. کارت‌های طراحی

.card {
  box-shadow: 
    0 2px 4px rgba(0, 0, 0, 0.1),
    0 4px 8px rgba(0, 0, 0, 0.1),
    0 0 0 1px rgba(0, 0, 0, 0.05);
}

۲. دکمه‌های سه‌بعدی

.button {
  box-shadow: 
    0 2px 4px rgba(0, 0, 0, 0.2),
    0 4px 8px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

۳. کادر با مرز نرم

.container {
  box-shadow: 
    0 0 0 1px rgba(0, 0, 0, 0.1),
    0 4px 8px rgba(0, 0, 0, 0.1);
}

✅ مزایا :
• کنترل کامل روی ظاهر
• بدون اضافه کردن عناصر اضافی
• سازگاری بالا با مرورگرها

⚠️ ملاحظات
• بیشتر از ۳-۴ لایه ممکنه کند بشه
• موبایل - ممکنه تاثیر روی performance داشته باشه
• تست در مرورگرهای مختلف

🎨 ایده‌های خلاقانه
۱. سایه رنگی

.box {
  box-shadow: 
    0 0 0 2px #3498db,
    0 4px 8px rgba(52, 152, 219, 0.3);
}

۲. سایه چند رنگ

.box {
  box-shadow: 
    0 0 0 2px #e74c3c,
    0 0 0 4px #3498db,
    0 4px 8px rgba(0, 0, 0, 0.2);
}

۳. سایه داخلی (inset)

.box {
  box-shadow: 
    inset 0 2px 4px rgba(0, 0, 0, 0.1),
    0 2px 4px rgba(0, 0, 0, 0.1);
}

🔗 منابع بیشتر برای یادگیری
• MDN: box-shadow
• CSS-Tricks: Box Shadow
• CodePen: جستجوی "layered box shadow"


💎 @Htmlcss_channels | #HTML #css #JavaScript

🔰 Using box shadow in a way you might not have expected


توضیحات و کدها رو توی پست بعدی ببینید 👇👇

💎 @Htmlcss_channels | #HTML #css #JavaScript

🎨 سایت‌های طراحی برای الهام گرفتن
این سایت‌ها برای هر بخش از طراحی UI/UX منابع عالی هستن:

🌐 طراحی وب
• Curated Design → curated.design
• Landing Pages → landing.love
• SaaS Websites → saaspo.com

🧩 کامپوننت‌ها
• Navbar → navbar.gallery
• CTA Sections → cta.gallery
• Design Systems → component.gallery

📱 موبایل و برندینگ
• Mobile Apps → mobbin.com
• Brands → rebrand.gallery
• Icons → hugeicons.com

✨ انیمیشن
• Animation → appmotion.design



💎 @Htmlcss_channels | #HTML #css #JavaScript

JavaScript: The Definitive Guide

✨ یه مرجع کامل برای یادگیری جاوااسکریپت که با‌مثال‌و تمرین و توضیحات دقیق هر مفهوم، یادگیری رو برای علاقه‌مندان راحت‌تر کرده


💎 @Htmlcss_channels  | #HTML #css #JavaScript

JavaScript: The Definitive Guide: Master the World's Most-Used Programming Language
Book by David Flanagan


💎 @Htmlcss_channels | #HTML #css #JavaScript

🎬 ابزار html-video - ساخت ویدیو با HTML، CSS و JavaScript

یه ابزار جالب که بهت اجازه می‌ده فقط با توضیح متنی، یه فایل MP4 بسازی. ابزار یه ایجنت هوش مصنوعی روی سیستم خودت اجرا می‌کنه که کد HTML/CSS/JS تولید می‌کنه و ویدیو رو می‌سازه.

✨ نحوه کار
👈فقط توضیح بدی چه ویدیویی می‌خوای
• مثلاً: "یه ویدیوی تبلیغاتی با متن سفید روی پس‌زمینه آبی"
👈 تولید کد
ایجنت هوش مصنوعی کد HTML/CSS/JS تولید می‌کنه
صحنه‌ها، متن‌ها، انیمیشن‌ها و ترنزیشن‌ها رو تعریف می‌کنه

👈 رندر و تبدیل به MP4

• کاملاً رایگان
• بدون نیاز به حساب کاربری
• اجرا روی سیستم خودت
• بدون نیاز به اینترنت
• حفظ حریم خصوصی
• کاملاً متن‌باز


🔗 لینک دسترسی
وب‌سایت رسمی:
https://open-design.ai/html-video


💎 @Htmlcss_channels | #HTML #css #JavaScript

‏یه ابزار باحال آنلاین پیدا کردم: یه عکس می‌دی بهش، بهت گرادینت میده با کلی تنظیمات.
برای وقتایی که دنبال یه بک‌گراند یا پلت رنگی هماهنگ با یه تصویری، عالیه.

تو مرورگر کار می‌کنه و رایگانه

photogradient.com‎


💎 @Htmlcss_channels | #HTML #css #JavaScript

# کتاب "Responsive Web Design with HTML5 and CSS"

📌 یه راهنمای عملی و جامع برای طراحی وب‌سایت‌های ریسپانسیو با استفاده از HTML5 و CSS3

📌مثال‌های کاربردی و پروژه‌ محور داره



💎 @Htmlcss_channels  | #HTML #css #JavaScript

Responsive Web Design with HTML5 and CSS: Develop Future-proof Responsive Websites Using the Latest HTML5 and CSS Techniques
Book by Ben Frain



💎 @Htmlcss_channels | #HTML #css #JavaScript

#فیگما یک اکستنشن مرورگر کروم معرفی کرده که یک سایت رو باز میکنید
میزنید روی کپی
میرید داخل فیگما Past میکنید
تمام، الان یک سایت قابل ادیت دارید

پ.ن: الان میشه کار مشتری هایی که یک کپی دیجی کالا و اسنپ رو میخوان سریع راه انداخت

پ.ن:‌ نسخه آزمایشیش برای پلن های پرو به بالا کار میکنه نه رایگان

https://chromewebstore.google.com/detail/figma/fkmaohpngenfoccdgceedjkfhkdcohmg


💎 @Htmlcss_channels | #HTML #css #JavaScript

🖥️ پروژه‌های تمرینی برای توسعه‌دهنده وب (با سورس کد)

۵۰ پروژه در ۵۰ روز

• تکنولوژی: HTML, CSS, JavaScript
• توضیح: ۵۰ پروژه کوچک برای تمرین روزانه
• سطح: مبتدی تا متوسط

فروشگاه اینترنتی با Django

• تکنولوژی: Python (Django)
• توضیح: ساخت فروشگاه کامل با لیست محصولات، سبد خرید و پرداخت
• سطح: متوسط
• ویژگی: یادگیری ادغام بک‌اند و فرانت‌اند

اپلیکیشن کوئیز جاوااسکریپت

• تکنولوژی: JavaScript (React)
• توضیح: اپلیکیشن کوئیز داینامیک با دریافت سوالات از API
• سطح: متوسط
• ویژگی: تقویت React و ادغام API

سیستم احراز هویت PHP

• تکنولوژی: PHP
• توضیح: سیستم احراز هویت و مدیریت کاربران
• سطح: متوسط
• ویژگی: CRUD و امنیت با PHP و MySQL

لیست کارهای (To-Do List)

• تکنولوژی: Ruby on Rails
• توضیح: اپلیکیشن مدیریت وظایف
• سطح: مبتدی تا متوسط
• ویژگی: اضافه، ویرایش و حذف وظایف

🚀 پیشنهاد شروع
1. مبتدی: شروع با ۵۰ پروژه در ۵۰ روز
2. متوسط: ادامه با فروشگاه Django یا کوئیز React
3. پیشرفته: سیستم احراز هویت PHP


💎 @Htmlcss_channels | #HTML #css #JavaScript