Whatever:Hover سلام حتما برای شما هم تا به حال پیش اومده که بخواید برای بخشهایی از سایتتون و یا سایتی که طراحی میکنید افکتی بزارید و زیبا تر و کاربرپسندترش کنید … و اصولا اگر به حجم صفحه و سرعت لود هم اهمیت بدید استفاده از CSS میتونه گزینه مناسبی باشه نسبت به فلش یا بعضی برنامه های جاوا و … تویه این مطلب میخوام براتون درباره افکت Hover صحبت کنم .. نحوه کاربردش و امکاناتش و محدودیتها و راه حلهاش ! حتما اسم Hover رو برای رنگ متن لینکها زمانی که موس رویه اونها قرار میگیره رو شنیدید ( در واقع OnMouseOver Event هست ) ولی امروز برای طراحی های حرفه ای تر کاربرد Hover فقط به لینک محدود نمیشه . در واقع شما میتونید برای هر عنصری از صفحتون استفاده کنید .. به عنوان مثال برای Paragraph یا یک Box به صورت DIV یا … و البته طبق معمول Internet Explorer با این افکت مشکل داره و در حقیقت اصلا نمایش نمیده . راه حلی برای IE موجوده که بعدا توضیح میدم .. برای درک ساده تر براتون مثالی میزنم : فرض کنید شما میخواید یک منوی خیلی ساده برای یک سایت طراحی کنید… شما تصمیم میگیرید با یک لیست غیر ترتیبی (Unordered List یا UL ) کارتون رو انجام بدید و میخواید که افکتی براش داشته باشید … خیلی ساده میتونید با تعریف یک کلاس و حالت Hover اون کلاس این کارو رو انجام بدید … نمونه کد CSS : HTML Code: .menu ul li { background: #CCCCCC; height: 18px; margin: 3px 0px 2px; padding: 0px 5px 0px 5px; border-right: 7px solid #666666; font: normal 12px Georgia, "Times New Roman", Times, serif; } و برای قسمت Hover : HTML Code: .menu ul li:hover { font: normal 12px Georgia, "Times New Roman", Times, serif; color: #000066; background: #FFFFCC; border-right: 7px solid #FF9900; padding-left: 7px; } و داخل صفحتون کد HTML به این شکل : … HTML Code: <ul>Menu 1 <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> </ul> … قرار میگیره ! نمونه این منوها رو تویه این صفحه (http://webriz.com/no/index.php?q=aHR0cDovL3dlYmxvZy5jb3JlbGlzdC5uZXQvZm lsZXMvaG92ZXIv) میتونید ببینید . هم افقی هم عمودی . به همین شکل شما میتونید این افکت رو برای جدولها ، متنها و … استفاده کنید … و اما بخش مهمتر موضوع IE و سازگاری با اون هست … معمولا اگر بخواید همچین افکتی رو برای IE داشته باشیم باید از Event های onmouseover و onmouseout و .. استفاده کنیم که در واقع برنامه نویسی جاوا هست … ولی مشکل اینجاست برای صفحات بزرگ و بخشهای مختلف استفاده زیاد از این موارد برای افکتمون خیلی جالب نیست و علاوه بر بالا بردن حجم ، سرعت Rendering صفحه هم پایین میاره و کدهامونو شلوغ میکنه ! حالا راه حل اینجاست (http://webriz.com/no/index.php?q=aHR0cDovL3dlYnBhZ2VzLmNoYXJ0ZXIubmV0L2 1tbWJlZXIvY29kZS9hcmJpdHJhcnktaG92ZXIv) ! خیلی ساده میشه با استفاده از یک فایل جاوا اسکریپت خارجی و CSS این مشکل رو حل کرد .. و در واقع این فایل هم دقیقا از همون Event هایی که گفتم استفاده میکنه ولی احتیاجی به تکرار اونها برای هر مورد نیست ! و تنها نکتش برای استفاده اینه که شما تویه فایل CSS تون دقیقا اون خواص مورد نظرتون رو که میخواید در حالت Hover داشته باشید رو به صورت کلاسی به همون نام تکرار میکنید ! برای مثال برای منویی که بالا گفتم میشه : HTML Code: .menu ul li.hover { font: normal 12px Georgia, "Times New Roman", Times, serif; color: #000066; background: #FFFFCC; border-right: 7px solid #FF9900; padding-right: 7px; } و به همین صورت . که اون فایل جاوا میاد و از تویه CSS تون این کلاسهایی که با .hover ختم میشه را به عنوان Event ه onmouseover قرار میده و مشکل حل میشه ! دریافت فایلهای نمونه و فایل جاوا (http://webriz.com/no/index.php?q=aHR0cDovL3dlYmxvZy5jb3JlbGlzdC5uZXQvZm lsZXMvaG92ZXIvaG92ZXIuemlw) امیدوارم به دردتون بخوره … موفق و پیروز باشید…
استفاده از CSS۳ در طرح بندی صفحات اگه با CSS2 آشنایی داشته باشید می‌دونین که برای طرح‌بندی (layout) یک صفحه از روش‌های مختلفی از جمله floating و positioning استفاده می‌کنن. البته امکاناتی که CSS 2 در اختیار ملت می‌ذاره زیاد جیگر نیست. اما در CSS3 یک ماژول مخصوص به نام Multi-column layout تعریف کردن که امکانات مناسب و خوبی در اختیار طراحان قرار میده و مثل این که دردسرهاش از CSS2 خیلی کمتره. شاید الان از خودتون بپرسید این مرتیکه هنوز CSS3 نیومده واس چی داره این چیزا رو به ما می‌گه؟! ببینید دوستان! ما باید از قبل آماده باشیم تا یه کسی پنیر ما رو جابجا کنه به شخصه فکر نکنم زمان زیادی طول بکشه تا W3C نسخه‌ی نهایی CSS3 رو آماده کنه. پس بهتره ما هم قبل از این که تغییرات به سراغمون بیان به پیشوازشون بریم تا بعدا راحت‌تر درگیر مسائلی مثل به هنگام کردن دانش، مهاجرت کردن و خو گرفتن با محیط و ابزارهای جدید و مشکلاتی مثل این‌ها بشیم. این امکان وجود داره که نسخه‌ی نهایی CSS3 نسبت به چیزی که در working draftهای فعلی وجود داره تغییراتی داشته باشه اما شخصا فکر نکنم این تغییرات بنیادی باشن. بذگریم!! و بریم سر اصل مطلب. همونطور که قبلا گفتم در CSS3 یک ماژول به نام Multi-column layout وجود داره. این ماژول دارای چندین خواص (properties)ه که میشه اونها رو در سه دسته‌ی زیر تقسیم بندی کرد: الف) دسته‌ای که تعداد و عرض ستون‌ها رو تعیین می‌کنن: # column-count # column-width # column-min-width # column-width-policy ب) دسته‌ای که فواصل بین ستون‌ها رو تنظیم می‌کنن: # column-gap # column-rule # column-rule-color # column-rule-style # column-rule-width پ) یه property تک و تنها به نام : column-span اما به خدمتتون بگم که من در چند مورد بی‌تقصیرم!! ...The border, padding and margin properties do not apply to these boxes (although they may do so in the future)... ...There is also no separate "background" properties for the column (although these may be defined in the future)... اما بپردازیم به تشریح این propertyها: - column-count: برای تعیین تعداد ستون‌ها به کار می‌ره. شما میتونید اون رو با یک عدد و یا یکی از دو حالت auto یا وراثتی (inherit) تعریف کنید. - column-width: برای تعریف پهنای (عرض) هر یک از ستون‌ها. هر پارامتری که برای سایز وجود داره (٪ - em - px و ..) + مقدار auto & حالت وراثتی (inherit) رو می‌پذیره. - column-min-width: مثل همون min-width می‌مونه منتها واسه‌ی هر ستون. - column-width-policy: این مشخصه نحوه‌ی تفسیر column-width رو ارایه میده. column-width-policy به دو صورت انعطاف‌پذیر (flexible) و یه دنده یا همون strict تعریف میشه. حالت انعطاف‌پذیر این اجازه رو میده تا پهنای هر ستون جهت پر کردن فضای قابل دسترس بیشتر بشه و حالت strict هم که ~. - column-gap: همونطور که تو تصویر هم می‌بینین این مشخصه فضای خالی بین هر ستون با column-role مشخص میکنه. - colum-rule: خط جدا کننده‌ی هر دو ستون که شامل color | style | width هم میشه. (style همون استایل‌های borderهاس). - column-span: تعیین کننده‌ی اینه که یه عنصر (المنت) به چندتا ستون میتونه تجاوز کنه!! تصویر زیر گویای همه چیز هست (۱۸- فقط ) <div style="column-count: 3; column-rule: solid black 0.3em; column-gap: 0.3em"> <h1 style="column-span: all">An imporant element</h1> <p>...</p> <h2 style="column-span: 2">A not-so important element</h2> <p>...</p> </div> اما ما در این ماژول یه چیز مسخره داریم به نام CWRG. این موجود در آینده دوست‌داشتنی دارای فرمولی است زیبا به قراره زیر: CWRG = column_count * column_width + (column_count-1) * (column_rule_width) + (column_count -1) * column_gap) در آخر باید بگم که به خاطر وجود این ماژول دو valueی دیگه به float اضاف شدن با نام‌های mid-column و in-column. تصویر زیر همه چیز رو بهتر می‌گه.
ساختن imagemap با CSS اول از همه با ماوس برين روی عکس بعدش هم يکی از دايره‌ها رو انتخاب کنين. امروز میخوام طرز ساختن يه همچين وروجکی (که بش می‌گن image map) رو یـاد بدم. ۱. مرحله‌ی نخست: آماده کردن تصاوير از اين ايده استفاده‌های زيادی میشه کرد. مثلا وقتی يه عکس گروهی رو روی وبلاگ يا سايت شخصيتون منتشر می‌کنين به جای اينکه بنويسين از راست به چپ اين xه اون yه می‌تونين از يه همچين تکنيکی استفاده کنين که جذاب‌تره یـا با این کار می‌تونین یه photo dictionary بسازین یا هزار تـا کار دیگه . همون طور که می‌بينين ما تصويری داريم که شامل چهار مدل گوشی موبايله (اين W800i منو کشته). بعد که شما با موشواره (به سبک جوتی: ماوس سابق، Mouse اسبق!) روی اين عکس می‌رين زرتی چهار تـا دايره اون زير میرا ظاهر میشه (تصوير دوم)؛ روی هر کدوم از دايره‌ها هم که برين مدل اون گوشی ثبت میشه. پس اولين کار اينه که شما تصاوير رو آماده کنين! نکته: لازم به اين همه تصوير بازی نيست! شما می‌تونين کاری کنين که مثلا موقع hover شدن چهار تـا border محدوده‌ی مورد نظرتون رو فرا بگيره و از اين فنت [...] کلک بازی‌ها! ۲. مرحله‌ی دٌيم: نوشتن کدهای HTML در اينجا ما از دو تگ dl و dt استفاده می‌کنيم: <dl id="imagemap"> <dt><a id="title" href="#"></a></dt> <dd><a id="w800i" href="hala har chi !!"></a></dd> <dd><a id="d750i" href="hala har chi !!"></a></dd> <dd><a id="k750i" href="hala har chi !!"></a></dd> <dd><a id="t637" href="hala har chi !!"></a></dd> </dl> ۳. مرحله‌ی سوم: کدهای CSS رسيديم به مرحله‌ی اصلی کار که همون نوشتن کد CSSه. - imagemap: اولین کار اینه که به مرورگر بگیم با لیست imagemap به عنوان یه بلوک برخورد کنه و اون رو به صورت inline یا list-item نمایش نده. این کار با استفاده از display: block; امکان پذیره. بعدش هم باید position این لیست رو به صورت relative تعریف کنیم ( با position: relative. حالا باید طول٬ عرض و پس زمینه‌ی این بنده خدا رو تعیین کنیم. پیشنهاد می‌کنم طول و عرض این بلوک رو به اندازه‌ی عکستون در نظر بگیرین. کد نهایی برای imagemap این فنتیه: #imagemap { display:block; width:515px; height:400px; background:url(mobilez.jpg); position:relative; } - همون طور که تو کد HTML می‌بینین ما چندتـا لینک با شناسه(ID)های مختلف تعریف کردیم چون می‌خوایم از ویژگی hover اونها استفاده کنیم. اولین لینک واسه این تعریف شده که وقتی شما روی تصویر می‌رین تصویر دوم که زیر موبایل‌ها چهارتـا دایره قرار دارن ظاهر شه و نیز وقتی که روی یکی از دایره‌ها می‌رین مدل موبایلی که بالاشه!. خصوصیت مشترک همه‌ی لینکها اینه که به صورت بلوک تعریف شدن و position همگی absolute تشریف داره. پس می‌تونین یه جایی بنویسین #imagemap a {display: block; position: absolute;}. حالا به نوبت لینکها رو بررسی می‌کنیم. اولین لینک که با شناسه‌ی title مشخص شده: a#title { width:515px; height:0; padding-top:400px; overflow: hidden; left:0; top:0; background:transparent url(mobilez-on.jpg) no-repeat 570px 400px; cursor:crosshair; } توجه!: شاید بگین آخه مرتیکه مگه مرض داری height رو می‌صفرونی و از padding-top استفاده می‌کنی؟! در جواب باید بگم اگه این کار رو نکنین پیتزاتون به اندازه‌ی n پیکسل کش میاد! خودتون امتحان کنین تـا بهتر متوجه شین.حالا می‌ريم سراغ چهارتـا لينک باقی مونده: a#w800i, a#d750i, a#k750i, a#t637 { width:25px; height:25px; padding-top:0px; overflow:hidden; } اولا overflow:hidden; محض محکم کاریـه نه چیز دیگه. اون طول و عرضی هم که می‌بینید برابر است با قطر دایره‌ها! اما جدای از خصوصيات مشترک هر کدوم از اين لينک‌ها دارای يک سری ويژگی‌های فردی!! هم هستند که دونه به دونه می‌ريم سراغشون. اول از همه W800i (جيگرک من!): a#w800i {left:49px; top:290px; background:transparent url(w800i.gif) no-repeat 400px 800px;} در اينجا با توجه به يه بلوک ۲۵ ¤ ۲۵ و با استفاده از top و left مکان لينک رو تعريف می‌کنيم (طوری که روی دايره ست بشه) با توجه به تصوير همه‌ی لينک‌ها يه top دارن! اما ما می‌خوايم وقتی که روی دايره‌ی نارنجی رنگ می‌ريم اين تصوير ظاهر شه که اندازش خیلی بیشتر از ۲۵ ¤ ۲۵ه پس: a#w800i:hover, a#d750i:hover, a#k750i:hover, a#t637:hover {width: 95px; height: 25px; background-position: 0 0;} و نیز: a#w800i:hover {left: 15px; top:290px;} و همين طور سه‌تـای دیگه: a#d750i {left:183px; top:290px; background:transparent url(d750i.gif) no-repeat 400px 400px;} a#d750i:hover {left: 153px; top: 290px;} a#k750i {left:322px; top:290px; background:transparent url(k750i.gif) no-repeat 400px 400px;} a#k750i:hover {left:294px; top:290px;} a#t637 {left:463px; top:290px; background:transparent url(t637.gif) no-repeat 400px 400px;} a#t637:hover {left:436px; top:290px;}
