گالری تصاویر در CSS سی اس اس
گالری تصاویر در CSS سی اس اس
همانطور که گفتیم، css زبانی است که در کنار html استفاده میشود تا محتوای صفحات وب را از بخش طراحی و قالب بندی جدا کند و فونتها ,رنگها ,حاشیه ها ,خطوط ,ارتفاع ,عرض ,پس زمینه ,تصاویر ,موقعیت و دیگر جنبه های بصری یک صفحه وب را تعریف میکند، چیزهایی که html برای انجام آنها طراحی نشده است.
گالری تصاویر در CSS
این زبان جالب میتواند برای ایجاد یک گالری عکس در صفحه وب استفاده شود.
در مثال زیر، با استفاده از کدهای CSS گالری عکس زیبایی ایجاد شده است. میتوانید این کد را در مثال ساده ای کپی کنید و چگونگی اثر آن را مشاهده کنید: ( در مثالها به جای() از علامتهای <> استفاده کنید)
(html)
(head)
(style)
div.img {
margin: 5px;
padding: 5px;
border: 1px solid #0000ff;
height: auto;
width: auto;
float: left;
text-align: center;
}
div.img img {
display: inline;
margin: 5px;
border: 1px solid #ffffff;
}
div.img a:hover img {
border:1px solid #0000ff;
}
div.desc {
text-align: center;
font-weight: normal;
width: 120px;
margin: 5px;
}
(/style)
(/head)
(body)
(div class="img")
(a target="_blank" href="klematis_big.htm")
(img src="klematis_small.jpg" alt="Klematis" width="110" height="90")
(/a)
(div class="desc")Add a description of the image here(/div)
(/div)
(div class="img")
(a target="_blank" href="klematis2_big.htm")
(img src="klematis2_small.jpg" alt="Klematis" width="110" height="90")
(/a)
(div class="desc")Add a description of the image here(/div)
(/div)
(div class="img")
(a target="_blank" href="klematis3_big.htm")
(img src="klematis3_small.jpg" alt="Klematis" width="110" height="90")
(/a)
(div class="desc")Add a description of the image here(/div)
</div)
(div class="img")
(a target="_blank" href="klematis4_big.htm")
(img src="klematis4_small.jpg" alt="Klematis" width="110" height="90")
(/a)
(div class="desc")Add a description of the image here(/div)
(/div)
(/body)
(/html)
تاری / شفافیت (Opacity / Transparency) تصاویر CSS
ایجاد تصاویر شفاف با CSS آسان است.
خاصیت کدری CSS بخشی از توصیه های CSS3 است.
مثال 1 - ایجاد یک تصویر نامحسوس
CSS3 برای ایجاد یک تصویر نامحسوس و شفاف از ویژگی opacity استفاده میکند. در مثال زیر چگونگی ایجاد یک تصویر نامحسوس با استفاده از CSS را میتوانید ببینید:
img {
opacity: 0.5;
filter: alpha(opacity=50); /* For IE8 and earlier */
}
مرورگرهای IE9، فایرفاکس، کروم، اپرا و سافاری از خاصیت opacity برای شفافیت استفاده میکنند. این property میتواند مقادیر بین 0.0 تا 1.0 را بپذیرد. مقدار پایین تر به این خاصیت باعث شفافیت بیشتر تصویر میگردد.
مثال 2 - شفاف سازی تصویر - اثرات خاصیت Hover
در مثال زیر، با قرار گرفتن ماوس روی تصاویر ایجاد شده ، میزان شفافیت آنها مطابق کد نوشته شده تغییر میکند :
opacity: 0.3;
filter: alpha(opacity=30); /* For IE8 and earlier */
}
img:hover {
opacity: 1.0;
filter: alpha(opacity=100); /* For IE8 and earlier */
}
در این مثال، در ابتدا تصاویر گالری با شفافیت 0.3 نشان داده میشوند و تا حدی کدر هستند، اما طبق کد CSS ی که برای آن نوشته شده است، با قرار گرفتن ماوس روی تصاویر آنها با وضوح کامل (شفافیت 1.0) به نمایش در می آیند و با کنار رفتن ماوس دوباره با شفافیت قبلی برمیگردند.
اسپریت های تصاویر در CSS
اسپریت تصویر مجموعه ای از تصاویر قرار داده شده در یک تصویر تنها است.
صفحه وبی که شامل تصاویر زیادی است، میتواند زمان زیادی برای بارگذاری و تولید درخواست های متعدد سرور لازم داشته باشد. استفاده از اسپریت های تصویر تعداد درخواست های سرور را کاهش داده و در پهنای باند نیز صرفه میکنید.
در مثال زیر به جای استفاده از سه تصویر جداگانه از اسپریتی با سه بخش مختلف استفاده شده است که با استفاده از کد CSS فقط بخشی از تصویر که مورد نیاز است نمایش داده شده است:
#home {
width: 46px;
height: 44px;
background: url(img_navsprites.gif) 0 0;
}
