وبلاگ شخصی مهدی مشتاقی

بکارگیری ویژگی‌های CSS3 در طراحی وب

امروزه اهمیت CSS (سبک‌ نامه‌های آبشاری) در طراحی وب، به امری غیر قابل اجتناب تبدیل شده است و این تا حدی است که می‌توان به جرات گفت که اینکار بدون CSS امکان پذیر نیست و البته اگر هم چیزی به وجود آید، در نهایت سندی متنی است در قالب HTML.
همانطور که می‌دانید CSS از انتخابگرها، خصیصه‌ها و مقادیر آنها تشکیل شده است و همین است که طراحی را تا حد بسیار زیادی راحت، قابل انعطاف و جذاب می‌کند.
CSS در نسخه سوم خود خصوصیاتی را معرفی کرده که علاوه بر راحتی کار، به سبکی و چشم نوازی خروجی نیز کمک بسزایی می‌کند.
در ادامه به مرور برخی از این ویژگی‌ها می‌پردازیم.

گوشه‌های گرد (Border Radius)

گوشه‌های گرد می‌توانند جلوه‌ی خاصیی به طرح دهند. برای اینکار تکنیک‌های بسیاری موجود است که هر یک معایب و مزایای خود را دارند. اما راحت‌ترین و بهترین روش را CSS3 با استفاده از خصیصه border-radius به طراحان پیشنهاد می‌کند.

به قطعه کد زیر دقت کنید

-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;

البته این خصوصیت را می‌توان تنها برای گوشه‌ای خاص نیز در نظر گرفت

-moz-border-radius-topleft: 20px;
-moz-border-radius-topright: 20px;
-moz-border-radius-bottomleft: 10px;
-moz-border-radius-bottomright: 10px;
-webkit-border-top-right-radius: 20px;
-webkit-border-top-left-radius: 20px;
-webkit-border-bottom-left-radius: 10px;
-webkit-border-bottom-right-radius: 10px;

پشتبیانی در مرورگرها: Firefox – Safari – Chrome
نمونه : همین وبلاگ و twitter

تصویر حاشیه (Border Image)

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

border: 5px solid #cccccc;
-webkit-border-image: url(/images/border-image.png) 5 repeat;
-moz-border-image: url(/images/border-image.png) 5 repeat;
border-image: url(/images/border-image.png) 5 repeat;

شاخص border:5px عرض حاشیه و هر یک از شاخص‌های border-image فایل تصویری حاشیه را مشخص می‌کنند. تعداد دفعات تکرار تصویر، برای پر کردن کل منطقه حاشیه را مرورگر تشخیص می‌دهد.
البته این خاصیت را می‌توان تنها برای جهتی خاص نیز بکار گرفت و یا برای هر سمت، تصویری مجزا انتخاب کرد!

border-bottom-right-image
border-bottom-image
border-bottom-left-image
border-left-image
border-top-left-image
border-top-image
border-top-right-image
border-right-image

پشتبیانی در مرورگرها: Firefox 3.1 – Safari – Chrome
نمونه: Blog.SpoonGraphics

سایه‌ برای متون و باکس‌ها

خیلی جالبه که بدون استفاده از ابزار گرافیکی نظیر فتوشاپ و گیمپ و تصاویر تولیدی آنها بتوان افکتی همچون سایه را به اجسام موجود در صفحه اضافه کرد. (اجسام = Box و Text)
تنها با استفاده از کد‌های زیر

-webkit-box-shadow: 10px 10px 25px #ccc;
-moz-box-shadow: 10px 10px 25px #ccc;
box-shadow: 10px 10px 25px #ccc;

دو خصوصیت اول انحراف سایه را نسبت به المنت مربوطه تعیین می‌کنند. در این مثال، 10px در محور X و Y. خصیصه سوم نیز برای تنظیم تیرگی سایه بکار می‌رود و در نهایت رنگ سایه مشخص می‌شود.
همچنین از خصیصه text-shadow برای سایه دادن به محتوای متنی استفاده می‌کنیم.

text-shadow: 2px 2px 5px #ccc;

پشتیبانی در مرورگرها: Firefox 3.1 – Safari – Chrome (box-shadow) – Opera (text-shadow)
نمونه: 24 Ways

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

استفاده ار تصاویر PNG یکی از راه‌های نمایش شفافیت و تیرگی در صفحات وب است. اما هم اکنون اینکار بوسیله CSS امکان‌پذیر است.

rgba(200, 54, 54, 0.5);
/* example: */
background: rgba(200, 54, 54, 0.5);
/* or */
color: rgba(200, 54, 54, 0.5);

سه عدد اول برای تعیین رنگ و به همان روش RGB است و عدد چهارم مربوط به کانال آلفا می‌باشد که شفافیت را بوجود می‌آورد.
البته اینکار را می‌توان بصورت زیر نیز انجام داد

color: #000;
opacity: 0.5;

پشتیبانی در مرورگرها: Firefox – Safari – Chrome – Opera (Opticaly) – IE7+fix (Opticaly)
نمونه: 24 Ways

قلم‌های وب بوسیله @Font-Face

معمولاْ برای مشخص کردن قلم در طراحی وب انتخاب‌های زیادی نیست و محدود به فونت‌های مطمئنی نظیر Arial, Tahoma, Helvetica, Verdana, Georgia, Comic Sans و … می‌باشد. اما امروزه CSS این امکان را دارد که از قلم‌های قابل دانلود از اینترنت بهره ببرد و از آنها برای نمایش متون استفاده کند.
ابتدا خانواده قلم را معرفی و آدرس دانلود آن را تعریف می‌کنیم

@font-face {
font-family:'Anivers';
src: url('/images/Anivers.otf') format('opentype');
}

سپس می‌توان از قلم دانلود شده بطور معمول استفاده کرد.

h1 { font-family: ‘Anivers’, Helvetica, Sans-Serif;

پشتیبانی در مرورگرها: Firefox 3.1 – Safari – Opera 10 – IE7 (with fix)
نمونه: TapTapTap

[+] اطلاعات بیشتر راجع به قلم‌های قابل دانلود در الوان وب
اگرچه CSS3 کماکان در حال توسعه است، اما با اینحال توسط برخی مرورگرها پشتیبانی می‌شود.
مرورگر Safari در خصوص پشتیبانی از این ویژگی‌های جدید بسیار خوب عمل کرده، اما متاسفانه با وجود اینکه مرورگر با کیفیتی می‌باشد ،کاربران کمی از آن استفاده می‌کنند. اما کاربران آن روز بروز در حال افزایش هستند.
در سمت دیگر Firefox کاربران زیادی را به خود مشغول کرده. این مرورگر در نسخه ۳.۱ خود اکثر این ویژگی‌ها را پشتیبانی می‌کند و اقلب کاربران آن نیز مرورگر خود را بروز می‌کنند و به زودی بسیاری از کاربران وب می‌توانند از این شیوه استایل دهی پشتیبانی کنند.
Google Chrome هم که همین اواخر منتشر شده است و پشتیبانی نسبتاْ خوبی را آغاز کرده.

طبق آمار W3’s Browser statistics این امر نمایان می‌شود که در دسامبر ۲۰۰۸ ، از کل کاربران وب۴۴.۴٪ از Firefox و ۳.۶٪ از Chrome و تنها ۲.۷٪ از Safari استفاده می‌کنند. به این ترتیب تقریباْ ۵۱٪ کاربران وب از این ویژگی‌ها پشتیبانی می‌کنند. البته طبق آمار انجمن طراحان وب در این خصوص انتخاب مرورگرهایی که از ویژگی‌های CSS3 پشتیبانی می‌کنند بیشتر از ۷۳.۶٪ است.
[+] اطلاعات بیشتر در خصوص این آمار در Blog.SpoonGraphics

[+] منبع (طبق معمول، با دخل و تصرف)

پ ن – با توجه به مطالب بالا نظر شخصی من این است که با توجه به اینکه کاربران فارسی زبان بسیار از IE استفاده می‌کنند و حتی برخی IE را Internet می‌نامند، اما با این حال طراحان وب می‌توانند با توجه به کاربرد سایت و ظرفیت‌های کاربران آن این خصوصیات را در طرح‌های خود بکار بگیرند و کاربران را متقاعد کنند که شما را به خدا فایرفکس!!! و البته این موضوع را خاطر نشان شوید که چرا با اینکه می‌توانند با خودرویی نظیر BMW مدل Li به مسافرت روند، آن را کنار می‌گذارند و پیکان را سوار می‌شوند!!! (فکر می‌کنم بهترین مثال توجیهی برای هموطنانمان همین باشد)

پ ن – شما هم اگر هم اکنون این مطلب را بدون Firefox مشاهده می‌کنید بهتر است هم اکنون به جمع Firefoxی‌ها بپیوندید تا این وبلاگ ناچیز و البته اکثر صفحات وب را زیباتر ببینید.

پ ن – این مطلب را با عجله ترجمه و ویرایش کردم. لطفاْ اگر نکته جا افتاده و یا ایرادی در آن دیدید در قسمت نطرات بیان کنید تا تصحیح شود.

مطالب مرتبط

• کدهای کوتاه یا shortcodes در وردپرس (بخش اول)
• اصولی برای داشتن کدی تمیز و بی نقص