سون لرن • آموزش

سلام و درود برای مثال این صفحه رو ببینید https://ahc-shopcenter.com/ تو این صفحه دو قیمت وجود داره یکی قیمت اصلی و دیگری تخفیف خورده چطوری میشه css زد که بشه فونت و رنگ اونو تغییر داد 1 نوشته - 1 participants مشاهده متن کامل موضوع ...

در این مطلب میخوام سایتی رو بهتون معرفی کنم که در اون یک فونت زیبا با 4 استایل متفاوت رو بصورت رایگان در اختیارتون قرار میده و میتونین از اون در طراحی استفاده کنید.xa0برای شروع وارد سایتxa0Caboxa0بشین. توضیحات مربوط به فونت Cabo در این سایت 2 فونت با 2 استایل متفاوت قرار داده شده و میتونین اونا رو بصورت رایگان دانلود کنید. فونت اول بنام Slab می باشد و برای دانلود بر روی دکمه زیر کلیک کنید: فونت دوم بنام Rounded می باشد و برای دانلود بر روی دکمه زیر کلیک کنید: امیدوار...

در این مطلب میخوامxa0سایتیxa0رو بهتون معرفی کنم که در اون فونتی زیبا و با کیفیت بالا قرار داده شده که میتونین اون رو بصورت رایگان دانلود کرده و مورد استفاده قرار بدین. برای شروع وارد سایتxa0Unchainedxa0بشین. توضیحات مربوط به فونت Unchained این فونت توسطxa0Pavel Korzhenkoxa0ساخته شده است و بصورت رایگان در اختیار شما قرار گرفته. برای دانلود میتونین به انتهای سایت مورد نظر برید و بر روی دکمه Download کلیک کنید: ...

در این قسمت میخوام یک کد ( Animography Text Editorxa0) جالب رو در اختیارتون بزارم. همونطور که دیدید دیدید یک Cursor قرار داده و زمانی که شروع به تایپ کردن میکنید، هر حرف با انیمیشنی زیبا و دیدنی نمایش داده میشه و کل حرف تشکیل میشه. بعد از اینکه متن رو تایپ کردید، با هاور کردن بر روی هر حرف، انیمیشن مربوط به اون تکرار میشه. در قسمت بالا و سمت راست یک دکمه بنام xa0Options Panel وجود داره که با دابل کلیک...

اینم از قولی که توی یکی از نظر ها داده بودم. با استفاده از این ابزار می تونین قالب های انگلیسی ای که دارین (left-to-right) رو به قالب های فارسی (right-to-left) تبدیل کنین یا حتی برعکس. البته ممکنه توی بعضی قالاب ها بعدش باید برین چند تا تغییرات بدین چون این ابزار فقط میگرده مشکلاتی که معمولا توی قالب ها موقع ترجمه پیش میاد رو درست میکنه. احتمالش هست که چیزای دیگه ای هم توی قالب نیاز به تغییر داشت...

در این مطلب میخوام سایتی رو بهتون معرفی کنم که در اون استایل زیبا و ساده ای رو برای المنتهای ورودی فرم به وجود آورده و میتونین از اون در سایت خودتون استفاده کنید. این استایل در همه مرورگرهای مدرن به علاوه IE11 پشتیبانی میشه و با استفاده از CSS خالص به وجود اومده و هیچ پیش نیازی ندارد. برای شروع وارد...

در این قسمت میخوام یک کد ( Random Text Shufflexa0) جالب رو در اختیارتون بزارم. همونطور که دیدید حروف رنگی و تصادفی زیادی با هم مخلوط میشن و عوض میشن و در نهایت حرف مورد نظر قرار داده میشه و بعد از گذشت مدتی، کل جمله اصلی شکل میگیره. با کلیک بر روی دکمه Shuffle این افکت تکرار میشه. بدلیل اینکه حجم کده...

در این قسمت میخوام یک کد ( Page Hopperxa0) جالب رو در اختیارتون بزارم. همونطور که دیدید یک استایل زیبا برای صفحه بندی یا Pagination قرار داده شده و میتونین از اون ایده بگیرید. با کلیک بر روی هر کدام از موارد، دایره مورد نظر با افکتی زیبا منتقل میشه. بدلیل اینکه حجم کدها زیاد بود ، اونارو در انتهای هم...

در این قسمت میخوام یک کد ( Unfolding boxesxa0) جالب رو در اختیارتون بزارم. همونطور که دیدید تعدادی باکس مکعبی قرار داده شده و بصورت زیبا در کنار یکدیگر حرکت میکنن و چند وقت یکبار، وجه های مکعب از هم باز میشن و دوباره در کنار هم قرار میگیرن. بدلیل اینکه حجم کدها زیاد بود ، اونارو در انتهای همین مطلب ق...

در این قسمت میخوام یک کد ( Hover triangle wipe cssxa0) جالب رو در اختیارتون بزارم. همونطور که دیدید زمانی که بر روی آیتمهای مختلف هاور میکنیم، مثلث کوچکی که در گوشه بالایی آیتم قرار داره، به زیبایی بزرگ میشه و حالت زیبایی رو به وجود میاره. میتونین از این مورد ایده بگیرید و یا اینکه از اون استفاده کنی...

در این قسمت میخوام یک کد ( Check Box Radial Washxa0) جالب رو در اختیارتون بزارم. همونطور که دیدید لیستی از افراد قرار داده شده و برای هر کدام یک چک باکس قرار گرفته. با فعال کردن هر چک باکس، اون آیتم بصورت زیبا و شعاعی فعال میشه و رنگ مورد نظر کل ردیف رو میگیره. میتونین از این کد ایده بگیرید. بدلیل ای...

در این قسمت میخوام یک کد ( Select Option Interactionxa0) جالب رو در اختیارتون بزارم. همونطور که دیدید یک منو Dropdown زیبا قرار داده شده و زمانی که بر روی اون کلیک میکنید، گزینه های اون با حالتی زیبا نمایش داده میشن و زمانی که گزینه مورد نظر رو انتخاب میکنید، با حالتی زیبا بصورت فعال در میاد. بدلیل ا...

در این قسمت میخوام یک کد ( Flat Login Formxa0) جالب رو در اختیارتون بزارم. همونطور که دیدید یک استایل فلت و زیبا برای فرم قرار داده شده و میتونین از اون ایده بگیرید و استفاده کنید. با کلیک بر روی لینک Sign up، فرم مربوط به ثبت نام هم نمایش داده میشه. بدلیل اینکه حجم کدها زیاد بود ، اونارو در انتهای ه...

در این قسمت میخوام یک کد ( Phone styled IFramexa0) جالب رو در اختیارتون بزارم.همونطور که دیدید یک Iframe به شکل و استایل موبایل قرار داده شده و میتونین عرض و ارتفاع اون رو مشخص کنید. همچنین میتونین آدرس سایت مورد نظرتون رو هم وارد کنید تا در اون نمایش ...

در این قسمت میخوام یک کد ( Fixed Disappearing Scrolling Headerxa0) جالب رو در اختیارتون بزارم.همونطور که دیدید یک هدر قرار داده شده و زمانی که به سمت پایین اسکرول میکنید، به صورت زیبایی ناپدید و محو میشه و میتونین از این نمونه ایده بگیرید.بدلیل اینکه ح...

در این قسمت میخوام یک کد ( Timeline Style Navigationxa0) جالب رو در اختیارتون بزارم.همونطور که دیدید یک خط Timeline مانند در سمت چپ قرار گرفته و به تعداد Section هایی که در صفحه وجود داره، شماره درون اون قرار گرفته. با کلیک بر روی هر کدوم از اونا، به بخش مورد نظر اسکرول میشید و اطلاعات مربوط به اون بخ...

در این قسمت میخوام یک کد ( CSS Radio Buttonsxa0) جالب رو در اختیارتون بزارم.همونطور که دیدید استایل زیبایی برای Radio Button قرار داده شده و حالتهای Checked و Unchecked و Disabled برای اون اعمال شده. میتونین از این نمونه استفاده کنید.بدلیل اینکه حجم کدها زیاد بود ، اونارو در انتهای همین مطلب قرار میدم...

در این قسمت میخوام یک کد ( Google Account Sign Inxa0) جالب رو در اختیارتون بزارم.همونطور که دیدید یک رابط کاربری زیبا برای فرم ورود یا Sign In گوگل قرار داده شده و میتونین از اون استفاده کنید.بدلیل اینکه حجم کدها زیاد بود ، اونارو در انتهای همین مطلب قرار میدم که میتونین اونو دانلود کرده و استفاده کنی...

0 44 ۲۳ اسفند ۹۵همونطور که میدونید در جلسات قبل در مورد متدهایی که میتونیم با استفاده از اونا مسیرها و اشکال رو تعریف کرده و بر روی Canvas رسم کنیم رو بهتون توضیح دادیم. در این جلسه و جلسات بعد انواع روشهای استایل دهی به اشکال رو بهتون آموزش میدیم. استایلهایی که میتونین از اونا استفاده کنید رو در ز...

0 30 ۲۲ مهر ۹۵ در جلسه قبل در مورد استایل دهی به Underline براتون توضیحاتی دادم و شما رو با مزایا و معایب border-bottom آشنا کردم. در این جلسه میخایم در مورد دیگر روشها با همدیگه بحث کنیم. استفاده از box-shadow همونطور که میدونین با استفاده از ویژگی box-shadow میتونیم سایه هایی رو برای المنتهای مورد نظرمون قرار بدیم. سایه ها بصورت پیش فرض خارج از المنت ها قرار میگیرن ولی شما میتونین با قرار دادن مقدار inset اونا رو درونی کنید و با اینکار اون سایه درون خود المنت قرار میگیره. برای اینکه با اس...