نکات سی اس اسی(CSS Tip)

[Opera 36]

سلام به همه دوستان

تو این تاپیک میخوام شروع کنم به نوشتن نکاتی در باب css که تجارب شخصیمه

درسته که کتاب تو این زمینه فراوونه و خیلی در موردش بحث شده

اما ممکنه همه نتونند کتابی رو بخونند به صورت کامل و شاید بعضی موارد ریز از دستشون در بره که در آینده موجب گله کاربران میشه

اگر دوستان هم مواردی به نظرشون میاد اینجا بفرمایند

این پست اول هم به صورت فهرست در میاد و تمامی پست های بعدی لیست میشن توش

موفق باشید

[Opera 36]

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

فرض کنید در یک صفحه، تصویری تیره به عنوان زمینه تهیه شده است و روی این تصویر تیره با رنگی روشن مثل سفید نوشته شده است. خب تا اینجا مشکلی نیست. اما حالتی را در نظر بگیرید که این تصویر برای کاربر بارگذاری نشود. (مثلا کاربر تصاویر را غیرفعال کرده باشد یا اینکه به دلیل سرعت پایینش، تصویر برایش لود نشود) حالا چه اتفاقی می‌افتد؟ تصویر تیره لود نشده و متن سفید رنگ بر روی ضمیمه سفید می‌افتد و کاربر قادر به خواندن متن نخواهد بود.

حل این مشکل چندان سخت نیست. کافی‌ست هنگام تعریف تصویر زمینه در css، رنگ پیش‌فرض زمینه را نیز معرفی کنید

#main { background: #111 url(/image/bg.png) fixed ; }

[Opera 36]

برای ایجاد سایه دور کادر های موجود در صفحه‌ی وب دو راه وجود دارد

استفاده از عکس پس زمینه و CSS3

هر کدام از این راه ها مزایا و معایب خود را دارد ، استفاده از CSS3 ممکن است مشکل سازگاری با اینترنت اکسپلورر را داشته باشد در صورتی که استفاده از پس زمینه تصاویر در همه‌ مرورگرها پشتیبانی می شود

مزیتی که در استفاده از CSS3 وجود دارد سادگی اجرا و انعطاف پذیری با هر سایز کادر می باشد

در صورتی که تعداد زیادی باکس با ابعاد عرضی مختلف در صفحه دارید استفاده از تصاویر کار شما را به شدت سخت می کند ، البته این به نوع سایه و تقارن عرضی هم بستگی دارد اما سایه ای که در اینجا با CSS3 اجرا می کنیم اگر بخواهیم با تصویر اجرایش کنیم باید یک تکه درست بشود و از تکرار عرضی Background repeat-x نمی شود استفاده کرد و مجبور خواهید شد که بررای هر عرضی از باکس یک تصویر و کلاس جداگانه بنویسید

دانلود افکت سایه دور کادر

[Opera 36]

برای تغییر استایل لینک مثلا یک فایل pdf یا لینکی که با http یا https یا ftp و ... شروع میشه یا آیکون گذاری کنار نوع فایلها یا لینکها می توانید از این روش استفاده نمایید .

همچنین با جاواسکریپت یا jquery هم میتوان این کار را انجام داد ، اما این روش تغییرات را از همان ابتدا اعمال می کند

/* external links */
a[href^="http://"]
{
padding-right: 13px;
background: url(external.gif) no-repeat center right;
}

/* emails */
a[href^="mailto:"]
{
padding-right: 20px;
background: url(email.png) no-repeat center right;
}

/* pdfs */
a[href$=".pdf"]
{
padding-right: 18px;
background: url(acrobat.png) no-repeat center right;
}