advertise laitec sharif univercity استخراج بیت کوین با کامپیوتر استخراج بیت کوین با کامپیوتر
دانلود مجموعه 100 سورس ساده و ابتدایی با سی پلاس پلاس

دانلود مجموعه 100 سورس ساده و ابتدایی با سی پلاس پلاس

5000 تومان
دانلود پروژه فروشنده دوره گرد با الگوریتم گرانشی در #C

دانلود پروژه فروشنده دوره گرد با الگوریتم گرانشی در #C

4800 تومان
دانلود برنامه آزمون تستی در مالتی مدیا بیلدر MMb

دانلود برنامه آزمون تستی در مالتی مدیا بیلدر MMb

3000 تومان
دانلود پروژه فروشنده دوره گرد با الگوریتم ازدحام ذرات PSO در #C

دانلود پروژه فروشنده دوره گرد با الگوریتم ازدحام ذرات PSO در #C

4800 تومان
دانلود برنامه رنگ آمیزی گراف با الگوریتم عقبگرد در سی شارپ

دانلود برنامه رنگ آمیزی گراف با الگوریتم عقبگرد در سی شارپ

3000 تومان

گالری تصاویر در CSS سی اس اس

css زبانی است که در کنار html استفاده میشود و میتواند برای ایجاد یک گالری عکس در صفحه وب مورد استفاده قرار گیرد و جنبه های بصری یک صفحه وب را تعریف کند
گالری تصاویر در 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

در مثال زیر، با قرار گرفتن ماوس روی تصاویر ایجاد شده ، میزان شفافیت آنها مطابق کد نوشته شده تغییر میکند :

img {
    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;
}

 

 



0
نظرات

نظر خود را ارسال کنید



نام:
ایمیل:
دیدگاه:
captcha
کد امنیتی :


advertise
CSS Image Galleryایجاد گالری تصویر در صفحات وب با سی اس اسگالری تصاویر را چگونه میتوان با استفاده از CSS طراحی کرد؟شفاف سازی تصویر - اثرات خاصیت Hover در cssایجاد گالری عکس در صفحه وب با سی اس استاری و شفافیت تصاویر CSSاسپریت های تصاویر در CSSاسپریت تصویر در سی اس اس چیست؟image gallery با CSS چگونه است؟استفاده از سی اس اس جهت نشان دادن گالری تصاویرCSS image spritsآموزش نحوه ایجاد گالری عکس در صفحات وب سایت با CSS لیست برچسب ها
تمامی حقوق این سایت اعم از محتوی ، تصاویر ، قالب و ... متعلق به گروه مهندسی وب سایت سورس کد می باشد.
SourceCodes.ir ، افقی روشن برای برنامه نویسان ، از مبتدی تا حرفه ای

کسب درآمد با کامپیوتر
تولید بیت کوین با کامپیوتر

پیشنهادات ویژه سورس کد

پکیج ویژه پروژه پایانی رشته کامپیوتر دانلود مجموعه 70 پروژه کاربردی سی شارپ وب سایت فروشگاه با php