advertise laitec sharif univercity استخراج بیت کوین با کامپیوتر استخراج بیت کوین با کامپیوتر
دانلود پروژه آموزش چندرسانه ای با دایرکتور Director

دانلود پروژه آموزش چندرسانه ای با دایرکتور Director

3000 تومان
دانلود پروژه کامل مهندسی نرم افزار ، شرکت نرم افزاری

دانلود پروژه کامل مهندسی نرم افزار ، شرکت نرم افزاری

3000 تومان
دانلود پروژه وب سایت اشعار با ASP.NET و SQL

دانلود پروژه وب سایت اشعار با ASP.NET و SQL

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

دانلود مجموعه 70 پروژه مفید و کاربردی سی شارپ #C

9500 تومان
سورس پروژه پایانی وب سایت و نرم افزار کلینیک در ASP.net

سورس پروژه پایانی وب سایت و نرم افزار کلینیک در ASP.net

22000 تومان

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

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

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

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