UGgallery

Firebug для меня — причина номер один для того, чтобы пользоваться Firefox-ом — 99% от всех причин. Чудо-инструмент! Часто при верстке блока, в css-файле я задаю лишь примерные параметры (расположение, размеры, отсупы), а тонкую подгонку осуществляю в Firebug-е.

Это просто! Выбираем элемент, выбираем CSS-правило, устанавливаем курсор и меняем цифровые значения при помощи клавиш-стрелок на клавиатуре. “Вверх” — увеличиваем значение, “Вниз” — уменьшаем. Экономит время и облегчает работу со страшной силой!

То же самое  можно делать для чернового подбора цветов элементов. Далее »

Юрий Артюх (akella) описал состояние дел и перспективы такого нужного и замечательного дела как встраивание шрифтов в веб-страницы посредством CSS. Много ссылок для чтения.

Обновился интересный генератор HTML+CSS шаблонов CSStool.ru. Забыл о нем написать когда он появился. Обратите внимание, вдруг пригодится.

На сайте CSStool.ru, который представляет из себя генератор HTML+CSS шаблонов проведено обновление, которое включает ряд нововведений различного характера.

Список нововведений на сайте создателя сервиса. Полезный апгрейд получился, на мой взгляд.

Прикольно на Блондинка.ру фон страницы сделан. Картинка — IMG — положена ниже остальных блоков страницы при помощи z-index. Спозиционирована абсолютно, с шириной 100% — всегда растягивается на всё окно. Сама картинка маленькая (500 х 286 px) но из за того, что рисунок нечёткий, незаметно, что оно сильно растянуто.

Самое, наверное, интересное, что картинка не масштабируется при page zoom-e (в Опере она в какой-то момент начинает, но в Фоксе — нет). Немного необычно смотрится. Отличный хак: дешево и сердито )) Раньше не встречал.

IMG#bg-fon{
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    display: inline-block !important;   
}

А еще, фон рандомно меняется при обновлении окна.

На просторах рунета появился ресурс Fixed.name посвященный внешне довольно мелкой, но внутренне довольно необъятной теме — вёрстке блоками, фиксированным относительно окна браузера при помщи CSS-свойства position:absolute. Далее »

Сегодня убрал со страницы с Учебником надпись о том, что проект не окончен. Теперь он окончен официально. Это конечно полная условность, но все-таки повод для праздника :)

Эта страница с Учебником – одна – дает половину трафика на всем сайте. Полезный оказался проект.

Последним добавленным материалом стал перевод статьи с мозилловского блога: “Кроссбраузерный inline-block” (Grakhov.com)”.

Пришлось убрать раздел “Разделение контента, оформления и поведения” ввиду того, что так и не удалось найти (или написать самостоятельно) ничего подходящего к этой теме на русском. Фундаментальная вещь, а о ней почти не пишут, даже на английском.

Это конечно не означает, что Учебник никогда не будет меняться. При появлении интересных материалов буду добавлять, менять что-нибудь.

…находятся желающие им пользоваться ;) Возможно, придется для него верстать. И тогда я начну с изучения материалов из заметки “Верстка под IPhone (шпаргалка)” в блоге Ольги Алексашенко.

Если однажды дизайнер принесет вам на блюдечке невероятно красивый, сияющий, округлый web-application для IPhone, эта шпаргалка и google помогут вам не ударить в грязь лицом.

Спасибо, Оля, что поделилась ценным опытом.

…людям по-прежнему приходится верстать блоки со скругленными уголками. И прогресс не стоит на месте, появляются новые методы. Про поиски и решения можно почитать в блогах Андрея Сумина и Сергея Чикуёнка:

• Круглые края
• Круглые края (часть 2)
• rocon — подробности

Комментарии заслуживают особого внимания. Мне, человеку, который давно перестал волноваться по поводу скругленных уголков, было интересно почитать.

Апдейт: Круглые углы в IE 8 (см. комменты)

Апдейт 2: Делаем закругленные уголки с помощью псевдоэлементов :before и :after

Собранные Энди Кларком имена классов для обозначения элементов шаблона страницы. С сайтов известных блогеров веб-разработчиков. Чисто “любопытно посмотреть”.

В дополнение к “5-ти советам верстальщику” (совет № 4) и обсуждению, развернувшемуся в комментах.

Рекомендую обратить внимание на новинку в области HTML-CSS-шаблонов: “Техника Gordi” как ее сам автор называет.

• Страница с примерами;
• Статья с разъяснениями.

Самое интересное в этом шаблоне для меня:

• Единый набор HTML-элементов для разных вариантов колонок. Минимум экстра-разметки.
• Резина и фикс, на выбор. Резина 100%-й ширины или с ограничениями на max-min-width.
• Среди вариантов — шаблон в три колонки: центральная — резиновая, боковые — фиксированной ширины, с правильным расположением колонок в коде (content — first).

Последнее — задача, так и не нашедшая приличного решения у западных товарищей. Мы, похоже, решили ее. Я, надеюсь, имю право говорить “мы” :) (Вы поймете почему, прочитав статью с разъяснениями.)

Там нет кода готового к немедленному употреблению, как мне кажется. Это значит, что для практического использования шаблоны можно и нужно дорабатывать под свои нужды: дополнительная разметка, хаки, приемы по вкусу. По-моему, это хорошо. Начинающим будет непросто, но для опытных — чем заготовка дальше от конечного продукта, тем больше свободы.

Помимо всего прочего, это означает, что с представленным кодом нужно обращаться осторожно: тестируйте тщательней.

Спасибо Gordi за проделанный немалый труд!