به احتمال زیاد با ساخت رنگ های نیمه شفاف در CSS بوسیله توابع رنگی ()rgba و ()hsla آشنایی دارید. با وجود اینکه خیلی از افراد با این توابع آشنایی دارند و همینطور جلوه های زیبایی می توان بوسیله آنها بوجود آورد هنوز هم خیلی ها از این توابع استفاده نمی کنند. و اگر هم مورد […]
دنیای وب امروز سرشار از متحرک سازی های چشم نواز و شگفت انگیز است. امروزه توسعه دهندگان وب از روش های مختلف برای تشویق و سرگرم کردن و یا آگاهی دادن و هدایت کردن مخاطبینشان استفاده می کنند. و انیمیشن یکی از این ابزارها برای رساندن ما به این هدف می باشد. در این مطلب […]
وسط قرار دادن عناصر در طراحی صفحات وب یکی از موارد رایج می باشد. در این مطلب قصد داریم تقریبا همه شرایطی که برای وسط قرار دادن عناصر بوجود می آیند را بررسی کنیم. این نوشته ترکیبی از مطلب عالی در سایت css-tricks.com و تجربه بنده است. چون موضوع از اهمیت زیادی برخوردار است از […]
تعریف صورت مسئله به عنوان یک برنامه نویس و یا طراح وب قطعا تابحال دموی خاص و یا استایل خاصی را دیده اید که بسیار جذاب بوده است و با یک هیجان زیاد تصمیم به پیاده سازی آن را برای پروژه ای که در حال ساختش هستید گرفته اید اما به محض اینکه شروع به […]
همانطور که می دانید نوشته جایگزین یک تصویر در صفحات وب بوسیله خاصیت alt در تگ <img> به وجود می آید. <img src=”bird.jpg” alt=”تصویر یک پرنده خیلی خشنگ” /> ما به دلایل زیر از این ویژگی استفاده می کنیم: در صورت بروز هر مشکل برای تصویر کاربر می تواند این متن را ببیند و شاید […]
در مطالب قبل در مورد ویژگی های ترنزیشن صحبت شد, در اینجا قصد بیان نکته های تکمیلی این ویژگی را داریم. تعریف ترنزیشن در وضعیت های مختلف یک عنصر شاید تا الان به این نکته توجه نکرده باشید که برای یک عنصر می توانید در چند وضعیت متفاوت ترنزیشن های متفاوتی تعریف کنید. به عنوان […]
در اینجا قصد معرفی ابزار آنلاینی برای تست و بررسی blend mode ها در دنیای CSS را داریم. اگر تا به حال در مورد blend mode ها نشنیده اید این مطلب کمک خوبی برای شما خواهد بود. این ابزار از طریق کلیدهای نوار بالا به شما این امکان را می دهد تا بتوانید تصویر و […]
یکی از دغدغه های این روزها در دنیای CSS نوشتن خطوط استایلی است که برای اینکه در مرورگرهای مختلف کار کنند نیاز به prefix یا پیشوند دارند. کد زیر را در نظر بگیرید: div { transition: all 1s ease; } برای اینکه این خط بهترین پشتیبانی را در مرورگرهای مختلف داشته باشد باید به صورت […]
در این ترفند می خواهیم تبدیل کردن عناصر چک باکس را به عناصر گرافیکی جالب آموزش دهیم و یک دمو را قدم به قدم با هم بررسی کنیم. فرمول اصلی قضیه از این قرار است که ما قصد مخفی کردن عنصر input را داریم و می خواهیم استایل دلخواه را بر روی label متصل به […]
در اینجا قصد معرفی ابزاری برای یادگیری و بررسی بهتر ویژگی box-sizing و همینطور درک مفاهیم پایه مثل عرض و ارتفاع و همینطور border و margin و padding را داریم. اگر با مفهموم box-sizing آشنا نیستید بهتر است اول نگاهی به این مطلب داشته باشید. در سمت چپ بالای این ابزار قادر به تغییر ویژگی […]