/ محو نمودن تصاویر با css3
وندا هاست
طراحی و راه اندازی وبسایت و انجمن توسط ویکی وی بی ویکی وی بی در قبال معاملات صورت گرفته با هر یک از اعضا و سفارشات طراحی خارج از این اطلاعیه هیچگونه مسئولیتی نمی پذیرد
بک لینک ها
تبلیغات شما وندا هاست
نمایش نتایج: از 1 به 1 از 1

موضوع: محو نمودن تصاویر با css3

  1. #1
    elham1388 آنلاین نیست.
    elham1388
    کاربر سايت
    44نوشته8مورد پسند

    تاریخ عضویت
    Oct 2014
    شماره عضویت
    6930
    پسندیده است
    0 پست
    بلاگ
    پست
    میزان امتیاز
    19
    http://www.npco.net/

    محو نمودن تصاویر با css3

    یکی از ترفندهایی که می توانید در طراحی سایت خود استفاده نمایید محو و ظاهر نمودن تصاویر با استفاده از خصیصه های CSS3 می باشد. opacityو transition خصیصه هایی است که بدین منظور استفاده می شود و ابزارهای شگفت انگیزی برای جالب نمودن صفحات وب سایت می باشند. اولین فاکتوری که می بایست بدانید تغییر opacity زمانی که بازدیدکننده بر روی عنصری مانند عکس قرار می گیرد.قطعه کد زیر توضیح دهنده ایفکت fade in می باشد.
    <img src="/demo/puppy-in-shade.jpg" width="300" height="266" class="greydout">
    به منظور غیرفعال نمودن در اینجا کدهای CSS را بدان اضافه می نماییم.
    .greydout {
    -webkit-opacity: 0.25;
    -moz-opacity: 0.25;
    opacity: 0.25;
    }


    به منظور واضح شدن عنصر زمانی که موس بر روی آن قرار می گیرد کلاس زیر را درج می نماییم.
    .greydout:hover {
    -webkit-opacity: 1;
    -moz-opacity: 1;
    opacity: 1;
    }


    همان طور که مشاهده می نمایید ایفکت بسیار زیبایی به تصاویر اضافه می کند که ابتدا نمایش داده می شود و با قرار گرفتن بر روی عنصر محو شود. حال می خواهیم خصیصه transition را به این کلاس اضافه نماییم. قطعه کد زیر توضیحی بر روش انجام این خصیصه می باشد.
    .greydout {
    -webkit-opacity: 0.25;
    -moz-opacity: 0.25;
    opacity: 0.25;
    -webkit-transition: all 3s ease;
    -moz-transition: all 3s ease;
    -ms-transition: all 3s ease;
    -o-transition: all 3s ease;
    transition: all 3s ease;






    حال برای اضافه نمودن ایفکت fade out کدهای زیر را می توان در طراحی وب سایت درج نماییم.
    <img src="http://0.tqn.com/d/webdesign/1/0/C/m/1/puppy-in-shade.jpg" width="300" height="266" class="withfadeout">
    و در کدهای css آن قطعه کد زیر را درج می نماییم.
    .withfadeout {
    -webkit-transition: all 2s ease-in-out;
    -moz-transition: all 2s ease-in-out;
    -ms-transition: all 2s ease-in-out;
    -o-transition: all 2s ease-in-out;
    transition: all 2s ease-in-out;
    }
    .withfadeout:hover {
    -webkit-opacity: 0.25;
    -moz-opacity: 0.25;
    opacity: 0.25;
    }


    شما می توانید این ایفکت ها را تنها به تصاویر اکتفا ندهید و برای دکمه های موجود در طراحی سایت خود نیز استفاده نمایید. درج این ایفکت ها موجب جذاب تر شدن صفحات سایت از نظر کابران می شود که ادامه این روند افزایش ترافیک را برای سایت ما به دنبال خواهد داشت و به طبع آن سئو وب سایت خود را بهبود بخشیده ایم.در اینجا نمونه ای از به کاربری این ایفکت بر روی منو وب سایت را نمایش داده ایم و گزینه های منو با قرار گرفتن موس بر روی آن محو و ظاهر می شود.
    <ul id="sampleNav">
    <li><a href="http://webdesign.about.com/">Home</a></li>
    <li><a href="http://webdesign.about.com/od/css3tutorials/Css3-Tutorials.htm">CSS3 Tutorials</a></li>
    <li><a href="http://webdesign.about.com/od/css/a/aastylelibrary_3.htm">CSS3 Properties</a></li>
    </ul>


    کد css آن بصورت زیر می باشد.
    ul#sampleNav { list-style: none; }
    ul#sampleNav li {
    display: inline;
    float: left;
    padding: 5px 15px;
    margin: 0 5px;
    -webkit-transition: all 2s linear;
    -moz-transition: all 2s linear;
    -ms-transition: all 2s linear;
    -o-transition: all 2s linear;
    transition: all 2s linear;
    }
    ul#sampleNav li a { text-decoration: none; }
    ul#sampleNav li:hover {
    background-color: #DAF197 ;
    }


    در خصوص پشتیبانی مرورگرها در مورد این ایفکت زیبا باید بیان داشت که تمامی مرورگرها این خصیصه را سرویس دارند،بجز IE که خصیصه transition را پشتیبانی نمی کند .البته در ورژن های IE 10 به بعد، که این خصیصه در نظر گرفته شده است.



    طراحی سایت

    کاربر زیر پست elham1388 را پسندیده است:



  2. نوين وردپرس تبلیغات شما

اطلاعات موضوع

کاربرانی که در حال مشاهده این موضوع هستند

در حال حاضر 1 کاربر در حال مشاهده این موضوع است. (0 کاربران و 1 مهمان ها)

موضوعات مشابه

  1. پاسخ: 11
    آخرين نوشته: 09-11-2014, 08:36 PM
  2. آموزش طراحی وب سایت با css3
    توسط ستاره پناهی در انجمن آموزش های گرافیکی
    پاسخ: 0
    آخرين نوشته: 08-18-2013, 03:14 AM
  3. یک سوال مهم در css3
    توسط MR.CSS در انجمن CSS
    پاسخ: 3
    آخرين نوشته: 03-23-2013, 02:27 AM
  4. پاسخ: 0
    آخرين نوشته: 11-11-2012, 04:35 PM

کلمات کلیدی این موضوع

مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی مجوز های ارسال و ویرایش

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