۵ انیمیشن پرکاربرد CSS برای طراحی سایت
1. Fade Up | ورود از پایین
2. Button Hover | افکت هاور دکمه
3. Floating | حرکت شناور
4. Shine Effect | افکت درخشش
5. Pulse | افکت نبض
@awat_dev
1. Fade Up | ورود از پایین
.fade-up {
animation: fadeUp .7s ease-out both;
}
@keyframes fadeUp {
from {opacity:0; transform:translateY(20px)}
to {opacity:1; transform:translateY(0)}
}2. Button Hover | افکت هاور دکمه
.btn-hover {
transition: all .3s ease;
}
.btn-hover:hover {
transform: translateY(-3px);
box-shadow: 0 8px 20px #0002;
}3. Floating | حرکت شناور
.floating {
animation: floating 2.5s ease-in-out infinite;
}
@keyframes floating {
0%,100% {transform:translateY(0)}
50% {transform:translateY(-10px)}
}4. Shine Effect | افکت درخشش
.shine {
position: relative;
overflow: hidden;
}
.shine::after {
content: "";
position: absolute;
top: 0;
left: -100%;
width: 50%;
height: 100%;
background: linear-gradient(
120deg, transparent, #ffffff55, transparent
);
animation: shine 3s infinite;
}
@keyframes shine {
0%,70% {left:-100%}
100% {left:200%}
}5. Pulse | افکت نبض
.pulse {
animation: pulse 1.5s ease-out infinite;
}
@keyframes pulse {
0% {box-shadow:0 0 0 0 #ef444477}
70% {box-shadow:0 0 0 12px #ef444400}
100% {box-shadow:0 0 0 0 #ef444400}
}نکته: برای استفاده، کلاس موردنظر را به عنصر HTML اضافه کنید.
@awat_dev
❤9
</awat>
بزودی یکسری از دوره های رایگان بعضی از مباحث که فکر میکنم خوبن رو قرار میدم @awat_dev
خب یکسری دوره های مربوط به فرانت اند رو میخوام بزارم براتون
دوره html css ( صوفی لرن ) کامل و جامع رایگان
https://youtube.com/playlist?list=PLOjAN00I0bBc&si=ZjnFSxeRlis9WwHE
دوره فلکس باکس ( سالار حقیقت نیا ) رایگان
https://youtube.com/playlist?list=PLprvbQiR3cN-fVGiLy0DrevvfjJaFUNFq&si=AP6fuKwhV63lN6yT
دوره فلکس باکس ( سبز لرن )
https://sabzlearn.ir/course/flex-box/
دوره فلکس باکس ( میلاد بهرامی ) رایگان
https://youtube.com/playlist?list=PLhpS3tgUDZcpcJ9hfsSXZN0xEbNkBcR0n&si=_r9hahFObfmezdy4
دوره سی اس اس گرید ( سبز لرن )
https://sabzlearn.ir/course/css-grid/
دوره تیلویند ( سالار حقیقت نیا )
https://youtube.com/playlist?list=PLprvbQiR3cN9Mt_rINlJX6UOn4utVPBX2&si=86RV8F_6_4SB3rLI
دوره تیلویتد ( میلاد بهرامی )
https://youtube.com/playlist?list=PLhpS3tgUDZcp1fZLQu5I58ubM8B5ahBya&si=sKVvaBAFt10mcmk0
دوره گیت و گیت هاب ( میلاد بهرامی )
https://youtube.com/playlist?list=PLhpS3tgUDZcpamFNTdjXyRKzFGaBAkcLq&si=s6X7aqx2WXVPpeyK
دوره جاواااسکریپت
صوفی لرن (پیشنهادی) پولی
دوره جاوالسکریپت ( سالار حقیقت نیا )
https://youtube.com/playlist?list=PLprvbQiR3cN_s_scnGOn8hsp0QFHLz4uD&si=4tBMJ--G7f4phwfW
دوره جاوااسکریپت و ریکت ( جوناس )
https://t.me/undefinedee/273
دوره html css ( صوفی لرن ) کامل و جامع رایگان
https://youtube.com/playlist?list=PLOjAN00I0bBc&si=ZjnFSxeRlis9WwHE
دوره فلکس باکس ( سالار حقیقت نیا ) رایگان
https://youtube.com/playlist?list=PLprvbQiR3cN-fVGiLy0DrevvfjJaFUNFq&si=AP6fuKwhV63lN6yT
دوره فلکس باکس ( سبز لرن )
https://sabzlearn.ir/course/flex-box/
دوره فلکس باکس ( میلاد بهرامی ) رایگان
https://youtube.com/playlist?list=PLhpS3tgUDZcpcJ9hfsSXZN0xEbNkBcR0n&si=_r9hahFObfmezdy4
دوره سی اس اس گرید ( سبز لرن )
https://sabzlearn.ir/course/css-grid/
دوره تیلویند ( سالار حقیقت نیا )
https://youtube.com/playlist?list=PLprvbQiR3cN9Mt_rINlJX6UOn4utVPBX2&si=86RV8F_6_4SB3rLI
دوره تیلویتد ( میلاد بهرامی )
https://youtube.com/playlist?list=PLhpS3tgUDZcp1fZLQu5I58ubM8B5ahBya&si=sKVvaBAFt10mcmk0
دوره گیت و گیت هاب ( میلاد بهرامی )
https://youtube.com/playlist?list=PLhpS3tgUDZcpamFNTdjXyRKzFGaBAkcLq&si=s6X7aqx2WXVPpeyK
دوره جاواااسکریپت
صوفی لرن (پیشنهادی) پولی
دوره جاوالسکریپت ( سالار حقیقت نیا )
https://youtube.com/playlist?list=PLprvbQiR3cN_s_scnGOn8hsp0QFHLz4uD&si=4tBMJ--G7f4phwfW
دوره جاوااسکریپت و ریکت ( جوناس )
https://t.me/undefinedee/273
sabzlearn.ir
آموزش FlexBox پروژه محور + پروژه سایت هاستینگ
دوره آموزش Flexbox پروژهمحور است و در آن کار با این ماژول CSS را یاد میگیرید، همچنین با صفحهآرایی و ریسپانسیو کردن را یک سایت بهصورت عملی آشنا میشوید.
❤10
میخوام در مورد سوالی که همیشه مطرح میشه نظر خودمو بگم
همیشه افرادی هستن که براشون سواله آیا با پیشرفت هوش مصنوعی خوبه من حوضه فرانت اند رو ادامه بدم یا نه؟ یا اصلا بیام سمت برنامه نویسی یا نه هوش مصنوعی جای برنامه نویس ها رو میگیره؟
کسایی برنده ان که از هوش مصنوعی استفاده میکنن به عنوان ابزار کمکی و بهبود سرعت کارشون.
@awat_dev
همیشه افرادی هستن که براشون سواله آیا با پیشرفت هوش مصنوعی خوبه من حوضه فرانت اند رو ادامه بدم یا نه؟ یا اصلا بیام سمت برنامه نویسی یا نه هوش مصنوعی جای برنامه نویس ها رو میگیره؟
نوع سوال ها فرق داره اما وقتی وارد میشی تهش میرسیم به جایگاه برنامه نویس و هوش مصنوعی
دوستان به نظر من هوش مصنوعی العان در حال حاضر جای برنامه نویس رو نمیگیره و توی کد زدن به برنامه نویس کمک میکنه که سرعت کد زدنش افزایش پیدا بکنه و پروژه رو در زمان کمتری کامل کنه
هوش مصنوعی جای برنامه نویس های جونیور و سینیور رو نمیگیره فقط داره نحوه کار برنامه نویسا رو تغییر میده
هوش مصنوعی همینطور که گفتم یه ابزاره که به برنامه نویس کمک میکنه اما تضمین کننده نتیجه نیست
هوش مصنوعی میتونه کد بزنه اما برنامه نویس باید کد رو تمیز کنه باید امنیت و عملکرد اون کد با نیاز پروژه رو بررسی کنه
در ضمن کد نویسی فقط کد نویسی نیست ، فهم مسئله راه حل برای حل مشکل پروژه معماری دیباگ کردن و تصمیم گیری فنی پروژه بخش مهمی هستن که توسط برنامه نویس انجام میشه و هوش مصنوعی نمیتونه جاش رو بگیره
به جای ترسیدن از هوش مصنوعی یاد بگیریم چطور ازش استفاده کنیم تا بتونیم خروجی بهتری بگیریم
کسایی برنده ان که از هوش مصنوعی استفاده میکنن به عنوان ابزار کمکی و بهبود سرعت کارشون.
@awat_dev
❤11
اگ طرحی ندارید یا فکر میکنید طرح از کجا بیارید هوش مصنوعی
https://stitch.withgoogle.com/
کمکتون میکنه فقط کافیه بگین چه وبسایتی میخواین بهتون دیزاین رو تحویل میده یعنی تو توضیح میدی چه سایتی میخوای؛ مثلاً فروشگاه لباس فارسی، و هوش مصنوعی بر اساس توضیحاتت طرح صفحات رو تولید میکنه.
@awat_dev
https://stitch.withgoogle.com/
کمکتون میکنه فقط کافیه بگین چه وبسایتی میخواین بهتون دیزاین رو تحویل میده یعنی تو توضیح میدی چه سایتی میخوای؛ مثلاً فروشگاه لباس فارسی، و هوش مصنوعی بر اساس توضیحاتت طرح صفحات رو تولید میکنه.
@awat_dev
❤8
💻 اصول طراحی گرافیک در وبسایت 💻
طراحی یک وبسایت حرفهای، نیازمند همکاری مؤثر میان طراحان گرافیک و برنامهنویسان است. برای رسیدن به نتیجهای مطلوب، توجه به نکات زیر حائز اهمیت است:
به یاد داشته باشید که بهترین نتیجه زمانی حاصل میشود که طراح گرافیک و برنامهنویس، از ابتدا تا مرحله اجرای نهایی، در کنار یکدیگر همکاری کنند...
@awat_dev
طراحی یک وبسایت حرفهای، نیازمند همکاری مؤثر میان طراحان گرافیک و برنامهنویسان است. برای رسیدن به نتیجهای مطلوب، توجه به نکات زیر حائز اهمیت است:
👥 هماهنگی تیمی: پیش از اجرا، درباره جزئیات طرح، اندازهها و محدودیتهای فنی با یکدیگر گفتوگو کرده و هماهنگ شوید.┈┅┅━✦━┅┅┈
🎨 رنگها: از رنگهایی هماهنگ با هویت برند استفاده کنید و خوانایی متنها را در اولویت قرار دهید.
🖼 تصاویر و بنرها: کیفیت، ابعاد و حجم تصاویر را متناسب با ساختار سایت انتخاب کنید تا زیبایی و سرعت بارگذاری حفظ شود.
⚙ اصول فـنی: طراحی واکنشگرا و سازگاری عناصر بصری با دستگاههای مختلف را جدی بگیرید.┈┅┅━✦━┅┅┈
به یاد داشته باشید که بهترین نتیجه زمانی حاصل میشود که طراح گرافیک و برنامهنویس، از ابتدا تا مرحله اجرای نهایی، در کنار یکدیگر همکاری کنند...
@awat_dev
❤8 2
در مورد import و export توی جاوااسکریپت پست بزارم؟
ریکشن بزارید.
ریکشن بزارید.
❤10 3
قسمت اول export
در پروژه های کوچیک معمولا تمام کد ها رو توی یک فایل قرار میدیم ولی توی پروژه های بزرگ تر توی یک فایل نوشتن کد ها کار درستی نیست و خوانایی کد رو کم میکنه برای بهتر شدن خوانایی کد میتوانیم کد ها را در فایل جداگانه قرار بدیم و از قابلیت ماژول ها استفاده کنیم.
توی این پست میخوایم در مورد export بگیم و ادامه رو توی پست بعدی براتون می نویسم.
دستور export به ما این اجازه رو میده که متغیر ها و توابع و کلاس ها و سایر قابلیت هایی یک فایل رو برای استفاده توی یک فایل دیگ در دسترس بزاریم
بیاین یک مثال بزنیم برای درک بهتر مثلا شما میخواهید هدر وبسایت خودتان را به صورت داینامیک توی همه ی صفحات نمایش بدید اگر به صورت استاتیک این کار رو بخواید انجام بدید حتمی باید تمام کد های هدر رو توی تمام فایلا بزارید ولی با ماژول ها یک بار اون رو میسازید و export میگیرید و توی تمام صفحات فقط یک خط کد اضافه میکنید با اینکار هم کد خودتون خوانا تر میشه و هم از تکرار کد ها جلوگیری میشه.
بریم تو دل کد که کاربرد واقعی اون رو متوجه بشیم
برای مثال فایلی به نام calculator.js ایجاد میکنیم:
توی این مثال متغیر number و تایع sum با استفاده از export در دسترس ماژول های دیگ قرار گرفتند
یه نکته اینجا وجود داره متغیر ها و توابعی که صادر نشده اند به طور مستقیم از طریق این ماژول قابل وارد کردن نیستند.
مثلا:
توی این مثال فقط سن صادر شده و نام همچنان داخل همین ماژول باقی میماند
انواع export توی جاوااسکریپت
named export:
برای صادر کردن قابلیت هایی با نام مشخص میتوان چندین خروجی نام دار داشت
default export:
برای تعریف یک خروجی پیشفرض هر ماژول حداکثر یک خروجی پیش فرض دارد
من پیشنهاد میکنم از روش named export استفاده کنید و توی این پست هم همین روش رو توضیح میدم اگر خواستید روش دیفالت اکسپورت هم یاد بگیرید میسپارم به خودتون یه سرچی دربارش بکنید.
توی روش named export میتونیم چند متغیر تایبع یا کلاس را از یک فایل صادر کنیم هر خروجی نام مشخص خودشو داره
روش اول استفاده از export هنگام تعریف
توی این روش ما وقتی تایع یا متغیر را تعریف میکنیم همراهش اکسپورت هم میگیریم مثلا فرض کنید فایلی به نام user.js داریم:
توی این مثالی که زدم سه خروجی name , age , great داریم با این روش هرکدام از این قابلیت ها میتونند توی فایل های دیگ استفاده بشن
روش دوم استفاده از export در انتهای فایل
ما اول میتونیم متغیر ها تابع ها را تعریف کنیم و بعد همه را انتهای فایل صادر کنیم مثال:
این روش هم نتیجه روش قبلی رو داره تنها تفاوتش توی محل نوشتن export هست توی روش اول کنار تعریف هر قابلیت نوشته میشه توی روش دوم نام قابلیت ها انتهای فایل مشخص میشه.
حالا بریم سراغ کاربرد این روش
این روش فقط وقتی مفید که یه فایل چند قابلیت مرتبط داشته باشه
مثلا توی فایل calculator.js میتونیم چند تا تابع ریاضی داشته باشیم:
حالا این فایل سه تابع صادر میکند که هر کدوم اسم مشخصی دارد.
توی این پست export رو توضیح دادم توی پست بعدی نحوه import هم براتون توضیح میدم.
باتشکر.
@awat_dev
در پروژه های کوچیک معمولا تمام کد ها رو توی یک فایل قرار میدیم ولی توی پروژه های بزرگ تر توی یک فایل نوشتن کد ها کار درستی نیست و خوانایی کد رو کم میکنه برای بهتر شدن خوانایی کد میتوانیم کد ها را در فایل جداگانه قرار بدیم و از قابلیت ماژول ها استفاده کنیم.
توی این پست میخوایم در مورد export بگیم و ادامه رو توی پست بعدی براتون می نویسم.
دستور export به ما این اجازه رو میده که متغیر ها و توابع و کلاس ها و سایر قابلیت هایی یک فایل رو برای استفاده توی یک فایل دیگ در دسترس بزاریم
بیاین یک مثال بزنیم برای درک بهتر مثلا شما میخواهید هدر وبسایت خودتان را به صورت داینامیک توی همه ی صفحات نمایش بدید اگر به صورت استاتیک این کار رو بخواید انجام بدید حتمی باید تمام کد های هدر رو توی تمام فایلا بزارید ولی با ماژول ها یک بار اون رو میسازید و export میگیرید و توی تمام صفحات فقط یک خط کد اضافه میکنید با اینکار هم کد خودتون خوانا تر میشه و هم از تکرار کد ها جلوگیری میشه.
بریم تو دل کد که کاربرد واقعی اون رو متوجه بشیم
برای مثال فایلی به نام calculator.js ایجاد میکنیم:
export const number = 10;
export function sum(a,b){
return a + b;
}
توی این مثال متغیر number و تایع sum با استفاده از export در دسترس ماژول های دیگ قرار گرفتند
یه نکته اینجا وجود داره متغیر ها و توابعی که صادر نشده اند به طور مستقیم از طریق این ماژول قابل وارد کردن نیستند.
مثلا:
const name = "Mohsen";
export const age = 21;
توی این مثال فقط سن صادر شده و نام همچنان داخل همین ماژول باقی میماند
انواع export توی جاوااسکریپت
named export:
برای صادر کردن قابلیت هایی با نام مشخص میتوان چندین خروجی نام دار داشت
default export:
برای تعریف یک خروجی پیشفرض هر ماژول حداکثر یک خروجی پیش فرض دارد
من پیشنهاد میکنم از روش named export استفاده کنید و توی این پست هم همین روش رو توضیح میدم اگر خواستید روش دیفالت اکسپورت هم یاد بگیرید میسپارم به خودتون یه سرچی دربارش بکنید.
توی روش named export میتونیم چند متغیر تایبع یا کلاس را از یک فایل صادر کنیم هر خروجی نام مشخص خودشو داره
روش اول استفاده از export هنگام تعریف
توی این روش ما وقتی تایع یا متغیر را تعریف میکنیم همراهش اکسپورت هم میگیریم مثلا فرض کنید فایلی به نام user.js داریم:
export const name = "mohsen";
export const age = 21;
export function great(){
console.log("Hello World);
};
توی این مثالی که زدم سه خروجی name , age , great داریم با این روش هرکدام از این قابلیت ها میتونند توی فایل های دیگ استفاده بشن
روش دوم استفاده از export در انتهای فایل
ما اول میتونیم متغیر ها تابع ها را تعریف کنیم و بعد همه را انتهای فایل صادر کنیم مثال:
const name = "mohsen";
const age = 21;
function great(){
console.log("Hello World");
};
export { name , age , great};
این روش هم نتیجه روش قبلی رو داره تنها تفاوتش توی محل نوشتن export هست توی روش اول کنار تعریف هر قابلیت نوشته میشه توی روش دوم نام قابلیت ها انتهای فایل مشخص میشه.
حالا بریم سراغ کاربرد این روش
این روش فقط وقتی مفید که یه فایل چند قابلیت مرتبط داشته باشه
مثلا توی فایل calculator.js میتونیم چند تا تابع ریاضی داشته باشیم:
export function sum(a, b) {
return a + b;
}
export function subtract(a, b) {
return a - b;
}
export function multiply(a, b) {
return a * b;
};حالا این فایل سه تابع صادر میکند که هر کدوم اسم مشخصی دارد.
توی این پست export رو توضیح دادم توی پست بعدی نحوه import هم براتون توضیح میدم.
باتشکر.
@awat_dev
❤3 3 3