✅ یک تکنیک جذاب برای ساخت سایه در css

👈 یک تکنیک جذاب برای ساخت سایه در CSS استفاده از ویژگی box-shadow با مقادیر چندگانه است که به شما امکان می‌دهد سایه‌های نرم و واقع‌گرایانه ایجاد کنید.


🔖 به عنوان مثال:
.box {
width: 200px;
height: 200px;
background-color: #fff;
box-shadow:
0 10px 15px rgba(0, 0, 0, 0.1),
0 4px 6px rgba(0, 0, 0, 0.1),
0 20px 30px rgba(0, 0, 0, 0.1);
border-radius: 10px;
}

🎮 در این تکنیک، سایه‌های متعددی با اندازه و شفافیت متفاوت روی هم قرار می‌گیرند تا یک افکت سایه عمیق و واقعی‌تر ایجاد شود. این روش برای افزودن بعد و عمق به عناصر وب بسیار کاربردی است.

🖥 @Html_Css100

✅ اینجا چند ترفند ساده ولی کاربردی برای HTML و CSS معرفی می‌کنم که می‌تونن برای طراحی حرفه‌ای‌تر و بهینه‌تر به دردتون بخورن:

1️⃣ تصاویر پس‌زمینه رنگی با Gradient
می‌تونید با CSS گرادیانت بسازید و به عنوان پس‌زمینه استفاده کنید که نسبت به تصاویر سبک‌تره:

background: linear-gradient(135deg, #f06, #4a90e2);


2️⃣ ایجاد انیمیشن ساده با CSS
انیمیشن‌ها می‌تونن به سایت جذابیت بیشتری بدن. برای مثال، متن یا دکمه‌ای که تغییر رنگ می‌ده:

button {
transition: background-color 0.3s;
}
button:hover {
background-color: #4a90e2;
}


3️⃣ سنتر کردن متن و المان‌ها با Flexbox
برای قرار دادن المان‌ها در وسط صفحه، می‌تونید از Flexbox استفاده کنید

.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}


4️⃣ استفاده از Placeholder در فرم‌ها با استایل سفارشی
با CSS می‌تونید استایل دلخواه برای متن‌های placeholder فرم‌ها تعریف کنید

input::placeholder {
color: #888;
font-style: italic;
}
6️⃣ ایجاد جداول ریسپانسیو با CSS
با استفاده از overflow، جدول‌ها رو در موبایل و دستگاه‌های کوچیک ریسپانسیو کنید:
table {
width: 100%;
overflow-x: auto;
display: block;
}
7️⃣ ساخت دکمه های گرد با HTML و CSS
برای دکمه‌هایی با لبه‌های گرد

button {
border-radius: 50px;
padding: 10px 20px;
background-color: #4a90e2;
color: #fff;
}


🖥️ @Html_Css100