تبلیغات
Think Big Get BIG - ایجاد الگوی طرح پس زمینه با CSS3
 
4kia.ir
درباره وبلاگ


کاربر گرامی ، درود

به وبلاگ ما خوش آمدید

امیدواریم از مطالب ما نهایت استفاده را ببرید. خواهشمندیم در صورتی که مطالب ما برایتان مفید واقع شده است، از دوستان خود دعوت کنید تا مهمان شوند.

سپاس

مدیر وبلاگ : حامد




MultiMan سیستم کسب درآمد - آموزش روش های تجربی و تست شده درآمد انلاین





صفحات جانبی
آمار وبلاگ
  • کل بازدید :
  • بازدید امروز :
  • بازدید دیروز :
  • بازدید این ماه :
  • بازدید ماه قبل :
  • تعداد نویسندگان :
  • تعداد کل پست ها :
  • آخرین بازدید :
  • آخرین بروز رسانی :
Think Big Get BIG
صفحه نخست             تماس با مدیر           پست الکترونیک               RSS                  ATOM
شنبه 16 آذر 1392 :: نویسنده : حامد
طراحان وب معمولا میخوان طرحشون حجم کمی داشته باشه . برای اینکار هم اکثرا سعی میکنن ار تصاویر کمتر استفاده کنن و بیشتر گرافیک وب رو با کدهای HTML و CSS ایجاد کنن. در این پست میخوام 10 طرح پس زمینه زیبا رو که میشه با کد نوشت بهتون معرفی کنم :

1- طرح پله  (حجم 239B)

این طرح تناوبی از خطوط موازبه که چیزی شبیه تناوبی از پله ها ایجاد کرده . شما میتونید برای ایجاد این طرح از کد زیر استفاده کنید :

background:
linear-gradient(63deg, #999 23%, transparent 23%) 7px 0,
linear-gradient(63deg, transparent 74%, #999 78%),
linear-gradient(63deg, transparent 34%, #999 38%, #999 58%, transparent 62%),
#444;
background-size: 16px 48px;




2- طرح پیکان (حجم 409B)

این طرح تناوبی از شکل پیکانه که در دو رنگ و بصورت مورب در کنار هم تکرار میشه . شما میتونید برای ایجاد این طرح از کد زیر استفاده کنید :

background:
linear-gradient(45deg, #92baac 45px, transparent 45px)64px 64px,
linear-gradient(45deg, #92baac 45px, transparent 45px,transparent 91px, #e1ebbd 91px, #e1ebbd 135px, transparent 135px),
linear-gradient(-45deg, #92baac 23px, transparent 23px, transparent 68px,#92baac 68px,#92baac 113px,transparent 113px,transparent 158px,#92baac 158px);
background-color:#e1ebbd;
background-size: 128px 128px;



3 - طرح حصیر (حجم 372B)
این طرح تناوبی نوارهای موربه که طرحی شبیه به طرح حصیر ایجاد میکنه . شما میتونید برای ایجاد این طرح از کد زیر استفاده کنید :

background:
linear-gradient(135deg, #708090 22px, #d9ecff 22px, #d9ecff 24px, transparent 24px, transparent 67px, #d9ecff 67px, #d9ecff 69px, transparent 69px),
linear-gradient(225deg, #708090 22px, #d9ecff 22px, #d9ecff 24px, transparent 24px, transparent 67px, #d9ecff 67px, #d9ecff 69px, transparent 69px)0 64px;
background-color:#708090;
background-size: 64px 128px



4 - طرح کربن فیبر (حجم 305B)
صفحه خاکستری با دانه های ریز متناوب . شما میتونید برای ایجاد این طرح از کد زیر استفاده کنید :

background:
radial-gradient(black 15%, transparent 16%) 0 0,
radial-gradient(black 15%, transparent 16%) 8px 8px,
radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 0 1px,
radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 8px 9px;
background-color:#282828;
background-size:16px 16px;
طرح کربن (حجم 486B)
طرح حصیر عمودی خاکستری رنگ . شما میتونید برای ایجاد این طرح از کد زیر استفاده کنید :

background:
linear-gradient(27deg, #151515 5px, transparent 5px) 0 5px,
linear-gradient(207deg, #151515 5px, transparent 5px) 10px 0px,
linear-gradient(27deg, #222 5px, transparent 5px) 0px 10px,
linear-gradient(207deg, #222 5px, transparent 5px) 10px 5px,
linear-gradient(90deg, #1b1b1b 10px, transparent 10px),
linear-gradient(#1d1d1d 25%, #1a1a1a 25%, #1a1a1a 50%, transparent 50%, transparent 75%, #242424 75%, #242424);
background-color: #131313;
background-size: 20px 20px;



6 - طرح لوزی (حجم 542B)
لوزیهای قرار گرفته در کنار هم با دو رنگ متفاوت. شما میتونید برای ایجاد این طرح از کد زیر استفاده کنید :

background-color: #6d695c;
background-image:
repeating-linear-gradient(120deg, rgba(255,255,255,.1), rgba(255,255,255,.1) 1px, transparent 1px, transparent 60px),
repeating-linear-gradient(60deg, rgba(255,255,255,.1), rgba(255,255,255,.1) 1px, transparent 1px, transparent 60px),
linear-gradient(60deg, rgba(0,0,0,.1) 25%, transparent 25%, transparent 75%, rgba(0,0,0,.1) 75%, rgba(0,0,0,.1)),
linear-gradient(120deg, rgba(0,0,0,.1) 25%, transparent 25%, transparent 75%, rgba(0,0,0,.1) 75%, rgba(0,0,0,.1));
background-size: 70px 120px;



7 - طرح قلب (حجم 943B)
تکرار قلب قرمز در زمینه ای زرشکی. شما میتونید برای ایجاد این طرح از کد زیر استفاده کنید :


background-color: #6d695c;
background-image:
repeating-linear-gradient(120deg, rgba(255,255,255,.1), rgba(255,255,255,.1) 1px, transparent 1px, transparent 60px),
repeating-linear-gradient(60deg, rgba(255,255,255,.1), rgba(255,255,255,.1) 1px, transparent 1px, transparent 60px),
linear-gradient(60deg, rgba(0,0,0,.1) 25%, transparent 25%, transparent 75%, rgba(0,0,0,.1) 75%, rgba(0,0,0,.1)),
linear-gradient(120deg, rgba(0,0,0,.1) 25%, transparent 25%, transparent 75%, rgba(0,0,0,.1) 75%, rgba(0,0,0,.1));
background-size: 70px 120px;



8 - طرح تارتان ، لنگ (حجم 1.15Kb)
طرحی مثل الگوی لنگ. شما میتونید برای ایجاد این طرح از کد زیر استفاده کنید :

background-color: hsl(2, 57%, 40%);
background-image: repeating-linear-gradient(transparent, transparent 50px, rgba(0,0,0,.4) 50px, rgba(0,0,0,.4) 53px, transparent 53px, transparent 63px, rgba(0,0,0,.4) 63px, rgba(0,0,0,.4) 66px, transparent 66px, transparent 116px, rgba(0,0,0,.5) 116px, rgba(0,0,0,.5) 166px, rgba(255,255,255,.2) 166px, rgba(255,255,255,.2) 169px, rgba(0,0,0,.5) 169px, rgba(0,0,0,.5) 179px, rgba(255,255,255,.2) 179px, rgba(255,255,255,.2) 182px, rgba(0,0,0,.5) 182px, rgba(0,0,0,.5) 232px, transparent 232px),
repeating-linear-gradient(270deg, transparent, transparent 50px, rgba(0,0,0,.4) 50px, rgba(0,0,0,.4) 53px, transparent 53px, transparent 63px, rgba(0,0,0,.4) 63px, rgba(0,0,0,.4) 66px, transparent 66px, transparent 116px, rgba(0,0,0,.5) 116px, rgba(0,0,0,.5) 166px, rgba(255,255,255,.2) 166px, rgba(255,255,255,.2) 169px, rgba(0,0,0,.5) 169px, rgba(0,0,0,.5) 179px, rgba(255,255,255,.2) 179px, rgba(255,255,255,.2) 182px, rgba(0,0,0,.5) 182px, rgba(0,0,0,.5) 232px, transparent 232px),
repeating-linear-gradient(125deg, transparent, transparent 2px, rgba(0,0,0,.2) 2px, rgba(0,0,0,.2) 3px, transparent 3px, transparent 5px, rgba(0,0,0,.2) 5px);



9 - طرح کاغذ خط دار (حجم 209B)
طرح سفید و ساده ای که با خطوط آبی افقی یادآور دفتر خط داره. شما میتونید برای ایجاد این طرح از کد زیر استفاده کنید :

background-color: #fff;
background-image:
linear-gradient(90deg, transparent 79px, #abced4 79px, #abced4 81px, transparent 81px),
linear-gradient(#eee .1em, transparent .1em);
background-size: 100% 1.2em;


10 - طرح استریپ عمودی (حجم 361B)
نوارهای عمودی کنار هم با رنگهایی از طیف سبز-آبی. شما میتونید برای ایجاد این طرح از کد زیر استفاده کنید :

background-color: #026873;
background-image: linear-gradient(90deg, rgba(255,255,255,.07) 50%, transparent 50%),
linear-gradient(90deg, rgba(255,255,255,.13) 50%, transparent 50%),
linear-gradient(90deg, transparent 50%, rgba(255,255,255,.17) 50%),
linear-gradient(90deg, transparent 50%, rgba(255,255,255,.19) 50%);
background-size: 13px, 29px, 37px, 53px;


=============================================================


امیدوارم براتون مفید باشه

















کسب درآمد

4kia.ir

468x60
 
لبخندناراحتچشمک
نیشخندبغلسوال
قلبخجالتزبان
ماچتعجبعصبانی
عینکشیطانگریه
خندهقهقههخداحافظ
سبزقهرهورا
دستگلتفکر