http://www.up.vatandownload.com/images/q3fnundhjt5g1npu33il.gif

آموزش ساخت یک گالری عکس به کمک CSS

گالری عکس یکی از قسمت هایی است که معمولا در سایت های مخصوص wallpaper و تصاویر استفادۀ زیادی دارد. صرف نظر زیبایی تصاویر، نوع و استایل گالری هم می تواند بر روی کاربر تاثیرات متفاوتی بگذارد. علاوه بر جاوا اسکریپت و یا فریم ورک های آن مثل jQuery و … که امروزه استفادۀ زیادی برای ایجاد جلوه های جذاب دارند، CSS نیز به عنوان یک عنصر پایه نقش به سزایی ایفا می کند. در این مقاله هم قصد ساخت یک گالری عکس به کمک HTML و CSS را دارم. در انتهای مقاله 2 خصوصیت جدید CSS 3.0 نیز برای ایجاد زیبایی بیشتر معرفی خواهد شد.

gallery06

همانند دو آموزش قبل (منو های Drop down و ساخت تب ) در ساخت این طرح نیز از دو عنصر ul و li به عنوان عناصر پایه و شکل دهندۀ چهارچوب کار خود استفاده می کنیم، سپس به کمک CSS آن ها را استایل دهی خواهیم کرد. برای ساخت گالری از 15 تصویر مختلف در ابعاد 188*250 استفاده کرده ام، البته اندازه ای که در حالت عادی دیده می شود 75*100 پیکسل است و تنها زمانی که موس بر روی تصاویر قرار گیرد، در ابعاد اصلی نمایش میابند.

برای شروع کار کد html زیر را در نظر بگیرید:

<div id="container">
    <ul class="gallery">
        <div><li><img src="images/01.jpg" alt="" /></li></div>
        <div><li><img src="images/02.jpg" alt="" /></li></div>
        <div><li><img src="images/03.jpg" alt="" /></li></div>
        <div><li><img src="images/04.jpg" alt="" /></li></div>
        <div><li><img src="images/05.jpg" alt="" /></li></div>
        <div><li><img src="images/06.jpg" alt="" /></li></div>
        <div><li><img src="images/07.jpg" alt="" /></li></div>
        <div><li><img src="images/08.jpg" alt="" /></li></div>
        <div><li><img src="images/09.jpg" alt="" /></li></div>
        <div><li><img src="images/10.jpg" alt="" /></li></div>
        <div><li><img src="images/11.jpg" alt="" /></li></div>
        <div><li><img src="images/12.jpg" alt="" /></li></div>
        <div><li><img src="images/13.jpg" alt="" /></li></div>
        <div><li><img src="images/14.jpg" alt="" /></li></div>
        <div><li><img src="images/15.jpg" alt="" /></li></div>
    </ul>
</div>

همانطور که مشاده می کنید تگ های img در بین li ها و li ها ما بین یک div قرار دارند. این تمام کد html ئی است که برای ساخت گالری استفاده می کنیم. حال به تگ های مذکور سبک های زیر را نسبت می دهیم:

#container
{
    margin: 100px auto;
    width: 610px;
}
ul.gallery
{
    margin: 0;
    padding: 0;
}
ul.gallery li
{
    float: left;
    list-style: none;
    margin: 0 2px 2px 0;
    padding: 5px 5px 0 5px;
    border: 3px solid #acacac;
    background-color: #fff;
{

خاصیت float: left در استایل های مربوط به تگ li باعث می شود تگ های li به صورت افقی کنار هم قرار بگیرند، سایر خصوصیات هم فکر می کنم به اندازۀ کافی واضح باشند.

تگ  img مربوط که هر تصویر را نیز به صورت زیر سبک دهی می کنیم:

ul.gallery img
{
    width: 100px;
    height: 75px;
}

همانطور که در ابتدا عرض کرم، ابعاد اصلی تصاویر ما 188*250 پیکسل است و تنها زمانی که موس بر روی هر تصویر قرار می گیرد، آن تصویر با این ابعاد نمایش میابد. به همین منطور در خصوصیات مربوط به تگ img مقدار 100 و 75 پیکسل برای عرض  و ارتفاع تصاویر در نظر گرفته شده است.

با انجام این مراحل فرم کلی گالری ما شکل گرفته و به صورت زیر خواهد بود:

gallery01

در ادامه برای جذاب تر شدن گالری، جلوۀ Roll over را برای تصاویر ایجاد می کنیم، به گونه ای که وقتی موس بر روی تصویری قرار گرفت، آن تصویر در ابعاد بزرگتر نمایش میابد. به این منظور کلاس کاذب hover را برای تگ li که حول تصاویر ما قرار دارد استایل دهی کنیم:

 ul.gallery li:hover
{
    position: relative;
    top: -56px;
    left: -75px;
    width: 250px;
    height: 188px;
    padding: 3px;
    border: 3px solid #000;
    z-index: 1;
}

هنگام بزرگ شدن ابعاد تصویر لازم است تصویر را قدری نسبت به مکان فعلی آن جابجا کنیم تا در جای مناسب تری قرار گیرد، به همین دلیل خصوصیت postion: relative را به کلاس hover اضافه کردیم. دو خصوصیت top و left را هم می توانید برای موقعیت دهی تصویر در مکان دلخواه مقدار دهی کنید. همچنین دو خاصیت width و height نیز برابر با اندازه اصلی عکس ها قرار گرفته اند.

توجه داشته باشید که خصوصیات بالا بر روی تگ li اعمال شده اند، یعنی زمانی که کلاس hover اتفاق میافتد، تغییر اندازه و جابجایی تنها بر روی حاشیه هر عکس که تگ li ما است، اعمال می شود و خود تصویر همچنان در اندازه اولیه باقی می ماند، بنابراین هنگامی که کلاس hover اتفاق میافتد، باید تگ img مربوط به آن هم برای افزایش ابعاد عکس تحت تاثیر قرار گیرد و ابعاد آن تغییر کند:

 ul.gallery li:hover img
{
    width: 250px;
    height: 188px;
}

در حال حاضر اگر کار خود را در مروگر تست کنید، متوجه می شوید که بزرگ شدن ابعاد یک تصویر بر روی موقعیت سایر تصاویر نیز تاثیر گذاشته و باعث بهم خوردگی آن ها می شود(مطابق شکل زیر):

gallery02

علت این بهم خوردگی، متغیر بودن اندازۀ li ها است و برای حل این مشکل لازم است هر تگ li در چهارچوبی ثابت قرار گیرد تا تغییر ابعاد آن بر روی سایر تگ ها تاثیر نگذارد. به همین منظور در کد html بالا، هر تگ li ما بین یک div قرار داده شده است. با دادن طول و عرض ثابت به این div ها، می توان از بهم ریختگی تصاویر جلوگیری کرد:

 #container div
{
    float: left;
    width: 118px;
    height: 93px;
}

اندازه عرض و ارتفاع div را به گونه ای تعیین کنید که کل تگ li را در بر گیرد.

حال زمانی که موس بر روی تگ li قرار می گیرد، به دلیل اینکه ابعاد div ثابت است، افزایش ابعاد آن تاثیری بر روی div و همچنین سایر عناصر ندارد. و در آخر مقدار z-index: 1 باعث می شود تا تگ li ی ما 1 لایه بالاتر از سایر تگ ها قرار گیرد. به همین دلیل است که هنگام اعمال کلاس hover، تصویر مورد نظر بر روی دیگر تصاویر قرار گرفته و به زیر نمی رود.

با اعمال این قسمت تقریبا گالری ما آماده شده و به شکل زیر خواهد بود:

gallery03

برای قسمت پایانی آموزش دو خاصیت جدید CSS 3 را برای آشنایی معرفی خواهم کرد. البته به دلیل اینکه در حال حاضر مرورگر ها به صورت کامل از CSS 3 پشتیبانی نمی کنند، این دو خاصیت تنها در برخی از آن ها پشتیبانی می شود.

این دو خصوصیت جدید که قصد معرفی آن را دارم box-shadow و transform هستند. خاصیت box-shadow همانطور که از اسمش مشخص است برای ایجاد سایه استفاده می شود. کاری که قبلا باید توسط تصاویر انجام میشد، الان به راحتی توسط این خاصیت امکان پذیر است. box-shadow، چهار پارامتر دریافت می کند که به صورت زیر است:

box-shadow: x-offset  y-offset  blur-radius  color

x-offset: این پارامتر میزان انحراف سایه را در راستای افقی بر اساس پیکسل مشخص می کند.

y-offset: این پارامتر میزان انحراف سایه را در راستای عمودی بر اساس پیکسل مشخص می کند.

blur-radius: این پارامتر میزان محو شدگی از لبه های سایه را تعیین می کند.

color: این گزینه هم برای تعیین رنگ سایه به کار می رود.

نمونه ای از ایجاد سایه توسط این خاصیت را در تصویر زیر مشاهده می کنید:

gallery04

قابل ذکر است خاصیت box-shadow در دو مرورگر +firefox 3.5 و +safari 3.1 به ترتیب با نام های  moz_box_shadow- و webkit-box-shadow- پشتیبانی می شود.

خصوصیت transform که دومین خاصیت مورد بحث ما است، برای ایجاد جابجایی، چرخش و تغییر فرم ظاهری المان بکار می رود. فرم کلی خاصیت transform به صورت زیر می باشد:

transform:  transform-function

این خاصیت بر اساس تابعی که به آن نسبت داده می شود، عملیات مورد نظر را انجام می دهد. چهار تابع rotate، translate، scale و skew وجود دارد که در این مقاله تنها از تابع rotate برای چرخاندن تصاویر استفاده می کنیم. در مورد عملکرد سایر توابع می توانید جستجو کنید.

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

 ul.gallery li
{
    ...
    box-shadow: 5px 5px 10px #333;
    -webkit-box-shadow: 5px 5px 10px #333;
    -moz-box-shadow: 5px 5px 10px #333;
}

در کد های بالا مقدار 5 پیکسل برای انحراف در راستای محور افقی و عمودی در نظر گرفته شده است، بنابراین انتظار می رود سایه در سمت راست و پایین تصاویر قرار گیرد، مقدار 10 پیکسل هم برای محو شدگی لبه های سایه اختصاص یافته است. پس از اعمال سایه تصاویر ما به شکل زیر خواهند شد:

gallery05

برای ایجاد چرخش در تصاویر، 4 کلاس جداگانه به صورت زیر تعریف کرده ام:

 .r1
{
    transform: rotate(10deg);
    -webkit-transform: rotate(10deg);
    -moz-transform: rotate(10deg);
}
.r2
{
    transform: rotate(-10deg);
    -webkit-transform: rotate(-10deg);
    -moz-transform: rotate(-10deg);
}
.r3
{
    transform: rotate(15deg);
    -webkit-transform: rotate(15deg);
    -moz-transform: rotate(15deg);
}
.r4
{
    transform: rotate(20deg);
    -webkit-transform: rotate(20deg);
    -moz-transform: rotate(20deg);
}

همانطور که مشاهده می کنید، تابع rotate در مقابل خاصیت transform قرار گرفته و مقدار چرخش بر اساس درجه (deg) به آن داده شده است. با اعمال این کلاس ها به تگ های li و به صورت رندوم می توانید تصاویر را در جهت های متفاوتی بچرخانید:

 ...
<div><li class="r1"><img src="images/05.jpg" alt="" /></li></div>
<div><li class="r2"><img src="images/06.jpg" alt="" /></li></div>
<div><li class="r4"><img src="images/07.jpg" alt="" /></li></div>
...

در نهایت گالری شما همچین شکلی پیدا خواهد کرد:

gallery06

نکته:

مرورگر اینترنت اکسپلورر و Opera هیچ کدام از این دو خصوصیت را پشتیبانی نمی کنند، که البته مشکلی خاصی هم به وجود نمیاید و فقط تصاویر به صورت عادی کنار یکدیگر قرار می گیرند. اما در اینترنت اکسپلورر می توان از فی/لتر ها در مواقع ضروری استفاده کرد. به طور مثال برای اعمال سایه در ie از فی/لتر shadow استفاده می کنیم:

 ul.gallery li
{
    ...
    filter:progid:DXImageTransform.Microsoft.Shadow(color=#333333,direction=135,strength=5);
}

پارامتر color کد رنگ سایه، direction جهت قرار گیری سایه و strength میزان گستردگی سایه را بر اساس پیکسل مشخص می کند. لازم به ذکر است که direction تنها مقادیر 0، 45، 90، 135، 180، 225، 270 و 315 را می توان دریافت کند.

متاسفانه فی/لتری معادل rotate که المان مورد نظر را مطابق زاویه دلخواه بچرخاند وجود ندارد. برای اطلاع بیشتر در مورد فی/لتر ها به اینجا مراجعه کنید.

download دانلود: نمونه کد های گالری

شما میتوانید دیدگاهی بگذارید، یا بازخوردی از سایتتان.

دیدگاهی بگذارید

عضو خوراک مطالب شوید مرا در توییتر دنبال کنید!