در این مقاله، نحوه ایجاد یک دکمه جذاب با افکت اسلاید متن را به شما آموزش می‌دهم. این افکت بدون استفاده از جاوااسکریپت و تنها با HTML و CSS خالص پیاده‌سازی شده است. موارد استفاده دکمه‌های دانلود دکمه‌های Call-to-Action تغییر وضعیت دکمه‌ها المان‌های تعاملی در رابط کاربری <!DOCTYPE html> <html lang=”fa” dir=”rtl”> <head> <meta charset=”UTF-8″> […]
در این آموزش از سایت Highlearn یاد می‌گیریم چطور با استفاده از Bootstrap 5 یک کارت محصول حرفه‌ای و کاملاً ریسپانسیو بسازیم.این کارت محصول شامل تصویر، نام محصول، رنگ‌بندی، قیمت فعلی و قبلی، امتیاز کاربران، موجودی انبار و دکمه افزودن به سبد خرید است. این پروژه برای طراحان وب، برنامه‌نویسان فرانت‌اند و هر کسی که […]
در این مقاله آموزشی، نحوه ایجاد یک دکمه جذاب با افکت‌های انیمیشنی پیشرفته را بررسی می‌کنیم. این دکمه شامل گرادیان رنگی پویا، افکت‌های سه بعدی، ذرات متحرک و واکنش‌های تعاملی است که آن را برای استفاده در پروژه‌های مدرن وب مناسب می‌سازد. ساختار HTML ابتدا ساختار پایه HTML را ایجاد می‌کنیم: <!DOCTYPE html> <html lang=”fa” […]
در این مقاله، یک انیمیشن لوودینگ (Loading) زیبا و حرفه‌ای شبیه به لوودینگ‌های مدرن (مانند Google) را با استفاده از فقط HTML و CSS خواهیم ساخت. این لوودر از چند نقطه کوچک تشکیل شده که به صورت دایره‌ای دور یک محور می‌چرخند و تدریجاً ظاهر و ناپدید می‌شوند — همراه با متن “Loading…” که با […]
در این مقاله جامع، نحوه ایجاد یک دکمه انیمیشنی حرفه‌ای با افکت تبدیل حرف “A” به آیکون پلی را به صورت گام به گام آموزش می‌دهیم. مقدمه دکمه‌های تعاملی با انیمیشن‌های ظریف می‌توانند تجربه کاربری را به شدت بهبود بخشند. در این آموزش، شما یاد خواهید گرفت چگونه با استفاده از CSS خالص، یک دکمه […]
در این مقاله جامع، نحوه ایجاد یک انیمیشن لودینگ دایره‌ای جذاب را با استفاده از CSS خالص آموزش می‌دهیم. این انیمیشن برای صفحات وب، اپلیکیشن‌ها و پروژه‌های فرانت‌اند مناسب است. مقدمه انیمیشن‌های لودینگ به کاربران نشان می‌دهند که محتوای در حال بارگذاری است. در این آموزش، یک لودینگ دایره‌ای با سه نیم‌دایره رنگی ایجاد می‌کنیم […]
امروزه دکمه‌های شبکه‌های اجتماعی بخش مهمی از طراحی رابط کاربری (UI) هستند. در این مقاله، یاد می‌گیرید چگونه دکمه‌های مربعی با چرخش ۴۵ درجه طراحی کنید که هنگام هاور رنگ پس‌زمینه آنها به رنگ رسمی هر شبکه اجتماعی تغییر کند. ابزارهای مورد نیاز HTML5 (برای ساختار) CSS3 (برای استایل‌دهی و افکت‌ها) Font Awesome (برای آیکون‌ها) آموزش گام‌به‌گام ۱. ساختار HTML […]
در این آموزش، نحوه ایجاد آیکون‌های مینیمال و زیبا برای شبکه‌های اجتماعی با استفاده از CSS و کتابخانه Font Awesome را یاد می‌گیرید. این آیکون‌ها دارای افکت hover هستند که هنگام قرارگیری ماوس روی آنها، به رنگ رسمی هر شبکه اجتماعی تغییر می‌کنند. مراحل پیاده‌سازی افزودن فونت Awesome ابتدا کتابخانه Font Awesome را به پروژه […]
در این مقاله آموزشی، نحوه ایجاد یک دکمه اشتراک‌گذاری جذاب با افکت hover که به سه آیکون شبکه‌اجتماعی تبدیل می‌شود را به صورت کامل بررسی می‌کنیم. پیش‌نمایش نهایی قبل از شروع، بیایید ببینیم چه چیزی می‌سازیم: یک دکمه با طراحی مدرن و گوشه‌های گرد افکت تبدیل هنگام hover به سه دایره اجتماعی انیمیشن‌های نرم و […]
سلام دوستان! امروز می‌خواهیم با هم یک دکمه فوق‌العاده جذاب با افکت موجی دریا طراحی کنیم که کاملاً با CSS قابل ایجاد است. این آموزش برای همه سطوح مناسب است و نیاز به دانش قبلی خاصی ندارد. پیش‌نیازها برای این آموزش فقط نیاز دارید: یک ویرایشگر کد ساده مثل VSCode مرورگر وب (ترجیحاً Chrome یا […]
آخرین دیدگاه ها