azami.cu@gmail.com | +98912 373 8239

ایجاد 4 بافت زیبای زمینه با CSS

از مجموعه تکنیک های CSS - برای حرفه ای شدن
CSS3 Gradient reduce page loading time, CSS3 Gradient technique, CSS3 Gradient Textures,زمینه,ایجاد زمینه با css3, آموزش css3,گرادیان در css3
به همت مهندس اعظمی در 1392/10/05

سلام بر شما عزیزان

امروز قصد دارم تا 4 عدد تکنیک ساخت زمینه های زیبا رو با css به شما آموزش بدم، استفاده از این نوع زمینه ها میتونه فواید بسیاری داشته باشه مثلا افزایش سرعت سایت و کم شدن حجم اون و کم شدن تعداد درخواست ها به سرور برای دریافت عکس های مربوط به زمینه و ...

البته باید توجه داشت که این تکنیک های CSS3 فقط در مرورگرهای مدرن پشتیبانی میشن.

خوب دیگه کار رو شروع می کنیم

ابتدا شما 4 عدد عنصر div در صفحه ایجاد بکنید

سپس استایل های زیر رو به صفحه اضافه کرده و نتیجه رو تماشا کنید - همین

div{
    width:700px;
    height:150px;
    margin:15px auto;
}

#texture_1{
    background-image: -moz-linear-gradient(90deg, #e07a1e, #e07a1e 2px, #f9cf90 2px, #f9cf90 4px, #e07a1e 4px);
    background-image: -webkit-linear-gradient(90deg, #e07a1e, #e07a1e 2px, #f9cf90 2px, #f9cf90 4px, #e07a1e 4px);
    background-repeat: repeat;
    background-size: 2px 4px;
}
                        
#texture_2{
    background-image: -moz-linear-gradient(0deg, #b6221b, #b6221b 2px, #c7221b 2px, #c7221b 4px, #b6221b 4px);
    background-image: -webkit-linear-gradient(0deg, #b6221b, #b6221b 2px, #c7221b 2px, #c7221b 4px, #b6221b 4px);
    background-repeat: repeat;
    background-size: 5px 10px;
}
                        
#texture_3{
    background-image: -moz-linear-gradient(90deg, #46b641, #46b641 15px, #308733 15px, #308733 30px, #46b641 30px);
    background-image: -webkit-linear-gradient(90deg, #46b641, #46b641 15px, #308733 15px, #308733 30px, #46b641 30px);
    background-repeat: repeat;
    background-size: 15px 30px;
}
                        
#texture_4{
    background-image: -moz-linear-gradient(45deg, rgba(0, 0, 0, 0.25) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, 0.25) 75%, rgba(0, 0, 0, 0.25)), -moz-linear-gradient(45deg, rgba(0, 0, 0, 0.25) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, 0.25) 75%, rgba(0, 0, 0, 0.25));
    background-image: -webkit-linear-gradient(45deg, rgba(0, 0, 0, .25) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, .25) 75%, rgba(0, 0, 0, .25)), -webkit-linear-gradient(45deg, rgba(0, 0, 0, .25) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, .25) 75%, rgba(0, 0, 0, .25));
    background-position: 0 0pt, 2px 2px;
    background-size: 4px 4px;
    background-color: #202125;
}
                        

امید وارم که مطلب بالا بدردتون خورده باشه -با عضویت در sarat از آخرین آموزش ها و مطالب با خبر شوید.



Tags:   CSS3 Gradient reduce page loading time, CSS3 Gradient technique, CSS3 Gradient Textures,زمینه,ایجاد زمینه با css3, آموزش css3,گرادیان در css3