Кто-нибудь делал CSS snap to grid?
У меня тут задача возникла очень нетривиальная — сделать CSS snap to grid. Если не получится, сделаю через JavaScript. С ходу вчера мне не удалось придумать как это сделать по горизонтали (а мне надо именно так), только по вертикали возникли кое-какие мысли.
Кто-нибудь может что-нибудь придумать? Надо кроссбраузерно.
snap to grid — что это?
Даже после перевода в Гугль-транслейте не понятно, что это такое, хотя само вот это выражение, snap to grid, так и вертится на языке, только вспомнить не могу, где я его встречал. Перефразировать можете? Или на картинке какой-нить показать, что требуется?
(Вот, вспомнил — это в Виндовсе можно «выровнять значки по сетке». Всеравно не понятно, что требуется.)
Евгений, а можно подробности?
Viperet, это «привязать к сетке», функция выравнивания по сетке, есть почти во всех графических редакторах.
Комментарий для Артём:
Подробности такие.
На заднем фоне — картинка-сетка, по центру — фигура, которая строится через JS, может отличаться время от времени, но все её элементы всегда попадают в сетку. Надо сделать, так, чтобы при изменении размера окна фигура всегда была по центру и нормально укладывалась в сетку на заднем фоне.
Комментарий для Евгения Степанищева:
Все равно не понятно. Делаем фигуру фиксированного размера, кратным шагу сетки. Делаем сетку с помошью картинки на фоне. Центруем и то и другое. Вроде удовлетворяет описанным условиям. Что-то недосказано?
Комментарий для Александр Карпинский:
Я лучше нарисую простенький аналог:
http://img-fotki.yandex.ru/get/4411/35419492.5b/0_5363f_d930c154_L#2011.08.15.png%7Chttp%3A%2F%2Ffotki.yandex.ru%2Fusers%2Fbolknote%2Fview%2F341567%2F%3Fpage%3D0#400x400
Надо сделать так, чтобы сетка была фоном страницы, а при изменении размеров шарики были точно в сетке и по центру страницы, то есть перескакивали рывком.
Закреплен левый край сетки, а не центр? Нельзя упростить задачу закрепив центр?
Для браузеров, которые считают относительные размеры в пикселях (webkit, opera, ie6), сработает контейнер с шириной 100%/ширину клетки + вложенный контейнер 100%*ширину клетки — он будет увеличиваться по ширине с шагом в клетку. Относительно него уже можно позиционировать по-центру.
Расскажите, как вы решили по вертикали?
Комментарий для Боб:
Попробуйте сверстать? А то может я рассказал что не так.
Я не решил мысли возникли, не уверен, что сработает. Но по вертикали мне не нужно :)
Конкретно твой файл сделать не получается, размер квадрата и толщина линий должна быть четной (у тебя 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>
Только я бы не назвал это «snap to gird» — в моем понимании, Grid — это когда есть некая сетка и внутренние дивы всегда имеют размеры кратные этой сетки, при этом они могут растягиваться и сжиматься.
ЗЫ, вот тут есть похожая тема: http://stackoverflow.com/questions/4117620/how-to-make-a-div-snapping-to-a-grid-via-css
Похоже, что с CSS такое не делается, только через JS.
Комментарий для agonych.livejournal.com:
Да, похоже это выход. Можно отказаться от идеи snap to grid и сделать так. Спасибо!
Можно попробовать этот принцип: http://chikuyonok.ru/2010/01/liquid-site-markup/
Правда, в FF 3.5+ не будет работать.
Если коротко, то суть такова. Делаешь два блока, один вложен в другой. Причём ширина внутреннего блока должна быть в N раз больше, где N — шаг сетки в пикселях. Например, если тебе нужен шаг в 5 пикселей, то контейнер должен быть шириной 100/5 = 20%, а внутренний — 100*5 = 500%. За счёт того, что ширина внутреннего блока будет считаться относительно округлённой ширины контейнера, получится изменение ширины внутреннего блока с шагом в 5 пикселей.
А в FF это не сработает, потому что он шибко умный и не округляет внутри себя дробные пиксели.
Комментарий для chikuyonok.ru:
Я почему-то был уверен, что ты предложишь решение ;)
Крутое решение, спасибо, но FF 3.5+ мне нужен.
Комментарий для Евгения Степанищева:
На всякий случай: в FF4 и IE9 есть метод calc: https://developer.mozilla.org/en/CSS/-moz-calc
Комментарий для chikuyonok.ru:
Ну, мне ж кроссбраузерно :)
Про calc я знаю, как-то писал про него, когда возмущался, что из CSS уже JS делают :)
Комментарий для chikuyonok.ru:
Вот: http://bolknote.ru/all/2644/