گرد کردن و افکت به تصاویر با CSS

شروع موضوع توسط administrator ‏25 مارس 2012 در انجمن آموزش CSS

  1. administrator

    administrator مدیریت کل سایت

    تاریخ عضویت:
    ‏27 جولای 2011
    ارسال ها:
    2,989
    تشکر شده:
    1,027
    با سلام به همه کابران

    مطمئنا شما هم دوست دارید بنر ها یا عکس هایی که تو ساییتون قرار میدید افکت دار باشه و حاشیه هاش هم گرد باشه تا ظاهر زیبایی به خودش بگیره.
    منم امروز کد css اش رو براتون قرار میده تا استفاده کنید:

    کد گرد کردن و افکت دادن به تصاویر با Css:

    کد:
    .blank-banner {
        -moz-border-bottom-colors: none;
        -moz-border-image: none;
        -moz-border-left-colors: none;
        -moz-border-right-colors: none;
        -moz-border-top-colors: none;
        -moz-transition-delay: 0s;
        -moz-transition-duration: 0.5s;
        -moz-transition-property: all;
        -moz-transition-timing-function: ease-in;
        background-color: #EEEEEE;
        background-position: center center;
        background-repeat: no-repeat;
        border-bottom-color: #C1C1C1;
        border-bottom-left-radius: 9px;
        border-bottom-right-radius: 9px;
        border-bottom-style: solid;
        border-bottom-width: 2px;
        border-left-color-ltr-source: physical;
        border-left-color-rtl-source: physical;
        border-left-color-value: #C1C1C1;
        border-left-style-ltr-source: physical;
        border-left-style-rtl-source: physical;
        border-left-style-value: solid;
        border-left-width-ltr-source: physical;
        border-left-width-rtl-source: physical;
        border-left-width-value: 2px;
        border-right-color-ltr-source: physical;
        border-right-color-rtl-source: physical;
        border-right-color-value: #C1C1C1;
        border-right-style-ltr-source: physical;
        border-right-style-rtl-source: physical;
        border-right-style-value: solid;
        border-right-width-ltr-source: physical;
        border-right-width-rtl-source: physical;
        border-right-width-value: 2px;
        border-top-color: #C1C1C1;
        border-top-left-radius: 9px;
        border-top-right-radius: 9px;
        border-top-style: solid;
        border-top-width: 2px;
        box-shadow: 0 0 5px #888888;
        opacity: 0.8;
    }
    .blank-banner:hover {
        -moz-transition-delay: 0s;
        -moz-transition-duration: 0.5s;
        -moz-transition-property: all;
        -moz-transition-timing-function: ease-in;
        box-shadow: 0 0 10px #888888;
        opacity: 1;
    }
    کد html هم مثلا برای بنر به صورت زیر تعریف میکنید براش :

    کد:
    <a href="http://www.woc.ir"><img border="0" alt="" width="470px" height="62px" src="http://woc.ir/images/WOC_NEW/blank.jpg" class="blank-banner"></a>
    اینم دمـــــــــــــــــــــــــــــو​
     
  2. raminr63

    raminr63 کاربر جدید

    تاریخ عضویت:
    ‏2 مارس 2012
    ارسال ها:
    38
    تشکر شده:
    0
    اینو کجا باید بزاریم؟؟

    والا من تو global.css گذاشتم همه چی بهم ریخت
    در ضمن من از پوسته پیشفرض استفاده میکنم
     
  3. administrator

    administrator مدیریت کل سایت

    تاریخ عضویت:
    ‏27 جولای 2011
    ارسال ها:
    2,989
    تشکر شده:
    1,027
    کد css رو به global.css اضافه کنید.

    سپس برای تصویری که میخواهید به وسیله کد html گفته شد تعریف کنید براش.