خانه

CSS و ترفندها

دنیای تازه‏ای به سوی طراحان وب: CSS 3

7 January 2009

W3 در حال کار کردن بر نسخه تازه‏ای از CSS است. تا به حال پیش‏نویس خیلی از بخشها کامل شده است و برخی از مرورگرها هم اندک اندک دارند، به سمت پشتیبانی از ویژگی‏های جدید CSS 3 می‏روند.

CSS 3 ویژگی‏های جالب زیادی دارد. چند تا از این ویژگی‏ها به نظر من اینها هستند:

  • گوشه‏های دایره‏ای: درست کردن این گوشه‏ها به طور معمولی کار سختی است و باید تصاویر زیادی را ذخیره کرد و DIVهای زیادی را درست کرد که کار را سخت می‏کند. اما با Selector تازه‏ای که در CSS 3 به نام border-radius درست شده، این کار به راحتی دادن یک عدد به این Selector است.
  • امکان کم و زیاد کردن Opacity یک DIV: در CSS 2 این کار تنها با یک فایل PNG 24 Bit و Background کردن آن امکان‏‎پذیر بود. اگر چه این روش هم در IE6 به دلیل پشتیبانی نکردن از PNG 24 Bit کار نمی‏کرد. در CSS 3 به سادگی می‏شود با Selector تازه‏ای به نام Opacity، این تغییر را ایجاد کرد.
  • امکان انداختن سایه به DIVها: این کار هم به سادگی با Box-shadow امکان پذیر است. می‏شود این سایه را به هر یک از چهار طرف یک DIV داد.
  • تغییر اندازه DIVها: این ویژگی واقعا فوق‏العاده است. با مقداردهی ویژگی resize به both امکان تغییر اندازه یک DIV توسط کاربر وجود دارد. من نمی‏دانم که آیا این تغییر اندازه Constraint خاصی هم می‏تواند داشته باشد یا نه.

(همین طور که چیزهای بیشتری درباره CSS 3 و ویژگی‏های جدید آن خواندم، این لیست را به روز می‏کنم)

در همین زمینه:

درست کردن Image Rollover بدون Javascript و تنها به کمک CSS

4 January 2009

من در وبلاگم منوهایی دارم که با بردن نشانگر ماوس بر آنها تصویرشان تغییر می‏کند. رایج است که این منوها را با JavaScript و با کمک رویداد OnMouseOver انجام بدهند. روش کار با JavaScript چندان دشوار نیست. کافی است برای Elementی که می‎خواهیم تصویر آن تغییر کند، یک ID منحصر به فرد مثل imgHome درست کنیم و بعد در رویدار OnMouseOver با کمک توابع DOM این Element مورد نظرمان را پیدا کنم و دست آخر هم ویژگی background-image آن را عوض کنیم. از لحاظ فنی کار چندان سختی نیست ولی زمان‏بر است و کمی هم شلوغ است و نیاز به JavaScript هم دارد.

همین کار را خیلی ساده‏تر و بدون به کارگیری حتی یک خط JavaScript و تنها و تنها با کمک CSS می‏شود انجام داد. روش کار خیلی ساده است. نخست لازم است تا تصویر حالت اول و تصویر حالت دوم‏تان را به هم بچسبانید و هر دو کنار هم کار کنید:

حالا در HTML صفحه‏تان لینکهایتون رو به این شکل تعریف کنید:

1 <div id="menu">
2 <ul>
3 <li id="home"><a href="/"></a></li>
4 <li id="projects"><a href="/projects"></a></li>
5 <li id="tutorials"><a href="/tutorials"></a></li>
6 <li id="about"><a href="/about"></a></li>
7 <li id="contact"><a href="/contact"></a></li>
8 </ul>
9 </div>

حالا برای تک تک منوهایی که برایشان ID تعریف کرده‏ایم باید در CSSتان کدهای مشابه زیر را بنویسید:

1 #menu #home a {
2 background:url(images/itm-home.png);
3 width:38px; height:30px;
4 display:block;
5 }
6
7 #menu #home a:hover {
8 background:url(images/itm-home.png) 0 -30px;
9 }

مهمترین بخش این ترفند همان -30px است که در ویژگی background مربوط به a:hover می‏بینید. خیلی ساده است. ما ویژگی top این image را منفی 30 داده‏ایم تا تصویر ما 30 پیکسل به سمت بالا کشیده بشود و تصویر دوم ما نشان داده بشود.
حجم کدهای مورد نیاز برای این کار خیلی خیلی کمتر از کدی است که باید برای این مسئله در JavaScript بنویسید و تازه خیلی هم تر و تمیزتر است و بدون نگرانی از ناهماهنگی‏های JavaScript در مرورگرهای مختلف می‏توانید مطمئن باشید که این CSSها در همه مرورگرهای رایج بدون هیچ مشکلی کار می‏کنند.

Syndicate content