Кто-нибудь делал CSS snap to grid?

У меня тут задача возникла очень нетривиальная — сделать CSS snap to grid. Если не получится, сделаю через JavaScript. С ходу вчера мне не удалось придумать как это сделать по горизонтали (а мне надо именно так), только по вертикали возникли кое-какие мысли.

Кто-нибудь может что-нибудь придумать? Надо кроссбраузерно.
15 августа 2011 18:48

Viperet (инкогнито)
15 августа 2011, 19:22

snap to grid - что это?

Артур (инкогнито)
15 августа 2011, 19:25

Даже после перевода в Гугль-транслейте не понятно, что это такое, хотя само вот это выражение, snap to grid, так и вертится на языке, только вспомнить не могу, где я его встречал. Перефразировать можете? Или на картинке какой-нить показать, что требуется?
(Вот, вспомнил — это в Виндовсе можно «выровнять значки по сетке». Всеравно не понятно, что требуется.)

Артём (инкогнито)
15 августа 2011, 19:28

Евгений, а можно подробности?

Viperet, это "привязать к сетке", функция выравнивания по сетке, есть почти во всех графических редакторах.

bolk (bolknote.ru)
15 августа 2011, 19:39, ответ предназначен Артему

Подробности такие.

На заднем фоне — картинка-сетка, по центру — фигура, которая строится через JS, может отличаться время от времени, но все её элементы всегда попадают в сетку. Надо сделать, так, чтобы при изменении размера окна фигура всегда была по центру и нормально укладывалась в сетку на заднем фоне.

Александр Карпинский (инкогнито)
15 августа 2011, 21:36, ответ предназначен bolk (bolknote.ru):

Все равно не понятно. Делаем фигуру фиксированного размера, кратным шагу сетки. Делаем сетку с помошью картинки на фоне. Центруем и то и другое. Вроде удовлетворяет описанным условиям. Что-то недосказано?

bolk (bolknote.ru)
15 августа 2011, 22:15, ответ предназначен Александру Карпинскому

Я лучше нарисую простенький аналог:

2011.08.15.pnghttp://fotki.yandex.ru/users/bolknote/view/341567/?page=0

Надо сделать так, чтобы сетка была фоном страницы, а при изменении размеров шарики были точно в сетке и по центру страницы, то есть перескакивали рывком.

Боб (инкогнито)
16 августа 2011, 00:35

Закреплен левый край сетки, а не центр? Нельзя упростить задачу закрепив центр?

Для браузеров, которые считают относительные размеры в пикселях (webkit, opera, ie6), сработает контейнер с шириной 100%/ширину клетки + вложенный контейнер 100%*ширину клетки — он будет увеличиваться по ширине с шагом в клетку. Относительно него уже можно позиционировать по-центру.

Расскажите, как вы решили по вертикали?

bolk (bolknote.ru)
16 августа 2011, 00:42, ответ предназначен Бобу

Попробуйте сверстать? А то может я рассказал что не так.
Расскажите, как вы решили по вертикали?
Я не решил мысли возникли, не уверен, что сработает. Но по вертикали мне не нужно :)

agonych (agonych.livejournal.com)
16 августа 2011, 05:22

Конкретно твой файл сделать не получается, размер квадрата и толщина линий должна быть четной (у тебя 47px и 9px), иначе фон не получится сделать полностью симметричным, и шарик будет "прыгать" на 1 пиксель.

А код вот такой:

<html>
<head>
<style>
html {
height: 100%;
}
body {
padding: 0;
margin: 0;
background: #FFF url(grid.gif) repeat center center;
height: 100%;
}

#container {
height: 1px;
left: 50%;
position: absolute;
top: 50%;
width: 1px;
}

#ball {
background: url("ball.gif") no-repeat scroll 0 0

transparent;
height: 46px;
left: -23px;
margin: auto;
position: relative;
top: -23px;
width: 46px;
}
</style>
<body>
<div id="container"><div id="ball"></div></div>
</body>
</head>
</html>

agonych (agonych.livejournal.com)
16 августа 2011, 05:24

Только я бы не назвал это "snap to gird" - в моем понимании, Grid - это когда есть некая сетка и внутренние дивы всегда имеют размеры кратные этой сетки, при этом они могут растягиваться и сжиматься.

agonych (agonych.livejournal.com)
16 августа 2011, 05:50

ЗЫ, вот тут есть похожая тема: http://stackoverflow.com/questions/4117620/how-to-make-a-div-snapping-to-a-grid-via-css

Похоже, что с CSS такое не делается, только через JS.

bolk (bolknote.ru)
16 августа 2011, 14:21, ответ предназначен agonych (agonych.livejournal.com):

А код вот такой
Да, похоже это выход. Можно отказаться от идеи snap to grid и сделать так. Спасибо!

Сергей Чикуёнок (chikuyonok.ru)
17 августа 2011, 17:52

Можно попробовать этот принцип: http://chikuyonok.ru/2010/01/liquid-site-markup/
Правда, в FF 3.5+ не будет работать.

Если коротко, то суть такова. Делаешь два блока, один вложен в другой. Причём ширина внутреннего блока должна быть в N раз больше, где N — шаг сетки в пикселях. Например, если тебе нужен шаг в 5 пикселей, то контейнер должен быть шириной 100/5 = 20%, а внутренний — 100*5 = 500%. За счёт того, что ширина внутреннего блока будет считаться относительно округлённой ширины контейнера, получится изменение ширины внутреннего блока с шагом в 5 пикселей.

А в FF это не сработает, потому что он шибко умный и не округляет внутри себя дробные пиксели.

bolk (bolknote.ru)
17 августа 2011, 20:40, ответ предназначен Сергей Чикуёнок (chikuyonok.ru):

Я почему-то был уверен, что ты предложишь решение ;)

Крутое решение, спасибо, но FF 3.5+ мне нужен.

Сергей Чикуёнок (chikuyonok.ru)
19 августа 2011, 12:12, ответ предназначен bolk (bolknote.ru):

На всякий случай: в FF4 и IE9 есть метод calc: https://developer.mozilla.org/en/CSS/-moz-calc

bolk (bolknote.ru)
19 августа 2011, 23:03, ответ предназначен Сергей Чикуёнок (chikuyonok.ru):

Ну, мне ж кроссбраузерно :)

Про calc я знаю, как-то писал про него, когда возмущался, что из CSS уже JS делают :)

bolk (bolknote.ru)
20 августа 2011, 11:54, ответ предназначен Сергей Чикуёнок (chikuyonok.ru):

Вот: http://bolknote.ru/2010/07/24/~2644/

Ваше имя или адрес блога (можно OpenID):

Текст вашего комментария, не HTML:

Кому бы вы хотели ответить (или кликните на его аватару)