Як досягти такої текстури, використовуючи градієнти CSS3?
Відповіді:
2 для відповіді № 1Перший фон простий у використанні repeating-linear-gradient:
body {
height:100vh;
width:100vw;
background:repeating-linear-gradient(
to bottom,
#58D68D 0,
#58D68D 30px,
#2ECC71 30px,
#2ECC71 60px
);
}Другий фон набагато складніший і не повинен бути рішенням CSS. Я рекомендую використовувати a background-image замість цього!
Це неможливо вирішити за допомогою CSS (використовуючи perspective):
body {
transform: perspective(100em) rotateX(50deg) scale(2);
overflow:hidden;
}
div {
height:100vh;
width:100vw;
background:repeating-linear-gradient(
to bottom,
rgba(46, 204, 113, 0.5) 0,
rgba(46, 204, 113, 0.5) 30px,
rgba(88, 214, 141, 0.5) 30px,
rgba(88, 214, 141, 0.5) 60px
), repeating-linear-gradient(
to right,
rgba(46, 204, 113, 0.5) 0,
rgba(46, 204, 113, 0.5) 30px,
rgba(88, 214, 141, 0.5) 30px,
rgba(88, 214, 141, 0.5) 60px
);
}<div></div>