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

در این قسمت میخوام یک کد (xa0Lazy loading SVG ) جالب رو در اختیارتون بذارم. دمو توضیحات مربوط به کد Lazy loading SVG همونطور که دیدید یک ایده زیبا برای لود شدن تصاویر قرار داده شده است و میتونین از اون در سایت خودتون استفاده کنید. همونطور که میبینید تا زمانی که تصویر اصلی لود … کدهای جذاب و دیدنی ( Lazy loading SVG ) : ایده جالب برای لود شدن تصاویر با SVG سون لرن • آموزش طراحی وب و جاوا اسکریپت ، HTML ، CSS و PHP ...

در این قسمت میخوام یک کد (xa0Typographic Clock ) جالب رو در اختیارتون بذارم. توضیحات مربوط به کد Typographic Clock همونطور که دیدید یک ساعت جالب با استفاده از متن و تایپوگرافی ساخته شده است و میتونین از اون ایده بگیرید و در سایتتون استفاده کنید. برای اینکار از Flexbox و کلاسهای کاذب و ... استفاده شده است. برای مشاهده نحوه پیاده سازی این نمونه میتونین وارد بخش View Source بشید. بدلیل اینکه حجم کدها زیاد بود ، اونارو در انتهای همین مطلب قرار میدم که میتونین اونو دانلود کرده و استفاده کنید. امیدوار...

در این قسمت میخوام یک کد (xa0SkiFree ) جالب رو در اختیارتون بزارم. دموتوضیحات مربوط به کد SkiFree همونطور که دیدید بازی ساده و جالب مرتبط با اسکی ساخته شده است و میتونین با استفاده از کلیدهای کیبورد اون رو هدایت کنید و امتی...

همونطور که اطلاع دارید در جلسه قبل در موردxa0ویژگی Pointer-events توضیحاتی رو قرار دادیم و مثالهایی رو زدیم تا شما رو با قابلیتهای اون آشنا کنیم. در این جلسه میخوایم کار با ویژگی های text-shadow و box-shadow و فیلتر drop-shadow و کاربردهای اونا رو به ش...

همونطور که اطلاع دارید در جلسه قبل در موردxa0ویژگی Shape-outside توضیحاتی رو قرار دادیم و مثالهایی رو زدیم تا شما رو با قابلیتهای اون آشنا کنیم. در این جلسه میخوایم کار با ویژگی pointer-events و کاربردهای اون رو به شما توضیح بدیم. مقدمات مربوط به Point...

در این قسمت میخوام یکxa0کدxa0( Lonely Planetxa0) جالب رو در اختیارتون بزارم. توضیحات مربوط Lonely Planet همونطور که دیدید یک سیاره بزرگ ثابت قرار داده شده و یک سیاره کوچک به دور اون میچرخه. زمانی که سیاره کوچک در پشت سیاره بزرگ قرار میگیره، سیاره بزرگ نارا...

همونطور که اطلاع دارید در جلسه قبل در موردxa0ویژگی Shape-outside توضیحاتی رو قرار دادیم و مثالهایی رو زدیم تا شما رو با قابلیتهای اون آشنا کنیم. در این جلسه میخوایم این موضوع رو ادامه بدیم و مثالهای بیشتری رو در اختیارتون قرار بدیم. مقادیر مجاز برای Shape-outside همونطور که دیدید با استفاده از این ویژگی میتونین روند و جریان قرارگیری متن در کنار یک تصویر یا المنت رو مشخص کنید. شما میتونین با استفاده از مقادیر مختلفی که برای این ویژگی وجود داره، یک شکل رو تعریف کنید و متون نیز به همون صورت قرار می...

در این مطلب میخوامxa0سایتیxa0رو بهتون معرفی کنم که یک مرورگر بسیار زیبا و جالب رو بصورت رایگان در اختیارتون قرار میده که ظاهر و امکانات جالبی داره و میتونین از اون استفاده کنید. برای شروع وارد سایتxa0Opera Neonxa0بشین. توضیحات مربوط به مرورگر Opera Neon مرورگر Opera Neon یکی از محصولات Opera هست و میتونین اون رو بصورت رایگان برای سیستم عاملهای Mac و Windows دانلود کنید. این مرورگر ظاهر و چیدمان بسیار زیبا...

همونطور که اطلاع دارید در جلسه قبل در موردxa0ویژگی های با قابلیت انیمیشنی شدن و ویژگی table-layout توضیحاتی رو قرار دادیم و شما رو با اونا آشنا کردیم. در این جلسه میخوایم در مورد ویژگی Shape-outside توضیحات و مثالهایی رو قرار بدیم. همونطور که میدونین CSS از Box Model پیروی میکنه و به همین دلیل هست که همه المنتها بصورت مستطیلی نمایش داده میشن. حتی اگر از ویژگی های CSS مخصوص تغییر شکل مثل border-radiu...

در این مطلب میخوام سایتی رو بهتون معرفی کنم که در اون 100 شکل هندسی جالب دایره ای و قدیمی قرار داده شده که میتونین اونا رو بصورت رایگان دانلود کرده و مورد استفاده قرار بدین. برای شروع وارد سایتxa0Mandalaxa0بشین. توضیحات مربوط به این اشکال Mandala اشکال اساطیری و عموما دایره ای شکل هستند که در طراحی های قدیمی از اونا استفاده میشد. شما میتونین این 100 شکل برداری رو بصورت رایگان دانلود کرده و در طراحی لو...

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

در این مطلب میخوام سایتی رو بهتون معرفی کنم که طراحی فوق العاده زیبایی رو داره و کار کردن با اون واقعا کاربر رو سرگرم میکنه و تجربه کاربری بسیار خوبی رو داره. برای شروع وارد سایتxa0Obrigado Naturalxa0بشین. توضیحات مربوط به طراحی سایت همونطور که مشاهده کردید در همون اول که سایت لود میشه یک انیمیشن زیبا انجام میشه و کاربر رو به خودش جذب میکنه. بر روی هر آیکون یا دکمه ای که هاور کنید، افکت زیبایی نمایش د...

در این مطلب میخوام سایتی رو بهتون معرفی کنم که در اون بهترین و محبوب ترین طراحی های در زمینه Material Design رو قرار داده و شما با دیدن اونا میتونین ایده های زیادی برای طراحی بگیرید و از اونا استفاده کنید. برای هر طرح یک gif قرار داده شده که نحوه عملکرد اون رو نمایش میده و با کلیک بر روی هر کدام به صفحه مختص به اون هدایت میشید و میتونین اطلاعات بیشتری در مورد اون کسب کنید. برای شروع وارد سایتxa0Mate...

در این مطلب میخوام سایتی رو بهتون معرفی کنم که در محیط Photoshop با استفاده از 13 دایره کوچک و بزرگ و با تقاطع اونا، 13 حیوان مختلف رو به وجود آورده که میتونین از اون ایده بگیرید و هر حیوان یا چیز دیگه ای رو که بخواید طراحی کنید. این آموزش بصورت مرحله به مرحله این کار رو به شما آموزش میده. در آخر آموزش نیز 13 حیوان ساخته شده به این روش رو به علاوه دایره هایی که اون رو به وجود آوردن قرار داده و میت...

همونطور که اطلاع دارید در جلسه قبل در مورد ویژگی هایxa0Perspective و Position و Resize توضیحاتی رو قرار دادیم و شما رو با استفاده از مثال با اونا آشنا کردیم. در این جلسه قصد داریم در مورد ویژگی white-space که یک ویژگی کاربردی و مفید هست، بیشتر آشناتون کنیم. این ویژگی شاید برای خیلی از کسانی که تازه طراحی وب رو شروع میکنن و یا حتی کسانی که تجربه دارند به خوبی شناخته شده نباشه و گاهی اوقات باعث گیج ش...

در این مطلب میخوام سایتی رو بهتون معرفی کنم که طراحی فوق العاده و زیبایی داره و با کلیک یا هاور کردن بر روی هر جای سایت، یک افکت زیبا انجام میشه. میتونین وارد صفحات مختلف بشید و همه قابلیت های این سایت رو مشاهده کنید. برای شروع وارد سایتxa0Residentexa0بشین. امیدوارم بدردتون بخوره. موفق باشید. یا علی ...

0 11 ۲۳ مرداد ۹۶ همونطور که اطلاع دارید در جلسه قبل موضوع واحدهای Viewport رو شروع کردیم و توضیحات مقدماتی رو در مورد اونا دادیم و شما رو با اونا آشنا کردیم. در این جلسه قصد داریم تعدادی از موارد کاربردی برای این واحدها رو به شما توضیح بدیم. مثالهای کاربردی برای واحدهای Viewport از اونجایی که این...

در این مطلب میخوام سایتی رو بهتون معرفی کنم که در اون با استفاده از تصویرهای بسیار جالب، بصورت خیلی ساده Service worker رو به شما آموزش میده و میگه که چی هست و به چه دردی میخوره. برای شروع وارد سایتxa0Service-Workerxa0بشین. امیدوارم بدردتون بخوره. موفق باشید. یا علی ...

0 22 ۱۸ مرداد ۹۶ همونطور که اطلاع دارید در جلسه قبل، مبحث متغیرهای CSS رو به پایان رسوندیم و تقریبا تمامی نکات مربوط به اون رو برای شما توضیح دادیم. در این جلسه قصد داریم در مورد unit یا واحدهای مربوط به Viewport توضیحاتی رو قرار بدیم. برای این مطلب از این لینک بعنوان منبع استفاده میکنیم. همونطور...

در این مطلب میخوام سایتی رو بهتون معرفی کنم که در اون یک فونت جالب و حرفه ای قرار گرفته که با استفاده از اون میتونین متن و اطلاعات و داده های تصویری رو به نمایش بزارین و اطلاعات بیشتری رو در قالب متن به کاربران نمایش بدین. برای شروع وارد سایتxa0Datalegreyaxa0بشین. امیدوارم بدردتون بخوره. موفق باشید. یا ...