تبلیغات در اینترنت

تبلیغات در اینترنتگیفت کارت گوگل پلی
نمایش نتایج: از 1 به 2 از 2

موضوع: [آموزش] پس زمینه گرادینت در CSS3

  1. Top | #1
    کاندیدای مدیریت

    تاریخ عضویت
    Jan 2012
    ورژن ویبولتین
    5.0.0
    سن
    22
    نوشته ها
    493
    مورد پسند
    822 بار
    نوشته های وبلاگ
    2
    اطلاعات
    Windows 7/Server 2008 R2 Firefox 7.0.1
    میزان امتیاز
    70

    Cool [آموزش] پس زمینه گرادینت در CSS3

    درود ...

    در این بخش گرادینت در css3 رو یاد میگیریم.

    چون از کدها همه چی معلومه من چیزی نمینویسم ...


    گرادینت بالا به پایین

    کد:
    #linearBg2 { 
    /* Old browsers */ 
    background-color: #1a82f7; 
    /* Safari 4-5, Chrome 1-9 */ 
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#1a82f7), to(#2F2727)); 
    /* Safari 5.1, Chrome 10+ */ 
    background: -webkit-linear-gradient(top, #2F2727, #1a82f7); 
    /* Firefox 3.6+ */ 
    background: -moz-linear-gradient(top, #2F2727, #1a82f7); 
    /* IE 10 */ 
    background: -ms-linear-gradient(top, #2F2727, #1a82f7); 
    /* Opera 11.10+ */ 
    background: -o-linear-gradient(top, #2F2727, #1a82f7); 
    }

    گرادینت چپ به راست
    کد:
    #linearBg1 { 
    /* Old browsers */ 
    background-color: #1a82f7;
    /* Safari 4-5, Chrome 1-9 */ 
    background: -webkit-gradient(linear, left top, right top, from(#1a82f7), to(#2F2727)); 
    /* Safari 5.1, Chrome 10+ */ 
    background: -webkit-linear-gradient(left, #2F2727, #1a82f7); 
    /* Firefox 3.6+ */ 
    background: -moz-linear-gradient(left, #2F2727, #1a82f7); 
    /* IE 10 */ 
    background: -ms-linear-gradient(left, #2F2727, #1a82f7); 
    /* Opera 11.10+ */ 
    background: -o-linear-gradient(left, #2F2727, #1a82f7); 
    }

    گرادینت با توقف کم

    کد:
    #even-stops { 
    /* fallback DIY*/ /* Safari 4-5, Chrome 1-9 */ 
    background: -webkit-gradient(linear, left top, right top, from(#2F2727), color-stop(0.25, #1a82f7), color-stop(0.5, #2F2727), color-stop(0.75, #1a82f7), to(#2F2727)); 
    /* Safari 5.1+, Chrome 10+ */ 
    background: -webkit-linear-gradient(left, #2F2727, #1a82f7, #2F2727, #1a82f7, #2F2727); 
    /* Firefox 3.6+ */ 
    background: -moz-linear-gradient(left, #2F2727, #1a82f7, #2F2727, #1a82f7, #2F2727); 
    /* IE 10 */ 
    background: -ms-linear-gradient(left, #2F2727, #1a82f7, #2F2727, #1a82f7, #2F2727); 
    /* Opera 11.10+ */ 
    background: -o-linear-gradient(left, #2F2727, #1a82f7, #2F2727, #1a82f7, #2F2727); 
    }

    گرادینت با توقف زیاد

    کد:
    #arbitrary-stops { 
    /* fallback DIY*/ /* Safari 4-5, Chrome 1-9 */ 
    background: -webkit-gradient(linear, left top, right top, from(#2F2727), color-stop(0.05, #1a82f7), color-stop(0.5, #2F2727), color-stop(0.95, #1a82f7), to(#2F2727)); 
    /* Safari 5.1+, Chrome 10+ */ 
    background: -webkit-linear-gradient(left, #2F2727, #1a82f7 5%, #2F2727, #1a82f7 95%, #2F2727); 
    /* Firefox 3.6+ */ 
    background: -moz-linear-gradient(left, #2F2727, #1a82f7 5%, #2F2727, #1a82f7 95%, #2F2727); 
    /* IE 10 */ 
    background: -ms-linear-gradient(left, #2F2727, #1a82f7 5%, #2F2727, #1a82f7 95%, #2F2727); 
    /* Opera 11.10+ */ 
    background: -o-linear-gradient(left, #2F2727, #1a82f7 5%, #2F2727, #1a82f7 95%, #2F2727); 
    }

    گرادینت وسط

    کد:
    #radial-center { 
    /* fallback */ 
    background-color: #2F2727; 
    /* Safari 4-5, Chrome 1-9 */
    background: -webkit-gradient(radial, center center, 0, center center, 460, from(#1a82f7), to(#2F2727)); 
    /* Safari 5.1+, Chrome 10+ */ 
    background: -webkit-radial-gradient(circle, #1a82f7, #2F2727); 
    /* Firefox 3.6+ */ 
    background: -moz-radial-gradient(circle, #1a82f7, #2F2727); 
    /* IE 10 */ 
    background: -ms-radial-gradient(circle, #1a82f7, #2F2727); 
    /* Opera cannot do radial gradients yet */
    }

    گرادینت در یک محل

    کد:
    #radial-position { 
    /* fallback */ 
    background-color: #2F2727;
    /* Safari 4-5, Chrome 1-9 */ 
    background: -webkit-gradient(radial, 80% 20%, 0, 80% 40%, 100, from(#1a82f7), to(#2F2727)); 
    /* Safari 5.1+, Chrome 10+ */ 
    background: -webkit-radial-gradient(80% 20%, closest-corner, #1a82f7, #2F2727); 
    /* Firefox 3.6+ */ 
    background: -moz-radial-gradient(80% 20%, closest-corner, #1a82f7, #2F2727); 
    /* IE 10 */ 
    background: -ms-radial-gradient(80% 20%, closest-corner, #1a82f7, #2F2727); 
    /* Opera cannot do radial gradients yet */ 
    }

    و در آخر در فایل html به این صورت قرار میدهیم:
    کد HTML:
    <style>
    body{
        padding:50px;
    }
    #linearBg2 { 
        padding:30px;
        color:#fff;
    /* Old browsers */ 
    background-color: #1a82f7; 
    /* Safari 4-5, Chrome 1-9 */ 
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#1a82f7), to(#2F2727)); 
    /* Safari 5.1, Chrome 10+ */ 
    background: -webkit-linear-gradient(top, #2F2727, #1a82f7); 
    /* Firefox 3.6+ */ 
    background: -moz-linear-gradient(top, #2F2727, #1a82f7); 
    /* IE 10 */ 
    background: -ms-linear-gradient(top, #2F2727, #1a82f7); 
    /* Opera 11.10+ */ 
    background: -o-linear-gradient(top, #2F2727, #1a82f7); 
    }
    
    #linearBg1 {     padding:30px;    color:#fff;
    
    
    /* Old browsers */ 
    background-color: #1a82f7;
    /* Safari 4-5, Chrome 1-9 */ 
    background: -webkit-gradient(linear, left top, right top, from(#1a82f7), to(#2F2727)); 
    /* Safari 5.1, Chrome 10+ */ 
    background: -webkit-linear-gradient(left, #2F2727, #1a82f7); 
    /* Firefox 3.6+ */ 
    background: -moz-linear-gradient(left, #2F2727, #1a82f7); 
    /* IE 10 */ 
    background: -ms-linear-gradient(left, #2F2727, #1a82f7); 
    /* Opera 11.10+ */ 
    background: -o-linear-gradient(left, #2F2727, #1a82f7); 
    }
    #even-stops {     padding:30px;    color:#fff;
    
    
    /* fallback DIY*/ /* Safari 4-5, Chrome 1-9 */ 
    background: -webkit-gradient(linear, left top, right top, from(#2F2727), color-stop(0.25, #1a82f7), color-stop(0.5, #2F2727), color-stop(0.75, #1a82f7), to(#2F2727)); 
    /* Safari 5.1+, Chrome 10+ */ 
    background: -webkit-linear-gradient(left, #2F2727, #1a82f7, #2F2727, #1a82f7, #2F2727); 
    /* Firefox 3.6+ */ 
    background: -moz-linear-gradient(left, #2F2727, #1a82f7, #2F2727, #1a82f7, #2F2727); 
    /* IE 10 */ 
    background: -ms-linear-gradient(left, #2F2727, #1a82f7, #2F2727, #1a82f7, #2F2727); 
    /* Opera 11.10+ */ 
    background: -o-linear-gradient(left, #2F2727, #1a82f7, #2F2727, #1a82f7, #2F2727); 
    }
    #arbitrary-stops {     padding:30px;    color:#fff;
    
    
    /* fallback DIY*/ /* Safari 4-5, Chrome 1-9 */ 
    background: -webkit-gradient(linear, left top, right top, from(#2F2727), color-stop(0.05, #1a82f7), color-stop(0.5, #2F2727), color-stop(0.95, #1a82f7), to(#2F2727)); 
    /* Safari 5.1+, Chrome 10+ */ 
    background: -webkit-linear-gradient(left, #2F2727, #1a82f7 5%, #2F2727, #1a82f7 95%, #2F2727); 
    /* Firefox 3.6+ */ 
    background: -moz-linear-gradient(left, #2F2727, #1a82f7 5%, #2F2727, #1a82f7 95%, #2F2727); 
    /* IE 10 */ 
    background: -ms-linear-gradient(left, #2F2727, #1a82f7 5%, #2F2727, #1a82f7 95%, #2F2727); 
    /* Opera 11.10+ */ 
    background: -o-linear-gradient(left, #2F2727, #1a82f7 5%, #2F2727, #1a82f7 95%, #2F2727); 
    }
    #radial-center {     padding:30px;    color:#fff;
    
    
    /* fallback */ 
    background-color: #2F2727; 
    /* Safari 4-5, Chrome 1-9 */
    background: -webkit-gradient(radial, center center, 0, center center, 460, from(#1a82f7), to(#2F2727)); 
    /* Safari 5.1+, Chrome 10+ */ 
    background: -webkit-radial-gradient(circle, #1a82f7, #2F2727); 
    /* Firefox 3.6+ */ 
    background: -moz-radial-gradient(circle, #1a82f7, #2F2727); 
    /* IE 10 */ 
    background: -ms-radial-gradient(circle, #1a82f7, #2F2727); 
    /* Opera cannot do radial gradients yet */
    }
    #radial-position {     padding:30px;    color:#fff;
    
    
    /* fallback */ 
    background-color: #2F2727;
    /* Safari 4-5, Chrome 1-9 */ 
    background: -webkit-gradient(radial, 80% 20%, 0, 80% 40%, 100, from(#1a82f7), to(#2F2727)); 
    /* Safari 5.1+, Chrome 10+ */ 
    background: -webkit-radial-gradient(80% 20%, closest-corner, #1a82f7, #2F2727); 
    /* Firefox 3.6+ */ 
    background: -moz-radial-gradient(80% 20%, closest-corner, #1a82f7, #2F2727); 
    /* IE 10 */ 
    background: -ms-radial-gradient(80% 20%, closest-corner, #1a82f7, #2F2727); 
    /* Opera cannot do radial gradients yet */ 
    }
    </style>
    
    <div id="linearBg2"><center>VBIran.Ir</center></div><br />
    <div id="linearBg1"><center>VBIran.Ir</center></div><br />
    <div id="even-stops"><center>VBIran.Ir</center></div><br />
    <div id="arbitrary-stops"><center>VBIran.Ir</center></div><br />
    <div id="radial-center"><center>VBIran.Ir</center></div><br />
    <div id="radial-position"><center>VBIran.Ir</center></div><br />
    دمو : CSS3 Gradient

    منبع: css-tricks.com
    Instagram: @m3neo
    Facebook:
    @mohsen.neo
    Twitter:
    @m3neo
    My Blog:
    m3n.ir
    ...





  2. گیفت کارت آیتونز

  3. Top | #2

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

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

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

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

  1. پاسخ: 13
    آخرين نوشته: 2014/06/17, 10:58 AM
  2. آموزش محو کردن [Blur] تصاویر با CSS3
    توسط Mr.Ramin در انجمن آموزش CSS بصورت ساده و حرفه ای
    پاسخ: 8
    آخرين نوشته: 2012/09/15, 09:57 PM
  3. آموزش محو کردن [Blur] متن با CSS3
    توسط Mr.Ramin در انجمن آموزش CSS بصورت ساده و حرفه ای
    پاسخ: 6
    آخرين نوشته: 2012/09/09, 06:47 PM
  4. آموزش تغییر رنگ Selection متن به وسیله css3
    توسط Sajadpm در انجمن آموزش CSS بصورت ساده و حرفه ای
    پاسخ: 0
    آخرين نوشته: 2012/07/27, 06:55 PM
  5. [آموزش] سایه ی جعبه در CSS3
    توسط Mohsen Neo در انجمن آموزش CSS بصورت ساده و حرفه ای
    پاسخ: 0
    آخرين نوشته: 2012/07/02, 01:08 AM

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

علاقه مندی ها (Bookmarks)

علاقه مندی ها (Bookmarks)

مجوز های ارسال و ویرایش

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