هفت تکنیک در CSS که احتمالاً با آنها آشنا نیستید

با انتشار نسخه سوم CSS و حمایت بیشتر مرورگر های وب از تکنولوژی های جدید همواره شاهد ترفند ها و استایلهای جدید در <a href="http://psi-co.net">طراحی سایت</a> خواهیم بود . این استایلها برای پیاده سازی افکتهای بصری پیچیده بدون نیاز به اسکریپ نویسی به این نسخه CSS اضافه شده اند . در این مقاله هفت کد رابه شما معرفی خواهیم کرد که احتمالا بیش از این استفاده نکرده اید.

مقالات مرتبط

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

CSS @supports

دانستن این که مرورگر ها استایل ها و کدهای موجود در سایت را پشتیبانی می کنند یکی از مهمترین بخش های طراحی سایت میباشد. اکثر طراحان وب در مرورگر های مختلف با مشکلات زیادی مواجه میشوند که استفاده از کد زیر میتواند به ایشان در نمایش درست استایلها در صورت پشتیبانی مرورگر از آنها، کمک کند.

در کد بالا تنها در صورتی که مرورگر از خصیصه flex پشتیبانی کند استایلهای بلاک support نمایش داده خواهند شد.

CSS Filters

اگر قبلاً با نرم افزارهایی همچون Photoshop کار کرده باشید مطمئناً با فیلتر ها آشنایی دارید. با استفاده از فیلترها در CSS میتوان همان عملیاتی که قبلاً برای پیاده سازی آنها باید از Photoshop و یا دیگر نرم افزارهای مشابه استفاده میکردیم را به راحتی در مرورگر را پیاده سازی کرد. نکته جالب هم این هست که میتوان از آنها در انیمیشن ها استفاده کرد.

طراحی سایت طراحی وب سایت طراحی وبسایت

متاسفانه پشتیبانی از فیلتر ها همچنان محدود هست و تنها Googel Chrome آنها را به طور کامل پشتیبانی میکند.

جلوگیری از event های اشاره گر

حتماً برایتان پیش آمده که یک المان را تحت شرایط ویژه به کاربر نمایش میدهید و کاربر میتواند با آن المان از طریق کلیک یک دکمه یا ... تعامل داشته باشد اما زمانی که آن المان مخفی است همچنان event کلیک آن اجرا میشود. خوشبختانه با استفاده از CSS3 شما میتوانید علاوه بر مخفی نمودن آن المان جلوی اجرای event های ماوس آن را نیز بگیرید.

انیمیشن کرکره ای با استفاده از CSS

در گذشته برای این نوع انیمیشن یک راه استفاده از jquery و متدهای slideDown و slideUp بود اما این انیمیشن با استفاده از CSS قابل پیاده سازی است و نیازی به jquery نمیباشد.

شمارنده ها در CSS

با اجرای کد بالا در شبه المان after شماره آن المان قرار میگیره

طراحی سایت، طراحی وب سایت

Unicode CSS Classes

در نسخه CSS3 امکان استفاده از کاراکترهای Unicode در نامگذاری کلاسها و id های المانهای html امکانپذیر شده است. البته استفاده از کاراکترهای Unicode برای این منظور به دلیل عدم پشتیبانی کامل آنها توسط بروزرهای گوناگون به خصوص نسخه های موبایل توصیه نمیشود.

دایره ها در CSS3 و انیمیشنها

تبدیل یک عنصر مربع به دایره به همراه انیمیشن و تغیر رنگ