Інформаційно-освітній сайт 
(0)
Переглядів: 1445Градієнтні заливки за замовчуванням займають всю площу елемента. Керуючи розміром заливки за допомогою властивості background-size і положенням за допомогою background-position, можна створювати красиві візерунки.
Перейти на сторінку з прикладами
1. Фестони
div {
height: 200px;
background: radial-gradient(#FBB03B 0%, #FBB03B 50%, #8AD4E1 50%, #8AD4E1 70%, white 70%, white 100%) 0 190px,
radial-gradient(#FBB03B 0%, #FBB03B 50%, #8AD4E1 50%, #8AD4E1 70%, white 70%, white 100%) 0 -10px;
background-size: 20px 20px;
background-repeat: repeat-x;
box-shadow: 1px 1px 2px 0 rgba(0,0,0,.2), -1px -1px 2px 0 rgba(0,0,0,.2);
}
2. Діагональний узор
div {
background: linear-gradient(45deg, #CBDDEB, #CBDDEB 50%, #527383 50%);
background-size: 50px 50px;
}
3. Діагональний узор
div {
background: linear-gradient(135deg, #FABFB2, #FABFB2 25%, #FCA699 25%);
background-size: 20px 20px;
}
4. Градієнтні границі
div {
background-color: #9097A2;
}
h4 {
padding: 30px 0;
color: white;
font-size: 40px;
position: relative;
margin: 0;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
background-image: linear-gradient(to right, rgba(211, 212, 218, 0), rgba(211, 212, 218, 0.3) 40%, rgba(211, 212, 218, 0.3) 60%, rgba(211, 212, 218, 0));
}
h4:before {
width: 100%;
height: 2px;
position: absolute;
left: 0;
top: 0;
content: "";
background-image: linear-gradient(to right, rgba(211, 212, 218, 0), rgba(211, 212, 218, 0.8) 40%, rgba(211, 212, 218, 0.8) 60%, rgba(211, 212, 218, 0));
}
h4:after {
width: 100%;
height: 2px;
position: absolute;
left: 0;
bottom: 0;
content: "";
background-image: linear-gradient(to right, rgba(211, 212, 218, 0), rgba(211, 212, 218, 0.8) 40%, rgba(211, 212, 218, 0.8) 60%, rgba(211, 212, 218, 0));
}
5. Крупна клітка
div {
background-image:
linear-gradient(#98B7AF 1px, transparent 1px),
linear-gradient(90deg, #98B7AF 1px, transparent 1px);
background-size: 2em 2em;
background-color: white;
}
6. Горох
div {
background-color: white;
background-image: radial-gradient(#9ed8d3 5px, transparent 5px);
background-size: 30px 30px;
}
7. Радіальний градієнт
div {
background-color: #e61f59;
background-image: radial-gradient(ellipse farthest-corner at right bottom, #ADC0CE 0%, #E61F59 50%, #E4E4E4 100%);
}
8. Плитка
div {
background-color: #DDD7D7;
background-size: 50px 50px;
background-image:
linear-gradient(-45deg, transparent 52%, rgba(255,255,255,0.9) 54%, transparent 55%, transparent),
linear-gradient(45deg, transparent 52%, rgba(255,255,255,0.6) 54%, transparent 55%, transparent),
linear-gradient(-45deg, transparent 50%, rgba(0,0,0,0.1) 52%, transparent 53%, transparent),
linear-gradient(45deg, transparent 50%, rgba(0,0,0,0.05) 52%, transparent 53%, transparent);
}
9. Узор-купон
div {
background-color: #F2D95D;
background-image: radial-gradient(#7F7E7F 76%, transparent 0),
radial-gradient(#7F7E7F 72%, transparent 0),
radial-gradient(#7F7E7F 68%, transparent 0),
radial-gradient(#7F7E7F 64%, transparent 0),
radial-gradient(#7F7E7F 60%, transparent 0),
radial-gradient(#7F7E7F 56%, transparent 0),
radial-gradient(#7F7E7F 52%, transparent 0),
radial-gradient(#7F7E7F 48%, transparent 0),
radial-gradient(#7F7E7F 44%, transparent 0),
radial-gradient(#7F7E7F 40%, transparent 0),
radial-gradient(#7F7E7F 36%, transparent 0),
radial-gradient(#7F7E7F 32%, transparent 0),
radial-gradient(#7F7E7F 28%, transparent 0),
radial-gradient(#7F7E7F 24%, transparent 0);
background-size: 1em 1em;
background-repeat: repeat-y;
background-position: 0 0, 1em 0, 2em 0, 3em 0, 4em 0, 5em 0, 6em 0, 7em 0, 8em 0, 9em 0, 10em 0, 11em 0, 12em 0, 13em 0;
}
10. Ретро промені
div {
background:
linear-gradient(170deg, transparent 80%, #91CBCF 30%),
linear-gradient(156deg, transparent 68%, #E3D9C3 30%),
linear-gradient(135deg, transparent 60%, #91CBCF 30%),
linear-gradient(115deg, transparent 55%, #E3D9C3 30%),
linear-gradient(65deg, transparent 45%, #91CBCF 30%),
linear-gradient(45deg, transparent 40%, #E3D9C3 30%),
linear-gradient(24deg, transparent 32%, #91CBCF 30%),
linear-gradient(10deg, transparent 20%, #E3D9C3 20%),
linear-gradient(0deg, transparent 0%, #91CBCF 0%);
background-position: center;
background-size: 100% 100%;
}
11. Узор-ялинка
div {
background-size: 48px 18px;
background-color: #CBCFD1;
background-image:
linear-gradient(90deg, #607584 1%, transparent 2%),
linear-gradient(45deg, transparent 7%, #607584 10%, transparent 10%, transparent 35%, #607584 37%, transparent 33%),
linear-gradient(-45deg, transparent 8%, #E6EBED 10%, transparent 10%, transparent 35%, #E6EBED 37%, transparent 33%);
}
12. Соти
div {
background-color: #f76;
background-image:
linear-gradient(30deg, #fee 13.5%, transparent 13.5%, transparent 86.5%, #fee 86.5%),
linear-gradient(-30deg, #fee 13.5%, transparent 13.5%, transparent 86.5%, #fee 86.5%),
linear-gradient(30deg, #dcc 13.5%, transparent 13.5%, transparent 86.5%, #dcc 86.5%),
linear-gradient(-30deg, #dcc 13.5%, transparent 13.5%, transparent 86.5%, #dcc 86.5%),
linear-gradient(30deg, #fee 13.5%, transparent 13.5%, transparent 86.5%, #fee 86.5%),
linear-gradient(-30deg, #fee 13.5%, transparent 13.5%, transparent 86.5%, #fee 86.5%),
linear-gradient(30deg, #dcc 13.5%, transparent 13.5%, transparent 86.5%, #dcc 86.5%),
linear-gradient(-30deg, #dcc 13.5%, transparent 13.5%, transparent 86.5%, #dcc 86.5%),
linear-gradient(45deg, #544 25%, transparent 25%, transparent 75%, #544 75%),
linear-gradient(45deg, #544 25%, transparent 25%, transparent 75%, #544 75%);
background-position: 0 2em, 0 2em, 2em 4em, 2em 4em, 4em 2em, 4em 2em, 6em 4em, 6em 4em, 0 0, 2em 2em;
background-size: 8em 4em, 8em 4em, 8em 4em, 8em 4em, 8em 4em, 8em 4em, 8em 4em, 8em 4em, 4em 4em, 4em 4em;
}
13. Ромби
div {
background-color:#1E3A52;
background-image:
linear-gradient(30deg, #83C5E5 12%, transparent 12.5%, transparent 87%, #83C5E5 87.5%, #83C5E5),
linear-gradient(150deg, #83C5E5 12%, transparent 12.5%, transparent 87%, #83C5E5 87.5%, #83C5E5),
linear-gradient(30deg, #83C5E5 12%, transparent 12.5%, transparent 87%, #83C5E5 87.5%, #83C5E5),
linear-gradient(150deg, #83C5E5 12%, transparent 12.5%, transparent 87%, #83C5E5 87.5%, #83C5E5),
linear-gradient(60deg, #FE5568 25%, transparent 25.5%, transparent 75%, #FE5568 75%, #FE5568),
linear-gradient(60deg, #FE5568 25%, transparent 25.5%, transparent 75%, #FE5568 75%, #FE5568);
background-position: 0 0, 0 0, 25px 50px, 25px 50px, 0 0, 25px 50px;
background-size: 50px 100px;
}
14. Кольорові полоски
div {
background-image: linear-gradient(85deg, #B7AE9D 10%, #ACCECD 10%, #ACCECD 20%, white 20%, white 30%, #544E3E 30%, #544E3E 40%, #8A151B 40%, #8A151B 50%, #B7AE9D 50%, #B7AE9D 60%, #ACCECD 60%, #ACCECD 70%, white 70%, white 80%, #544E3E 80%, #544E3E 90%, #8A151B 90%);
}
15. Кольорові полоси
div {
background-color: #81D4EC;
background-image: linear-gradient(182deg, #ED7B9C 32%, transparent 32%), linear-gradient(178deg, #EBEBEB 62%, transparent 62%);
}
16. Прозора основа
div {
background-color: white;
background-image:
linear-gradient(45deg, #cccccc 25%, transparent 25%, transparent 75%, #cccccc 75%),
linear-gradient(45deg, #cccccc 25%, transparent 25%, transparent 75%, #cccccc 75%);
background-position: 0 0, 8px 8px;
background-size: 16px 16px;
}
17. Узор-зигзаг
div {
background: linear-gradient(135deg, #ECEDDC 25%, transparent 25%) -50px 0,
linear-gradient(225deg, #ECEDDC 25%, transparent 25%) -50px 0,
linear-gradient(315deg, #ECEDDC 25%, transparent 25%),
linear-gradient(45deg, #ECEDDC 25%, transparent 25%);
background-size: 100px 100px;
background-color: #F4CF24;
}
18. Ретро полоси
div {
background-image:
linear-gradient(135deg, transparent 84px, #d95b43 84px, #d95b43 100px, #ecd078 100px, #ecd078 106px, #c02942 106px, #c02942 120px, #ecd078 121px, #ecd078 127px, #542437 127px, #542437 142px, #ecd078 142px, #ecd078 148px, #53777a 148px, #53777a 163px, #ecd078 163px, #ecd078 168px, #d95b43 169px),
linear-gradient(135deg, #d95b43 15px, #d95b43, #ecd078 15px, #ecd078 21px, #c02942 21px, #c02942 36px, #ecd078 36px, #ecd078 42px, #542437 42px, #542437 57.5px, #ecd078 57px, #ecd078 63px, #53777a 63px, #53777a 78px, #ecd078 78px, #ecd078 84px, transparent 84px, transparent 99px);
background-size: 120px 120px;
}
19. Стрази
div {
background-color: white;
background-image:
linear-gradient(white 25%, transparent 25%),
linear-gradient(90deg, white 25%, transparent 25%),
linear-gradient(transparent 75%, #d4d3d8 75%),
linear-gradient(90deg, transparent 75%, #eff0ea 75%),
linear-gradient(#eff0ea 50%, transparent 50%),
linear-gradient(90deg, #d4d3d8 50%, transparent 50%);
background-size: 20px 20px;
}
20. Мозаїчна плитка
div {
background-color: #5371B3;
background-image:
linear-gradient(#eeeeee 25%, transparent 25%),
linear-gradient(90deg, #eeeeee 25%, transparent 25%);
background-size: 8px 8px;
}
21. Цегельний узор
div {
background:
linear-gradient(225deg, transparent 24.5%, #449CB4 24.6%, transparent 24.8%) 37px -37px,
linear-gradient(135deg, transparent 24.5%, #449CB4 24.6%, transparent 24.8%) 37px 111px,
linear-gradient(135deg, transparent 24.5%, #449CB4 24.6%, transparent 24.8%) 37px 37px,
linear-gradient(225deg, transparent 24.5%, #449CB4 24.6%, transparent 24.8%) 37px 37px,
linear-gradient(135deg, transparent 24.5%, #449CB4 24.6%, transparent 24.8%) 74px 0px,
linear-gradient(225deg, transparent 24.5%, #449CB4 24.6%, transparent 24.8%) 74px 0px,
linear-gradient(135deg, transparent 24.5%, #449CB4 24.6%, transparent 24.8%) 74px 74px,
linear-gradient(225deg, transparent 24.5%, #449CB4 24.6%, transparent 24.8%) 74px 74px;
background-size: 148px 148px;
background-color: #E8F4F2;
}
22. Сітка
div {
background:
radial-gradient(ellipse farthest-corner, transparent 0%, transparent 35%, white 30%, white 40%, transparent 90%),
radial-gradient(ellipse farthest-corner at 0 0, transparent 0%, transparent 20%, white 15%, white 20%, transparent 50%),
radial-gradient(ellipse farthest-corner at 8px 8px, transparent 0%, transparent 20%, white 15%, white 20%, transparent 50%), radial-gradient(ellipse farthest-corner at 0 8px, transparent 0%, transparent 20%, white 15%, white 20%, transparent 40%), radial-gradient(ellipse farthest-corner at 8px 0, transparent 0%, transparent 20%, white 15%, white 20%, transparent 50%), linear-gradient(40deg, #AC394A 0%, #DC625F 30%, #EB7D5C 50%, #DC625F 70%, #AC394A 100%);
background-size: 8px 8px, 8px 8px, 8px 8px, 8px 8px, 8px 8px, 100% 100%;
}
23. Мозаїчний узор
div {
background-color: #EEE2DB;
background-image:
linear-gradient(45deg,#ECD9D3 25%, transparent 25%, transparent 75%, #EBC4B8 75%),
linear-gradient(-45deg,#ECA797 25%, transparent 25%, transparent 75%, #E98A74 75%);
background-position: 0 0, 1em 1em;
background-size: 2em 2em, 2em 2em;
}
24. Дрібний зигзаг
div {
background-image:
linear-gradient(-45deg, transparent 2px, #D1C7BF 2px, transparent 3px),
linear-gradient(45deg, transparent 2px, #D1C7BF 2px, transparent 3px);
background-size: 6px 6px;
}
25. Ромби
div {
background-color: #AACCBE;
background-image:
linear-gradient(45deg, #DB1F04 25%, transparent 25%, transparent 75%, #DB1F04 75%, #DB1F04),
linear-gradient(-45deg, #DB1F04 25%, transparent 25%, transparent 75%, #DB1F04 75%, #DB1F04);
background-size: 60px 60px;
}
26. Клітка
div {
background-color: #DEE2E5;
background-image:
linear-gradient(transparent 99px, white 99px),
linear-gradient(90deg, transparent 99px, white 99px),
linear-gradient(transparent 19px, rgba(255, 255, 255, 0.3) 19px),
linear-gradient(90deg, transparent 19px, rgba(255, 255, 255, 0.3) 19px);
background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px;
}
27. Піксельний узор
div {
background-image:
repeating-radial-gradient(center center, rgba(0,0,0,.2), rgba(0,0,0,.2) 1px, transparent 1px, transparent 100%);
background-size: 3px 3px;
}
28. Листок зошита
div {
background-color: #f9f9f9;
background-image:linear-gradient(#4C596C, transparent 1px);
background-size: 1.5em 1.5em;
box-shadow: 1px 1px 2px rgba(0,0,0,.2), -1px -1px 2px rgba(0,0,0,.2);
}
div:before {
content: "";
display: inline-block;
height: 100%;
width: 4px;
border-left: 4px double #F54318;
position: relative;
left: 40px;
}
29. Горошок
div {
background: radial-gradient(#ffaf2f 2px, transparent 1px);
background-size: 20px 20px;
}
30. Квітковий узор
div {
background-color: white;
background-image:
radial-gradient(transparent 40%, white 50%),
radial-gradient(transparent 40%, #EF3641 40%);
background-size: 30px 30px, 20px 20px;
}
31. Зигзаг
div {
position: relative;
background: #D8E6F3;
margin: 14px 0;
}
div:before {
content: "";
height: 14px;
position: absolute;
left: 0;
right: 0;
top: -14px;
background: linear-gradient(45deg, #D8E6F3 25%, transparent 25%), linear-gradient(315deg, #D8E6F3 25%, transparent 25%), linear-gradient(225deg, white 25%, transparent 25%) -7px 0, linear-gradient(135deg, white 25%, transparent 25%) -7px 0;
background-size: 14px 14px;
background-color: #AFCDE7;
}
div:after {
content: "";
height: 14px;
position: absolute;
left: 0;
right: 0;
bottom: -14px;
background: linear-gradient(135deg, #D8E6F3 25%, transparent 25%), linear-gradient(225deg, #D8E6F3 25%, transparent 25%), linear-gradient(315deg, white 25%, transparent 25%) -7px 0, linear-gradient(45deg, white 25%, transparent 25%) -7px 0;
background-size: 14px 14px;
background-color: #AFCDE7;
}
32. “Страусина шкіра”
div {
background-color: #E4EFD1;
background-image:
radial-gradient(#FEFFFE 2px, transparent 3px, transparent 5px, #BAD78B 6px),
linear-gradient(#A6CC69 2px, transparent 4px, transparent 5px, #74924C 7px);
background-position: 0 0, 1em 1em;
background-size: 2em 2em, 2em 2em;
}
33. Клітчастий узор
div {
background-color: #ececea;
background-image:
linear-gradient(to right, rgba(63, 75, 138, .7) 0, rgba(63, 75, 138, .7) 10px, transparent 10px, transparent 20px),
linear-gradient(to top, rgba(63, 75, 138, .4) 0, rgba(63, 75, 138, .4) 10px, transparent 10px, transparent 20px);
background-size: 20px 20px;
}
34. Каплі
div {
background:
linear-gradient(70deg, #9B8A77 0.9em,transparent 1em),
linear-gradient(-70deg, #9B8A77 0.9em, transparent 1em),
radial-gradient(#9B8A77 0.9em, transparent 1em),
linear-gradient(70deg, #47403A 0.9em, transparent 1em),
linear-gradient(-70deg, #47403A 0.9em, transparent 1em),
radial-gradient(#47403A 0.9em, transparent 1em);
background-position: 3em -3em, -3em -3em, 0 0, 0 0, 0 0, 3em 3em;
background-size: 6em 6em;
background-color: #F0DFCA;
background-repeat: repeat;
font-size: 12px;
}
35. Тонкі діагональні полоски
div {
background-image:
linear-gradient(-45deg, transparent 50%, #F1D0CB 50%, #F1D0CB 60%, transparent 60%),
linear-gradient(-45deg, #F1D0CB 10%, transparent 10%);
background-color: #FCFAFB;
background-size: 1em 1em;
}
36. Узор-ялинка
div {
background:
linear-gradient(to left bottom, transparent 0.4em, #EE3F40 0.4em, #EE3F40 1.02em, transparent 1.02em) 0 0,
linear-gradient(to right top, transparent 0.4em, #EE3F40 0.4em, #EE3F40 1.02em, transparent 1.02em) 2em 0,
linear-gradient(to left bottom, transparent 0.4em, #623D56 0.4em, #623D56 1em, transparent 0.4em) 0 1.02em,
linear-gradient(to right top, transparent 0.4em, #623D56 0.4em, #623D56 1.02em, transparent 0.4em) 2em 1.02em,
linear-gradient(to right bottom, transparent 0.4em, #EE3F40 0.4em, #EE3F40 1.02em, transparent 1.02em) 0 0,
linear-gradient(to left top, transparent 0.4em, #EE3F40 0.4em, #EE3F40 1.02em, transparent 1.02em) 2em 0,
linear-gradient(to right bottom, transparent 0.4em, #623D56 0.4em, #623D56 1.02em, transparent 0.4em) 0 1.02em,
linear-gradient(to left top, transparent 0.4em, #623D56 0.4em, #623D56 1.02em, transparent 0.4em) 2em 1.02em;
background-size: 4em 4em;
background-color: #F1E9D2;
background-repeat: repeat;
}
37. Діагональні полоси
div {
background-image:
linear-gradient(-45deg, transparent 40%, rgba(255,97,94,.7) 40%, rgba(255,97,94,.7) 60%, transparent 60%),
linear-gradient(135deg, rgba(255,97,94,.7) 10%, transparent 10%),
linear-gradient(-45deg, rgba(255,97,94,.7) 10%, transparent 10%),
linear-gradient(45deg, transparent 40%, #FFC45C 40%, #FFC45C 60%, transparent 60%),
linear-gradient(45deg, #FFC45C 10%, transparent 10%),linear-gradient(-135deg, #FFC45C 10%, transparent 10%);
background-color: #FCFAFB;
background-size: 2em 2em;
}
38. Діагональна клітка
div {
background:
repeating-linear-gradient(45deg, transparent, transparent 1em, #5A9C6E 0, #5A9C6E 2em,
transparent 0, transparent 3em, #A8BF5A 0, #A8BF5A 4em,
transparent 0, transparent 5em, #FAC46E 0, #FAC46E 6em,
transparent 0, transparent 7em, #FAD5BB 0, #FAD5BB 8em),
repeating-linear-gradient(-45deg,transparent, transparent 1em, #A8BF5A 0,#A8BF5A 2em,
transparent 0, transparent 3em, #FAD5BB 0, #FAD5BB 4em,
transparent 0, transparent 5em, #FAC46E 0, #FAC46E 6em), #F2FEFF;
background-blend-mode: multiply;
}
Приклади градієнтних заливок
1. Фестони
2. Дiагональний узор
3. Дiагональний узор
4. Градiентнi границi
I love gradient ❦
5. Крупна клiтинка
6. Горох
7. Радiальний градiєнт
8. Плитка
9. Узор-купон
10. Ретро промені
11. Узор-ялинка
12. Соти
13. Ромби
14. Кольорові полоски
15. Кольорові полоси
16. Прозора основа
17. Узор-зигзаг
18. Ретро полоски
19. Стрази
20. Мозаїчна плитка
21. Цегольний узор
22. Сітка
23. Мозаїчний узор
24. Дрібний зигзаг
25. Ромби
26. Клітинка
27. Піксельний узор
28. Листок зошита
29. Горошок
30. Квітковий узор
31. Зигзаг
32. "Страусина шкіра"
33. Клітчастий узор
34. Каплі
35. Тонкі діагональні полоски
36. Узор-ялинка
37. Діагональні полоси
38. Діагональна клітка
Колекція фонових шаблонів SVG для використання у веб-проектах представлена на ресурсі Hero Patterns. Вони мають малий розмір і вписуються в стилі css.Online CSS Gradient Generator - наш онлайн калькулятор для генерації градієнтів
Втрати російської армії
У другій світовій війні Радянський Союз втратив близько 25 мільйонів громадян включно з військовими і цивільними і здобув перемогу ставши наддержавою, яка розповсюдила свій вплив на половину світу.
29.01.2021 12:54
За 2020 рік і кінець 2019р.
Випускниця Несвічівської ЗОШ Муха Юлія - чемпіонка Європи 2016 та 2017 року з армреслінгу серед юніорів!!! Відео. ...
ЛУЦЬК УНІВЕРСИТЕТ Факультет інформаційних систем, фізики та математики.
472140 +1270
7354 +22
14129 +33
348/325 +0/+0
786 +2
12102/1053 +58/+0
9580 +19
16266 +42
26/1 +0/+0
1993 +5
2126 +0
Google:30.03-07:45 || Bing:17.04-09:02 || Yandex:02.02-00:35 
