Как сделать сетку (например, сетку с бумажной сеткой) с помощью только css? Я просто хочу сделать виртуальную сетчатую бумагу только с использованием CSS. Заранее спасибо за помощь.
Как сделать сетку (например, бумажную сетку) только с помощью CSS?
Ответ 1
Поскольку вы упомянули выровненную бумагу:
background-color: #fff;
background-size: 100% 1.2em;
background-image: -webkit-linear-gradient(0deg, transparent 79px, #abced4 79px, #abced4 81px, transparent 81px),
-webkit-linear-gradient(#eee .05em, transparent .05em);
background-image: -moz-linear-gradient(0deg, transparent 79px, #abced4 79px, #abced4 81px, transparent 81px),
-moz-linear-gradient(#eee .05em, transparent .05em);
background-image: -ms-linear-gradient(0deg, transparent 79px, #abced4 79px, #abced4 81px, transparent 81px),
-ms-linear-gradient(#eee .05em, transparent .05em);
background-image: -o-linear-gradient(0deg, transparent 79px, #abced4 79px, #abced4 81px, transparent 81px),
-o-linear-gradient(#eee .05em, transparent .05em);
background-image: linear-gradient(0deg, transparent 79px, #abced4 79px, #abced4 81px, transparent 81px),
linear-gradient(#eee .05em, transparent .05em);
-pie-background: linear-gradient(0deg, transparent 79px, #abced4 79px, #abced4 81px, transparent 81px) 0 0 / 100% 1.2em,
linear-gradient(#eee .05em, transparent .05em) 0 0 / 100% 1.2em #fff;
behavior: url(/PIE.htc);
Последняя строка: behavior: url(/PIE.htc);
- это плагин css3pie, который добавляет поддержку, например, 6-9. На самом деле этот пример взят со своего сайта, где есть много интересных примеров: http://css3pie.com/demos/gradient-patterns/
Ответ 2
Для создания сеток вы можете использовать CSS-градиенты, которые работают во всех современных браузерах (см. Caniuse).
Используйте линейные градиенты, чтобы нарисовать линейную сетку:
body {
background-size: 40px 40px;
background-image:
linear-gradient(to right, grey 1px, transparent 1px),
linear-gradient(to bottom, grey 1px, transparent 1px);
}
Ответ 3
Что вы можете сделать, так это получить изображение сетки:
Затем добавьте это с помощью CSS:
#background {
background: url('path/to/grid-image.png');
}
Так что да, это не только CSS - вам также нужно изображение, но решение должно быть довольно чистым. Вот оно в действии:
#background {
width: 200px;
height: 160px;
background: url('http://i.stack.imgur.com/GySvQ.png');
}
<div id="background"></div>
Ответ 4
body {
background:
linear-gradient(-90deg, rgba(0,0,0,.05) 1px, transparent 1px),
linear-gradient(rgba(0,0,0,.05) 1px, transparent 1px),
linear-gradient(-90deg, rgba(0, 0, 0, .04) 1px, transparent 1px),
linear-gradient(rgba(0,0,0,.04) 1px, transparent 1px),
linear-gradient(transparent 3px, #f2f2f2 3px, #f2f2f2 78px, transparent 78px),
linear-gradient(-90deg, #aaa 1px, transparent 1px),
linear-gradient(-90deg, transparent 3px, #f2f2f2 3px, #f2f2f2 78px, transparent 78px),
linear-gradient(#aaa 1px, transparent 1px),
#f2f2f2;
background-size:
4px 4px,
4px 4px,
80px 80px,
80px 80px,
80px 80px,
80px 80px,
80px 80px,
80px 80px;
}