📌Hover Effect

🔹Source code:
https://codesandbox.io/p/sandbox/hover-effects-h9cs4j?file=%2Findex.html%3A7%2C12-7%2C25

🔹Deploy:
https://6602eb3dbe3c4d502c4f631d--magnificent-tanuki-b476bd.netlify.app/




#codeAndResult
🆔@APSignals_PER

#fun
🆔 @APSignals_PER

💢بعضی از سایت‌هایی که می‌تونید از اونها برای دانلود آیکون‌ها به فرمت SVG استفاده کنید:

1⃣ Flaticon
(https://www.flaticon.com/): Flaticon یکی از بزرگترین منابع آیکون‌های رایگان و پولی با فرمت SVG است. شما می‌تونید آیکون‌ها را جستجو  و دانلود کنید.

2⃣ FontAwesome
(https://fontawesome.com/): FontAwesome یک کتابخانه مشهور آیکون است که آیکون‌های با کیفیت و قابل تنظیم در فرمت SVGارائه می‌دهد.

3⃣ Icons8
(https://icons8.com/): Icons8 یک سایت دیگر است که آیکون‌های با کیفیت و متنوع در فرمت SVG ارائه می‌دهد.

4⃣ Material Icons
(https://material.io/resources/icons/): Google Material Icons یک مجموعه آیکون شناخته شده است که به صورت رایگان در فرمت SVG در دسترس است.

5⃣ SVG Repo
(https://www.noscriptrepo.com/): SVG Repo یک منبع دیگر برای دانلود آیکون‌های SVG رایگان است که شامل مجموعه‌های مختلفی از آیکون‌ها است.

این سایت‌ها می‌تونندبه عنوان منابع خوبی برای دسترسی به آیکون‌های SVG برای پروژه‌های خود شما باشند.

#icon
🆔 @APSignals_PER

📌Rainbow Card

🔹Source code:
https://codesandbox.io/p/sandbox/rainbow-card-7y55sd?file=%2Fstyles.css%3A80%2C1

🔹Deploy:
https://66029d18ee3172098968405f--admirable-puffpuff-82ba56.netlify.app/



#codeAndResult
🆔@APSignals_PER

#fun
🆔 @APSignals_PER

📌Hover Card

🔹Source Code:
https://codesandbox.io/p/sandbox/3d-flip-card-on-hover-using-vggyv4?file=%2Fstyles.css

🔹Deploy: https://65f05297469f7e098494dd0a--golden-gingersnap-2653ec.netlify.app/


#codeAndResult
🆔@APSignals_PER

#color
🆔@APSignals_PER

♨️ dark mood with css
اگه قصد دارید روش سریعی برای اعمال حالت «dark mood» توی وب‌سایت تون طراحی کنید، می‌تونید از فیلترهای invert و hue-rotate استفاده کنید.

filter: invert()
روی مقیاسی از 0 تا 1 عمل می‌کنه که 1 سفید رو به سیاه تبدیل می‌کنه.

filter: hue-rotate()
محتوای رنگی عناصر ما رو طوری تغییر میده که کمابیش همون سطح از جداسازی از همدیگر رو حفظ کنن. مقادیرش هم از 0deg تا 360deg متغیر هستن.

با اعمال این افکت ها روی تگ body می‌تونید به سرعت یک نسخه دارک مود از سایت خودتون ایجاد کنید.
فقط دقت کنید که برای تأثیر گرفتن پس‌زمینه باید به اون یک رنگ اختصاص داده باشید.

برای مثال:
body {
    background: #FFF;
    filter: invert(1) hue-rotate(210deg);
}
با استفاده از این تنظیمات می‌تونید صفحه اصلی وب‌سایت گوگل رو به صورت آنی به شکل دارک مود در بیارید.


#Css_Trick
🆔@APSignals_PER

#fun
🆔 @APSignals_PER

♨️ Cloud Convert

این وبسایت برای تبدیل فایل‌های مختلف به یکدیگر مورد استفاده قرار میگیره و بیش از ۲۰۰ فرمت‌ مختلف رو پشتیبانی میکنه.
کار کردن با این وبسایت خیلی ساده و راحت هستش و البته نسخه رایگان اون محدودیت روزانه داره.

#site
🆔@APSignals_PER

#fun
🆔 @APSignals_PER

📌Loading Animation Effects

🔹Source code:
https://codesandbox.io/p/sandbox/loading-animation-effects-clkl3y?file=%2Fstyles.css%3A58%2C1

🔹Deploy:
https://6605730414c2ff09ed0f057f--endearing-marshmallow-8bb7e6.netlify.app/



#codeAndResult
🆔@APSignals_PER

#fun
🆔 @APSignals_PER

♨️یه اکستنشن خوب برای داکیومنت نوشتن برای کداتون که از چند تا زبون پشتیبانی میکنه


#extension
🆔@APSignals_PER

♨️ توی کیبرد فارسی برای نوشتن ویرگول ،
از shift + t
و برای نوشتن نقطه ویرگول ؛ از shift + y استفاده میکنیم

#laptopTrick
🆔@APSignals_PER