css-blender

CSS Blender

در اینجا قصد معرفی ابزار آنلاینی برای تست و بررسی blend mode ها در دنیای CSS را داریم. اگر تا به حال در مورد blend mode ها نشنیده اید این مطلب کمک خوبی برای شما خواهد بود. این ابزار از طریق کلیدهای نوار بالا به شما این امکان را می دهد تا بتوانید تصویر و […]

background-blend-mode

از ویژگی background-blend-mode برای تعیین حالت آمیختگی رنگ لایه های مختلف پس زمینه یک عنصر استفاده می شود. در CSS می توانید با استفاده از این ویژگی تصاویر پس زمینه یک عنصر را با هم و یا رنگ پس زمینه یک عنصر را با تصویر پس زمینه اش ترکیب کنید. برای آشنایی با حالت های […]

متحرک سازی دکمه علاقه مندی در Css

ساخت دکمه علاقه مندی با طعمی متفاوت

چند روز قبل دمویی برای متحرک سازی دکمه علاقه مندی دیدم که تصمیم به استفاده از آن در یک کارت کردم که در این مطلب قصد اشتراک آن را با شما دارم. دمویی که وجود داشت با استفاده از SVG ساخته شده بود و همینطور انیمیشن آن از لحاظ کارایی در سطح پایینی قرار داشت […]

autoprefixer

Autoprefixer: ابزار پیشوندگذاری

یکی از دغدغه های این روزها در دنیای CSS نوشتن خطوط استایلی است که برای اینکه در مرورگرهای مختلف کار کنند نیاز به prefix یا پیشوند دارند. کد زیر را در نظر بگیرید: div { transition: all 1s ease; } برای اینکه این خط بهترین پشتیبانی را در مرورگرهای مختلف داشته باشد باید به صورت […]

چک باکس ها

چک باکس های باور نکردنی

در اینجا قصد نمایش چند دمو که ظاهر یک چک باکس به طور خلاقانه در آنها تغییر یافته است را داریم. اگر با ساخت همچین چک باکس هایی در css آشنایی ندارید به این مطلب برای یادگیری مراجعه کنید.   See the Pen Toggle Rebound by Mojtaba Seyedi (@seyedi) on CodePen.     See the […]

Checkbox

تغییر ظاهر چک باکس با CSS

در این ترفند می خواهیم تبدیل کردن عناصر چک باکس را به عناصر گرافیکی جالب آموزش دهیم و یک دمو را قدم به قدم با هم بررسی کنیم. فرمول اصلی قضیه از این قرار است که ما قصد مخفی کردن عنصر input را داریم و می خواهیم استایل دلخواه را بر روی label متصل به […]

navicon-transform

ساخت آیکون همبرگر با css

امروزه با افزایش کاربران موبایل ها و تبلت ها, آیکون منوی مخصوص این دستگاه ها که معروف به آیکون همبرگر است بیشتر به چشم می خورد. در این مطلب قصد معرفی چند دمو برای تغییر شکل دادن این آیکون در موردهای استفاده متفاوت را داریم. پشتیبانی مرورگر ها ie Chrome Firefox Safari Opera 9+ ساختار […]

circular-menu

پیاده سازی منوی دایره ای

در این اینجا قصد ساخت یک منوی دایره ای داریم که می توان از آن برای منو اشتراک گذاری یا منوهایی با محتوای دیگر چه در صفحات وب و چه در نرم افزارهای موبایل استفاده کرد. پشتیبانی مرورگر ها ie Chrome Firefox Safari Opera 10+ توجه داشته باشید که در این مطلب ما کدهای اصلی […]

offcanvas

پیاده سازی منو برای موبایل و تبلت

در این مطلب قصد بررسی نحوه ساخت یک‌ منوی ساده و‌ کاربر پسند را برای دستگاه های موبایل و‌ تبلت داریم. تلاش می کنیم که ساخت این دمو را به صورت مرحله ای انجام دهیم و برای هر مرحله کدهای آماده را برای بررسی کردن در دسترس شما قرار دهیم. پشتیبانی مرورگر ها ie Chrome Firefox Safari […]

box-model box-sizing playground

زمین بازی box-sizing

در اینجا قصد معرفی ابزاری برای یادگیری و بررسی بهتر ویژگی box-sizing و همینطور درک مفاهیم پایه مثل عرض و ارتفاع و همینطور border و margin و padding را داریم. اگر با مفهموم box-sizing آشنا نیستید بهتر است اول نگاهی به این مطلب داشته باشید. در سمت چپ بالای این ابزار قادر به تغییر ویژگی […]