Html and Css & Jsآموزش

🔰 Some useful CSS shortcuts

💎 @Htmlcss_channels | #css #JavaScript

🔥3❤2

1.26K views09:25

💻 Responsive HTML Video با Orientation Media Query

💻 کد CSS:

* حالت عمودی (موبایل) *

@media screen and (orientation: portrait) {
  video {
    width: 100%;
    height: auto;
  }
}

* حالت افقی (دسکتاپ) *

@media screen and (orientation: landscape) {
  video {
    width: auto;
    height: 100vh;
    max-width: 100%;
  }
}

⚡ بهینه‌سازی بیشتر:
* فقط موبایل *

@media screen and (max-width: 768px) and (orientation: portrait) {
  video {
    object-fit: cover;
    aspect-ratio: 9/16;
  }
}

* فقط دسکتاپ *

@media screen and (min-width: 769px) and (orientation: landscape) {
  video {
    object-fit: contain;
    aspect-ratio: 16/9;
  }
}

🎬 مثال عملی:

<video controls poster="poster.jpg">
  <source src="video-mobile.mp4" media="(orientation: portrait)">
  <source src="video-desktop.mp4" media="(orientation: landscape)">
  Your browser does not support the video tag.
</video>

💎 @Htmlcss_channels | #HTML #css #JavaScript

❤8

1.5K views16:13

Html and Css & Jsآموزش

✨ مجموعه‌ای از کدهای کوتاه ولی کاربردی CSS
۶ تکه کد که هر برنامه‌نویس وب باید داشته باشه

ارسال کدها در پست بعدی👇

💎 @Htmlcss_channels | #HTML #css #JavaScript

❤4🔥1

902 views08:43

Html and Css & Jsآموزش

✨ مجموعه‌ای از کدهای کوتاه ولی کاربردی CSS
۶ تکه کد که هر برنامه‌نویس وب باید داشته باشه!

۱️⃣ مرکز کردن آیتم‌ها در گرید

.container {
    display: grid;
    place-items: center;
}

یه خط ساده که همه چیز رو وسط میاره! هم عمودی، هم افقی.

۲️⃣ پدینگ چپ و راست (با logical properties)

.button {
    padding-inline: 1rem;
}

به جای padding-left و padding-right — یه دونه بنویس!

نکته: همین ترفند رو میتونی برای margin و border هم استفاده کنی:
• margin-inline / border-inline → چپ و راست
• padding-block / margin-block → بالا و پایین

۳️⃣ ستون‌های هم‌عرض در گرید

.container {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
}

هر تعداد ستون که داشته باشی، همه هم‌عرض میشن! عالی برای layoutهای داینامیک.

۴️⃣ استایل همزمان hover و focus

button:is(:hover, :focus) {
    /* استایل خودت رو اینجا بنویس */
}

یه بار بنویس، برای هر دو حالت کار کنه! هم برای موس، هم برای کیبورد (accessibility).

۵️⃣ دایره کامل

.circle {
    width: 2rem;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
}

هرچیزی رو تبدیل به دایره می‌کنه! با aspect-ratio مطمئن میشی که همیشه square بمونه.

۶️⃣ حذف فاصله اضافی بین آیتم‌های گرید

.container {
    gap: 0;
}

یا برای فاصله دلخواه:

.container {
    gap: 1rem;
}

💡 چرا اینا کاربردی ان؟
• کوتاه و مینیمال — هر کدوم یه خطه
• مدرن — از قابلیت‌های جدید CSS استفاده می‌کنن
• کاربرد روزمره — توی هر پروژه‌ای بهشون نیاز داری

💎 @Htmlcss_channels | #HTML #css #JavaScript

❤6

1.09K viewsedited 08:45

Html and Css & Jsآموزش

؛CSS Houdini چیست؟
یه API قدرتمند که بهت اجازه می‌ده مستقیماً با CSS نقاشی بکشی! 🎨

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

💎 @Htmlcss_channels | #HTML #css #JavaScript

🔥2❤1

953 views08:48

Html and Css & Jsآموزش

؛CSS Houdini چیست؟
یه API قدرتمند که بهت اجازه می‌ده مستقیماً با CSS نقاشی بکشی! 🎨

۵ مرحله‌ای که تصاویر نشون می‌دن:
۱️⃣ ساخت Paint Worklet

class DotsPainter {
  paint(ctx, geom, props) {
    ctx.fillStyle = 'pink';
    for (let y = 0; y < geom.height; y += 20) {
      for (let x = 0; x < geom.width; x += 20) {
        ctx.beginPath();
        ctx.arc(x, y, 5, 0, 2 * Math.PI);
        ctx.fill();
      }
    }
  }
}
registerPaint('dots', DotsPainter)

یه کلاس جاوااسکریپت می‌نویسی که روی canvas رسم می‌کنه.

۲️⃣ ثبت Worklet

CSS.paintWorklet.addModule('paint.js');

فایل جاوااسکریپت رو به مرورگر معرفی می‌کنی.

۳️⃣ استفاده در CSS

.box {
  background: paint(dots);
}

حالا می‌تونی مثل background معمولی استفاده کنی!

۴️⃣ شخصی‌سازی با متغیرها

ctx.fillStyle = props.get('--dot-color') || 'pink';

.box {
  background: paint(dots);
  --dot-color: blue;
}

رنگ رو از CSS تغییر بده!

۵️⃣ نتیجه
• ✅ بدون عکس
• ✅ بدون پلاگین
• ✅ فقط CSS خالص
• ✅ روی compositor thread اجرا می‌شه (سریع)

💎 @Htmlcss_channels | #HTML #css #JavaScript

❤5

1.26K viewsedited 08:49

Html and Css & Jsآموزش

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

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

• تکنولوژی: 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

❤2

1.07K views12:36

Html and Css & Jsآموزش

This media is not supported in your browser

VIEW IN TELEGRAM

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

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

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

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

💎 @Htmlcss_channels | #HTML #css #JavaScript

❤7

1.11K views16:02

Html and Css & Jsآموزش

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

❤2

913 views13:58

Html and Css & Jsآموزش

Responsive_Web_Design_with_HTML5_and_CSS,_Third_Edition_Ben_Frain.pdf

8 MB

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

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

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

💎 @Htmlcss_channels | #HTML #css #JavaScript

❤6🔥1

1.01K views13:58

Html and Css & Jsآموزش

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

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

photogradient.com‎

💎 @Htmlcss_channels | #HTML #css #JavaScript

❤5🔥1

1.08K views07:04

Html and Css & Jsآموزش

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

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

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

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

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

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

💎 @Htmlcss_channels | #HTML #css #JavaScript

❤9

1.15K views14:02

Html and Css & Jsآموزش

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

💎 @Htmlcss_channels | #HTML #css #JavaScript

1.16K views06:59

Html and Css & Jsآموزش

JavaScript_The_Definitive_Guide_7th_Edition_by_David_Flanagan_OReilly.pdf

16.9 MB

JavaScript: The Definitive Guide

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

💎 @Htmlcss_channels | #HTML #css #JavaScript

❤2👍2

1.18K views06:59

Html and Css & Jsآموزش

🎨 سایت‌های طراحی برای الهام گرفتن
این سایت‌ها برای هر بخش از طراحی 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

❤4

1.15K views07:04

Html and Css & Jsآموزش

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

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

💎 @Htmlcss_channels | #HTML #css #JavaScript

❤2

812 views09:11

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

❤7

1.06K viewsedited 09:13

About

Blog

Apps

Platform