از ویژگی background-blend-mode برای تعیین حالت آمیختگی رنگ لایه های مختلف پس زمینه یک عنصر استفاده می شود. در CSS می توانید با استفاده از این ویژگی تصاویر پس زمینه یک عنصر را با هم و یا رنگ پس زمینه یک عنصر را با تصویر پس زمینه اش ترکیب کنید. برای آشنایی با حالت های […]
چند روز قبل دمویی برای متحرک سازی دکمه علاقه مندی دیدم که تصمیم به استفاده از آن در یک کارت کردم که در این مطلب قصد اشتراک آن را با شما دارم. دمویی که وجود داشت با استفاده از SVG ساخته شده بود و همینطور انیمیشن آن از لحاظ کارایی در سطح پایینی قرار داشت […]
یکی از دغدغه های این روزها در دنیای CSS نوشتن خطوط استایلی است که برای اینکه در مرورگرهای مختلف کار کنند نیاز به prefix یا پیشوند دارند. کد زیر را در نظر بگیرید: div { transition: all 1s ease; } برای اینکه این خط بهترین پشتیبانی را در مرورگرهای مختلف داشته باشد باید به صورت […]
در اینجا قصد نمایش چند دمو که ظاهر یک چک باکس به طور خلاقانه در آنها تغییر یافته است را داریم. اگر با ساخت همچین چک باکس هایی در css آشنایی ندارید به این مطلب برای یادگیری مراجعه کنید. See the Pen Toggle Rebound by Mojtaba Seyedi (@seyedi) on CodePen. See the […]
در این ترفند می خواهیم تبدیل کردن عناصر چک باکس را به عناصر گرافیکی جالب آموزش دهیم و یک دمو را قدم به قدم با هم بررسی کنیم. فرمول اصلی قضیه از این قرار است که ما قصد مخفی کردن عنصر input را داریم و می خواهیم استایل دلخواه را بر روی label متصل به […]
امروزه با افزایش کاربران موبایل ها و تبلت ها, آیکون منوی مخصوص این دستگاه ها که معروف به آیکون همبرگر است بیشتر به چشم می خورد. در این مطلب قصد معرفی چند دمو برای تغییر شکل دادن این آیکون در موردهای استفاده متفاوت را داریم. پشتیبانی مرورگر ها ie Chrome Firefox Safari Opera 9+ ساختار […]
در این اینجا قصد ساخت یک منوی دایره ای داریم که می توان از آن برای منو اشتراک گذاری یا منوهایی با محتوای دیگر چه در صفحات وب و چه در نرم افزارهای موبایل استفاده کرد. پشتیبانی مرورگر ها ie Chrome Firefox Safari Opera 10+ توجه داشته باشید که در این مطلب ما کدهای اصلی […]
در این مطلب قصد بررسی نحوه ساخت یک منوی ساده و کاربر پسند را برای دستگاه های موبایل و تبلت داریم. تلاش می کنیم که ساخت این دمو را به صورت مرحله ای انجام دهیم و برای هر مرحله کدهای آماده را برای بررسی کردن در دسترس شما قرار دهیم. پشتیبانی مرورگر ها ie Chrome Firefox Safari […]
در اینجا قصد معرفی ابزاری برای یادگیری و بررسی بهتر ویژگی box-sizing و همینطور درک مفاهیم پایه مثل عرض و ارتفاع و همینطور border و margin و padding را داریم. اگر با مفهموم box-sizing آشنا نیستید بهتر است اول نگاهی به این مطلب داشته باشید. در سمت چپ بالای این ابزار قادر به تغییر ویژگی […]
از ویژگی box-sizing برای تغییر روش اندازه دهی به یک عنصر بر اساس مدل قسمت بندی آن استفاده می شود. هر عنصر از لحاظ مدل قسمت بندی دارای چهار ناحیه است که این نواحی شامل ناحیه محتوا (content-box), ناحیه فاصله داخلی (padding-box) و ناحیه حاشیه (border-box) و در نهایت ناحیه فاصله خارجی یا (margin-box) هستند. […]
