Проект "Лемурия" :: I-1

понедельник, 06 декабря 2010

00:44

shtanislav

Per Bethrezen!

В середине ноября я всерьёз взялся за верстку Лемурии. Переворошил старый макет и сделал его более гибче, чтобы он мог растягиваться на весь экран при любом разрешении до 800 пикселей, более менее просто не испытывал. Тогда же я начал разбираться с блоками, а именно сделать так, чтобы закругленные края были только в левом верхнем углу и правом нижнем углу блоков. перепробовал массу способов, практически все из длинного списка в 30 способ "ДЕЛАЕМ ЗАКРУГЛЕННЫЕ КРАЯ", и где я только не видел эти статьи, ужас. Кросспостинг ради посетителей и бабоса? Ух, но не об этом.
Вот прошло недели две, когда я впервые взялся за макет главной страницы и буквально за пять-минут я решил эту головоломку. Нашел способ с приминением CSS3, который еще разрабатывается и поддерживается далеко не всеми браузерами, но я решил плюнуть на это и при думах, что уже около двух лет работаю над 80% идеей и лишь 20% кода, то к моменту, когда будет окончательный релиз третьей версии – я как раз завершу вёрстку и у меня всё будет по-стандартам. Но не об этом. border-radius (Пример 1) поддерживается чуть ли не одними браузерами на движке WebKit, и то, далеко не факт! Я тестировал лишь Google Chrome 8.0. и не знаю как будет себя вести Safari.

border-top-left-radius: 10px;

Пример 1.

Кстати, для надёжности, браузерам на ВэбКите нужно приписывать префикс -webkit- (Пример 2), а Мозилле -moz- (Пример 3)

-webkit-border-top-left-radius: 10px;

Пример 2.

-moz-border-radius-topleft: 10px;

Пример 3.

Где-то мелькала информация, что IE9 будет работать с CSS3 и, соответственно, поддерживать border-radius вместе с другими ништяками. Я пытался научить IE6-8 воспринимать CSS3 с помощью пирожка, но он не захотел работать с отдельными углами. Лишь когда выставляется одно значением (Пример 4 и Пример 5).

border-top-left-radius: 10px;
behavior: url(PIE.htc);

Пример 4 - Эй, чо за фигня?!

border-radius: 10px;
behavior: url(PIE.htc);

Пример 5 - А тут работает :/

В общем, пока такая ситуация вырисовывается. На данный момент три проблемы:
* Логотип;
* Типографика;
* Меню навигции;

Буду работать. Буду развиваться.

URL