دورد بر دوستان گرامی
نظرتون چیه اگر آموزش ایندفعه CSS ارتباطی به hack CSS نداشته باشه، فکر کنم این آموزش که در رابطه با گالری عکس هست پر کاربرد برای شما طراحان وب باشه.
یه نگاهی به گذشته بندازیم، زمانی که با جداول کر می کردیم و قصد داشتیم که زمانی که موس رو بر روی یک عکس که در خانه ای از جدول قرار داشت ببریم ، سپس سایز اون عکس 2 یا چند برابر اندازه معمول خودش بشه، اون وقت تغییر اندازه اون عکس بر اندازه خانه اون جدول تاثیر می گزاشت در نتیجه ما یه تغییری در کل طراحی صفحه خودمون میدیدم. (این حرف من زمانی صدق نمیکرد که اندازه آن خانه از جدول که عکس در آن قرار دارد ، بزرگتر از زمانی باشد که عکس با رفتن موس بر روی آن بزرگ میشد)
انعطاف ناپذیری جدول همیشه آزار دهنده بود و همیشه جایگزینی رو برای خود می طلبید، خوب رفتیم سر اصل ماجرا، یعنی (CSS) ، قابل توجه استادانی که به استفاده از CSS در طراحی ساختار صفحه اعتقادی ندارند!!!!
خوب بریم سر توضیح این نوع از گالری:
موافق باشید در ابتدا CSS رو صفحه و بررسی کنیم:
در ابتدا یه صفحه طراحی میکنیم که رنگ پس زمینه خاکستری باشه، فاصله ها رو از اطراف صفر می کنیم و موقعیت المانها در صفحه رو در حالت افقی در مرکز قرار میدهیم:
HTML:
body {padding:0; margin:0; text-align:center; background:#999;}
-------
خب حالا ما یک جعبه می خوایم که محتویات اون عکس های گالری ماست، خصیصه هایی که برای آن در نظر میگیریم برابر است با فاصله از بالا 10% و محتویات در حالات افقی در مرکز جهت وسط چین شدن عکس ها که همونطور که در مراحل بعدی می بینید این خصیصه در این جعبه فقط باعث تاثیر گزاری در IE میشه:
HTML:
#wrp {padding:0; margin:10% auto 0 auto; background:silver; text-align:left;}
------
نظرتون در باره لیست های ترتیبی چیه؟ ما از طریق لیست های ترتیبی ul > li موقعیت قرار گرفتن عکس ها رو مشخص می کنیم, اندازه عکس ها رو بهش میدهیم و موقعیت قرار گرفتن عکس ها را از سمت چپ در نظر میگیریم:
HTML:
#wrp li {
width:100px; height:100px; list-style:none; float:left; margin:5px;
}
-----------------------------
خوب موقعیت لینک های صفحه رو مشخص میکنیم، زیرا عکس ها لینک میشن به هر آدرس دلخواه و با این خصیصه ها که ابعاد لینک ها برابر با با ابعاد عکس و موقعیت برابر با در جریان بودن و جهت انکه تاثیر گزاری بر block-level باشد، مقدار خصیصه display رو برابر با block قرار میدیم:
HTML:
#wrp a {position:absolute; width:100px; height:100px; float:left; display:block;}
-----------------
سایز اندازه عکس های لینک شده رو میدهیم:
HTML:
#wrp a img {border:0; width:100px; height:100px;}
-------------------------------
خب زمانی که موس یر روی لینک ها میره قراره که اندازه اون ها عوض شه و برتری بر روی عکس های اطراف رو با z-index نشان مدهیم
HTML:
#wrp a:hover {position:absolute; width:200px; height:200px; z-index:999;}
-------------------------
رسدیم به آخرین مرحله، پیشاپیش یه خسته نباشی جهت مار مشقت باری که انجام دادین رو بهتون می گم!!
خب حالا زمانی که موس بر روی عکس ها میره قراره که اندازه اونها عوض شه و کاملا در وسط عکس کوچیک بیفته، ما این حرکت رو با بردین عکس بزگتر به بالا و چپ انجام میدهیم، اگه در نظر بگیریم که مختصات صفحه در بالا سمته چپ برابر با صفر و صفر باشه، ما عکس رو 50 تا به بالا و چپ می بریم و همونطور که میدونید چون خارج از مختصات بردار فرضی ما میشه مقدار ما منفی میشه، یعنی top:-50px , left:-50px;
HTML:
#wrp a:hover img {
width:200px; height:200px;position:absolute; left:-50px; top:-50px; border:1px dotted #fff;
}
------------------------
کد های کلی CSS:
HTML:
<style type="text/css">
body {
background:#999; text-align:center;
}
#wrp {
padding:0; margin:10% auto 0 auto; background:silver; text-align:left;
}
#wrp li {
width:100px; height:100px; list-style:none; float:left; margin:5px;
}
#wrp a {
position:absolute; width:100px; height:100px; display:block; float:left;
}
#wrp a img {
width:100px; height:100px; border:0; float:left;
}
#wrp a:hover {
position:absolute; width:200px; height:200px; z-index:999;
}
#wrp a:hover img {
width:200px; height:200px;position:absolute; left:-50px; top:-50px; border:1px dotted #fff;
}
</style>
-********--------------*****************---------------********---------
خوب حالا بریم سر کد های بدنه صفحه که فکر نمی کنم اصلا نیازی به تو ضیح داشته باشه:
HTML:
<body>
<div id="wrp">
<ul>
<li><a href="www.echessdesign.com"><img src="echess.jpg" alt="" /></a></li>
<li><a href="www.echessdesign.com"><img src="echess.jpg" alt="" /></a></li>
<li><a href="www.echessdesign.com"><img src="echess.jpg" alt="" /></a></li>
<li><a href="www.echessdesign.com"><img src="echess.jpg" alt="" /></a></li>
<li><a href="www.echessdesign.com"><img src="echess.jpg" alt="" /></a></li>
<li><a href="www.echessdesign.com"><img src="echess.jpg" alt="" /></a></li>
<li><a href="www.echessdesign.com"><img src="echess.jpg" alt="" /></a></li>
<li><a href="www.echessdesign.com"><img src="echess.jpg" alt="" /></a></li>
<li><a href="www.echessdesign.com"><img src="echess.jpg" alt="" /></a></li>
<li><a href="www.echessdesign.com"><img src="echess.jpg" alt="" /></a></li>
<li><a href="www.echessdesign.com"><img src="echess.jpg" alt="" /></a></li>
<li><a href="www.echessdesign.com"><img src="echess.jpg" alt="" /></a></li>
</ul>
</div>
</body>
*---------------------***************----------------
تموم شد ، این نمونه مثال
*-----------------
البته کمی و کاستی در توضیحات من آماتور زیاد بود، استادان احساس می کنند نیاز به توضیح داره زحمت بکشند بفرمایند، هر سوالی دارید بفرمایید.
منبع: تارنمای پارسیان